¿PNG o JPG para las imágenes de un sitio web?

Elegir formato es una decisión de velocidad

En las imágenes de un sitio web, la elección de formato no es una cuestión estética, sino de rendimiento. La imagen que ve el visitante suele ser idéntica en ambos formatos; la diferencia está en cuántos bytes hay que descargar para que esa imagen llegue al navegador. Si una página contiene decenas de imágenes, una elección equivocada de formato puede multiplicar innecesariamente el peso de la página.

En este artículo comparamos PNG y JPG en el contexto web: qué contenido gana con cada uno, qué preguntas debes hacerte al decidir y a qué prestar atención al hacer conversiones masivas.

Primero, la pregunta eliminatoria: ¿necesita transparencia?

Antes de empezar la comparación hay una única pregunta que debes responder. ¿El fondo de la imagen tiene que ser transparente?

Si la respuesta es sí, la decisión está tomada: JPG no es una opción. En la estructura del formato JPG no existe un componente llamado canal alfa. Al guardar una imagen transparente como JPG, las zonas transparentes se rellenan de forma permanente con un color plano, normalmente blanco. Tu logotipo, colocado sobre un fondo de color, queda de pronto encerrado dentro de un rectángulo blanco.

Si la respuesta es no, la comparación cobra sentido y la decisión se toma según el tipo de contenido.

El tipo de contenido: el factor determinante

Con contenido fotográfico, JPG gana con claridad. Un paisaje, un retrato, una foto de producto, una escena concurrida: en este tipo de imágenes casi cada píxel es distinto de su vecino. La compresión sin pérdidas de PNG queda ineficiente porque no encuentra patrones repetidos. La versión PNG de una misma fotografía puede ser varias veces la versión JPG y, con un ajuste de calidad razonable, la diferencia visible es prácticamente nula. Usar PNG para la portada de un artículo, una foto de equipo o una toma de producto es cargar la página sin ofrecer ninguna ventaja al visitante.

Con contenido gráfico y de texto, gana PNG. Una captura de pantalla, un diseño de interfaz, una tabla, un diagrama, un gráfico de líneas o un logotipo sobre fondo plano contienen amplias zonas de un solo color. PNG las empaqueta con mucha eficiencia. JPG, en cambio, pierde por partida doble con este contenido: genera halos alrededor de los bordes nítidos y pérdida de legibilidad en el texto y, además, como los bordes nítidos son de alta frecuencia, la eficiencia de compresión cae, de modo que a veces se ve peor y produce un archivo más grande.

Los casos intermedios. Algunas imágenes son una mezcla de ambos: una fotografía con texto superpuesto, o una infografía que incluye fotografías. Aquí la regla práctica es esta: decide según el carácter dominante de la imagen. Si la fotografía ocupa la mayor parte de la superficie, JPG; si la mayor parte la ocupan fondos planos y texto, PNG.

Cuánto importa realmente la diferencia de tamaño

El peso de la página influye directamente en el tiempo de carga, y el tiempo de carga en que el visitante se quede o no. En conexiones móviles, sobre todo, esa diferencia se hace perceptible.

La cuestión de fondo aquí no es el tamaño de una imagen concreta, sino el total. Si una página de listado de productos contiene veinte fotos, cada elección de formato equivocada se multiplica por veinte. Por eso resulta mucho más eficiente tomar la decisión de formato no imagen por imagen, sino por categoría de imagen: una regla como "todas las fotos de producto en JPG, todos los iconos de interfaz en PNG" aporta coherencia y elimina la fatiga de decisión.

Errores que hay que evitar al convertir

Convertir en masa y sin distinguir. Seleccionar todos los PNG de una carpeta y pasarlos a JPG es el error más frecuente. Los logotipos transparentes que hay entre ellos se convierten en silencio en cajas blancas, y normalmente te das cuenta después de que el sitio esté publicado. Separa los archivos con transparencia antes de convertir.

Volver a comprimir una imagen ya comprimida. Si el PNG que tienes en las manos se generó en realidad a partir de un JPG, convertirlo de nuevo a JPG añade una segunda ronda con pérdidas. Siempre que sea posible, trabaja a partir del archivo de origen original.

Elegir el ajuste de calidad a ciegas. Si subes demasiado el ajuste de calidad JPG, pierdes la ganancia de tamaño; si lo bajas demasiado, aparece una degradación visible. Después de convertir, amplía el resultado al cien por cien y fíjate sobre todo en las transiciones de color plano y en los bordes nítidos.

Olvidar que no hay vuelta atrás. El paso de PNG a JPG es de un solo sentido. La transparencia perdida y el detalle descartado no vuelven; convertir el JPG de nuevo a PNG solo guarda sin pérdidas su estado actual. Por eso no borres los PNG originales, guárdalos en algún lugar. Puedes usar la herramienta de conversión de PNG a JPG para convertir tus archivos.

Un flujo de decisión práctico

Para cada imagen, pregúntate en orden lo siguiente: ¿necesita transparencia? Si sí, PNG, decisión terminada. Si no: ¿el contenido es una fotografía? Si sí, JPG. ¿No, es texto o un gráfico de bordes nítidos? Entonces PNG. Si es una mezcla, mira el carácter dominante.

Este flujo de tres pasos acierta con la gran mayoría de las imágenes web y evita tener que darle muchas vueltas.

En resumen

PNG y JPG no son rivales, sino herramientas diseñadas para trabajos distintos. En fotografías, JPG es claramente más eficiente y no genera una pérdida de calidad visible. En todos los casos que requieren transparencia y en las imágenes con contenido de texto o gráfico, PNG es la elección correcta. Si de verdad quieres mejorar la velocidad de tu sitio, el trabajo no consiste en forzar todas las imágenes a un único formato, sino en colocar cada imagen en el formato que corresponde a su tipo de contenido.