JPEG vs PNG vs WebP — Elegir el formato de imagen correcto y cuándo convertir

Hace unos años hacía una auditoría de rendimiento en un sitio de pequeña empresa. La causa de los malos puntajes de Lighthouse era inmediatamente obvia: once imágenes en la página de inicio, todas PNG, todas fotografías de productos. La más grande era 4,2 MB. Solo la imagen héroe era 2,8 MB.

Nadie había hecho algo mal deliberadamente. Las fotos se exportaron desde una herramienta de diseño que usaba PNG por defecto, y nadie lo cuestionó porque las imágenes se veían bien. Se veían bien. Pero convertirlas a JPEG al 80% de calidad las habría hecho visualmente indistinguibles para cualquier ojo humano, reduciendo la carga total de imágenes de aproximadamente 18 MB a aproximadamente 2,5 MB.

Este tipo de problema está en todas partes en la web, y es completamente solucionable una vez que entiendes qué hace realmente cada formato.

JPEG: El caballo de batalla para fotografías

JPEG existe desde 1992 y sigue siendo el formato de imagen más usado en internet. La razón por la que ha durado tanto es que está genuinamente bien adaptado a su propósito: comprimir fotografías.

Las fotografías tienen variación de tono continua — gradientes suaves de color y luz que se funden entre sí. La compresión JPEG explota esto descartando detalles de alta frecuencia a los que el sistema visual humano es relativamente poco sensible.

Cuándo JPEG funciona bien:

• Fotos de productos, fotografía editorial, imágenes héroe
• Cualquier imagen con gradientes suaves y variación de color natural
• Subidas a redes sociales, adjuntos de email, donde el tamaño del archivo importa

Cuándo JPEG falla:

• Imágenes con bordes nítidos y texto (logos, capturas de pantalla, diagramas) — la compresión crea artefactos de "ringing" visibles alrededor de bordes de alto contraste
• Imágenes que requieren transparencia — JPEG no tiene canal alfa
• Imágenes que serán editadas repetidamente — cada guardado introduce pérdida de calidad adicional

La regla del 80%: Por debajo de 70-75%, los artefactos JPEG empiezan a ser visibles en la mayoría de fotografías. Por encima de 85-90%, el tamaño del archivo crece significativamente con mínimo beneficio visual. El rango 75-85% es el punto óptimo.

PNG: Para cuando los píxeles deben ser exactos

PNG fue creado a mediados de los 90 en parte como alternativa libre de patentes a GIF. Usa compresión sin pérdidas — cada píxel en un PNG se preserva exactamente.

Cuándo PNG es la elección correcta:

• Capturas de pantalla de interfaces, código o texto
• Logos e iconos con colores planos y bordes nítidos
• Cualquier imagen que requiera transparencia (PNG soporta canal alfa completo)
• Imágenes para edición posterior — sin pérdida generacional
• Pixel art y diagramas

Cuándo PNG es la elección incorrecta:

• Fotografías. Un PNG de una fotografía es casi siempre 3 a 5 veces más grande que un JPEG equivalente sin diferencia de calidad visible. Ese fue el error del inicio.

WebP: El formato que debería ser tu estándar ahora

WebP fue desarrollado por Google y publicado en 2010. Safari no añadió soporte hasta 2020, pero desde 2021 todos los navegadores principales soportan WebP. El problema de "compatibilidad de navegadores" está prácticamente resuelto.

WebP soporta:

• Compresión con pérdidas (como JPEG, pero tipicamente 25-35% más pequeño a calidad equivalente)
• Compresión sin pérdidas (como PNG, pero tipicamente 26% más pequeño)
• Transparencia (canal alfa en modos lossy y lossless)
• Animación

En la práctica, WebP es una mejora estricta sobre JPEG para la mayoría del contenido fotográfico. Misma imagen, archivo más pequeño, calidad equivalente.

