Cómo optimizar tus imágenes para web
Una fotografía que pesa varios megabytes puede retrasar la página aunque termine viéndose en un recuadro pequeño. Optimizarla consiste en servir las dimensiones y la calidad que necesita esa pantalla.
¿Por dónde empezar? Analiza qué imágenes tienes que optimizar
Antes de empezar a optimizar tus imágenes, lo mejor es que hagas un test de velocidad y compruebes qué impacto tienen las imágenes en tu web. Quizás pienses que debes optimizarlas y puede que tengas otras prioridades antes.
Las mejores apps para analizarlo, son:
Estas herramientas te recomendarán diferentes pasos a seguir para no solo optimizar las imágenes sino para optimizar la velocidad de carga en general de tu web.
Elegir el formato
- JPEG funciona bien con fotografías y utiliza compresión con pérdidas. Una calidad más alta no siempre produce una diferencia visible al tamaño de publicación.
- PNG conserva los píxeles sin pérdidas y admite transparencia. Puede convenir para capturas con texto o gráficos, aunque el archivo resultante sea mayor.
- WebP y AVIF permiten comprimir fotografías y otras imágenes con buenos resultados. Compara el archivo y comprueba la compatibilidad del flujo de publicación.
- SVG sirve para gráficos vectoriales, como iconos y logotipos. EPS es un formato de trabajo gráfico, no el sustituto de SVG para mostrar imágenes directamente en el navegador.
- GIF sigue admitiéndose, pero sus animaciones pueden pesar mucho. Para una secuencia fotográfica, compara un vídeo o un formato animado más eficiente.
La guía de formatos de MDN recoge sus características y compatibilidad.
Cómo optimizar imágenes
En Photoshop puedes usar las opciones de exportación. El panel Guardar para web (heredado) sigue siendo útil para comparar JPEG, PNG y GIF. La siguiente captura muestra una versión antigua del panel; busca el comando por su nombre si tu interfaz es distinta.
En primer lugar selecciona arriba a la derecha el formato en el que quieres exportar (gif, png o jpg). Si utilizas las pestañas superiores podrás ver hasta cuatro copias para comparar diferentes formatos o compresiones y ver su relación calidad/peso.
Si exportas en JPG, ten en cuenta:
- La barra de calidad, de 0 a 100, una calidad más alta conserva más detalle, pero también aumenta el peso. Incluso a calidad 100, JPEG no equivale a una imagen sin pérdidas.
- La opción “progresivo”. Si la pulsas, el jpg guardará diferentes capas a diferentes calidades de manera que a la hora de cargarse en el servidor la imagen se vera en baja calidad e irá mejorando su definición a medida que vaya cargando. Si no, la imagen aparecerá directamente en alta, a trompicones.
Si exportas en PNG, ten en cuenta:
- ¿PNG-8 o PNG-24? La principal diferencia es que PNG-8 comprime un máximo de 256 colores, como un GIF, mientras que PNG-24 alcanza los 16 millones de colores. Normalmente usarás este último.
- Transparencia. Bastante obvio, pero si lo activas el fondo de la imagen será transparente (siempre que no exista una capa sólida en el fondo de Photoshop).
- La opción “entrelazado” es muy similar al “progresivo” en JPG, hace referencia al tipo de carga. Dependerá de nuestras preferencias y de las capacidades del navegador donde vaya a cargarse la imagen.
Compara siempre el peso y el aspecto del archivo exportado. Revisa los bordes, los degradados y el texto; no elijas una calidad por costumbre.
También puedes usar Squoosh para redimensionar y comparar formatos, o ImageOptim en macOS para optimizar archivos. Conserva el original antes de comprimir una imagen con pérdidas.
Compresión y optimización automática en Wordpress
Si usas WordPress, revisa qué tamaños genera tu tema y qué archivo sirve cada imagen. Smush ofrece funciones de optimización; comprueba cuáles incluye el plan que elijas y evita que varios plugins procesen la misma imagen.
Conclusión
Ya conoces los detalles de cada formato y las diferentes opciones, así que no tienes excusa para seguir exportando las imágenes de cualquier forma. Piensa en tus usuarios, piensa en tu posicionamiento en buscadores y pon a dieta a tus imágenes.
