Afbeeldingen in HTML invoegen met base64
Veel mensen weten niet dat afbeeldingen in HTML-code kunnen worden opgenomen. De methode waarmee dit wordt gedaan, wordt base64-codering genoemd.
Met Base64 gecodeerde afbeeldingen worden onderdeel van de html en worden weergegeven zonder iets te laden in plaats van dat een webbrowser de afbeelding moet downloaden.
Wat is Base64?
Het is een van de oudste manieren om dingen in HTML te coderen (voor het eerst voorgesteld in 1987!). Het is een manier om verschillende soorten gegevens om te zetten in een reeks letters en cijfers die veilig is voor HTML. Een van die gegevenstypen zijn afbeeldingen.
Base64 gecodeerde afbeeldingen
Zie je die grote afbeelding hierboven? Het is gecodeerd met base64. Zie je die pictogrammen rechts? Ze zijn gecodeerd met base64.
Ik gebruik al jaren base64-afbeeldingen voor varvy (deze site) en dit is een van de belangrijkste redenen waarom mijn pagina’s zo snel laden.
Base64 gebruiken
Om een afbeelding om te zetten in base64, kunt u de tool gebruiken die ik hier voor dat doel heb gemaakt – Base64-afbeeldingscodeerder of gewoon zoeken naar “base64-afbeeldingscodering”, er zijn veel tools beschikbaar.
Hoe helpt Base64 paginasnelheid?
Het belangrijkste voordeel is dat een webpagina geen externe afbeelding hoeft te laden. Als u minder dingen laadt die een webpagina moet laden, wordt die pagina natuurlijk sneller.
Hier is een webpagina met twee afbeeldingen. Om deze pagina te laden zijn vier dingen vereist (html, css, eerste afbeelding, tweede afbeelding):
Hier is dezelfde webpagina met base64-gecodeerde afbeeldingen. Om deze pagina te laden zijn slechts twee dingen nodig (html, css):
Welke invloed heeft base64 op SEO?
De belangrijkste manier waarop base64-afbeeldingen SEO beïnvloeden, is dat de afbeelding niet wordt geïndexeerd door Google.
Dit betekent dat de afbeeldingen die u base64 niet verschijnen in Google afbeeldingen zoeken, of een andere zoekmachine.
Waarom zou u het dan gebruiken?
Er zijn veel niet-belangrijke afbeeldingen op een pagina die geen invloed op u of uw verkeer hebben als ze niet zijn geïndexeerd.
Het beste voorbeeld zijn sociale pictogrammen.
Al die kleine twitter-, Google+, Facebook-, enz. -Afbeeldingen zijn erg klein en hoeven niet te worden geïndexeerd. U zult nooit verkeer krijgen van uw kleine twitter-pictogram.
Als je echt naar de afbeeldingen op je pagina kijkt, kun je veel afbeeldingen vinden die onder deze definitie vallen. Denk aan afbeeldingen die er gewoon zijn voor ontwerp zoals “bottom-left-corner.png” of “quotation-mark.jpg”. Dit soort dingen zijn gewoon niet belangrijk voor uw SEO, maar vertragen uw pagina’s nog steeds.
Veel webpagina’s hebben 8 of 12 sociale pictogrammen en elk daarvan is een extra HTTP-verzoek dat gewoon helemaal niet hoeft te worden gedownload als u base64 gebruikt.
Andere Overwegingen
Het is het beste om alleen base64 kleine afbeeldingen te coderen. Als u grotere afbeeldingen probeert te baseren, krijgt u veel code in uw html en gaan de prestatievoordelen verloren.
Hoe ik base64 op deze site gebruik
Zoals ik hierboven al zei, gebruik ik veel base64. Elke pagina op deze site maakt uitgebreid gebruik van base64.
Omdat ik base64 zo lang en met zoveel afbeeldingen heb gebruikt, heb ik geleerd hoe ik een balans kan vinden tussen SEO en prestatieproblemen.
Hoe Google naar index base64 te krijgen
Zoals eerder vermeld, indexeert Google base64-gecodeerde afbeeldingen niet, dus waar heb ik het over?
Op elk artikel van deze site staat een grote introductieafbeelding. Elk van hen is base64-gecodeerd, maar elk van hen wordt ook geïndexeerd door Google. Hoe heb ik dat gedaan?
De manier is om een fysiek afbeeldingsbestand te hebben dat hetzelfde is als het gecodeerde bestand. Je uploadt dat vervolgens naar je webhost en gebruikt in het hoofdgedeelte van je HTML opengraph notatie om Google naar die afbeelding te verwijzen.
Hier is wat het hoofd van mijn html begint met voor deze pagina:
Het eerste deel van die puinhoop van code verklaart opengraph en het laatste deel verklaart mijn afbeelding:
Het eindresultaat hiervan is dat mijn afbeelding inderdaad wordt geïndexeerd door Google.
Grootte problemen
Een 2k-afbeeldingsbestand resulteert in 2,5 of 3k base64-gecodeerde gegevens. Als u echter compressie inschakelt (zoals u zou moeten zijn), heeft deze ongeveer dezelfde grootte als het afbeeldingsbestand.
Ik zou niet aanraden base64-codering te gebruiken voor een afbeelding groter dan 5k.
Hoe base64 wordt gebruikt
Voorbeeld: hier is een typisch afbeeldingsbestand in uw html:
Vervang de bestandslocatie (in dit geval – example.png) door de src-info van een base64-tool:
De bron van uw afbeelding is nu niet langer een extern bestand, maar de gecodeerde gegevens in het veld “src =”.
Het gereedschap
Als je wilt experimenteren met base64, gebruik dan mijn tool voor het coderen van de base64-afbeelding
