Imágenes responsive, srcset y flujo de trabajo WebP
Genera assets de imagen multi-ancho localmente, entiende srcset y sizes, y copia snippets picture o Next.js sin subir fuentes.
Imágenes hero, portadas de blog y capturas de documentación suelen publicarse a una sola resolución grande. Los navegadores siguen necesitando variantes más pequeñas para móviles, tablets y layouts restringidos. Puedes generar esas variantes localmente y copiar markup que coincida con los archivos exportados.
Cuándo ayuda srcset
srcset indica al navegador qué archivos de imagen existen a qué anchos de visualización. Combínalo con sizes para que el navegador elija un archivo razonable antes de pintar el layout.
Para muchos sitios estáticos y bibliotecas de componentes, el flujo es:
- Exporta varios anchos desde una imagen fuente.
- Sube los archivos junto a tu página o en
public/. - Pega un bloque
<img srcset>o<picture>que referencie esos nombres de archivo exactos.
Flujo local práctico
- Prepara una imagen fuente (por ejemplo un hero JPEG 1920×1080).
- Abre Responsive Image Generator.
- Mantén los anchos por defecto (480, 768, 1024, 1280) o ajústalos a tu layout.
- Elige WebP cuando tu host sirva formatos modernos, o JPEG para máxima compatibilidad.
- Haz clic en Generate images, revisa tamaños por archivo y descarga el zip.
- Copia el snippet
srcset,<picture>o Next.js<Image>y actualizasizes/altpara tu página.
El procesamiento permanece en tu máquina.
Patrón WebP + fallback
Cuando exportas WebP, el snippet <picture> incluye un <source> WebP más un <img> de fallback. Si tu pipeline aún necesita JPEG o PNG para clientes antiguos, cambia el formato de salida antes de generar y usa el snippet <img srcset>.
Para ahorro adicional de bytes en archivos individuales, pasa las salidas por Image Compressor solo si aún necesitas variantes más pequeñas tras la selección de ancho.
Herramientas relacionadas
- Image Cropper — corrige la relación de aspecto antes de generar anchos responsive.
- Image Compressor — reduce salidas individuales cuando solo bajar el ancho no basta.
- Markdown Preview — previsualiza docs que incrustan imágenes responsive.