Codificación base64, pros, contras y el SEO
Voy a explicar un poco los pros y contras que he encontrado a la hora de insertar imágenes codificadas con base64 y el impacto que tiene en el posicionamiento de una página web.
Código para insertar una imagen en html
En primer lugar hay que explicar cómo es el código escrito en html que muestra una imagen en una página web. El código para mostrar una imagen sin codificación (base64) es algo así:
<img src=»/imagen.ico» title=»Título de la imagen» alt=»Explicación de la imágen» />
Como se puede ver la etiqueta img indica que vamos a insertar una imagen. ¿Qué imágen? Eso está indicado entre comillas dobles en src (texto en rojo), en este caso mostraría una imagen llamada «imagen.ico» alojada en el mismo directorio del sitio web.
Esto causa que el navegador que solicita la apertura de esa página en concreto haga una petición al servidor para cargar cada imagen solicitada; esto es un problema porque en la mayoría de los casos el proceso de solicitud es más lento que la carga en sí de la propia imagen. Cuando insertamos muchas imágenes en la misma página web el retraso por solicitudes puede ser muy alto.
más imágenes = mas solicitudes = mayor tiempo de carga del sitio web
Podemos evitar esas solicitudes al servidor codificando las imágenes en base64, pero eso tiene 2 inconvenientes y 1 ventaja.
Información de codificación base64
Ahora que ya hemos visto como se escribe el código html para mostrar una imagen sin codificación base64 hay que explicar como se escribe con esa codificación. El código para mostrar una imagen codificada en base64 escrito en html es algo así:
<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ítulo de la imágen" />
Ahora el contenido entre comillas dobles de src especifica que son datos de imagen (gif) en base64 y por último se inserta el código de la imagen codificado en base64 (texto azul). El parámetro title es opcional pero muestra el título de la imágen al poner el puntero sobre la imagen (texto en verde).
Pros y contras
Los inconvenientes son:
- Las imágenes codificadas en base64 no son archivos y por lo tanto no tienen url, títulos, descripciones ni pueden tener texto alternativo; aunque si pueden tener un título (texto en verde del segundo ejemplo)
- Aumentan la cantidad de código en la página web forzando al administrador del sitio a añadir más contenido para mantener el mismo ratio texto vs código (recomendado: 15% contenidos vs código)
La única ventaja que he encontrado es la disminución de solicitudes al servidor y por ende mejora el tiempo de carga del sitio web. Esto mejora la usabilidad y desde 2016 la velocidad de carga también mejora el posicionamiento.
Conclusión
No es recomendable utilizar imágenes codificadas en base64 con imágenes que formen parte del contenido pero me parece muy importante codificas todas las imágenes pequeñas como iconos, banderas, logos de redes sociales… puesto que estas imágenes no son necesarias para el posicionamiento y raramente necesitamos que se indexen en nuestro dominio.
¿Como saber que imágenes hay que codificar en base64?
Hay que analizar detenidamente que imágenes necesitan de SEO y codificar todas las demás para mejorar la velocidad de carga (cosa que también mejora el SEO)
Enlaces
A continuación publicaré 2 enlaces de sitios web que pueden ayudaros a codificar cualquier imagen en base64
I've been absent for a while, but now I remember why I used to love this website. Thanks, I'll try and check back more frequently. How frequently you update your site? debaceeecbea
Gracias por visitar mi guía de SEO. Intento añadir contenido original o desarrollar algún concepto cada mes como mínimo pero no siempre es posible.
English tratuction: Thanks for visit my SEO website. I try to add original content or develop some concept every month as a minimum but unfortunately it is not always possible.
Este es otro codificador de imágenes a Base 64:
https://www.base64-image.de/
Have you ever considered about including a little bit more than just
your articles? I mean, what you say is fundamental and all.
Nevertheless just imagine if you added some great visuals or videos to give your posts more, «pop»!
Your content is excellent but with images and video clips,
this site could definitely be one of the very best in its niche.
Amazing blog!
Muchas gracias por los consejos! siempre estuve con esas duda, mas que nada por el tema de servidores… pero no me había percatado del tema SEO.
Hola carlos, te dejo aquí otra página web para la conversión de images a base64 y viceversa en la que las imágenes no se suben al servidor.
https://tobase64.dev
Un saludo