Tutoriales

De HEIC a WebP: el formato moderno para desarrolladores web

koboshiCo-founder
·5 min de lectura
Resumen

WebP te da compresión moderna sin el lastre de compatibilidad de HEIC, y casi todos los navegadores lo admiten desde hace años. Esta guía muestra cómo convertir archivos HEIC a WebP para la web, cómo se ve la comparación de tamaños y cómo integrarlo en un pipeline.

Un usuario sube una foto tomada con un iPhone. El archivo es HEIC, de unos 1.8 MB. Tu etiqueta <img> no puede depender de él: HEIC no tiene soporte nativo en Chrome, Firefox ni Edge. Así que la imagen termina siendo un JPG de 3.4 MB o un WebP de unos 1.2 MB sin diferencia visible. Esa diferencia es la razón por la que WebP es la respuesta para las fotos que llegan como HEIC.

Esta guía cubre la conversión de HEIC a WebP, cómo se ve la comparación de tamaños entre formatos y las opciones que van desde una herramienta de navegador hasta un comando de shell que puedes meter en tu build.

Por qué WebP y no HEIC

HEIC es excelente guardando fotos, aproximadamente la mitad del tamaño de JPEG a igual calidad. También es inútil en la web como formato de entrega. Chrome, Firefox, Edge y Safari admiten WebP desde hace años, mientras que el soporte de HEIC solo existe en Safari y en un par de lugares específicos de cada proveedor. No puedes depender de HEIC para imágenes subidas por usuarios, que es exactamente por lo que existen los pipelines de conversión.

WebP cubre el mismo terreno que HEIC: es un formato con pérdida construido sobre compresión moderna, con un modo sin pérdida y transparencia alfa. Para una foto, la diferencia práctica entre WebP y JPG a la misma calidad visual es un archivo aproximadamente un 25 a 35 por ciento más pequeño. Eso es un ahorro considerable en una página cargada de imágenes.

La comparación de tamaños

La misma foto de 12 MP, la misma calidad visual:

FormatoTamañoNavegadoresNotas
HEIC~1.8 MBsolo Safariformato de origen de los iPhone
JPG~3.4 MBtodosreferencia
WebP~1.2 MBtodoscon pérdida, con soporte alfa
PNG~24 MBtodossin pérdida, no para fotos

La guía de formatos de imagen para la web tiene la comparación completa si necesitas contexto sobre dónde se sitúa WebP frente a JPG y PNG.

Opción 1: convertir en el navegador

El camino más simple es una herramienta que se ejecuta por completo en el dispositivo. El convertidor de HEIC a WebP decodifica HEIC localmente con WebAssembly y escribe archivos WebP, así que las fotos nunca salen de la máquina. Puedes ajustar la calidad, convertir una carpeta entera y descargar los resultados como ZIP. Funciona para conversiones puntuales y para un diseñador o editor que no se siente cómodo con la línea de comandos.

Opción 2: convertir en la línea de comandos

Para un pipeline, la pila clásica es libheif más libwebp. En macOS con Homebrew:

brew install libheif webp

Luego convierte con heif-convert y cwebp:

heif-convert input.heic output.png
cwebp -q 82 output.png -o output.webp

O sáltate el archivo intermedio con ffmpeg:

ffmpeg -i input.heic -c:v libwebp -quality 82 output.webp

Ambos comandos respetan el argumento de calidad, y cwebp tiene el conjunto de controles más amplio, incluido el modo sin pérdida y -m 6 para la salida más lenta y más pequeña. Para una carpeta, ponlo en un bucle:

for f in *.heic; do heif-convert "$f" "${f%.heic}.png"; cwebp -q 82 "${f%.heic}.png" -o "${f%.heic}.webp"; done

Eso es suficiente para conectarlo a un script de shell o a un trabajo de CI que procese las subidas del lado del servidor.

Elegir calidad y formato en WebP

Dos decisiones afectan a la salida más que cualquier otra cosa:

  • Con pérdida o sin pérdida. cwebp -lossless o -q 100 con la opción sin pérdida conserva cada píxel pero genera archivos más grandes. Úsalo para capturas, logotipos y cualquier cosa con color plano y texto. Usa el modo con pérdida para fotos.
  • El número de calidad. -q 82 es un valor por defecto sensato para fotos: visiblemente limpio y mucho más pequeño que JPG. Para objetivos de alta calidad, -q 90 cuesta más bytes pero queda más cerca de la fuente. Es el mismo equilibrio que los ajustes de calidad de JPG, que HEIC a JPG sin perder calidad explica en detalle.

WebP también maneja alfa, así que una imagen HEIC con canal de transparencia sobrevive al viaje, algo que JPG descartaría.

Una nota sobre formatos más nuevos

AVIF, el sucesor basado en AV1, generalmente supera a WebP en tamaño, y ahora está soportado en todos los navegadores importantes. Si estás montando un pipeline nuevo y puedes elegir tu decodificador, vale la pena probar AVIF frente a WebP con tus imágenes concretas. El equilibrio es la velocidad del codificador y la madurez de las herramientas, por lo que WebP sigue siendo el valor por defecto seguro para la mayoría de los equipos. La guía de formatos de imagen para la web tiene más sobre dónde encaja cada formato.

En resumen

Convierte HEIC a WebP para cualquier cosa que termine en una página web. Está soportado en todas partes, es más pequeño que la alternativa JPG a igual calidad y se puede convertir con una herramienta de navegador o un pipeline de shell de dos comandos. Mantén el HEIC original como fuente de verdad, convierte al subir o en un trabajo por lotes, y deja que el formato haga las cuentas del tiempo de carga por ti.

Más publicaciones del blog para leer