JPEG, PNG, WebP, AVIF: Elige el Formato de Imagen Correcto
Cada formato tiene compensaciones. Así es como elegir el correcto para tus imágenes.
Exportas una imagen. Las opciones son JPEG, PNG, WebP, GIF, AVIF, SVG y más.
Todos producen imágenes. No son intercambiables.
JPEG: El Estándar para Fotos
Mejor para: Fotografías, imágenes complejas con degradados, cualquier cosa con muchos colores.
Evitar para: Texto, logos, capturas de pantalla, cualquier cosa con bordes afilados.
JPEG usa compresión con pérdida. Descarta datos que probablemente no notarás en fotos. Pero tiene problemas con bordes afilados: el texto se ve borroso, los logos obtienen artefactos.
La configuración de calidad importa. 80-85% es usualmente el punto ideal. Por debajo de 60%, los artefactos de compresión se vuelven obvios.
PNG: Bordes Nítidos y Transparencia
Mejor para: Capturas de pantalla, logos, gráficos con texto, imágenes que necesitan transparencia.
Evitar para: Fotografías grandes (los archivos se vuelven enormes).
PNG usa compresión sin pérdida. Cada píxel se preserva exactamente. Genial para bordes afilados, terrible para el tamaño de archivo en imágenes complejas.
PNG-8 (256 colores) vs PNG-24 (millones de colores). Usa 8 cuando puedas salirte con la tuya.
WebP: El Compromiso Moderno
Mejor para: Casi todo en la web.
Evitar para: Cuando necesitas máxima compatibilidad con navegadores antiguos.
WebP hace compresión con pérdida y sin pérdida, a menudo 25-35% más pequeño que JPEG o PNG a la misma calidad.
El soporte del navegador es excelente ahora. Usa WebP con respaldo JPEG/PNG para navegadores antiguos.
AVIF: Más Nuevo y Más Pequeño
Mejor para: Máxima compresión con buena calidad.
Evitar para: Requisitos de soporte del navegador, preocupaciones de velocidad de codificación.
AVIF logra incluso mejor compresión que WebP. Pero la codificación es más lenta y el soporte del navegador aún está creciendo.
Si puedes generar formatos con anticipación (sitios estáticos), usa AVIF con respaldos.
GIF: Imágenes en Movimiento, Colores Limitados
Mejor para: Animaciones simples, gráficos muy simples.
Evitar para: Fotos (límite de 256 colores), animaciones grandes (archivos enormes).
El soporte de animación de GIF lo mantiene vivo. Pero 256 colores máximo significa que las fotos se ven terribles.
Para animaciones, video MP4 o WebM es a menudo más pequeño y mejor calidad.
SVG: Gráficos Vectoriales
Mejor para: Íconos, logos, ilustraciones, cualquier cosa que necesite escalar.
Evitar para: Fotografías, imágenes complejas.
SVG no es un formato de mapa de bits. Es XML describiendo formas. Escala a cualquier tamaño sin pérdida de calidad.
Para íconos y logos, SVG es casi siempre la elección correcta.
Guía Rápida de Decisión
| Tipo de Contenido | Formato | |-------------------|---------| | Foto para web | WebP (respaldo JPEG) | | Captura de pantalla | PNG | | Logo/ícono | SVG | | Animación simple | GIF o WebP animado | | Animación compleja | Video MP4/WebM | | Archivo de máxima calidad | PNG |
Errores Comunes
PNG para todas las fotos. Un PNG de 10MB podría ser un JPEG de 500KB sin diferencia visible.
JPEG para capturas de pantalla. El texto se vuelve borroso. Usa PNG.
No usar WebP en 2026. El soporte del navegador es excelente. Úsalo.
Guardar JPEG repetidamente. Cada guardado agrega artefactos de compresión. Mantén archivos fuente y exporta una vez.
La elección de formato es específica de la imagen. Las fotos son JPEG/WebP. Los gráficos son PNG/SVG. Entiende las compensaciones y elige en consecuencia.