Imágenes livianas: cuánto pesa una foto mal exportada y cómo arreglarla

La cuenta de una foto subida tal cual

Un celular actual saca fotos de 4000 × 3000 píxeles: 12 millones de puntos, que en JPEG pesan de 3 a 6 MB. Si esa foto se muestra en un recuadro de 800 píxeles de ancho, el navegador baja todo, lo achica y descarta el 96 % de los puntos. El visitante esperó por datos que nunca vio.

Exportada a 1600 píxeles de ancho en WebP con calidad 80, la misma foto suele quedar entre 150 y 300 KB. Se ve igual en una pantalla de alta densidad y pesa del orden de veinte veces menos.

Cómo afecta al sitio y al plan

• Velocidad: la imagen principal suele ser el elemento que define el LCP, la métrica de Google que mide cuándo aparece el contenido principal. Por encima de 2,5 segundos se considera lenta; más detalle en Core Web Vitals.
• Celulares: con datos móviles o mala señal, una portada de varios megas es la diferencia entre que la persona se quede o se vaya.
• Transferencia: una portada de 4 MB vista por 250 visitantes nuevos en un día son 1 GB. En un hosting pensado para hasta 1 GB de transferencia diaria, las imágenes pesadas son lo primero que se come ese margen.
• Disco: WordPress guarda el original y varios tamaños derivados de cada imagen. Con originales de 5 MB, la biblioteca crece rápido y ocupa espacio del plan y de las copias.

Qué formato corresponde a cada imagen

WebP funciona en todos los navegadores actuales desde 2020, y AVIF desde que Safari lo sumó en 2023. Para cubrir equipos muy viejos, se sirve con un JPEG de respaldo.

La rutina de exportación, paso a paso

1. Mirá en qué ancho se muestra la imagen en tu diseño (en computadora, el más grande) y exportala como máximo al doble: para un espacio de 700 píxeles, 1400.
2. Arrancá con calidad 80. Si al compararla con el original no ves diferencia, probá 70; si aparecen manchas en los degradados del cielo o de la piel, volvé a subirla.
3. Poné nombres descriptivos (sillon-cuero-marron.webp, no IMG_2031.webp): ayudan al buscador y a vos.
4. Si la subís a un CMS, dejá que genere los tamaños intermedios. WordPress los crea solo y arma el srcset para que cada pantalla baje el que necesita.
5. Revisá el resultado con una prueba de velocidad antes de dar el trabajo por terminado. Cómo interpretarla está en cómo leer una prueba de velocidad.

Si convertís muchas a la vez

Para una tanda de fotos no hace falta abrirlas una por una. Squoosh, la herramienta de Google que funciona en el navegador, sirve para pocas. Para carpetas enteras, ImageMagick corre en Linux, macOS y Windows (en Windows, desde WSL para usar este bucle). En la terminal de tu computadora, dentro de la carpeta con las fotos:

# achica a 1600 px de ancho (solo las más grandes) y convierte a WebP
for f in *.jpg; do
  magick "$f" -resize "1600x>" -quality 80 "${f%.jpg}.webp"
done

Lo que va en el HTML

Con la imagen bien exportada, quedan cuatro atributos que cambian cómo la trata el navegador. WordPress agrega casi todos por su cuenta en sus versiones recientes; en un sitio hecho a mano van así:

<!-- la imagen principal: se pide primero -->
<img src="portada-1600.webp" width="1600" height="900" fetchpriority="high" alt="Frente del local">
<!-- el resto: se pide cuando se acerca a la pantalla -->
<img src="producto-800.webp" width="800" height="800" loading="lazy" decoding="async" alt="Sillón de cuero marrón">

• width y height reservan el espacio antes de que llegue la imagen, así el texto no salta (es lo que mide el CLS).
• loading="lazy" difiere las que están fuera de la primera pantalla. Nunca en la principal: la retrasaría.
• fetchpriority="high" le avisa al navegador que esa imagen va antes que el resto.
• srcset y sizes ofrecen varios anchos de la misma imagen para que un celular no baje la versión de escritorio.

GIF animados: el caso más caro

Un GIF usa una paleta de 256 colores y comprime cada cuadro casi sin aprovechar lo que se repite entre uno y otro. Por eso una animación corta puede pasar los 5 MB. El mismo contenido como video, sin sonido y en bucle, pesa una fracción y se ve mejor. Con ffmpeg se convierte en un paso, y en la página se inserta con <video autoplay muted loop playsinline>.

ffmpeg -i animacion.gif -movflags +faststart -pix_fmt yuv420p -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" animacion.mp4