Wat is Base64 en wanneer moet u het gebruiken voor het insluiten van afbeeldingen?

Als je ooit met moderne webontwikkeling hebt gewerkt, ben je waarschijnlijk een schijnbaar eindeloze, chaotische reeks tekens tegengekomen die begint met data:image/png;base64,, gevolgd door puur gebrabbel. Dit is een Base64-gecodeerde afbeelding.

Wat is Base64-codering precies?

In de kern is Base64 een binair-naar-tekst-coderingsschema. Het neemt binaire gegevens (zoals een afbeelding, een audiobestand of een gecompileerd document) en vertaalt deze naar een ASCII-tekenreeksformaat. De naam "Base64" komt voort uit het feit dat het een alfabet van 64 tekens (A-Z, a-z, 0-9, + en /) gebruikt om de gegevens weer te geven.

Deze conversie is ongelooflijk nuttig omdat veel internetprotocollen (zoals HTTP, HTML en CSS) specifiek zijn ontworpen om platte tekst veilig te verwerken. Door binaire gegevens naar tekst om te zetten, garanderen we dat de gegevens via deze protocollen kunnen worden verzonden zonder beschadigd te raken.

Wanneer moet u afbeeldingen insluiten met Base64?

Het rechtstreeks inbedden van Base64-tekenreeksen in uw HTML (`<img src="data:image...">`) of uw CSS (`background-image: url("data:image...")`) in plaats van een standaard URL te gebruiken, kan aanzienlijke voordelen hebben, maar alleen in zeer specifieke gebruikssituaties:

• Micropictogrammen en spinners: als je kleine UI-elementen hebt (zoals een laadspinner van 1 KB of een vinkje), elimineert het coderen ervan als Base64 de noodzaak voor de browser om een ​​afzonderlijk HTTP-verzoek te doen om het afbeeldingsbestand op te halen. Dit versnelt de weergave van kritische gebruikersinterface.
• HTML-e-mails: veel e-mailclients blokkeren het laden van externe afbeeldingen om privacyredenen. Door het logo rechtstreeks in de HTML in te sluiten via Base64 kunnen deze blokkades worden omzeild, waardoor uw e-mail er perfect uitziet.
• Webapps met één bestand: als u een tool bouwt die moet worden gedistribueerd als een enkel `.html`-bestand dat volledig offline werkt, is het insluiten van alle assets via Base64 de enige manier om het correct te verpakken.

Wanneer moet u Base64 VERMIJDEN?

Het grootste nadeel van Base64-codering is dat de bestandsgrootte van het item met ongeveer 33% toeneemt. Een afbeelding van 1 MB wordt een tekstreeks van 1,33 MB.

Bovendien kunnen browsers een Base64-tekenreeks niet onafhankelijk in de cache opslaan. Als u een enorme Base64-tekenreeks in uw CSS-bestand insluit, moet de browser dat enorme CSS-bestand downloaden bij elke pagina die wordt geladen, en het parseren van enorme tekstreeksen blokkeert de hoofdthread, wat ernstige vertraging veroorzaakt (slechte Time to Interactive).

De gouden regel: Base64 codeert nooit grote foto's of heldenafbeeldingen. Codeer alleen kleine SVG-pictogrammen of microscopische rasterbestanden waarbij de overhead van een HTTP-verzoek slechter is dan de bestandsgrootte van 33%.