Cómo optimizar las imágenes de tu web

¿Alguna vez te ha pasado…? Seguro que alguna vez te ha pasado, has intentado acceder a una web y pasa una eternidad hasta que se carga. Una de las principales razones por las que ocurre es por la cantidad de imágenes que tiene las web. Si tienes una web es probable que a medida que ha ido pasando el tiempo has notado que la web ya no es tan rápida como al principio. Pero, ¿porqué es importante optimizar las imágenes?

• • Evitar perder usuarios: el tiempo de carga de una web es uno de los principales motivos por los que se pierden usuarios. Supongo que no quieres perderlos ¿verdad?

• • Mejorar el SEO: cuando Google rastrea una web, lo hace durante un tiempo limitado. Si tu web pesa poco, perderá menos tiempo cargando las páginas y por lo tanto podrá rastrear más.

¿Qué formato de imagen usar?

Las imágenes se suelen guardar en dos formatos: PNG y JPEG. Seguro que te estás preguntando cuál es la diferencia.

• • PNG: el formato png se diferencia principalmente del JPEG en el que permite guardar imágenes con el fondo transparente. Otra ventaja que tiene es que se pierde menos calidad que con un JPG.

• • JPEG: comprime más las imágenes que el PNG, pero se pierde calidad.

Si usas iconos en tu web, evita que sean imágenes y utiliza formatos como el SVG. Podrás cambiar su tamaño de forma fácil y sencilla sin perder calidad, con el añadido de aligerar la web ya que pesan menos. Como regla general usa PNG cuando quieras guardar logos o vectores sin fondo y JPEG para el resto.

El tamaño importa

Una de las variables que nos van a hacer que nuestras imágenes pesen más es el tamaño. Intenta ajustar el tamaño de las imágenes al tamaño que es necesario para la web. Por ejemplo, si la imagen es para el post, lo recomendable sería guardarla para que el ancho de la imagen sea el mismo que el del post. De esta forma evitarás tener una imagen más grande de lo necesario y redimensionar las imagen mediante CSS reduciendo así peso de la web. Lo mismo si tienes una sección de portfolio con imágenes. Adecua el tamaño de la imagen al de la web. Para averiguar el ancho del post o del portfolio puedes hacerlo de la siguiente forma: 

Page Ruler

Page ruler es una extensión disponible para Chrome y Firefox que te permitirá saber el tamaño de las imágenes de tu web. Su uso es muy sencillo, vamos a verlo.

Una vez hayas instalado la extensión, selecciona el icono de Page Ruler. Verás que el ratón se convierte en una cruz. Selecciona la imagen para ver sus medidas. En nuestro caso, el ancho es de 780px.

¿Cómo reducir el peso las imágenes?

Una vez ya sabes que existen dos formatos, y que debes reducir la imagen vamos a ello. Ante todo, lo que buscas es tener un balance entre el tamaño de la imagen y la calidad de la misma. Una forma de reducir el tamaño de las imágenes es con programas de edición gráfica como Photoshop o Illustrator.

Photoshop

Si vas a Archivo > Exportar > Guardar para web, ahí te saldrá un menú para optimizar tu imagen En la gran mayoría de los casos usarás las siguientes opciones:

  #1 Formato de la imagen

• • PNG: si queremos el fondo transparente
  • JPEG: para las imágenes.

#2 Calidad: A mayor calidad mayor peso. Veamos las diferencias:

JPEG calidad Baja, 19,57KB

JPEG calidad Mediana, 28,21KB

JPEG Calidad Alta, 62,4KB

JPEG calidad máxima, 274KB

#3 Tamaño: ajusta el ancho de la imagen al ancho de tu web. #4 Progresivo: si ves que la imagen es muy grande y que sigue pesando, guárdala en progresivo. Esto hará que en vez de cargarse de arriba hacia abajo se cargue de peor calidad a mejor.

Illustrator

Si usas illustrator, podrás hacerlo desde Archivo > Guardar para web. Como verás las opciones en el cuadro son las mismas

¡Y ya está! Así de sencillo. Si cada vez que encuentras una imagen para tu web, realizas este sencillo paso evitarás sobrecargar tu web y perder visitas.

No tengo Photoshop/Illustrator

Si no tienes acceso a este tipo de programas puedes usar Canva y crear una imagen con las dimensiones deseadas. Luego la descargas con el formato image for web (JPG) y listo. Si te lías con el tema de los tamaños o prefieres una vía más cómoda si usas WordPress, puedes instalar algún plugin de compresión de imágenes. Pero ten en cuenta que los plugins también cargan tu web, y van a hacer que cada vez vaya más lenta. Te dejo más información aquí.