Codificación base64, pros, contras y el SEObase64-encode-decode

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

Codificar imágenes en base64

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

base64-codificacion

Publicaciones relacionadas anterior y posterior

Ir al contenido