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
<picture>
<source srcset="imagen.webp" type="image/webp">
<source srcset="imagen.jpg" type="image/jpeg">
<img src="imagen.jpg" alt="Descripción" width="1200" height="800" loading="lazy">
</picture>
Impacto en Core Web Vitals
- WebP mejora el LCP al reducir el peso de la imagen principal.
- Define siempre
widthyheightpara evitar CLS. - Aplica
loading="lazy"a imágenes bajo el fold.
Conversión a WebP
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.
Casos de uso avanzados
Optimización web a escala: sitios e-commerce con miles de productos pueden reducir bandwidth costs 60-80% migrando de JPG a AVIF o WebP. Cloudflare Images, Imgix y Cloudinary ofrecen transformación on-the-fly basada en Accept header del cliente — sirviendo AVIF a Chrome/Edge modernos, WebP a Safari/Firefox, JPG fallback a navegadores legacy. Print-ready output: convertir RGB a CMYK con perfil ICC (US Web Coated SWOP v2 para offset comercial, FOGRA39 para europeo) garantiza que los colores impresos coincidan con preview en pantalla calibrada. PDFs/X-1a y X-4 son los formatos exigidos por imprentas profesionales. Foto profesional: workflow Adobe consiste en RAW (input cámara) → DNG (archivado) → PSD (edición no-destructiva) → TIFF (deliverable) → JPG/WebP (web/social). Cada etapa preserva diferentes capacidades. Vector graphics: SVG es preferido para logos, iconos, ilustraciones planas — escala infinitamente sin pérdida y se anima con CSS/JavaScript. Para UIs modernas, los icon fonts (Font Awesome) están siendo reemplazados por SVG sprites por mejor accesibilidad y customización.
Mejores prácticas y consejos profesionales
Selección de formato según contenido: fotografías → JPG (calidad 85-95) o WebP (calidad 80-90); gráficos con texto/líneas finas → PNG o WebP lossless; ilustraciones planas → SVG; iconos UI → SVG; screenshots → PNG; HDR → AVIF o JPEG XL. Color profile management: siempre embebe el perfil ICC en archivos profesionales (Adobe RGB para fotografía pre-impresión, sRGB para web, Display P3 para Apple ecosystem). Sin perfil embedded, los visualizadores asumen sRGB que puede causar shifts de color visibles. Resolución vs tamaño: para web display, 72 DPI es suficiente; para impresión profesional, 300 DPI mínimo. Lazy loading + responsive images: combina <img loading="lazy" srcset> con AVIF/WebP fallback chain para bandwidth saving sin sacrificar UX. Metadata privacy: archivos JPG de smartphone contienen GPS, modelo de cámara, fecha exacta — usa exiftool -all= para limpiar antes de subir a redes sociales si privacidad importa.
Compatibilidad y consideraciones técnicas
KaijuConverter soporta más de 30 formatos de imagen (JPG, PNG, WebP, AVIF, HEIC/HEIF, GIF, BMP, TIFF, SVG, ICO, PSD, RAW múltiples vendors, JPEG XL) usando ImageMagick 7.x, libvips, y format-specific libraries (libpng, libjpeg-turbo, libwebp, libavif, librsvg). Procesamos imágenes hasta 100 MB con resoluciones hasta 16384×16384 píxeles y profundidades de 8/10/12/16-bit por canal. EXIF y metadata: leemos toda la información embedded (cámara, lente, GPS, datos de captura, ICC profile) y la migramos al output cuando el formato destino lo soporta — crítico para workflows profesionales que dependen de provenance tracking. HDR: soportamos PQ y HLG transfer functions para AVIF/JPEG XL/HEIC HDR (rec.2020 color space). Performance: una conversión típica JPG→WebP de 5 MB tarda 1-3 segundos; HEIC→JPG de iPhone 12 Mpix tarda 2-5 segundos; PSD multi-layer→PNG flat puede requerir 5-15 segundos según complejidad. Privacidad: cifrado TLS 1.3, contenedores Docker aislados, eliminación automática tras 2 horas con multi-pass overwrite.
Conversiones relacionadas
Lo más habitual al trabajar con imágenes son estas direcciones de conversión: