Comprimir imágenes para WordPress sin perder calidad

Imágenes que pesan mucho: cuánto debe pesar una imagen en una web

La mayoría de las webs lentas no lo son por el servidor ni por el tema, sino por las fotos. Una foto de móvil recién sacada ronda los 3-5 MB: 12 megapíxeles o más, guardada con calidad alta y con varios bloques de datos dentro que la página no necesita. Si la subes tal cual a una entrada de WordPress o a una ficha de tienda, cada visitante descarga esos megas antes de ver la imagen entera, y en una conexión móvil normal eso se nota en segundos.

Lo que de verdad hace falta en pantalla es mucho menos. El ancho real al que se muestra una imagen en una web suele estar entre 800 y 1600 píxeles: unos 700-900 en la columna de texto de un blog, alrededor de 1200 en una foto de cabecera a todo el ancho de un portátil y hasta 1600 si quieres que se vea nítida en pantallas de alta densidad. Una foto de 4000 píxeles de ancho, en ese hueco, se reduce en el navegador: el visitante paga el peso completo y ve una versión pequeña.

Así que la pregunta de cuánto debe pesar una imagen tiene una respuesta práctica: en una página no hace falta ni la décima parte de lo que pesa la foto original. Como orientación de trabajo, una foto de contenido a 1200-1600 píxeles queda bien entre 100 y 300 KB; una miniatura o una foto de producto en cuadrícula, bastante por debajo de 100 KB. No son reglas fijas: una imagen con mucho detalle fino (hierba, tejidos, texto pequeño) necesita algo más que una con cielo liso o fondo blanco.

Un apunte sobre WordPress: al subir una foto, genera varias copias redimensionadas (miniatura, mediana, grande) y las sirve según el hueco, y desde hace varias versiones reduce automáticamente las imágenes muy grandes a 2560 píxeles de lado. Ayuda, pero no basta: la copia original se queda en el servidor, la calidad de esas copias la decide el sistema y los metadatos del móvil viajan con ellas. Es mejor que lo que subas ya llegue preparado.

Cómo optimizar imágenes para web: las tres palancas

Para optimizar imágenes para web hay tres palancas, y conviene tocarlas en este orden, porque no pesan lo mismo:

1. Reducir el lado máximo. Es la que más peso quita y la que menos se nota. El peso de una imagen crece con el número de píxeles, es decir, con el ancho por el alto. Pasar de 4000 a 1600 píxeles de ancho no quita algo más de la mitad de los píxeles, sino que deja más o menos una sexta parte. Y como el navegador iba a mostrarla a 1600 de todos modos, en pantalla no cambia nada.
2. Elegir el formato. Con los mismos píxeles y un aspecto parecido, un formato moderno ocupa bastante menos que uno antiguo. Lo vemos en la sección siguiente.
3. Bajar la calidad. La compresión con pérdida descarta detalle que el ojo apenas percibe. Entre una calidad muy alta y una media la diferencia en pantalla es difícil de ver, y en peso es grande. Por debajo de cierto punto aparecen bloques en los degradados, halos alrededor de los bordes y bandas en el cielo: ahí te has pasado.

El error habitual es empezar por la tercera: subir la foto de 4000 píxeles y apretar la calidad hasta que pese poco. El resultado es una imagen enorme llena de defectos de compresión, que además el navegador tiene que reducir. Al revés funciona mejor: primero el tamaño adecuado al hueco, luego el formato, y la calidad al final, en un punto en el que no se vea la diferencia al 100 %.

Un consejo para decidir el lado máximo: mira el ancho más grande al que se muestra esa imagen en tu plantilla (en escritorio, que suele ser el caso más exigente) y multiplica por 1,5 o por 2 si quieres que se vea bien en pantallas de alta densidad, sin pasar de 1600-2000 píxeles para fotos de contenido. Si la foto es para una cabecera a pantalla completa, puedes ir algo más arriba; si es para una cuadrícula de productos, bastante más abajo.

La situación contraria también existe: una imagen demasiado pequeña para el hueco se ve blanda o pixelada al estirarse. Ahí comprimir no sirve; lo que necesitas es ampliar una imagen primero hasta el ancho que pide la plantilla y después comprimirla.

Qué formato usar: JPEG, WebP, AVIF o PNG

Elegir bien el formato es la segunda palanca y la que más dudas genera. Resumido:

• JPEG: donde haga falta compatibilidad total. Lo abre cualquier navegador, cualquier programa de correo, cualquier gestor de contenidos y cualquier red social. Si la imagen va a circular fuera de tu web (una nota de prensa, un catálogo que otros descargarán), JPEG es la opción segura.
• WebP: el equilibrio para web. Con un aspecto parecido suele pesar claramente menos que un JPEG, admite transparencia y todos los navegadores actuales lo muestran. WordPress lo acepta en la biblioteca de medios desde hace años. Para la mayoría de las fotos de un blog o de una tienda es la elección razonable.
• AVIF: cuando el peso manda. Comprime más que WebP, sobre todo en fotos con zonas lisas, y los navegadores modernos lo admiten. A cambio, tarda más en codificarse y algún programa antiguo todavía no lo abre. WordPress lo acepta desde la versión 6.5, siempre que el servidor tenga soporte para él. Si tu página es una galería larga o una portada con muchas fotos, es donde más se nota.
• PNG: solo cuando necesitas transparencia y el formato de destino no admite otra cosa, o para gráficos con colores planos y texto (capturas de pantalla, diagramas). Para fotos, un PNG pesa varias veces más que un JPEG del mismo tamaño sin verse mejor en pantalla.

