Cómo comprimir imágenes para mejorar Google PageSpeed

Qué señala de verdad el informe

PageSpeed marca las imágenes de varias formas distintas, y cada una significa algo diferente. «Usa un tamaño adecuado para las imágenes» quiere decir que el archivo que enviaste tiene más píxeles que el espacio en el que se mostró. «Codifica las imágenes de forma eficaz» quiere decir que la calidad era más alta de lo que la imagen necesitaba. «Sirve imágenes en formatos de próxima generación» quiere decir que la misma imagen ocuparía menos en WebP o AVIF. La primera es casi siempre la más cara, y es la que la gente se salta, porque en pantalla la página se ve bien.

También hay una cuestión de tiempos. En la mayoría de los artículos y fichas de producto, lo más grande de la pantalla es una imagen, así que el navegador no puede terminar de pintar el contenido principal hasta que ese archivo haya llegado. Reducirlo mueve toda la medición de carga, no solo una fila del informe.

Primero las dimensiones, después la calidad

Empieza por las dimensiones en píxeles, porque ahí el ahorro es geométrico. Una foto de móvil suele rondar los 4000 píxeles en su lado largo. Bájala a 1280 y te quedas más o menos con una décima parte de los píxeles, porque el ancho y el alto se reducen en la misma proporción. Ningún control de calidad te da una reducción de ese orden.

Elige el ancho según tu diseño, no según el archivo. Si la imagen va en una columna de 700 píxeles, 1280 cubre de sobra las pantallas de alta densidad. Servir 4000 es pagar por transferir detalle que nadie va a ver nunca. Las únicas imágenes que merecen su resolución completa son las que el visitante puede abrir a pantalla completa con un clic, y ni siquiera esas suelen necesitar el original entero de la cámara.

Qué hace el control de calidad

JPEG funciona descartando detalle que al ojo le cuesta notar, y el número de calidad decide lo agresivo que es ese descarte. Bájalo lo suficiente y los fallos aparecen en sitios previsibles: halos difusos alrededor de los bordes marcados, como un texto o la línea de un tejado, y manchas en los degradados suaves, como un cielo despejado o el fondo de un estudio. Las fotografías con mucha textura disimulan bien la compresión. Los colores planos y el texto fino, no.

Juzga el resultado al tamaño en que se va a mostrar y dentro del diseño en el que va a ir. Si haces zoom al 300 % para buscar defectos, acabarás convenciéndote de mantener una calidad muy por encima de lo que la página necesita, y publicarás ese peso de más para nada.

Cuándo comprimir no sirve de nada

Algunos archivos ya no dan más de sí, y apretarlos solo te cuesta calidad:

• Un JPEG que ya se comprimió una vez. Volver a codificarlo añade una nueva ronda de defectos encima de los que ya tenía, y el ahorro suele ser pequeño. Si una foto ya pesa un par de cientos de kilobytes a tamaño web, déjala como está.
• Fotografías guardadas como PNG. El compresor mantiene un PNG como PNG y lo reduce recortando su paleta de colores, algo que va bien con capturas de pantalla y gráficos planos, pero que en una foto se nota en forma de bandas. Convierte esas fotos a JPG o WebP primero y comprime ese archivo.
• Iconos, logotipos y pequeños gráficos de interfaz. Unos pocos kilobytes cada uno no son lo que ha suspendido tu auditoría. Busca mejor la imagen principal de la página.

Cómo usar el compresor de este sitio

El control de calidad va de 10 a 95. En JPEG fija la calidad del codificador. Los navegadores ignoran ese valor al escribir un PNG, así que en PNG decide cuántos colores se conservan, desde 256 cerca del extremo alto hasta 16 en el más bajo, y la transparencia se mantiene. El control de dimensión máxima ofrece el tamaño original o 1920, 1280 u 800 píxeles en el lado más largo, y escala de forma proporcional para que nada se deforme. Suelta de una vez las imágenes de una carpeta, comprímelas todas en una sola pasada y descárgalas en un ZIP.

Hay cosas que no hace a propósito. No persigue por ti un tamaño de archivo concreto: eliges una calidad, miras el resultado y ajustas. No conserva los metadatos de los archivos que vuelve a codificar: la imagen se decodifica, se dibuja en un canvas y se escribe de nuevo, así que los ajustes de la cámara, la fecha y la hora y cualquier coordenada GPS desaparecen. Y no te devuelve un archivo más grande que el que le diste. Si volver a codificar una imagen ya bien comprimida la hiciera más pesada, y no has pedido unas dimensiones menores, recibes el archivo original sin cambios.

Por qué funciona en tu navegador

Las imágenes que se comprimen antes de un lanzamiento suelen ser de las que uno preferiría no dar a un desconocido: fotos de productos aún sin presentar, fotografías de clientes, capturas de pantalla con datos internos. Aquí no se sube nada. El archivo se lee de tu disco, se decodifica y se vuelve a codificar dentro de la pestaña, y se guarda en tu carpeta de descargas. Abre la pestaña Red de las herramientas para desarrolladores mientras comprimes y no verás ninguna petición que lleve tu archivo, porque no se hace ninguna.

Cuándo es mejor un paso de compilación

Si publicas imágenes a todas horas, este trabajo tiene que estar en tu pipeline de publicación, no en una pestaña del navegador. Un plugin de compilación o una CDN de imágenes puede generar varios anchos y formatos de cada imagen, servir a cada dispositivo el adecuado y no olvidarse nunca de hacerlo. Hacerlo a mano cada semana no escala, y es el tipo de tarea que la gente deja de hacer sin decir nada al cabo de un mes. Una herramienta en el navegador tiene el tamaño justo para el puñado de archivos que estás a punto de subir, o para las tres imágenes pesadas de las que de verdad se quejó una auditoría.