Cómo elegir el formato de imagen adecuado para la web

Tres preguntas que conviene hacerse primero

En un sitio web real, la elección de cada imagen se reduce a tres preguntas:

1. ¿Qué muestra? A las fotos les van bien los formatos con pérdida, como JPG, WebP con pérdida y AVIF, porque los pequeños errores se disimulan entre el detalle natural. Las capturas de pantalla, el texto, los gráficos de datos y las ilustraciones de colores planos tienen bordes nítidos en los que la compresión con pérdida puede dejar halos visibles, así que les convienen más los formatos sin pérdida (PNG, WebP sin pérdida) o, si se dibujaron como formas, SVG.
2. ¿Necesita transparencia o animación? JPG no admite ninguna de las dos. PNG, WebP y AVIF pueden almacenar un canal alfa completo con bordes suaves. En un GIF, cada píxel es totalmente transparente o totalmente opaco, así que los bordes curvos pueden verse dentados o con un cerco sobre fondos de color. GIF, WebP, AVIF y APNG (PNG animado) pueden contener animación, pero un vídeo corto suele ocupar mucho menos que un GIF.
3. ¿Dónde se va a publicar? En tus propias páginas HTML puedes ofrecer varios formatos. Un sistema de gestión de contenidos (CMS), una tienda o un formulario de subida decide qué formatos acepta y puede convertir los archivos por su cuenta, así que consulta su documentación actual. Los programas de correo electrónico difieren entre sí más que los navegadores, por lo que JPG y PNG son la opción más segura para los boletines.

Para saber cómo funciona cada formato, consulta JPG vs PNG vs WebP vs AVIF.

Formato según el contenido: tabla de decisión

Cuando sirvas AVIF o WebP en tus propias páginas, conserva una versión JPG o PNG para los navegadores y las aplicaciones que no puedan mostrarlos. Cuando una plataforma solo admite un archivo, la columna de respaldo suele ser la opción segura. Los favicons siguen sus propias reglas; consulta Tamaños, formatos y etiquetas HTML de los favicons.

Para un bucle al estilo de un GIF en una página web, un <video> silenciado con los atributos autoplay, loop, muted y playsinline es un sustituto habitual, porque los navegadores suelen permitir que los vídeos sin sonido se reproduzcan automáticamente. En el correo electrónico, algunas versiones de escritorio de Outlook solo muestran el primer fotograma de un GIF animado, así que pon el mensaje principal en ese fotograma.

Cómo ofrecer WebP o AVIF con un formato de respaldo

En las páginas cuyo HTML escribes tú, el elemento <picture> permite que cada navegador elija el primer formato que admite:

<picture>
  <source srcset="/img/pasta-1600.avif" type="image/avif">
  <source srcset="/img/pasta-1600.webp" type="image/webp">
  <img src="/img/pasta-1600.jpg" alt="Plato de pasta con tomate" width="1600" height="1200">
</picture>

El navegador lee los elementos <source> en orden y omite aquellos cuyo type no admite. El <img>, que es obligatorio, lleva el texto alternativo y el ancho y el alto que permiten al navegador reservar el espacio, y su archivo es el que se muestra cuando ninguna fuente coincide. Con un CSS como img { max-width: 100%; height: auto; }, la imagen se sigue reduciendo para caber en pantallas estrechas y mantiene esa proporción. Para ofrecer además varios tamaños, indica cada archivo con su ancho en srcset y añade un atributo sizes, como se explica en Redimensionar imágenes: píxeles, relación de aspecto y DPI.

Muchos CMS y CDN de imágenes pueden crear copias en WebP o AVIF y elegir una para cada visitante. Si el tuyo lo hace, sube un JPG o PNG de alta calidad y deja que se encargue de la conversión, en lugar de un archivo que ya hayas comprimido mucho, para que la imagen no se comprima dos veces.

Ejemplo práctico: las imágenes de un artículo

Supongamos que un artículo de recetas tiene tres imágenes y que su columna de texto mide como máximo 760 píxeles CSS de ancho.

• Foto principal. El original del móvil mide 4032 × 3024 píxeles, unos 12,2 megapíxeles. Una columna de 760 píxeles en una pantalla con dos píxeles de dispositivo por cada píxel CSS necesita unos 1520 píxeles de ancho, así que 1600 × 1200 mantiene la proporción 4:3 con 1,92 megapíxeles, alrededor del 16 % del original. Redimensiona primero y guarda después en AVIF o WebP, más un JPG de respaldo; el original a tamaño completo tiene más de seis veces los píxeles de la versión de 1600 × 1200, y el navegador tendría que descartar la mayoría al reducir la imagen.
• Logotipo con fondo transparente. El PNG que entregó el diseñador mide 1000 × 500 píxeles y se muestra a 200 píxeles CSS de ancho, así que con 400 × 200 basta para las pantallas con dos píxeles de dispositivo por cada píxel CSS. Mantenlo en PNG o WebP; un JPG rellenaría las zonas transparentes con un color sólido, que se vería como un recuadro sobre una cabecera de color. Si el diseñador puede exportarlo en SVG, mejor todavía.
• Captura de pantalla de una aplicación de temporizador. Texto y colores planos: guárdala como PNG. Un JPG puede añadir motas alrededor de las letras, y los lectores las notan más que los pequeños errores de una foto.

Convertir archivos con el convertidor de imágenes de LeedyBox

El Convertidor de imágenes cambia el formato de una o varias imágenes en tu navegador, sin subir los datos de la imagen a LeedyBox.

