Una fotografía guardada como PNG ocupa varias veces lo que debería. Una captura de texto guardada como JPEG vuelve con una pelusa gris alrededor de cada letra. Las dos son el mismo error en direcciones opuestas: el formato se eligió sin mirar lo que contiene la imagen.
Las fotografías están hechas de variación gradual y los gráficos planos de bordes duros. Los compresores se construyen para una cosa o para la otra, y ninguno lleva bien la que no le toca.
¿Qué formato para qué contenido?
Cuatro opciones cubren prácticamente todo.
| Contenido | Formato |
|---|---|
| Fotografías | JPEG o WebP |
| Capturas, texto, gráficos planos | PNG o WebP sin pérdida |
| Logotipos, iconos, diagramas | SVG |
| Cualquier cosa con transparencia | PNG, WebP o SVG |
El formato moderno hace los dos trabajos, y por eso ha sustituido en buena parte a los dos antiguos. Tiene un modo con pérdida para fotografías y otro sin pérdida para gráficos, admite transparencia en los dos, y suele ser entre un cuarto y un tercio más pequeño que JPEG con calidad comparable.
Los formatos más nuevos comprimen todavía más a costa de codificar más despacio. Para la mayoría de trabajos, lo que ahorran frente al actual aún no compensa la complicación de servir los dos.
¿Por qué el texto se ve mal en un JPEG?
Porque la compresión trabaja por bloques y da por hecho que dentro de cada uno el cambio es gradual. Un borde duro de negro a blanco es lo contrario de gradual, así que el compresor lo aproxima con una ondulación, que aparece como una neblina gris alrededor de las letras y a lo largo de cualquier límite nítido.
El efecto es peor en el texto pequeño y en las zonas planas de un solo color, que es exactamente de lo que está hecha una captura. Subir la calidad lo reduce y nunca lo elimina, y cuando por fin es aceptable el archivo ya pesa más de lo que habría pesado uno sin pérdida.
El caso contrario es más leve pero real. Una fotografía guardada sin pérdida conserva detalle que nadie ve, así que el archivo es grande sin ningún beneficio visible.
¿Cuándo es un vector la respuesta?
Cuando la imagen está hecha de formas y no de píxeles. Un logotipo, un icono o un diagrama descrito como líneas y curvas pesa muy poco, se ve perfectamente nítido a cualquier tamaño y no necesita versiones separadas para distintas densidades de pantalla.
Además es texto, así que la página puede darle estilo: un icono vectorial puede tomar el color del tema que lo rodea en lugar de necesitar una copia clara y otra oscura. Nada en mapa de bits hace eso.
No sirve para fotografías, porque una fotografía no tiene formas que describir. Intentar convertir una da un archivo enorme o una ilustración que ya no se parece al original.
¿Y la transparencia?
Hay dos tipos, y la diferencia importa. El viejo formato animado solo admite píxeles totalmente transparentes o totalmente opacos, lo que produce el halo dentado que todos conocemos de los logotipos mal recortados.
La transparencia alfa de verdad admite valores intermedios, así que los bordes se funden suavemente con lo que haya detrás. Es lo que ofrecen PNG y el formato moderno, y es lo que necesita una imagen redondeada o con forma.
JPEG no tiene transparencia. Guardar en él una imagen transparente rellena la zona transparente con un color que no elegiste, casi siempre blanco y a veces negro.
¿El formato afecta al tiempo de carga?
Mucho, y es de las mejoras más fáciles que hay. Las imágenes suelen ser lo más pesado de una página, así que pasar las fotografías a un formato moderno quita una parte apreciable del peso sin tocar nada más.
El orden de redimensionar y luego comprimir importa más que el formato, porque servir una fotografía a cuatro veces el tamaño al que se muestra desperdicia más de lo que ningún códec puede recuperar.
Hacer las dos cosas es la respuesta completa: primero las dimensiones correctas, después el formato adecuado, y la calidad ajustada a ojo y no por un número.
¿Y el archivo de origen?
Guárdalo. Todos los formatos de los que hablamos aquí son exportaciones, y volver a exportar desde un original no cuesta nada, mientras que hacerlo desde una copia comprimida acumula la pérdida.
Eso vale sobre todo para lo que se va a reutilizar a distintos tamaños o en distintos sitios. Un logotipo que solo existe como PNG pequeño hay que redibujarlo cuando alguien lo quiere grande; el mismo logotipo guardado como vector nunca.
En fotografía el equivalente es conservar lo que produjo la cámara. Ocupa más que cualquier exportación y es la única versión que no ha pasado por un compresor.
Preguntas que hace la gente
¿Un número de calidad más alto es siempre mejor? A partir de cierto punto el archivo crece y no mejora nada visible. Compara dos ajustes uno al lado del otro a tamaño real.
¿La extensión decide el formato? No. Lo deciden los bytes, y renombrar un archivo confunde al software en lugar de convertirlo.
¿Una sola imagen sirve para todos los tamaños? Un vector sí. Un mapa de bits necesita al menos una versión grande y otra pequeña para las pantallas densas.
¿WebP funciona en todas partes? En los navegadores actuales, sí. Algún software muy antiguo puede necesitar una alternativa.
¿Convertir un JPEG a WebP recupera calidad? No. El detalle perdido en la primera compresión ya no está, y el artículo sobre la compresión con pérdida explica por qué.
¿Sigo usando GIF? Solo por compatibilidad. Los formatos modernos hacen la animación mejor y en menos espacio.
¿Qué calidad pongo? Júzgalo a ojo y a tamaño real. El número correcto cambia con cada imagen.
Convierte según el contenido. JPG a WebP y PNG a WebP llevan fotografías y gráficos al formato moderno, WebP a JPG y WebP a PNG vuelven atrás cuando algo necesita el antiguo, y comprimir imágenes ajusta la calidad una vez que el formato es el correcto.