Codificació base64, pros, contres i el SEO
Vaig a explicar una mica els pros i contres que he trobat a l’hora d’inserir imatges codificades amb base64 i l’impacte que té en el posicionament d’una pàgina web.
Codi per utilitzar una imatge codificada en html
En primer lloc cal explicar com és el codi escrit en HTML que mostra una imatge en una pàgina web. El codi per mostrar una imatge sense codificació (base64) és una cosa així:
<img src=”/imagen.ico” title=”Títol de la imatge” alt=”Explicació de la imatge” />
Com es pot veure l’etiqueta img indica que anem a inserir una imatge. Què imatge? Això està indicat entre cometes dobles a src (text en vermell), en aquest cas mostraria una imatge anomenada “imagen.ico” allotjada en el mateix directori del lloc web.
Això causa que el navegador que sol·licita l’obertura d’aquesta pàgina en concret faci una petició al servidor per carregar cada imatge sol·licitada; això és un problema perquè en la majoria dels casos el procés de sol·licitud és més lent que la càrrega en si de la pròpia imatge. Quan inserim moltes imatges a la mateixa pàgina web el retard per sol·licituds pot ser molt alt.
més imatges = més sol·licituds = major temps de càrrega del lloc web
Podem evitar aquestes sol·licituds al servidor codificant les imatges en base64, però això té 2 inconvenients i 1 avantatge.
Informació de codificació base64
Ara que ja hem vist com s’escriu el codi html per mostrar una imatge sense codificació base64 cal explicar com s’escriu amb aquesta codificació. El codi per mostrar una imatge codificada en base64 escrit en html és una cosa així:
<img src="data:image/gif;base64, R0lGODdhMAAgAOMAANwCDOyCDPzmDPSeDNwSDPS2DOyODPzqDPSiDNwaDAAAAAAAAAAAAAAAAAAA AAAAACwAAAAAMAAgAAAE/fAISaew98q8+/TdZlUkdpyjOZarhpbkScnfTMfvDQd87//AoHDYAxiP yKRyyWw6n9BoMkElVK8Jaxar7XK/23BhTC6bz+i0mqwxwVIzuDyXqns4mExbpNff8QaBgoOEhYaH iIIEi4yNjo+QkZKMUpWWR1aZW5qcm56doJ9bCAOkpqWop6qprKuurH2xsrO0fXx+eXN5f29/sQPA rMHDwaTExsTFycUIVGFaztHPzl7S09KZl9pRk93e34uJ4uPkgbXn6Oku6uztB2vw8fJj1vX29/j2 2/v8/VJEAAMK5LErF4iCeNokZEEnhps4vWpUkPjBTgsUC+sk3GNLQwQAOw==" title="Títol de la imatge" />
Ara el contingut entre cometes dobles de src especifica que són dades d’imatge (gif) en base64 i finalment s’insereix el codi de la imatge codificat en base64 (text blau). El paràmetre title és opcional però mostra el títol de la imatge a posar el punter sobre la imatge (text en verd).
Pros i contres
Els inconvenients són:
- Les imatges codificades en base64 no són arxius i per tant no tenen URL, títols, descripcions ni poden tenir text alternatiu; encara que si poden tenir un títol (text en verd del segon exemple)
- Augmenten la quantitat de codi en la pàgina web forçant a l’administrador del lloc a afegir més contingut per mantenir el mateix ràtio text vs codi (recomanat: 15% continguts vs codi)
L’únic avantatge que he trobat és la disminució de sol·licituds al servidor i per tant millora el temps de càrrega del lloc web. Això millora la usabilitat i des 2016 la velocitat de càrrega també millora el posicionament.
Conclusió
No és recomanable utilitzar imatges codificades en base64 amb imatges que formin part del contingut però em sembla molt important codifiques totes les imatges petites com icones, banderes, logos de xarxes socials … ja que aquestes imatges no són necessàries per al posicionament i rarament necessitem que es indexin en el nostre domini.
¿Com saber que imatges cal codificar en base64?
Cal analitzar detingudament que imatges necessiten de SEO i codificar totes les altres per millorar la velocitat de càrrega (cosa que també millora el SEO)
Enllaços
A continuació publicaré 2 enllaços de llocs web que poden ajudar-vos a codificar qualsevol imatge en base64
Comentaris recents