Los formatos de imagen explicados: PNG, JPG, GIF, WebP, SVG

Elegir el formato de imagen correcto es una de las formas más fáciles de hacer una página más rápida y nítida. Elige mal y tendrás un logo borroso o una foto que pesa cinco veces lo que debería. Aquí está en qué es bueno cada formato común, para que puedas emparejar el formato con la imagen.

Las dos familias

Primero, una distinción que explica todo lo demás. Los formatos ráster (PNG, JPG, GIF, WebP) almacenan una cuadrícula de píxeles, así que se emborronan o pixelan al ampliarlos. Los formatos vectoriales (SVG) almacenan formas como matemáticas, así que se mantienen nítidos como una cuchilla a cualquier tamaño. Las fotos son siempre ráster; los logos e iconos son mejores como vector.

Los formatos

JPG / JPEG

Compresión con pérdidas creada para fotografías. Excelente tamaño para contenido fotográfico, admitido en todas partes, pero sin transparencia y con artefactos visibles si se comprime en exceso. El predeterminado para fotos cuando WebP no es una opción.

PNG

Sin pérdidas, con transparencia. Perfecto para logos, iconos, capturas de pantalla y cualquier cosa con bordes nítidos, texto o color plano. Como es sin pérdidas, las fotografías guardadas como PNG salen grandes.

GIF

Un formato antiguo limitado a 256 colores, hoy usado casi exclusivamente para animaciones simples. Para imágenes estáticas lo supera PNG; para animación, los formatos modernos (WebP animado o vídeo) son más pequeños y de mayor calidad.

WebP

Un formato moderno que lo hace todo: con o sin pérdidas, con transparencia y animación. Suele producir archivos un 25–35 % más pequeños que JPG o PNG con la misma calidad visual, y todos los navegadores actuales lo admiten. Para la mayoría de las imágenes web de hoy, WebP es el mejor predeterminado.

SVG

Gráficos vectoriales definidos como XML. Ideales para logos, iconos e ilustraciones — infinitamente escalables, diminutos para formas simples y con estilo aplicable por CSS. No aptos para fotografías.

Guía rápida de decisión

• Fotografía → WebP (o JPG para máxima compatibilidad)
• Logo o icono → SVG (o PNG si necesitas una copia ráster)
• Captura o gráfico con texto → PNG (o WebP)
• Necesita transparencia → PNG, WebP o SVG
• Animación simple → WebP animado

Una vez elegido un formato, nuestra guía de compresión de imágenes cubre cómo bajar el tamaño. Convierte entre formatos con el conversor de SVG y el redimensionador de imágenes, y reduce archivos con el compresor de imágenes — todo en tu navegador.