Cada formato de imagen es un conjunto de compromisos entre tamaño de archivo, calidad y funciones como la transparencia o la animación. Elige el equivocado y obtendrás archivos hinchados, texto borroso o gráficos que no se muestran. Aquí tienes cada uno de los formatos habituales en términos claros, seguido de una tabla que puedes tener a mano.
Las dos grandes familias
Antes de los formatos individuales, una distinción explica la mayoría de ellos:
- Las imágenes rasterizadas son cuadrículas de píxeles. Las fotos son raster. Amplía lo suficiente y verás cuadraditos. PNG, JPG, WebP, AVIF y GIF son todos raster.
- Las imágenes vectoriales son matemáticas: líneas, curvas y formas definidas por coordenadas. Escalan a cualquier tamaño sin volverse borrosas. SVG es el formato vectorial de la web.
La otra idea clave es con pérdida frente a sin pérdida. Los formatos con pérdida (JPG, normalmente AVIF/WebP) descartan algo de detalle para encoger el archivo. Los formatos sin pérdida (PNG, GIF, WebP sin pérdida) conservan cada píxel exactamente.
Los formatos, uno a uno
JPG (JPEG): el caballo de batalla para las fotografías. Con pérdida, pequeño y legible literalmente en todas partes. Sin transparencia, sin animación. Volver a guardarlo una y otra vez lo degrada poco a poco. Úsalo para fotos y para cualquier sitio que necesite máxima compatibilidad.
PNG: sin pérdida, admite transparencia. La opción correcta para capturas de pantalla, logotipos, iconos y diagramas; cualquier cosa con texto o bordes duros. Las fotos en PNG son grandes, así que no lo uses para eso.
WebP: un formato moderno que hace ambos trabajos: el modo con pérdida supera a JPG en tamaño (~25-35 % más pequeño), el modo sin pérdida admite transparencia y se mantiene compacto. También maneja animación. Hoy tiene soporte universal en los navegadores. Ideal para la web; menos para el correo o el software antiguo.
AVIF: el compresor más nuevo y mejor de esta lista, en torno a la mitad del tamaño de JPEG con calidad similar, con transparencia y HDR. Los navegadores pueden mostrarlo bien, pero no pueden codificarlo de forma fiable desde un canvas, así que las herramientas de navegador recurren a WebP cuando pides AVIF. La codificación AVIF de verdad necesita un servidor o una aplicación nativa.
GIF: antiguo, limitado a 256 colores, pero el clásico para animación simple. Para cualquier cosa que vaya más allá de un bucle corto, WebP (o un vídeo) es más pequeño y más nítido. Bien para iconos animados diminutos; malo para fotos.
SVG: vectorial, así que escala infinitamente sin desenfoque y se mantiene minúsculo para gráficos simples. Perfecto para logotipos, iconos e ilustraciones. Es código, no píxeles, así que no puede representar una fotografía.
Tabla comparativa
| Formato | Tipo | Compresión | Transparencia | Animación | Ideal para |
|---|---|---|---|---|---|
| JPG | Raster | Con pérdida | No | No | Fotos, máxima compatibilidad |
| PNG | Raster | Sin pérdida | Sí | No | Capturas, logotipos, texto |
| WebP | Raster | Ambas | Sí | Sí | Imágenes web, pequeñas + alfa |
| AVIF | Raster | Con/sin pérdida | Sí | Sí | Máxima compresión (en servidor) |
| GIF | Raster | Sin pérdida | Solo 1 bit | Sí | Animaciones simples |
| SVG | Vectorial | N/D | Sí | Sí (con CSS/JS) | Logotipos, iconos, ilustraciones |
Cómo elegir, rápido
- ¿Fotografía? JPG por compatibilidad, WebP para la web.
- ¿Captura de pantalla, logotipo o texto? PNG (raster) o SVG (si es un gráfico vectorial de verdad).
- ¿Necesitas transparencia? PNG, WebP, AVIF o SVG; nunca JPG.
- ¿Animación? WebP por calidad y tamaño, GIF solo por simplicidad heredada.
- ¿Publicas en una web? WebP suele ser la opción inteligente por defecto.
Convertir entre ellos
Cuando tienes el formato equivocado, no necesitas subir nada para arreglarlo. El conversor de imágenes cambia entre PNG, JPG y WebP directamente en tu navegador con Canvas: sin cuenta, nada se transmite, y funciona sin conexión tras la primera visita. Maneja lotes, y si pides AVIF recurre a WebP (más pequeño que JPG/PNG y compatible en todas partes) ya que los navegadores no pueden codificar AVIF de forma fiable.
Ten presente la tabla anterior y la elección de formato deja de ser adivinanza: haz coincidir el formato con el contenido (foto frente a gráfico) y luego con el destino (web, correo, impresión), y acertarás casi siempre.