Cómo aligerar las imágenes de tu web sin perder calidad
Actualizado:
Las imágenes suelen ser lo que más pesa de una página, y las páginas pesadas cargan despacio en el móvil y pierden visitas. Dos cambios resuelven casi todo: las dimensiones adecuadas y el formato adecuado. Medimos cada paso con 17 fotos para mostrar cuánto ahorra de verdad cada uno y en qué orden conviene hacerlos.
Antes que nada, reduce el tamaño
Una foto recién sacada del móvil mide unos 4.000 píxeles de ancho, mientras que la columna de un blog la muestra a unos 800, o a 1.600 píxeles reales en una pantalla de alta densidad de móvil o portátil. Servirla a tamaño completo desperdicia casi toda la descarga, y ningún formato lo compensa.
Las herramientas de compresión de JPG, PNG y WebP pueden limitar el tamaño por ti: el nivel Equilibrada deja el lado mayor en 2.560 píxeles como máximo y el nivel Fuerte en 1.600, y ninguno agranda nunca una imagen más pequeña. Fuerte sirve para casi cualquier imagen dentro de un artículo; Equilibrada, para fotos que ocupan una pantalla ancha.
Lo que ahorró cada paso
Partimos de 17 fotografías de unos 12 megapíxeles guardadas como JPG de alta calidad, de 1,5 MB de media, y las pasamos por las herramientas de esta web. Solo con convertirlas a WebP se quedaron en la mitad. Reducir el tamaño hizo mucho más. Reducir y después convertir a WebP dejó la foto media en 56 KB, un 96 % menos que al principio.
| Versión | Lado mayor | Tamaño medio | Ahorro |
|---|---|---|---|
| JPG original (calidad 92) | hasta 4.032 px | 1,5 MB | — |
| WebP, Alta (85), tamaño completo | hasta 4.032 px | 750 KB | 50 % |
| Comprimir JPG: Equilibrada | 2.560 px | 300 KB | 80 % |
| Comprimir JPG: Fuerte | 1.600 px | 91 KB | 94 % |
| Equilibrada y después WebP | 2.560 px | 157 KB | 90 % |
| Fuerte y después WebP | 1.600 px | 56 KB | 96 % |
El orden correcto
- Abre Comprimir JPG (o Comprimir PNG para capturas de pantalla) y elige Fuerte, o Equilibrada para fotos a todo el ancho. Sube hasta 20 imágenes a la vez y descárgalas.
- Abre JPG a WebP y sube los archivos comprimidos.
- No toques la opción de calidad y descarga las versiones WebP.
El error que deshace el ahorro
Cuando conviertes a WebP un JPG ya comprimido sin elegir calidad, el WebP conserva el nivel de calidad de ese JPG, y eso es lo que lo dejó entre un 38 y un 47 % más pequeño en nuestra prueba. Elegir Alta (85) en ese momento pide más calidad de la que le queda al JPG comprimido: los JPG del nivel Fuerte convertidos con calidad Alta salieron algo más grandes que los propios JPG, 100 KB de media en lugar de 91. Elige Alta (85) o Máxima (95) solo cuando conviertas desde la foto original a calidad completa.
Conserva los originales
Guarda las fotos originales como copias maestras. Siempre podrás generar nuevas versiones para la web con otro tamaño o calidad, pero no recuperar detalle de una copia demasiado comprimida. Y revisa el resultado donde lo ven tus visitantes, en un móvil: si allí se ve bien, es suficiente.
Más allá del archivo
Dos pequeños añadidos en la página hacen que las imágenes ligeras carguen aún mejor. Indica en el HTML el ancho y el alto de cada imagen, para que la página no salte mientras carga. Y añade loading="lazy" a las imágenes que están más abajo, para que el navegador solo las descargue cuando el visitante se acerque a ellas. Todos los navegadores actuales admiten las dos cosas.
Cómo lo probamos
Las 17 fotos son las fotografías de Unsplash que incluye Edubuntu, reducidas a 4.032 píxeles por el lado mayor cuando eran más grandes y guardadas en JPG con calidad 92. Cada paso usó las herramientas de esta web con los ajustes indicados, a través del mismo código y la misma versión de ImageMagick que funcionan en nuestros servidores. Las fotos con mucho detalle se reducen menos que las tranquilas, así que tu ahorro variará en torno a estas medias.
Más información: web.dev — Choose the right image format