PNG vs JPG: qué formato elegir y cuándo pasar a WebP

PNG y JPG llevan décadas conviviendo en cualquier proyecto, y elegir mal cuesta doble: pagas en peso de archivo y en calidad. La regla corta es así — JPG para fotografías, PNG para gráficos con texto, iconos y transparencias — pero los matices importan, y en el mundo real casi todo lo que sirve para una web termina convirtiéndose a WebP.

La diferencia fundamental: pérdida

El JPG usa compresión con pérdida: descarta información que el ojo percibe poco para reducir drásticamente el tamaño. Cada vez que guardas un JPG, pierde un poco más de calidad (el llamado artefacto de compresión).

El PNG usa compresión sin pérdida: el píxel que entró es el que sale, exactamente igual. El precio es un archivo más pesado, especialmente en fotografías.

Comparativa directa

• Fotografías: JPG gana sin discusión. Un JPG de 300 KB puede necesitar 2-3 MB en PNG con apariencia idéntica.
• Texto e interfaz: PNG gana: los bordes de las letras quedan nítidos; en JPG aparecen halos alrededor del texto.
• Transparencia: solo PNG (y WebP). El JPG rellena el fondo de blanco.
• Iconos y logos: PNG; pero en WebP sin pérdida suelen ser aún más ligeros.
• Capturas de pantalla: PNG para texto fino; si el peso importa, WebP al 90% es una buena alternativa.
• Iteración: evitar guardar varias veces el JPG; cada guardado acumula pérdida.

¿Y si el destino es una web?

Para web, ambos formatos tienen un sucesor mejor: WebP ofrece compresión igual o mejor que JPG con soporte de transparencia, y el modo sin pérdida compite con el PNG en gráficos. En la práctica:

• Fotografías JPG → conviértelas con calidad 80% (mira la guía de JPG a WebP).
• Gráficos y iconos PNG → conviértelos sin pérdida o con calidad alta (mira la guía de PNG a WebP).
• Conserva siempre el archivo original: WebP es para entrega, no para archivo.

Errores comunes con PNG y JPG

• Guardar fotos en PNG «por si acaso»: infla el peso sin aportar calidad visible.
• Guardar iconos en JPG: la compresión añade fondo blanco y borroso a los bordes.
• Recortar y reexportar el JPG muchas veces: acumula pérdida; guarda siempre desde el máster.
• No declarar dimensiones: tanto PNG como JPG deben llevar width y height en el HTML para evitar saltos de layout.

Si te interesa el siguiente escalón de compresión, compara WebP vs AVIF, y para elegir dimensiones y pesos concretos consulta nuestra guía de tamaño de imágenes para web.