La advertencia: Algunas plataformas CMS antiguas, clientes de email y herramientas de diseño todavía tienen soporte limitado de WebP. Al preparar imágenes para newsletters, vale la pena confirmar que tu plataforma de email maneja WebP.

Escenarios de conversión

PNG a JPEG: La conversión más común y de mayor impacto. Convertir fotos de productos o héroe almacenadas como PNG a JPEG al 80% de calidad típicamente reduce el tamaño del archivo un 60-80% sin pérdida de calidad visible. Lo único que se pierde es la transparencia — si el PNG usa canal alfa, hay que rellenar con un color de fondo antes de convertir a JPEG.

PNG a WebP: Lo mejor de ambos mundos. Soporte de transparencia como PNG y tamaños de archivo más pequeños que JPEG.

JPEG a WebP: Una optimización rutinaria sólida. Los archivos JPEG existentes pueden re-servirse como WebP para visitantes en navegadores modernos, ahorrando 25-35% de ancho de banda.

WebP a JPEG o PNG: Cuando se necesita enviar imágenes a plataformas o herramientas que no aceptan WebP.

Usando el convertidor de formato de imagen en ToolboxHubs

El convertidor de formato de imagen funciona completamente en el navegador usando la API Canvas:

1. Subir imagen — Arrastrar y soltar o hacer clic para seleccionar. Se aceptan JPEG, PNG, WebP y GIF como entrada.
2. Elegir formato de salida — Seleccionar JPEG, PNG o WebP del menú desplegable.
3. Establecer calidad — Para salida JPEG y WebP con pérdidas, hay un slider de calidad (predeterminado 80%). La salida PNG sin pérdidas no tiene configuración de calidad.
4. Convertir y descargar — Hacer clic en convertir y descargar el resultado.

La vista previa se actualiza al cambiar configuraciones de calidad para ver el compromiso antes de descargar.

Limitaciones a conocer: Los GIFs animados se convierten como imagen fija (primer frame). Los SVGs no están soportados como entrada.

Qué significan los ajustes de calidad

El porcentaje de calidad no es una medida directa de algo objetivo — es un parámetro de compresión que controla cuán agresivamente el encoder descarta información:

• 90-100%: Casi sin pérdidas. Archivos grandes. Para imágenes que serán editadas o impresas.
• 75-85%: El punto óptimo web estándar. El rango correcto para casi todas las imágenes web.
• 60-75%: Archivos notablemente más pequeños. Artefactos pueden ser visibles en áreas de alto contraste.
• Por debajo de 60%: Pixelización y desenfoque visibles.

El impacto en el rendimiento es real

Para dar una idea concreta de la escala: una página de destino típica con muchas fotos y PNGs sin optimizar puede tener 15-25 MB de datos de imagen. Convertir a WebP al 80% de calidad puede reducirlo a 2-4 MB. A 10 Mbps de ancho de banda móvil promedio, eso es la diferencia entre 12-20 segundos y 1,6-3,2 segundos de tiempo de carga de imágenes. Esos números afectan directamente la tasa de rebote.

Los Core Web Vitals de Google — específicamente Largest Contentful Paint (LCP) — están fuertemente influenciados por el tamaño de las imágenes. Si el elemento LCP es una imagen (que generalmente lo es), el formato y la compresión de esa imagen son uno de los palancas más directas en tu puntuación de rendimiento.

Herramientas relacionadas

Compresor de imágenes — Para reducir el tamaño del archivo sin cambiar el formato.

Redimensionador de imágenes — ¿Sirves una imagen de 3000px escalada a 400px en el navegador? Redimensionar antes de servir es tan importante como la elección de formato.

En conclusión

La regla simple de decisión: Fotos web → JPEG o WebP. Imágenes con transparencia → WebP (o PNG para entornos antiguos). Logos, capturas de pantalla, imágenes con texto → PNG. Comenzar el slider de calidad en 80% y ajustar solo si hay problemas específicos.

El convertidor de formato de imagen se encarga de la conversión. La decisión de qué formato elegir, este artículo la ha asumido.