Ik heb een bekentenis die performance engineers zal doen huiveren Op een vroege versie van een WordPress dashboard voor WP Adminify heb ik elk pictogram base64-gecodeerd en direct in de CSS ingeperkt omdat ik het beu was om sprite sheets te beheren Het werkte De pictogrammen verschenen direct, geen extra verzoeken, geen flits van ontbrekende afbeelding Toen steeg het stylesheet langs een megabyte en voelde de pagina langzamer aan bij de tweede belasting, omdat geen van die inlined afbeeldingen op zichzelf in de cache kon worden opgeslagen Dat project is waar ik leerde dat & quot; image to base64" is een echt nuttige techniek die ook gemakkelijk te overmatig te gebruiken is.
Deze gids behandelt beide helften van die les Ik zal laten zien hoe je een afbeelding naar basis64 converteert met de Afbeelding naar Base64 Converter op Toolz.dev, hoe base64 terug te decoderen in een afbeelding, wat een data-URI werkelijk is, en de eerlijke afwegingen zodat u de activa die profiteren inline en laat degenen die dat niet doen.
tl;dr: Door een afbeelding naar base64 te converteren, wordt de binaire inhoud ervan omgezet in een tekstreeks, meestal verpakt in een data-URI zoals
data:image/png;base64,iVBORw0KG.... Die string sluit zich rechtstreeks in HTML, CSS, SVG of JSON in zonder afzonderlijk bestandsverzoek De Toolz.dev converter codeert en decodeert in beide richtingen, draait volledig in uw browser zodat er nooit een afbeelding wordt geüpload, en geeft u de onbewerkte basis64, een kant-en-klare gegevens-URI, een<img>tag, en een CSS-fragment Base64 blaast de grootte met ongeveer een derde op, dus inline kleine activa zoals pictogrammen, geen grote foto's.
Wat is een basis64-afbeelding precies?
Base64 is een coderingsschema, geen compressie en geen encryptie Het schema wordt gedefinieerd door RFC 4648, en de data: URI die het omhult RFC-2397. Het vertegenwoordigt willekeurige binaire gegevens met behulp van 64 afdrukbare ASCII-tekens: de letters A tot Z en a tot z, de cijfers 0 tot 9, plus + en /, met = gebruikt voor opvulling Het schema is gedefinieerd in RFC 4648, dezelfde standaard die de basis64 regelt die u ziet in e-mailbijlagen en JSON-payloads.
De reden dat het bestaat is dat veel van het internet' s loodgieterswerk is gebouwd voor tekst, niet voor ruwe bytes Binaire gegevens kunnen bytewaarden bevatten die een tekstgeoriënteerd kanaal zal verminken Base64 omzeilt dat door drie bytes invoer te nemen, die 24 bits op te splitsen in vier groepen van zes, en elke groep toe te wijzen aan een van de 64 tekens Drie bytes in, vier tekens uit Die verhouding van drie tot vier is precies de reden waarom gecodeerde uitvoer ongeveer 33 procent groter is dan de bron, een getal dat de moeite waard is om te onthouden omdat het beslist of inlining een goed idee is.
Een & quot;base64 image" is gewoon een image bestand dat door die codering is gelopen Op zichzelf is de string gewoon tekst Wat het renderable maakt is het wrappen in een data URI.
Wat is een gegevens-URI en waarom geeft de browser deze weer?
Een data-URI is een URL die de payload inline draagt in plaats van naar een externe bron te verwijzen. De vorm ervan, gedefinieerd in RFC 2397, is data:[<media-type>][;base64],<data>. Voor een PNG die eruit ziet als data:image/png;base64,iVBORw0KGgo....
Het belangrijke stuk is het mediatype, image/png in dat voorbeeld Het vertelt de browser hoe de bytes die volgen geïnterpreteerd moeten worden Omdat de data-URI zijn eigen MIME-type aankondigt, kan een browser behandelen data:image/png;base64,... als afbeelding parseert het moment dat het een attribuut parseert dat een URL verwacht, of dat nu de src van een <img> of de url() in een CSS background-image. Er vindt geen netwerkrondreis plaats, omdat er niets op te halen is. De afbeelding is er al, gespeld in de opmaak.
Dat is de hele magie en de hele kosten in één zin. De afbeelding is er al, daarom wordt deze direct weergegeven, en ook waarom deze niet afzonderlijk in de cache kan worden opgeslagen of tussen pagina's kan worden gedeeld zoals een gekoppeld bestand dat kan.
Hoe converteer ik een afbeelding naar base64 op Toolz.dev?
de Afbeelding naar Base64 Converter heeft twee richtingen en codering is de standaard.
Kies de " Afbeelding naar Base64" richting, upload of laat uw afbeelding vallen De tool leest het bestand lokaal met behulp van de browser File API, en omdat die lezing in uw browser gebeurt, reist de afbeelding nooit naar een server Zodra deze is geladen, krijgt u een voorbeeld plus vier uitgangen, elk met een eigen kopieerknop.
De raw base64 is de kale string, handig als je al een eigen wrapper hebt De data-URI is de volledige data:... tekenreeks klaar om in een src of url(). De HTML <img> tag is een compleet element dat je in een template kunt droppen De CSS background-image declaratie is klaar voor een stylesheet Naast die zie je de gedecodeerde byte grootte en de basis64 karakter tellen, zodat je het gewicht te beoordelen voordat het plegen Als het nummer ziet er alarmerend, dat is de tool die zijn werk doet: een 200 KB foto wordt een 270 KB string in je HTML is precies het moment om te heroverwegen.
Hoe decodeer ik base64 terug naar een afbeelding?
Schakel over naar de "Base64 naar Image" richt en plak een onbewerkte basis64-tekenreeks of een volledige gegevens-URI. De converter is tolerant ten aanzien van invoer: hij ontdoet witruimte en als u een volledige plakt data:image/png;base64,... string het leest het MIME-type rechtstreeks uit het voorvoegsel Als u kale basis64 plakt zonder voorvoegsel, gaat het uit van PNG, wat de veilige standaard is voor de meeste schermafbeeldingen en geëxporteerde activa.
Het valideert de tekenreeks eerst Als wat je hebt geplakt niet plausibel is base64, wat betekent dat het tekens bevat buiten het RFC 4648 alfabet, vertelt de tool je in plaats van een gebroken afbeelding te tonen Wanneer de invoer uitcheckt, krijg je een live preview en een downloadknop die het originele binaire bestand opnieuw opbouwt en opslaat met de juiste extensie Deze richting is echt handig wanneer je een gegevens-URI gevonden hebt die begraven ligt in een stylesheet of een API-antwoord en wilt zien wat het eigenlijk is, of het terug wilt extraheren naar een echt bestand.
Alles hier is client-side, dat is dezelfde belofte die door de rest van de toolbox loopt, vanuit de tekst-georiënteerde Base64-converter naar de URL-encoder. Als u de bredere redenering achter het houden van dit soort werk in de browser wilt, zal de base64 coderingsgids gaat dieper op de codering zelf.
Wanneer moet ik een afbeelding inline zetten als basis64, en wanneer niet?
Dit is de beslissing die de tool moet nemen, dus hier is de tabel die ik daadwerkelijk gebruik.
| betrekking | Inline als basis64? | waarom |
|---|---|---|
| Klein pictogram of logo dat over de hele site wordt gebruikt | Vaak Ja | Verwijdert een verzoek, verschijnt onmiddellijk, overhead is klein |
| Kleine SVG of 1px achtergrond | ja | De overhead van 33 procent is verwaarloosbaar op een paar honderd bytes |
| HTML-export of e-mail met één bestand | ja | Het bestand moet op zichzelf staan, externe activa zijn niet toegestaan |
| Grote heldenfoto of banner | heel weinig | Overhead is groot en de afbeelding kan niet afzonderlijk in de cache worden opgeslagen |
| Afbeelding hergebruikt op vele pagina's | heel weinig | Een gekoppeld bestand slaat één keer op en wordt gedeeld; inlining dupliceert het overal |
| Inhoudsbeeld dat vaak verandert | heel weinig | Editors kunnen een base64 blob niet zo gemakkelijk verwisselen als een bestand |
Het patroon achter de tabel is eenvoudig Inlining handelt een netwerkverzoek voor bytes in uw document Die transactie wint wanneer het actief klein is en het opgeslagen verzoek ertoe doet, wat het klassieke geval is voor pictogrammen boven de vouw. Het verliest wanneer het actief groot of gedeeld is, omdat u de belasting van 33 procent betaalt, onafhankelijke caching verliest en het bestand dat de browser moet parseren opgeblazen voordat het iets kan schilderen.
Voor de rijen van "no" is de betere zet meestal om het bestand te optimaliseren en normaal te bedienen Dat is waar een tool als Afbeelding samendrukken of de Formaat converter verdient zijn keep, krimpt het asset zodat de gekoppelde versie zo licht mogelijk is Ik schreef meer over die hele workflow in de Webontwikkelaar Toolkit guide.
Houdt base64 mijn afbeelding privé?
Ja en nee, en het onderscheid is belangrijk Base64 is een codering, dus iedereen die de string heeft, kan deze terug decoderen naar de exacte originele afbeelding. Het biedt geen geheimhouding. Behandel een gegevens-URI niet als een manier om iets te verbergen, omdat de " Basis64 naar Image" De richting van deze tool keert deze in één plak om.
Wat privé is, is de conversie zelf Op Toolz.dev wordt de afbeelding volledig in uw browser gelezen en gecodeerd met de File API, en wordt er niets geüpload Dus het artwork, de screenshot, het clientlogo dat u codeert verlaat uw machine nooit tijdens het proces Dat is een andere garantie dan de codering die de inhoud verbergt, en ik probeer er precies over te zijn omdat "private" losjes rondgegooid wordt De privacy zit in de lokale verwerking, breder behandeld in de data privacy gids, niet in basis64 als schema.
Een paar praktische tips van het verzenden van dit
Geef de voorkeur aan SVG voor pictogrammen wanneer u kunt, en regel de SVG-opmaak rechtstreeks in plaats van deze te basen64-coderen. SVG is al tekst, dus als u deze in base64 wikkelt, wordt de belasting van 33 procent alleen voor niets toegevoegd. Base64 schijnt voor rasterformaten zoals PNG en JPEG die echt binair zijn.
Bekijk de totale documentgrootte, niet alleen de enkele afbeelding Eén inline icoon is onzichtbaar Veertig van hen, de fout die ik maakte op dat WordPress dashboard, maken van een lean stylesheet een monster Als je meer dan een handvol inlining, dat is een signaal om een stap terug te doen en in plaats daarvan een gekoppelde sprite of een pictogram lettertype te overwegen.
Houd het MIME-type eerlijk Als u een JPEG exporteert maar de gegevens-URI als label bestempelt image/png, sommige browsers zijn hiermee bezig en sommige niet. De converter detecteert het echte type uit het bestand, zodat de uitvoer correct is, maar als u elders een gegevens-URI met de hand assembleert, koppelt u het mediatype aan de daadwerkelijke bytes.
En wanneer u een codebase vol mysteriegegevens-URI's erft, onthoud dan de decoderichting. Eén plakken in de "Base64 naar Image" side en hitting download is de snelste manier om te zien wat een stylesheet daadwerkelijk verzendt.
Hoe werkt base64-codering eigenlijk, stap voor stap?
Het helpt om de mechanica een keer te zien, omdat het hele overheadverhaal van 33 procent er op natuurlijke wijze uit valt Base64 werkt op groepen van drie bytes tegelijk Drie bytes is 24 bits De encoder snijdt die 24 bits in vier bits van elk zes bits Zes bits kunnen 64 waarden vertegenwoordigen, van 0 tot 63, en elk van die waarden wordt toegewezen aan één teken in het basis64-alfabet: A tot en met Z voor 0 tot 25, a tot en met z voor 26 tot 51, de cijfers 0 tot en met 9 voor 52 tot 61, dan + voor 62 en / voor 63.
Dus drie invoerbytes worden altijd vier uitvoertekens Dat is de bron van de grootte toename Vier tekens dragen de informatie van drie bytes, een verhouding van 4 tot 3, wat hetzelfde is als zeggen dat de uitvoer een derde groter is dan de invoer Er is geen manier omheen, omdat het is gebakken in hoe het schema werkt.
Padding verwerkt de restjes Als uw gegevens geen schoon veelvoud van drie bytes zijn, padt de encoder de laatste groep zodat deze nog steeds een heel aantal tekens produceert, en voegt er een of twee aan toe = borden om vast te leggen hoeveel opvulling het heeft toegevoegd Daarom eindigen base64 snaren zo vaak op = of ==. Een enkele achterstand = betekent dat de laatste groep twee bytes bevatte; een dubbel == betekent dat er een vast zat De Toolz.dev converter verwerkt automatisch opvulling in beide richtingen, en bij het decoderen accepteert hij graag strings met of zonder de trailing =, omdat sommige systemen het strippen.
U kunt dit zien afspelen met een klein voorbeeld De drie ASCII-bytes voor de letters & quot; Man" coderen voor de vier tekens & quot; TWFu", een beroemd voorbeeld dat rechtstreeks uit de coderingsliteratuur komt Laat diezelfde drie tekens als tekst in een gegevens-URI vallen en u kunt de retour zien, of voer een echte afbeelding door de tool en merk op dat het aantal tekens in de uitvoer altijd ongeveer vier derde bedraagt van het aantal bytes dat ernaast wordt weergegeven.
Als je dit begrijpt, verklaart dit ook waarom base64 slecht past bij grote afbeeldingen en prima past bij kleine afbeeldingen. De overhead is een vast percentage, dus op een pictogram van 300 bytes kost het je 100 bytes, het kan niemand iets schelen. Op een foto van twee megabyte kost het je tweederde van een megabyte pure tekstopgeblazen gevoel in je document, en dat document moet worden gedownload en geparseerd voordat de pagina kan worden weergegeven. De wiskunde verandert niet met de grootte, maar de gevolgen zijn dat wel.
Veelgestelde vragen
Hoe converteer ik een afbeelding naar Base64?
Kies de richting Afbeelding naar Base64 en upload of laat uw afbeelding vallen. De tool leest het bestand lokaal, codeert het en retourneert de onbewerkte Base64 plus een kant-en-klare gegevens-URI, een img-tag en een CSS-fragment dat u kunt kopiëren.
Wat is een data-URI?
Een data-URI is een string die een bestand inline insluit in plaats van ernaar te linken, in de vormgegevens: [mime-type];base64, [data]. Voor een PNG lijkt het op data: image/png;base64,iVBORw0KGgo... Browsers geven het weer als een afbeelding waar een URL wordt verwacht, dus er is geen afzonderlijk verzoek nodig.
Kan ik Base64 terug naar een afbeelding converteren?
Ja. Schakel over naar de richting Base64 naar Afbeelding en plak een onbewerkte Base64-tekenreeks of een volledige gegevens-URI. De tool decodeert het, toont een voorbeeld en laat u het gereconstrueerde afbeeldingsbestand downloaden.
Welke beeldformaten worden ondersteund?
PNG, JPG/JPEG, GIF, WebP, SVG, BMP, ICO en AVIF worden allemaal ondersteund Het juiste MIME-type wordt gedetecteerd uit het bestand, zodat de resulterende gegevens-URI correct wordt weergegeven.
Waarom is de Base64 string groter dan mijn afbeelding?
Base64 vertegenwoordigt drie bytes aan binaire gegevens met vier teksttekens, dus gecodeerde uitvoer is ongeveer 33 procent groter dan de bron. Daarom past Base64 meer bij kleine pictogrammen en logo's dan bij grote foto's.
Is het veilig om hier afbeeldingen te converteren?
Ja Elke afbeelding wordt volledig in uw browser gelezen en gecodeerd met behulp van de File API. Er wordt geen bestand, tekenreeks of resultaat geüpload naar een server, dus privéafbeeldingen blijven op uw apparaat.
Moet ik afbeeldingen inline zetten als Base64 in productie?
Inlining werkt goed voor kleine, veelgebruikte assets zoals pictogrammen omdat het een HTTP-verzoek verwijdert en een flits van ontbrekende afbeelding vermijdt Voor grote afbeeldingen is het meestal beter om afzonderlijke bestanden te bewaren zodat de browser ze onafhankelijk in de cache kan opslaan.
Werkt de converter offline en mobiel?
Ja. Omdat alle verwerking client-side is, werkt het nadat de pagina is geladen, zelfs zonder verbinding, en de interface reageert op moderne desktop- en mobiele browsers.
