¿Cuál es el mejor formato de imagen para un sitio web?

Preguntar por el «mejor formato» no sirve hasta que sabes qué tipo de imagen es. Un sitio web contiene varios tipos de imágenes muy diferentes y cada uno tiene un claro ganador:

• Fotografías (productos, personas, lugares): un formato con pérdida. AVIF es el más pequeño, WebP es la opción moderna y segura de forma predeterminada, y JPG es la alternativa que todos los navegadores pueden mostrar.
• Logotipos, iconos e ilustraciones: SVG. Es un gráfico vectorial, por lo que se mantiene nítido a cualquier tamaño y en cualquier pantalla, y el archivo suele ser diminuto. Recurre a un formato de píxeles solo cuando una plataforma rechace SVG.
• Capturas de pantalla, gráficos de interfaz y cualquier elemento con transparencia: PNG o WebP sin pérdida. Los colores planos y los bordes definidos son precisamente lo que los formatos sin pérdida comprimen bien.
• Animaciones cortas: WebP o AVIF animado en lugar de GIF, que está limitado a una paleta pequeña y genera archivos mucho más grandes.
• El favicon: un archivo ICO, preferiblemente acompañado de una versión SVG o PNG; consulta cómo crear un favicon a partir de una imagen.

El error clásico es guardar una fotografía como PNG. PNG almacena cada píxel sin pérdida, algo perfecto para un logotipo y desastroso para una foto: el archivo alcanza varias veces el tamaño de un JPG sin ninguna mejora visible.

Para las fotos, la elección depende de cuánto puedas confiar en los navegadores más nuevos:

• AVIF ofrece la mejor compresión: con una calidad web habitual, resulta alrededor de un 50% más pequeño que JPEG y entre un 20–30% más pequeño que WebP, además de admitir HDR y una amplia gama cromática si los necesitas. Chrome, Firefox y Safari pueden mostrarlo (Safari desde la versión 16.4, en 2023). Sus desventajas son la codificación lenta, especialmente con imágenes grandes, y la compatibilidad limitada en programas de escritorio y dispositivos antiguos.
• WebP es la opción práctica predeterminada: entre un 25–35% más pequeño que JPEG con la misma calidad visual, con transparencia y compatible con todos los navegadores principales desde 2020. Algunas aplicaciones de escritorio y herramientas antiguas aún no pueden abrirlo, algo importante para el archivo que entregas a un diseñador, pero no para el que muestras a los visitantes.
• JPG es la alternativa universal. Es el menos eficiente de los tres, pero un JPG guardado con una calidad aproximada de 75–82 suele ser indistinguible del original en pantalla, y todo en la web puede mostrarlo.

La configuración más sólida ofrece AVIF a los navegadores compatibles, WebP al resto y conserva un JPG para cualquier navegador más antiguo. Si prefieres elegir uno, WebP con una alternativa en JPG cubre prácticamente a todo el mundo. Las comparaciones directas están en WebP frente a AVIF y WebP frente a JPG; para gráficos en lugar de fotos, consulta PNG frente a JPG.

Cuando conoces el formato de destino, la conversión es rápida y nunca sale de tu dispositivo. El conversor de imágenes EditItAll funciona íntegramente en tu navegador:

1. Abre el conversor y suelta tus imágenes, ya sea un archivo o una carpeta entera. Los lotes se procesan juntos.
2. Elige el formato de salida: WebP o AVIF para fotografías y PNG para gráficos que necesiten transparencia. Hay rutas directas para las tareas habituales: JPG a WebP, PNG a WebP, JPG a AVIF y PNG a AVIF.
3. Ajusta la calidad. No hay un campo de tamaño objetivo: el tamaño es un resultado. Cada archivo muestra su tamaño antes y después, así que mueve ligeramente el control hasta que tanto la cifra como la imagen se vean bien.
4. Descarga los resultados individualmente o como un único ZIP.

No se sube nada; puedes desconectarte de internet después de que se cargue la página y seguir convirtiendo. Además, los metadatos EXIF y GPS se eliminan de cada imagen exportada, de modo que una foto de producto no revela dónde se tomó. Es gratis, sin cuenta y sin marca de agua. ¿Ya tienes el formato adecuado y solo necesitas reducir su tamaño? Ve directamente al compresor de imágenes. Y si una plataforma exige una versión de píxeles de un logotipo vectorial, SVG a PNG lo renderiza al tamaño que elijas.

Elegir el formato adecuado merece la pena, pero tres hábitos ahorran más bytes de lo que jamás conseguiría cambiar de JPG a AVIF:

• Redimensiona al tamaño que realmente muestras. Una foto de cámara es muchas veces más ancha que el espacio que ocupa en una página, y cada uno de esos píxeles adicionales se descarga y se descarta. Las herramientas de imagen de EditItAll incluyen un límite opcional para la dimensión máxima precisamente para esto.
• Comprime una vez, desde el original. Cada guardado con pérdida elimina un poco más de detalle. Conserva el original, exporta desde él la copia para la web y no vuelvas a guardar un JPG como WebP y luego como AVIF en cadena.
• Ofrece formatos modernos con una alternativa. Presenta primero AVIF o WebP y permite que los navegadores antiguos recurran a JPG o PNG, para que ningún visitante vea una imagen rota.

Si un informe de velocidad te indica que debes «codificar las imágenes eficientemente» u «ofrecer imágenes en formatos de próxima generación», se refiere precisamente a esta decisión: corregir la advertencia sobre la codificación eficiente de imágenes explica el proceso, y comprimir JPEG para la web detalla el control de calidad. Encontrarás más guías de formatos en la colección sobre conversión de imágenes.