Optimizar imágenes para la web.

1. El tamaño

Cada imagen, al tamaño al que se ve, multiplicado por dos para las pantallas de alta densidad. Una foto que ocupa 800 píxeles de ancho necesita 1600, no los 4000 de la cámara. Apolo reduce al lado mayor que digas, sin agrandar nunca.

$ apolo lote fotos/ --formato avif,webp --objetivo 80 --lado-mayor 1600

2. El formato

AVIF es hoy el más ligero que abren todos los navegadores actuales: en nuestras medidas, un 25 % menos que JPEG a la misma calidad percibida. WebP, como respaldo, y PNG o WebP sin pérdida para logos y capturas.

−25 %

AVIF frente a JPEG, a la misma calidad percibida

−62 %

WebP sin pérdida frente al PNG, en capturas y logos

AVIF, WebP o JPEG XL: las medidas →

3. La calidad

Para fotos de una web, una nota de 80 de SSIMULACRA 2 (no se distingue al lado del original) es un buen punto de partida; 90 si la foto es el producto. Con «Calidad por nota», Apolo encuentra la calidad que llega a esa nota en cada foto, en vez de usar el mismo número para todas.

4. Cómo se sirven

Con <picture>, el navegador coge el primer formato que sabe abrir. Las medidas (width y height) evitan que la página salte al cargar, y loading="lazy" deja para después lo que está fuera de la pantalla (pero nunca la imagen principal de arriba).

<picture>
  <source srcset="foto.avif" type="image/avif">
  <source srcset="foto.webp" type="image/webp">
  <img src="foto.jpg" alt="Lo que se ve en la foto" width="1600" height="1067" loading="lazy" decoding="async">
</picture>

Esta web, por ejemplo

Todas las imágenes de esta web las ha optimizado Apolo: capturas en AVIF con WebP de respaldo, buscando la nota 90 porque llevan texto. En Webcafeína hacemos webs así, que cargan rápido.