Convertidor de imágenes Convertidor de vídeo Convertidor de audio Convertidor de documentos
Precios Guías Formatos API
Iniciar sesión
🇬🇧 Switch to English
Guía

PNG vs JPEG vs WebP: comparativa completa de formatos de imagen web

## Los tres formatos dominantes de imagen web Elegir entre PNG, JPEG y WebP es una de las decisiones más frecuentes en diseño web. Usarlos incorrectamente puede duplicar el peso de tu página sin ninguna mejora visible. ## JPEG Compresión con pérdida, sin transparencia. Ideal para fotografías e imágenes con gradientes suaves. Rango de calidad 0-100; entre 75-85 es el punto óptimo para web. **Úsalo:** fotografías de productos, paisajes, blog. **Evítalo:** logotipos con texto nítido, fondos transparentes. ## PNG Compresión sin pérdida, transparencia completa (alfa 8 bits). PNG-8: hasta 256 colores. PNG-24: millones de colores. **Úsalo:** logotipos, iconos, capturas de UI, fondos transparentes. **Evítalo:** fotografías de alta resolución (más pesado que JPEG). ## WebP Compresión lossy Y lossless, transparencia y animaciones. ~25-34% más pequeño que JPEG equivalente en modo lossy; ~26% más pequeño que PNG en lossless. Compatible con todos los navegadores modernos (Chrome, Firefox, Safari 14+, Edge). **Úsalo:** prácticamente cualquier contexto web moderno. **Evítalo:** email marketing (Outlook no lo soporta). ## Comparativa de tamaño (1200×800 px) | Imagen | JPEG (q=80) | PNG | WebP lossy | WebP lossless | |--------|-------------|-----|-----------|--------------| | Paisaje fotográfico | 245 KB | 1.2 MB | 180 KB | 890 KB | | Logotipo fondo blanco | 42 KB | 28 KB | 18 KB | 22 KB | | Captura de pantalla UI | 380 KB | 210 KB | 290 KB | 160 KB | ## Implementación responsive ```html Descripción ``` ## Impacto en Core Web Vitals - WebP mejora el LCP al reducir el peso de la imagen principal. - Define siempre `width` y `height` para evitar CLS. - Aplica `loading="lazy"` a imágenes bajo el fold. ## Conversión a WebP ```bash cwebp -q 80 imagen.jpg -o imagen.webp cwebp -lossless imagen.png -o imagen.webp ``` ## Conclusión **JPEG** para fotografías. **PNG** para gráficos con transparencia. **WebP** para todo lo demás en web moderna. La migración a WebP reduce el peso de imagen un 25-35% de media.