Optimizar imágenes para tu web

Mejorar tus imágenes mejorará tu posicionamiento en el buscador

Cuando tienes un sitio web, una parte muy importante de tu web será el contenido y nada llama más la atención que unas buenas imágenes.

Pero ¿sirve cualquier imagen para tu sitio web? Independientemente de si la foto es más o menos “chula” o si es más o menos acertada con la temática de tu marca, algo muy importante y que debes cuidar en tus imágenes es la calidad, pero por encima de todo el tamaño de la propia imagen.

¿Qué vamos a conseguir si optimizamos las imágenes de nuestro sitio web?

Velocidad de carga

Si tu sitio web carga rápido perderás muchas menos visitas (más de 4 segundos y el usuario abandona. ¿No me crees? Entra en una web que tarda en cargar desde tu móvil y me cuentas si has aguantado hasta que ha aparecido el contenido)

Mejora en el posicionamiento web.

A menudo el algoritmo de Google cambia y hay que seguir una u otra tendencia, pero si algo le gusta a Google y los otros buscadores son las cosas bien hechas y un sitio rápido es un sitio optimizado, ahora mismo y siendo totalmente sincero, Google no considera la carga de las páginas web como algo determinante para el posicionamiento (aunque si empieza a tenerlo en cuenta), pero pronto cambiará el algoritmo para dar prioridad a los sitios rápidos, así que no hace falta que esperes para hacer las cosas bien, mejora tu web y te ahorrarás cambios innecesarios y problemas en un futuro.

Experiencia del usuario

Imagina navegar por una web y que las imágenes están descentradas o se ven horriblemente mal o de repente el texto que estás leyendo desaparece y empieza a aparecer en su lugar una imagen. Esto pasa porque la imagen era tan grande que no había tenido tiempo de ser cargada.

¿Qué crees que pasará en este último caso?

  1. El usuario intenta buscar el texto, pero frustrado porque no puede localizarlo decide ir atrás y visitar a tu competencia.
  2. La imagen es tan grande que consume “internet” del móvil de tu cliente y le dejas sin datos.
  3. El usuario busca de nuevo el texto y cuando lo tiene localizado sigue leyendo y de repente le pasa lo mismo con otra imagen…. Créeme, este no volverá.

¿Qué podemos hacer para optimizar las imágenes de nuestra web?

Compresión adecuada

Existen herramientas que te permiten disminuir el peso de una imagen sin renunciar a su calidad.

Si lo haces desde el código puedes utilizar Sharp (en mi opinión la mejor opción, aunque algo más complejo de implementar) o imagemin, nosotros cuando usamos imagemin lo complementamos con Gulp para automatizar el proceso.

Si no queremos escribir ni una línea de código tenemos esta magnifica web iLoveimg.com que nos permite comprimir nuestras imágenes y además podemos redimensionarlas y/o cortarlas.

Tamaño adecuado

Cada dispositivo tiene una pantalla y medidas diferentes, mediante código puedes indicarle al navegador que imagen utilizar para cada caso, esto requiere que tu web disponga de la misma imagen en diferentes tamaños y aunque es posible reducirla mediante algún programa o web, si quieres que ocupe siempre el espacio perfecto la mejor opción es que tu web genere varios tamaños para la misma imagen y mediante código le indiques al navegador cual debe usar en cada caso:

<img srcset="imagen-320w.jpg 320w, imagen-480w.jpg 480w, imagen-800w.jpg 800w"
sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"
src="imagen-800w.jpg" alt="Imagen de demostración">
Código para indicar al navegador que tamaño de imagen cargar según la pantalla

Formato adecuado

No ocupa lo mismo una imagen jpg, que una imagen png que una webp o avif aunque tengan la misma calidad y resolución. En el caso de Avif puedes tener una imagen hasta 4 veces más ligera.

Por desgracia los formatos de nueva generación como el webp o avif no son compatibles con todos los navegadores.

¿Significa eso que no puedes usarlos? En absoluto. Para solucionar esto puedes mejorar el código de tus imágenes de la siguiente forma:

<picture>
    <source srcset="imagen.avif" type"image/avif">
    <source srcset="imagen.webp" type="image/webp">
    <img src="imagen.jpg" alt="Título de la imagen">
</picture>
Código para cargar varios formatos de imagen en una web

Con la etiqueta picture lo que consigues es añadir varios “source” (fuentes o orígenes) a una misma imagen y el navegador lo que hará es cargar secuencialmente, es decir que si miras el ejemplo, el tipo de imagen avif (la más ligera y de mayor calidad), será la primera en leerse y de no ser compatible lo intentará con el formato webp y si tampoco puede pasará a cargar el archivo jpg

Si te estás preguntando como puedes conseguir imágenes en formato avif te dejo esta web totalmente gratuita avif.io o puedes usar código mediante las librerías Sharp o gulp para automatizar el proceso en tu web.

Ya por último y puesto que he mencionado el tema de los tamaños y formatos te dejo esta web donde puedes ver la misma imagen en diferentes formatos con resolución aceptable:

https://jakearchibald.com/2020/avif-has-landed/demos/compare/?show=f1

Como verás la misma imagen con la misma resolución, llega a ocupar hasta 4 veces menos en formato avif lo que se traduce en mayor velocidad para tu web, mejor posicionamiento y más visitas.

*Si decides utilizar los nuevos formatos de imagen es muy importante que te asegures de que tu código ofrece alternativas más convencionales ya que cada persona utiliza un ordenador/móvil/tablet/portátil diferente y lo que tu puedes ver bien quizás es un problema para otro.

Últimos artículos