Optimizar las imágenes para web

• 18/04/2023

Cómo optimizar las imágenes para la web sin perder calidad

¡Hola!

En el siguiente artículo explicaremos que es la optimización de las imágenes, cuáles son sus beneficios, como optimizar y formatear las imágenes de nuestra web sin perder calidad, Plugins de Wordpress para optimizar imágenes, uso de SVGs y sus beneficios, uso de Squoosh.app la mejor aplicación gratuita para optimizar imágenes y mejores prácticas.

¿Qué es la optimización de las imágenes?

Optimizar imágenes es el proceso que consiste en guardar y mostrar imágenes en el tamaño de archivo más pequeño posible sin reducir la calidad general de la imagen. . Esto se realiza porque las imágenes grandes ralentizan nuestra página web con lo que crea una experiencia de usuario inferior. Aunque suene a un proceso bastante complejos, hoy en día es bastante fácil tanto si tienes una página web con Wordpress como si tu web está hecha desde 0.

Como puedes ver en la anterior imagen, cuando optimizamos correctamente nuestra imagen, puede llegar a ser hasta un 80% más pequeña que la original sin pérdida de calidad, en este ejemplo la imagen es un 57% más pequeña.

¿Cómo funciona la optimización de imágenes?

En términos simples, la optimización de imágenes funciona usando tecnologías de compresión. Esta compresión puede ser ‘lossy’(Compresión con pérdida) o ‘lossless’(Compresión sin pérdida). La compresión Lossless reduce el tamaño del archivo sin pérdida de calidad, sin embargo con la compresión lossy tiene pérdida de calidad con lo que tendríamos que intentar que no sea perceptible para el usuario

---

Beneficios de optimizar las imágenes de nuestra web

Optimizar las imágenes de nuestra web tiene numerosas ventajas, pero las siguientes son las principales que debes conocer:

• - Mucha mayor velocidad de nuestra web

• - Amplia mejora en los rankings SEO

• - Menos almacenamiento y uso de ancho de banda (nos permite reducir los costes de alojamiento y los costes de CDN si tenemos)

• - Nos permite tener una mayor tasa de ventas, visitas y clientes potenciales

• - Las copias de seguridad de nuestra web serán más rápida y ligera con lo que se reducirá el coste de almacenamiento de estas copas de seguridad

Las imágenes son el segundo elemento más pesado de una página web después de los archivos de vídeo. Según HTTP Archive las imágenes constituyen el 21% del peso total de una web de media.

Como sabemos, las páginas web que son rápidas se posicionan mucho mejor en los motores de búsqueda (SEO) y tienen mejores conversiones, la optimización de imágenes es un proceso que debe hacer toda página web con independencia del tamaño de la página web si quiere tener éxito en internet.

Según un estudio de Strangeloop, un retraso de un segundo en el tiempo descarga de una web puede costar a la web un 7% de las ventas, un 11% menos de vistas de página y una disminución del 16% en la satisfacción del cliente.

---

Cómo optimizar y formatear imágenes sin perder calidad

La clave en la optimización de imágenes para mejorar el rendimiento de nuestra web es encontrar el equilibrio perfecto entre una muy buena calidad de imagen y el menor tamaño de archivo posible.

Estos tres apartados juegan un papel muy importante en la optimización de imágenes:

• - Formato de Imagen (JPEG vs PNG vs GIF)

• - Compresión (A mayor compresión menor tamaño de imagen)

• - Tamaño de imagen (alto y ancho)

Eligiendo la combinación adecuada de los tres apartados anteriores, puedes reducir el tamaño de las imágenes de tu web hasta en un 80%.

Elige el formato de imagen correcto

Antes de empezar a optimizar nuestras imágenes vamos a elegir el mejor tipo de archivo. Existen los siguientes tipos:

• - PNG: Son imágenes de mayor calidad, pero también tienen un tamaño de archivo mayor, a pesar de haber sido creado como un formato sin pérdida pueden ser con pérdida.

• - JEPG: Usa optimización con pérdida y sin pérdida, podemos ajustar el nivel de calidad mediante el equilibrio de calidad y tamaño de la imagen.

• - GIF: Utiliza 256 colores, es considerada una de las mejores opciones para imágenes animadas y utiliza compresión sin pérdidas.

Hay formatos de nueva generación como WebP(fomentado por Google) y JPEG XR, que a día de hoy no son compatibles con todos los navegadores pero si con la inmensa mayoría de ellos como se puede ver en la siguiente web