Un caso frecuente en tiendas online es la foto de producto recortada sobre transparente. Si después vas a ponerla sobre un fondo blanco liso, no la guardes en PNG: quitar el fondo de una foto y elegir directamente fondo blanco te permite exportarla como JPEG o WebP, que pesa mucho menos. Si necesitas que siga siendo transparente para colocarla sobre distintos fondos, WebP también conserva el canal alfa con menos peso que PNG.

Y si tus fotos vienen de un iPhone, llegan en HEIC. Ese formato no se publica directamente en la mayoría de webs; conviene pasarlo a JPEG o WebP al comprimir. Lo explicamos con más detalle en de HEIC a JPG: cuándo conviene y cómo hacerlo bien.

Metadatos: qué esconde una foto del móvil y qué conservar

Una foto de móvil no es solo píxeles. Dentro lleva un bloque de metadatos (EXIF y similares) con información que la página no usa para nada:

• Fecha y hora exactas de la toma.
• Marca y modelo del teléfono, objetivo, exposición, ISO.
• A veces, las coordenadas GPS del lugar donde se hizo la foto.
• Una miniatura incrustada y, en algunos móviles, datos extra del modo retrato o del procesado.

Quitarlos tiene dos ventajas. La primera es el peso: en una foto ya reducida a 1200 píxeles y bien comprimida, esos bloques pueden ser una parte apreciable del archivo, sobre todo en miniaturas, donde los píxeles ocupan poco. La segunda es la privacidad: si publicas fotos hechas en tu casa, en el taller o en el almacén, las coordenadas dicen dónde está ese sitio a cualquiera que descargue la imagen y la abra con un visor de metadatos.

Hay un dato que sí conviene conservar: el perfil ICC. Es la etiqueta que dice en qué espacio de color está la imagen. Muchos móviles actuales guardan las fotos en un espacio más amplio que el estándar de la web; si se borra el perfil, el navegador interpreta los colores como si fueran del espacio estándar y la foto se ve apagada o con los tonos desplazados: pieles más grises, rojos menos intensos. Por eso la opción buena no es «borrar todo», sino quitar los metadatos y dejar el perfil de color.

Un último detalle: la orientación. El móvil no gira los píxeles al hacer una foto en vertical; guarda una etiqueta que dice «muéstrala girada». Si una herramienta quita los metadatos sin aplicar antes ese giro, la foto aparece tumbada en la web. Al procesar conviene que la orientación se aplique a los píxeles y luego se descarte la etiqueta.

Comprimir imágenes para WordPress paso a paso con Airpic

Con todo lo anterior, preparar las fotos antes de subirlas a WordPress o a tu tienda lleva menos de un minuto por imagen. En Airpic, la herramienta de comprimir imágenes hace los cuatro pasos de una vez:

1. Sube la foto. Arrástrala, elígela o pégala con Ctrl+V. Acepta JPG, PNG (también con transparencia y de 16 bits), WebP, TIFF, HEIC y AVIF. La orientación EXIF se aplica a los píxeles, así que la foto sale derecha.
2. Fija el lado máximo. Pon el ancho que necesita tu plantilla, por ejemplo 1600 para una foto de contenido o 1200 para una cabecera estrecha. Es la palanca que más peso quita: empieza siempre por aquí.
3. Elige el formato de salida. JPEG si necesitas compatibilidad total, WebP para la mayoría de las webs, AVIF si el peso es lo que más te importa y PNG solo si necesitas transparencia.
4. Ajusta la calidad o pide un tamaño objetivo. Puedes mover el deslizador de calidad y mirar el resultado, o escribir directamente los KB que quieres (por ejemplo, 200) y dejar que la herramienta busque la calidad que cumple ese límite. El tamaño objetivo es lo más cómodo si tu tema o tu tienda imponen un máximo por imagen.
5. Marca «quitar metadatos». Se eliminan fecha, modelo de cámara y GPS, y se conserva el perfil ICC para que los colores no cambien.
6. Procesa y compara. Corre en CPU y tarda segundos. Revisa el resultado en el comparador, sobre todo en degradados y bordes; si ves bloques o bandas, sube un poco la calidad.
7. Descarga y sube a WordPress. El archivo ya va con el tamaño, el formato y el peso definitivos.

Comprimir es gratis del todo: procesar y descargar, sin cuenta y sin gastar créditos. Los archivos se borran una hora después de la descarga (un día como máximo) y no se usan para entrenar ningún modelo. Si quieres profundizar en calidad, formatos y casos concretos, tienes la guía completa sobre cómo comprimir imágenes para web sin perder calidad. Y si lo que vas a subir son fotos de producto, en fotos de producto con el móvil, sin estudio verás cómo hacerlas antes de preparar el archivo. Cuando lo tengas claro, entra en comprimir imágenes para WordPress y deja tus fotos listas.

FAQ

Seguir leyendo