Pros y contras de insertar imágenes codificadas con base64


Vuelve a hacer clic para detener la lectura

Pros y contras - Imágenes base64 y el SEOCodificació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).

La codificación de imágenes en base 64 mejora la usabilidad (velocidad de carga)

Pros y contras

Los inconvenientes son:

  1. 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)
  2. 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

4 comentarios:

  1. 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.

  2. Marian Martínez

    Este es otro codificador de imágenes a Base 64:
    https://www.base64-image.de/

  3. You really make it seem really easy together with your
    presentation but I in finding this matter to be really
    something that I think I might never understand. It seems too
    complicated and extremely huge for me. I’m taking a look forward for your subsequent publish, I’ll attempt to get the hang of
    it!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *