Las imágenes representan entre el 50% y el 60% de los datos que se transfieren en una página web promedio. Elegir el formato de imagen correcto es una de las optimizaciones de mayor impacto que puedes hacer para el rendimiento web. Aquí tienes un desglose práctico de cada formato y cuándo usar cada uno.
Los formatos que debes conocer
JPG (JPEG)
El veterano. JPG ha sido el estándar para fotografías en la web desde la década de 1990. Usa compresión con pérdida optimizada para fotografías: degradados de color naturales, texturas y escenas complejas.
Mejor para: Fotografías donde WebP o AVIF no son viables, o donde se necesita compatibilidad con sistemas antiguos.
Debilidades: Más pesado que los formatos modernos, sin transparencia, artefactos de compresión con calidad baja.
PNG
PNG es un formato sin pérdida ideal para gráficos con colores planos, bordes definidos y fondos transparentes.
Mejor para: Logotipos, iconos, capturas de pantalla, elementos de interfaz, imágenes que necesitan transparencia.
Debilidades: Mucho más pesado que JPG para fotografías, carga más lenta.
WebP
El formato WebP de Google ofrece compresión con y sin pérdida, admite transparencia y supera tanto a JPG como a PNG. Ahora es la opción predeterminada recomendada para imágenes web.
Mejor para: Casi todo: fotografías (en lugar de JPG), logotipos y gráficos (en lugar de PNG), imágenes web en general.
Ventaja de tamaño: 25-35% más pequeño que JPG con una calidad visual equivalente; similar a PNG pero a menudo más pequeño.
Compatibilidad con navegadores: más del 97% (Chrome, Firefox, Safari, Edge, todos los navegadores modernos).
AVIF
Derivado del códec de video AV1, AVIF es el formato de imagen moderno más reciente. Logra mejor compresión que WebP, a menudo entre un 20% y un 50% más pequeño con una calidad equivalente.
Mejor para: Imágenes estáticas donde la máxima compresión es la prioridad y tienes control sobre el servidor o el proceso de compilación.
Debilidades: La codificación es más lenta (no ideal para generación en tiempo real), es posible que versiones antiguas de navegadores no lo admitan.
Compatibilidad con navegadores: Chrome 85+, Firefox 93+, Safari 16+, Edge 121+.
SVG
SVG es un formato vectorial: las imágenes se describen como rutas matemáticas, no como píxeles. Los archivos SVG son independientes de la resolución y suelen ser muy pequeños para logotipos e iconos.
Mejor para: Logotipos, iconos, ilustraciones, gráficos, cualquier elemento visual que necesite escalarse a diferentes tamaños.
No recomendado para: Fotografías o cualquier imagen con degradados y texturas complejas.
Matriz de formato según caso de uso
| Tipo de contenido | Mejor formato | Alternativa |
|---|---|---|
| Fotografía | AVIF | WebP → JPG |
| Foto de producto | WebP | JPG |
| Logotipo | SVG | PNG |
| Icono | SVG | PNG |
| Captura de pantalla | WebP | PNG |
| Ilustración | SVG o WebP | PNG |
| Patrón de fondo | WebP | JPG |
| Animado | WebP | GIF |
Impacto en el rendimiento: números reales
Al convertir una foto de producto típica a formatos modernos:
| Formato | Tamaño de archivo | Calidad |
|---|---|---|
| JPG (calidad 85) | 340 KB | Base |
| PNG | 1.2 MB | Sin pérdida |
| WebP (calidad 80) | 210 KB | ≈ JPG 85 |
| AVIF (calidad 60) | 155 KB | ≈ JPG 85 |
Pasar de JPG a WebP ahorra aproximadamente un 38% en el peso de la imagen por cada imagen. En una página con 20 imágenes de producto, eso representa un ahorro potencial de varios megabytes por carga de página.
El elemento <picture> para mejora progresiva
Si quieres servir AVIF con WebP como alternativa y JPG como último recurso:
<picture>
<source srcset="image.avif" type="image/avif" />
<source srcset="image.webp" type="image/webp" />
<img src="image.jpg" alt="Product photo" />
</picture>
Esto permite que los navegadores modernos usen AVIF, que los navegadores modernos más antiguos usen WebP y que los navegadores obsoletos recurran a JPG, sin necesidad de JavaScript.
¿Qué pasa con las Core Web Vitals?
Largest Contentful Paint (LCP) es una de las métricas Core Web Vitals de Google y está muy influida por el tiempo de carga de las imágenes. Usar WebP o AVIF para tu imagen principal y tus fotos de producto puede mejorar directamente tu puntuación de LCP, que es una señal de posicionamiento de Google.
Consejos adicionales para imágenes web:
- Agrega los atributos
widthyheightpara evitar saltos de diseño (CLS) - Usa
loading="lazy"en las imágenes que están debajo de la primera pantalla - Usa
fetchpriority="high"en tu imagen de LCP (generalmente la imagen principal)
Cómo convertir tus imágenes
Puedes convertir cualquier imagen a WebP, AVIF, PNG o JPG con el Conversor de imágenes de PicsSizer. Para optimización masiva, el Compresor de imágenes te permite ajustar la calidad para obtener el archivo más pequeño posible sin pérdida visible.
Resumen: opciones predeterminadas recomendadas en 2026
- Fotografías en la web → WebP (con JPG como alternativa mediante
<picture>) - Logotipos e iconos → SVG (alternativa en formato ráster: PNG)
- Capturas de pantalla y diagramas → WebP (con PNG como alternativa)
- Máxima compresión, recursos estáticos → AVIF (con WebP como alternativa)
- Plantillas de correo antiguas → JPG o PNG (los clientes de correo no admiten formatos modernos)
Preguntas frecuentes
- ¿Cuál es el mejor formato de imagen para sitios web en 2026?
- WebP es el mejor formato de uso general para sitios web en 2026. Ofrece archivos entre un 25 % y un 35 % más pequeños que JPG con una calidad equivalente, admite transparencia como PNG y es totalmente compatible con todos los navegadores modernos. AVIF es aún más eficiente, pero su compatibilidad con los navegadores es algo menos uniforme. Use SVG para íconos y logotipos.
- ¿Debería convertir las imágenes de mi sitio web a WebP?
- Sí. Convertir imágenes JPG y PNG a WebP puede reducir el peso de sus imágenes entre un 25 % y un 50 % sin pérdida visible de calidad. Imágenes más ligeras significan páginas que cargan más rápido, mejores puntuaciones de Core Web Vitals y un mejor SEO. Todos los navegadores principales ya son compatibles con WebP.
- ¿Qué es AVIF y es mejor que WebP?
- AVIF es un formato de imagen de nueva generación derivado del códec de video AV1. Logra una compresión entre un 20 % y un 50 % mejor que WebP con la misma calidad. La compatibilidad con navegadores ya es excelente (Chrome, Firefox, Safari 16+, Edge). La contrapartida es un tiempo de codificación más lento, por lo que resulta ideal para imágenes estáticas generadas previamente.
- ¿Cuándo debo usar SVG en lugar de formatos rasterizados?
- Use siempre SVG para logotipos, íconos, ilustraciones y cualquier gráfico compuesto por formas geométricas. SVG es independiente de la resolución (se ve nítido en cualquier tamaño de pantalla), genera archivos muy pequeños para gráficos sencillos y se escala perfectamente a cualquier dimensión. SVG no es adecuado para fotografías.
- ¿El formato de imagen afecta al SEO?
- Sí, de forma indirecta. La velocidad de carga de la página es un factor de posicionamiento en Google, y los formatos de imagen influyen directamente en el peso de su página. Usar formatos modernos como WebP o AVIF en lugar de JPG/PNG puede mejorar las Core Web Vitals (especialmente el LCP), lo que influye en su posicionamiento en los resultados de búsqueda.