1. Haz clic en «Elige archivos o arrástralos aquí» o suelta en esa zona archivos PNG, JPG, WebP, BMP, GIF o AVIF. Los demás tipos, como HEIC o SVG, y los archivos que tu navegador no puede decodificar se rechazan con un mensaje.
2. Cada archivo tiene su propio menú de formato (con la etiqueta «To:» en las pantallas anchas), que al principio está en JPG. Elige JPG, PNG, WEBP, BMP, AVIF o ICO para cada archivo, o para todos a la vez con «Establecer todos los formatos en...», en «Opciones por lotes».
3. Haz clic en «Convertir y descargar». Un solo archivo se guarda, por ejemplo, como logo_converted.webp; si son varios, se descargan en leedybox_converted_images.zip.

• Las dimensiones en píxeles no cambian, salvo en ICO. Redimensiona primero con Redimensionar imágenes o usa «Limitar también el ancho y el alto» en Comprimir imágenes.
• Para JPG, WebP y AVIF, el convertidor pide al navegador una calidad de 0,92 en su escala de 0 a 1, y no hay control deslizante de calidad. Ese ajuste da prioridad al detalle frente al tamaño del archivo. También significa que WebP se guarda con pérdida: no hay opción de WebP sin pérdida, así que convierte las capturas de pantalla y los gráficos con texto a PNG. Para obtener archivos más pequeños, Comprimir imágenes ofrece un control deslizante de calidad (75 de forma predeterminada) y un tamaño de archivo objetivo; consulta Ajustes de compresión de imágenes explicados.
• Los archivos JPG y los BMP que crea el convertidor no tienen transparencia, así que las zonas transparentes se vuelven blancas. Además, esos BMP van sin comprimir, a 3 bytes por píxel (cada fila se rellena hasta un múltiplo de 4 bytes) más una cabecera de 54 bytes: una imagen de 1200 × 800 ocupa 2.880.054 bytes (unos 2,9 MB), muestre lo que muestre, así que BMP no tiene cabida en las páginas web.
• Un archivo ICO contiene una sola imagen PNG y conserva la transparencia. Si un lado de la imagen mide más de 256 píxeles, la imagen se reduce para que quepa en 256 × 256, así que un logotipo de 1000 × 500 queda en 256 × 128; las imágenes más pequeñas mantienen su tamaño. Para crear un favicon.ico con tamaños de 16, 32 y 48 píxeles, además de iconos PNG y Apple Touch, usa el Generador de favicon.
• AVIF solo se puede seleccionar si tu navegador puede crear archivos AVIF, algo que hoy muchos navegadores no pueden hacer; si no, aparece como «AVIF (no compatible con este navegador)». Si el navegador no puede crear el formato elegido (la salida en WebP también depende del navegador), aparece un mensaje y no se guarda nada, en lugar de guardarse datos PNG con una extensión equivocada. Con varios archivos, un solo fallo de este tipo detiene todo el lote, así que no se crea ningún archivo ZIP.
• Cada imagen se vuelve a dibujar y a codificar desde cero, así que los datos EXIF, la ubicación GPS y el perfil de color del original no se conservan, y un GIF, WebP o AVIF animado se convierte en una imagen fija de un solo fotograma. El convertidor no crea archivos SVG, GIF ni animados.

Problemas habituales y cómo resolverlos

• Un logotipo transparente aparece con un recuadro blanco o negro alrededor. Probablemente se guardó como JPG o como BMP sin transparencia. Usa PNG o WebP; consulta por qué se pierde la transparencia en JPG.
• El PNG ocupa mucho más que el JPG del que procede. PNG almacena cada píxel con exactitud, incluidos el ruido y los artefactos de compresión del JPG, y la conversión no recupera el detalle que el JPG ya había perdido. Para las fotos, usa WebP o JPG.
• Un formulario de subida rechaza WebP o AVIF. Algunos formularios solo aceptan JPG y PNG. Convierte las fotos a JPG y los gráficos transparentes a PNG. Cambiar la extensión del nombre de archivo no cambia el formato.
• El archivo WebP apenas es más pequeño que el JPG, o incluso es más grande. Puede que el JPG original ya estuviera muy comprimido, y la calidad 0,92 del convertidor conserva mucho detalle, incluidos los propios artefactos del JPG, que también ocupan bytes. Si el archivo resulta demasiado grande en cualquier caso, puede que siga teniendo el tamaño completo de la cámara. Redimensiona al tamaño de visualización, usa después Comprimir imágenes y compara los resultados.
• Los colores se ven más apagados que en el original. El convertidor dibuja cada imagen en un lienzo (canvas) del navegador, que trabaja en sRGB de forma predeterminada, y no conserva el perfil de color original. Las fotos en un espacio de color más amplio, como Display P3 o Adobe RGB, pueden perder parte de sus colores más saturados, algo que se nota sobre todo en las pantallas de gama amplia. Exporta una copia en sRGB desde tu editor de fotos, revísala allí y convierte esa copia.
• No se acepta una foto HEIC hecha con el móvil. HEIC no está en la lista del convertidor. Muchos móviles pueden exportar o compartir las fotos como JPG; convierte esa copia.

Qué comprobar antes de publicar

• Abre la página en dos navegadores y en un móvil. Si usas <picture>, prueba también el formato de respaldo quitando temporalmente las fuentes AVIF y WebP.
• Compara el archivo nuevo con el original a tamaño real y fíjate en las caras, el texto y los degradados.
• En el panel Red de las herramientas para desarrolladores del navegador, comprueba qué archivo se ha descargado y cuánto ocupa.
• Si tu sitio tiene modo oscuro, revisa las imágenes transparentes tanto sobre fondos claros como oscuros.
• Conserva los originales y convierte a partir de ellos; volver a guardar un archivo con pérdida suma errores nuevos a los que ya tenía.

Preguntas frecuentes