Optimizar las imágenes que se usan en una web es fundamental.

¿Por qué?

Pues porque vas a mejorar la experiencia de usuario de la persona que visita la página además del SEO.

Te lo voy a explicar de forma muy sencilla.

¿Alguna vez has abierto una página web y como tardaba mucho en cargar la has cerrado y te has ido a otra? Nadie quiere perder el tiempo.

A lo mejor ofreces el mejor producto o servicio, pero si nadie lo ve y además se van a otra web de la competencia tienes un problema.

Una web como media pesa 1.9MB y casi el 50% lo ocupan imágenes (según HTTP Archive), así que más vale que trates las imágenes con la importancia que merecen.

¿Cuántas veces abres una web, o una tienda en el móvil? Pues aquí la optimización es fundamental. Las conexiones móviles no siempre son todo lo rápidas que quisiéramos.

¿Tienes una tienda online?

Pues déjame decirte que un retraso de un segundo en la carga de la página puede suponer disminuir la tasa de conversión en un 20%, y eso significa menos ingresos.

Te voy a contar cómo puedes optimizar las imágenes para que tu web mejore la velocidad de carga y su SEO.

Qué formato de imagen elegir para web

Antes de embarcarte en optimizar las imágenes tienes que saber algunas cosas sobre los formatos de imagen.

Lo sé, es un coñazo. Te prometo que será rápido.

Las imágenes digitales se pueden procesar de dos formas, como mapas de bits (JPG, GIF y PNG) o como gráficos vectoriales (SVG o PDF).

Los mapas de bits son agrupaciones de pixeles, para que se entienda mejor, es como dibujar a base de puntos. Si haces muchos puntos y te alejas se verá mejor que si lo miras desde cerca. Esta es la razón por la que si se hace mucho zoom a una imagen formada por píxeles se distorsiona y se ven los puntos.

Formatos de imagen jpg, png, gif

Los gráficos vectoriales están formados por puntos, líneas y polígonos generados por vectores. Estas formas geométricas hacen que si se agranda la imagen no se distorsione, pero son malas para representar imágenes complejas con muchos detalles y formas irregulares como un paisaje con muchos colores.

Formatos vectoriales de imagen. SVG y PDF

Para no complicar más las cosas te voy a explicar cuándo usar un formato de imagen u otro.

  • GIF:  este formato de imagen está algo obsoleto ya que solo admite 256 colores. Se utiliza para imágenes animadas y lo puedes ver en un sinfín de memes.
  • JPG:  este formato es el más utilizado para imágenes con muchos detalles y es perfecto para fotografías. Es un formato de compresión de imágenes con pérdida de datos por lo que si te pasas con la calidad de la compresión la imagen se va a ver borrosa.
  • PNG: este formato es perfecto para imágenes con grandes espacios en blanco, ya que permite transparencias y es ideal para logotipos, botones o iconos. Este formato no tiene pérdida de datos como el JPG, por lo que comprime todo entero. Tiene más calidad, pero ocupará más espacio.
  • WebP: este es un formato más moderno y está desarrollado por Google, permite transparencias y compresión de imágenes tanto con perdida de datos como sin ella. Está llamado a ser el sustituto del JPG ya que permite archivos con menos peso teniendo la misma calidad. ¿Cuál es el inconveniente entonces? Pues que no todos los navegadores lo soportan, aunque no creo que tarde mucho en estar completamente extendido.

No hay que olvidarse de los formatos vectoriales como el SVG y EPS, son fantásticos para logotipos e iconos. Se adaptan a cualquier tamaño sin pérdida de calidad. Puedes usarlo para verlo en la web del móvil y también en la fachada de un edificio. Si la imagen se compone de formas geométricas este es tu formato.

Se me olvidaba decirte que si utilizas imágenes en formato SVG te asegures de que tu servidor permite aplicar compresión GZIP para estos recursos, así mejorarás aún más la velocidad.

