De HEIC/HEIF a WebP/AVIF 2025 — Evita trampas de EXIF/ICC/rotación

Introducción

HEIC/HEIF es eficiente y de alta calidad, pero plantea consideraciones para la Web: compatibilidad, encaje en la toolchain y consistencia de color. Conviene convertir a WebP/AVIF aplicando orientación y color en los píxeles, y definiendo una política mínima de metadatos.

Base y estrategia: Estrategias de conversión de formatos 2025 — Guía para usar WebP/AVIF/JPEG/PNG y Estrategia Definitiva de Compresión de Imágenes 2025 – Guía práctica para optimizar velocidad preservando la calidad.

sizes y srcset: ver Diseño de imágenes responsivas 2025 — Guía práctica de srcset/sizes.

TL;DR

• Antes de convertir, aplicar autorotate y normalizar color a sRGB.
• Tomar WebP como baseline y verificar AVIF; validar con escenas de piel/texto/gradación.
• Metadatos: política de mínimos, conservar lo legal (derechos/crédito) y limpiar PII.
• Estabiliza con fingerprint y cache a largo plazo.

Ejemplo de conversión (Sharp)

import sharp from 'sharp';

export async function convertHeic(input: string, base: string) {
  const pipeline = sharp(input, { failOn: 'none' })
    .withMetadata({ orientation: 1 })
    .rotate()            // aplicar EXIF orientation a píxeles
    .toColorspace('srgb'); // normalizar sRGB

  await pipeline.webp({ quality: 78 }).toFile(`${base}.webp`);
  await pipeline.avif({ quality: 58 }).toFile(`${base}.avif`);
}

• No dependas de la orientación EXIF en entrega: grábala en píxeles (evita giros distintos por navegador/visor)
• Convierte a sRGB para evitar dependencia de tags y drift de color

Exportes responsivos (resize + conversión)

HEIC suele ser de alta resolución; adapta representativos 3–5 anchos y usa srcset/sizes.

const WIDTHS = [640, 960, 1280, 1536];
export async function exportHeicResponsive(input: string, base: string) {
  for (const w of WIDTHS) {
    const p = sharp(input, { failOn: 'none' })
      .rotate()
      .toColorspace('srgb')
      .resize({ width: w, withoutEnlargement: true });
    await p.webp({ quality: 78 }).toFile(`${base}-${w}.webp`);
    await p.avif({ quality: 56 }).toFile(`${base}-${w}.avif`);
  }
}

Evaluación de calidad

• Ocular en escenas representativas (piel, texto, líneas finas, gradación)
• Soporte con SSIM/Butteraugli; decisión final visual
• Comparativas previas: AVIF vs WebP vs JPEG XL en 2025 — Comparación práctica y medida

Artefactos típicos:

• AVIF: banding/efecto bloque en piel/gradaciones
• WebP: aristas en texto/líneas
• “Plasticidad” en alta frecuencia fotográfica

Mitigación:

• Re-exportar con q +3~+5 y elegir el mínimo aceptable
• UI/texto: usar PNG/WebP lossless
• Candidatos LCP: priorizar balance decode/bytes

Política de metadatos

• Mantén derechos/licencia/crédito (IPTC Core)
• Elimina PII o geolocalización si hay riesgo
• Detalles: Política segura de metadatos 2025 — Eliminar EXIF, autorrotar y proteger la privacidad y Diseño seguro de redacción y conservación de metadatos 2025 — Privacidad y cumplimiento

En entrega, aplica “la orientación y color correctos se reflejan en los píxeles”. No delegues orientación en EXIF ni perfil en tags.

Lotes/CI (script base)

# Ejecuta script Node/PowerShell en CI para generar .webp/.avif por entrada

PowerShell (barriendo carpetas)

param(
  [Parameter(Mandatory=$false)][string]$In = "./assets/**/*.heic",
  [Parameter(Mandatory=$false)][string]$Out = "./public/img"
)

node -e "
const fg=require('fast-glob');
const sharp=require('sharp');
const fs=require('fs');
const path=require('path');
const WIDTHS=[640,960,1280,1536];
(async()=>{
  const files=await fg(process.argv[1].split(','));
  for(const f of files){
    const name=path.basename(f,path.extname(f));
    for(const w of WIDTHS){
      const p=sharp(f,{failOn:'none'}).rotate().toColorspace('srgb').resize({width:w,withoutEnlargement:true});
      await p.webp({quality:78}).toFile(path.join(process.argv[2],`${name}-${w}.webp`));
      await p.avif({quality:56}).toFile(path.join(process.argv[2],`${name}-${w}.avif`));
    }
  }
})();
" "$In" "$Out"

En CI, procesa solo diffs y usa fingerprint en nombres (p. ej., name-hash-w.webp) para cache estable.

Integración Next.js (conceptual)

• Preexportar representativos en build a public/img
• En <Image>, define sizes/srcset; solo LCP con priority/fetchPriority="high"

Trampas comunes y mitigación

1. Confiar en EXIF Orientation en entrega → giros inconsistentes

• Solución: .rotate() y normalizar orientation:1

2. No pasar a sRGB → drift si queda Display P3

• Solución: toColorspace('srgb') y color en píxeles

3. Sobreentrega (4K HEIC en Web) → bytes excesivos

• Solución: 3–5 anchos y sizes

4. Metadatos en exceso (PII)

• Solución: -strip o exiftool; mínimos legales

5. Forzar AVIF siempre → banding

• Solución: validar; priorizar WebP si AVIF falla en piel/gradación

ICC y propósito de renderizado

• Respeta ICC de origen al leer; en entrega normaliza a sRGB
• Fotografía: perceptual; logos/UI: relativo
• Transparente: PNG/WebP para preservar bordes

ImageMagick (ICC explícito):

magick input.heic -profile "Apple Display P3.icc" -profile sRGB.icc output-srgb.tif

Pipeline de automatización (diff/fingerprint/cache)

1. Detectar cambios (git diff o mtime)
2. Generar matriz anchos × WebP/AVIF (control de paralelismo)
3. Fingerprint en nombre name.hash-w.ext
4. Entrega con Cache-Control: max-age=31536000, immutable
5. Reescritura automática de referencias HTML/JSON (paso build)

Visualización:

• Genera página de comparación y coloca original vs q/format para revisión rápida
• Anexa SSIM/Butteraugli para acelerar revisiones

Checklist QA

• [ ] Revisión visual (piel/texto/gradación/alta frecuencia)
• [ ] Orientation=1 en píxeles (no EXIF)
• [ ] sRGB normalizado
• [ ] srcset/sizes coherente (sin sobreentrega)
• [ ] Solo LCP con priority; resto con decoding=async
• [ ] Sin PII en entrega

FAQ

P. ¿Siempre convertir HEIC a AVIF?

R. Depende del material. Si AVIF introduce banding en piel/gradaciones, prioriza WebP; estrategia: WebP base, AVIF cuando pase validación.

P. ¿Puedo dejar ICC como venga?

R. Para Web, sRGB en píxeles es lo más seguro; evita depender de tags.

P. ¿Valores iniciales de calidad?

R. WebP q≈78 / AVIF q≈56 (con representativos); afinar según material.

Resumen

Automatiza “autorotate → normalización sRGB → representativos × WebP/AVIF”, con evaluación visual para conservar calidad. Minimiza metadatos en entrega y combina srcset/sizes para optimizar experiencia sin penalizar LCP/INP.