JPG, PNG o WebP: cuál usar y cómo reducir el peso de una imagen

A veces el formulario de un trámite pide “JPG de 500 KB como máximo”, o te avisan de que la foto que has subido a tu blog pesa demasiado. Parece que basta con cambiar de formato, pero, si eliges mal, el archivo puede acabar pesando incluso más. Este artículo explica las diferencias entre JPG, PNG y WebP, cómo elegir el formato que mejor encaja con cada imagen y en qué orden conviene reducir el tamaño hasta llegar al objetivo.

Los tres formatos comprimen y tratan la transparencia de forma distinta

Formato	Compresión	Fondo transparente	Imagen animada	Mejor para
JPG	Con pérdida	No admite	No admite	Fotos
PNG	Sin pérdida	Admite	El PNG básico no admite	Capturas de pantalla, tablas y logotipos, es decir, imágenes con líneas y texto nítidos
WebP	Con y sin pérdida	Admite	Admite	Tanto fotos como gráficos

La compresión con pérdida reduce el tamaño descartando información que el ojo apenas nota. En las fotos es muy eficaz, pero en imágenes con bordes marcados, como texto o líneas, es fácil que los contornos se vean borrosos o aparezcan manchas.
La compresión sin pérdida guarda la imagen de modo que se pueden recuperar los píxeles originales. La calidad no cambia, pero en imágenes de colores complejos, como las fotos, el archivo resulta más grande.
WebP puede usar ambos métodos. Google indica que, con la misma calidad, el WebP con pérdida es entre un 25 % y un 34 % más pequeño que el JPG, y el WebP sin pérdida, un 26 % más pequeño que el PNG. Aun así, el resultado varía según la imagen.

Elegir el formato según el tipo de imagen

Fotos: usa JPG o WebP. Si las guardas en PNG, la calidad será la misma, pero el archivo puede pesar varias veces más.
Capturas de pantalla, tablas e imágenes con mucho texto: es mejor PNG o WebP sin pérdida. En JPG, el texto se ve difuminado alrededor de las letras.
Logotipos o firmas que necesitan fondo transparente: usa PNG o WebP. El JPG no puede guardar transparencia, así que las zonas transparentes se rellenan con un color liso, por ejemplo blanco.
Iconos, logotipos o diagramas hechos con formas sencillas: si puedes, usa SVG. Es un formato vectorial que no guarda píxeles, sino líneas y formas, así que no se pixela al ampliarlo y pesa muy poco. No sirve para imágenes de colores complejos como las fotos.
Cuando quien recibe el archivo exige un formato: respeta ese formato. La mayoría de los navegadores recientes admiten WebP, pero algunos programas antiguos o ciertos sistemas de envío pueden no aceptarlo.

Un ejemplo real: este sitio publicó al principio en PNG las ilustraciones de las páginas de herramientas y después las pasó a WebP y SVG. Con las 61 imágenes de muchos colores y degradados pasadas a WebP, el total bajó de unos 36 MB a unos 2,7 MB (un 92 % menos). Algunas imágenes que pesaban más de 1 MB cada una quedaron en unos 100 KB. Las ilustraciones de las herramientas de imagen, dibujadas con formas sencillas, se hicieron en SVG: donde el PNG pesaba 34 KB, el SVG no llegaba a 1 KB. Si eliges para cada imagen el formato que le corresponde, casi no cambia lo que se ve en pantalla, pero el peso se reduce mucho.

Cuando cambiar de formato no reduce el peso

Convertir el formato supone volver a comprimir la imagen con otro método; no sirve para reducir el peso. En estos casos el archivo crece o solo pierde calidad:

Pasar una foto JPG a PNG suele aumentar el tamaño, porque la compresión sin pérdida no reduce bien los colores complejos de una foto.
Volver a guardar como JPG un JPG ya muy comprimido añade otra pérdida. El archivo pesa algo menos, pero la calidad empeora respecto a la original y la información descartada no se recupera.
Convertir a PNG una imagen de baja calidad no la mejora. El formato no devuelve la información que ya se perdió.

Si tu objetivo es reducir el peso, lo más seguro es ajustar primero estos dos factores, antes que el formato.

Dos formas de reducir el peso: calidad y número de píxeles

La calidad es el valor que decide cuánta información se descarta en la compresión con pérdida. Cuando el navegador genera la imagen, se indica con un valor entre 0 y 1, y solo se aplica a formatos con compresión con pérdida, como JPG y WebP. El PNG no tiene valor de calidad. Bajar un poco la calidad suele reducir mucho el peso sin diferencias apreciables, pero si la bajas demasiado, los bordes se deshacen y aparecen manchas.

El número de píxeles es el ancho × alto de la imagen. Si reduces a la mitad tanto el ancho como el alto, los píxeles se quedan en una cuarta parte, así que el peso baja mucho. Para una imagen que se va a ver en pantalla o a insertar en un documento, rara vez hace falta la resolución original de la cámara del móvil.

Para llegar a un tamaño objetivo, suele funcionar bien este orden:

Elige el formato que encaje con la imagen: JPG o WebP para fotos, PNG para gráficos.
Si la imagen tiene muchos más píxeles de los que vas a usar, reduce primero el ancho y el alto al tamaño real de uso.
En JPG o WebP, ve bajando la calidad hasta encontrar la más alta que cabe en el tamaño objetivo.
Si aun bajando la calidad no llegas al objetivo, reduce un poco más los píxeles. En PNG, que no tiene valor de calidad, esta es la única opción.

Comprueba si 1 KB son 1000 o 1024 bytes

Cuando se dice “500 KB como máximo”, unos sitios cuentan 1 KB como 1000 bytes y otros como 1024 bytes. La diferencia es pequeña, un 2,4 %, pero si guardas el archivo justo en el límite, según el criterio que se aplique, puede pasarse del límite. Si no conoces el criterio de quien recibe el archivo, es más seguro fijar un tamaño objetivo algo por debajo del límite.

Qué revisar después de reducir

Guarda el original aparte. Una imagen reducida o recomprimida no se puede devolver a su calidad original.
Comprueba el resultado a tamaño real. En una miniatura puede verse bien, pero al verla grande el texto puede estar borroso o haber manchas.
Si había zonas transparentes, revisa el formato. Al guardar como JPG, el fondo transparente pasa a ser de un color liso.
Puede perderse información de la foto. Cuando el navegador vuelve a dibujar y guardar la imagen, los metadatos, como la fecha o la ubicación de la toma, normalmente no se conservan. Es una ventaja si quieres borrarlos, pero si necesitas conservarlos, usa el original.