Idealmente deberemos tener todas nuestras imágenes en formato .webp ya que está siendo fomentado por Google y deberemos usar los “antiguos formatos” para complementar a webp y que los navegadores antiguos puedan ver las imágenes. Deberíamos utilizar JPEG(o JPG) para imágenes con mucho color y usar PNG para imágenes más sencillas.

Calidad de compresión

Lo siguiente es la compresión de las imágenes ya que desempeña un papel muy importante en la optimización de imágenes. Cuanto mayor compresión queramos en nuestras imágenes menor tamaño tendrán, pero también perderán calidad. Es decir, como hemos estado diciendo anteriormente, deberemos encontrar el equilibrio entre compresión y calidad.

Dimensiones de imagen

Normalmente cuando importamos una foto desde nuestro teléfono o cámara esta imagen tiene una resolución muy alta y unas dimensiones de archivo grandes (alto y ancho).

Típicamente, estas fotos tienen una resolución de 300 PPP y unas dimensiones que parten de 2000px. Aunque estas fotos son perfectas para impresión por ejemplo, su gran tamaño y peso las hace inadecuadas para nuestra web.

Reducir las dimensiones de una imagen nos permite reducir significativamente el tamaño de nuestra imagen. Puedes cambiar el tamaño de las imágenes desde Squoosh.app (lo veremos más adelante)

---

Squoosh.app la mejor aplicación web gratuita para optimizar las imágenes de tu web

Squoosh.app es la aplicación que uso habitualmente para optimizar las imágenes de mis páginas web, aplicaciones móviles etc.

Esta aplicación nos permite comprimir nuestra imagen viendo y comparando la relación calidad-compresión. Además, Squoosh nos permite exportar nuestras imágenes a los formatos que queramos y redimensionarlas si es necesario.

En resumen, Squoosh nos permite tener todo el proceso de compresión de imágenes en una única herramienta fácil de utilizar y gratis.

El proceso es el siguiente:

1º Acceder a la aplicación

Vamos a nuestro navegador favorito y vamos al siguiente link https://squoosh.app

2º Seleccionar la imagen a comprimir

Arrastramos la imagen a comprimir a la aplicación, una vez lo hagamos tendremos la imagen para empezar a trabajar con ella

3º Preparar Imagen a comprimir

Ponemos a la izquierda(rosa)(o gris) o a la derecha(azul) los parámetros de nuestra imagen comprimida como puede ser si queremos redimensionarla (resize), reducir paleta de colores y por último nos permite comprimirla en el formato que queramos con la calidad que deseemos.

4º Descargar imagen comprimida

Una vez tengamos la imagen la descargamos y la agregamos a nuestro proyecto.

---

Mejores plugins de Wordpress para optimizar imágenes

En mi opinión la mejor forma de optimizar las imágenes de nuestra web es hacerlo antes de subirlas a nuestra web en Wordpress. Sin embargo, si tu web tiene varios autores o necesitas una solución automatizada, puedes probar alguno de los siguientes plugins de compresión para wordpress

• - Optimole

• - Optimizador de imágenes EWWW

• - TinyPNG - Compresión de imágenes JPEG, PNG y WebP

• - Shortpixel

---

Uso de SVGs: Los beneficios que necesitas saber

Una recomendación es utilizar SVGs junto con el resto de nuestras imágenes, este formato SVG es una imagen vectorial que funciona muy bien para logotipos, iconos, textos e imágenes sencillas.

A continuación unas razones para utilizarlo:

• - Los SVGs son autoescalables tanto en navegadores como en herramientas de edición de foto.

• - Google indexa SVGs al igual que hace con PNGs, JPGs, Webps etc, así que no tendrás que preocuparte del SEO

• - El tamaño de los SVGs suele ser más pequeño que los formatos PNG, JPGs etc.

---

Mejores prácticas para optimizar las imágenes para la web

A continuación, te voy a resumir unos puntos para mejorar la optimización de las imágenes de nuestra web:

• - Comprimir las imágenes y subirlas a nuestra web en lugar de usar directamente plugins wordpress

• - Utilizar imágenes vectoriales (SVGs) siempre que sea posible, junto con los otros formatos

• - Usar los formatos antiguos (PNG, JPEG, GIF) para los navegadores antiguos y complementar a los nuevos formatos.

• - Usar un CDN

• - Usar las imágenes en las dimensiones adecuadas

• - Usar PNG para imágenes de alto detalle y resolución

• - Usar JPG para fotos y capturas de pantalla generales.

• - Utilizar GIF solo si necesitamos una animación GIF

• - Utilizar imágenes Lazy Load cuando sea posible