Programas para optimizar imágenes

Seguramente esto es lo que más te interesa. Hay muchas opciones, tanto gratuitas como de pago, pero yo te voy a simplificar la tarea y te voy a enseñar una de cada.

Como herramienta de pago por excelencia está Photoshop. Una forma sencilla de asegurarte de que la imagen o fotografía está optimizada es ir a la opción “Archivo-> Exportar-> Guardar para web”.

Se abrirá una ventana y arriba a la derecha podrás elegir en qué formato guardar la imagen (JPEG, PNG, GIF) y la calidad, que va de 0 (la más baja) a 100 (máxima calidad).

En la misma ventana abajo a la derecha podrás seleccionar el tamaño de la imagen para redimensionarla. No tiene sentido guardar una imagen con un ancho de 5000 pixeles y una altura de 5000 píxeles si luego en la página web va a ser una miniatura de producto de 300×300.

Si lo guardas como PNG aparecerá la opción de transparencia, si no quieres un fondo blanco acuérdate de activarlo.

La herramienta gratuita para optimizar imágenes que te recomiendo es Squoosh.app.

Es una herramienta desarrollada por Google y se utiliza desde el navegador, así que no puede ser más sencilla.

Solo tienes que seleccionar qué fotografía quieres optimizar o arrastrarla a la web, abajo a la derecha aparecerá el formato en el que quieres guardarlo y la calidad. También puedes ver cuánto ocupa el nuevo archivo dependiendo de las opciones que elijas y redimensionar la imagen para adaptarlo al tamaño que quieras.

Puedes ver su funcionamiento en este video de Samuel Acera:

Como ves, no tienes excusa para optimizar las imágenes de tu web.

Si además tienes una web en wordpress, puedes utilizar también un plugin de compresión de imágenes y normalmente con la opción gratuita suele ser suficiente, si necesitas más opciones siempre puedes suscribirte a sus opciones premium.

Para optimizar las imágenes de una web hecha en wordpress te recomiendo utilizar uno de estos plugins: “Imagify”, “Smush Image Compression and Optimization” o “TinyPNG”. Esta última también la puedes usar directamente desde su web sin tener que instalarla.

Optimizar metadatos de imágenes

Ahora que sabes cómo optimizar la calidad de las imágenes solo queda una última cosa, optimizar los metadatos. Esto sirve para ayudar a Google a entender qué hay en la imagen.

Lo primero que debes hacer es quitar el nombre por defecto del archivo de imagen y hacerlo descriptivo.

Si tienes una imagen de un gato saltando el archivo no puede llamarse DSC7453.jpg.

Facilita las cosas a Google, puedes llamarlo gato-saltando.jpg. Acuérdate de separar las palabras con guiones al igual que he hecho yo y no debes usar caracteres extraños ni mayúsculas o acentos

Resumiendo. Para poner un nombre al archivo:

  • Describe el contenido de la imagen.
  • Conciso.
  • Incluye la palabra clave principal.
  • Utiliza guiones para separar palabras.
  • No uses mayúsculas, ñ, o caracteres especiales.

Incluye en la descripción ALT de cada imagen un texto único y relevante que las describa. Si la en la imagen sale una niña jugando al fútbol en la playa en Murcia puedes poner “Niña jugando al fútbol en la playa en Murcia”. A nivel de código se generará en html la etiqueta <img alt=” Niña jugando al fútbol en la playa en Murcia” src=”dominio.com/niña-jugando-futbol” width=”500″ height=”500″>

Si la página de tu web habla de ordenadores y la foto que pones es de una gaviota ya la estás cambiando. Google relaciona el contenido del texto con las imágenes para determinar si es o no relevante.

No subestimes la importancia de optimizar las imágenes de tu web y ponle las cosas fáciles a Google.

Optimizar las fotos de tu web te ayudará a aparecer en una mejor posición en los resultados de búsqueda de Google y te ahorrará recursos en tu servidor.