{"id":60929,"date":"2019-11-08T00:00:28","date_gmt":"2019-11-08T00:00:28","guid":{"rendered":"https:\/\/www.websiteseocheck.nl\/seocheck\/?p=60929"},"modified":"2019-11-08T00:00:30","modified_gmt":"2019-11-08T00:00:30","slug":"voorkom-base64-afbeeldingen","status":"publish","type":"post","link":"https:\/\/www.websiteseocheck.nl\/seocheck\/voorkom-base64-afbeeldingen\/","title":{"rendered":"Voorkom Base64 afbeeldingen"},"content":{"rendered":"


\n<\/p>\n\n\n

Afbeeldingen in HTML invoegen met base64<\/p>\n\n\n\n

Veel mensen weten niet dat afbeeldingen in HTML-code kunnen worden opgenomen. De methode waarmee dit wordt gedaan, wordt base64-codering genoemd.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Wat is Base64?<\/p>\n\n\n\n

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.
\nBase64 gecodeerde afbeeldingen<\/p>\n\n\n\n

Zie je die grote afbeelding hierboven? Het is gecodeerd met base64. Zie je die pictogrammen rechts? Ze zijn gecodeerd met base64.<\/p>\n\n\n\n

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.
\nBase64 gebruiken<\/p>\n\n\n\n

Om een \u200b\u200bafbeelding 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.
\nHoe helpt Base64 paginasnelheid?<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Hier is een webpagina met twee afbeeldingen. Om deze pagina te laden zijn vier dingen vereist (html, css, eerste afbeelding, tweede afbeelding):<\/p>\n\n\n\n

Hier is dezelfde webpagina met base64-gecodeerde afbeeldingen. Om deze pagina te laden zijn slechts twee dingen nodig (html, css):
\nWelke invloed heeft base64 op SEO?<\/p>\n\n\n\n

De belangrijkste manier waarop base64-afbeeldingen SEO be\u00efnvloeden, is dat de afbeelding niet wordt ge\u00efndexeerd door Google.<\/p>\n\n\n\n

Dit betekent dat de afbeeldingen die u base64 niet verschijnen in Google afbeeldingen zoeken, of een andere zoekmachine.
\nWaarom zou u het dan gebruiken?<\/p>\n\n\n\n

Er zijn veel niet-belangrijke afbeeldingen op een pagina die geen invloed op u of uw verkeer hebben als ze niet zijn ge\u00efndexeerd.<\/p>\n\n\n\n

Het beste voorbeeld zijn sociale pictogrammen.<\/p>\n\n\n\n

Al die kleine twitter-, Google+, Facebook-, enz. -Afbeeldingen zijn erg klein en hoeven niet te worden ge\u00efndexeerd. U zult nooit verkeer krijgen van uw kleine twitter-pictogram.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

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.
\nAndere Overwegingen<\/p>\n\n\n\n

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.
\nHoe ik base64 op deze site gebruik<\/p>\n\n\n\n

Zoals ik hierboven al zei, gebruik ik veel base64. Elke pagina op deze site maakt uitgebreid gebruik van base64.<\/p>\n\n\n\n

Omdat ik base64 zo lang en met zoveel afbeeldingen heb gebruikt, heb ik geleerd hoe ik een balans kan vinden tussen SEO en prestatieproblemen.
\nHoe Google naar index base64 te krijgen<\/p>\n\n\n\n

Zoals eerder vermeld, indexeert Google base64-gecodeerde afbeeldingen niet, dus waar heb ik het over?<\/p>\n\n\n\n

Op elk artikel van deze site staat een grote introductieafbeelding. Elk van hen is base64-gecodeerd, maar elk van hen wordt ook ge\u00efndexeerd door Google. Hoe heb ik dat gedaan?<\/p>\n\n\n\n

De manier is om een \u200b\u200bfysiek 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.<\/p>\n\n\n\n

Hier is wat het hoofd van mijn html begint met voor deze pagina:<\/p>\n\n\n\n

Het eerste deel van die puinhoop van code verklaart opengraph en het laatste deel verklaart mijn afbeelding:<\/p>\n\n\n\n

Het eindresultaat hiervan is dat mijn afbeelding inderdaad wordt ge\u00efndexeerd door Google.
\nGrootte problemen<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Ik zou niet aanraden base64-codering te gebruiken voor een afbeelding groter dan 5k.
\nHoe base64 wordt gebruikt<\/p>\n\n\n\n

Voorbeeld: hier is een typisch afbeeldingsbestand in uw html:<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Vervang de bestandslocatie (in dit geval – example.png) door de src-info van een base64-tool:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

De bron van uw afbeelding is nu niet langer een extern bestand, maar de gecodeerde gegevens in het veld “src =”.
\nHet gereedschap<\/p>\n\n\n\n

Als je wilt experimenteren met base64, gebruik dan mijn tool voor het coderen van de base64-afbeelding<\/p>\n\n\n


\n
\n<\/p><\/div><\/div>","protected":false},"excerpt":{"rendered":"

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? […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[83],"tags":[],"_links":{"self":[{"href":"https:\/\/www.websiteseocheck.nl\/seocheck\/wp-json\/wp\/v2\/posts\/60929"}],"collection":[{"href":"https:\/\/www.websiteseocheck.nl\/seocheck\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.websiteseocheck.nl\/seocheck\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.websiteseocheck.nl\/seocheck\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.websiteseocheck.nl\/seocheck\/wp-json\/wp\/v2\/comments?post=60929"}],"version-history":[{"count":0,"href":"https:\/\/www.websiteseocheck.nl\/seocheck\/wp-json\/wp\/v2\/posts\/60929\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.websiteseocheck.nl\/seocheck\/wp-json\/wp\/v2\/media?parent=60929"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.websiteseocheck.nl\/seocheck\/wp-json\/wp\/v2\/categories?post=60929"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.websiteseocheck.nl\/seocheck\/wp-json\/wp\/v2\/tags?post=60929"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}