Responsive Images, srcset, and WebP Workflow 日本語ガイド

Hero images, blog covers, and documentation screenshots often ship at one large resolution. Browsers still need smaller variants for phones, tablets, and constrained layouts. You can generate those variants locally and copy markup that matches the exported files.

When srcset helps

srcset tells the browser which image files exist at which display widths. Pair it with sizes so the browser can pick a reasonable file before layout paints.

For many static sites and component libraries, the workflow is:

1. Export several widths from one source image.
2. Upload the files next to your page or into public/.
3. Paste an <img srcset> or <picture> block that references those exact filenames.

A practical local workflow

1. Prepare one source image (for example a 1920×1080 hero JPEG).
2. Open Responsive Image Generator.
3. Keep the default widths (480, 768, 1024, 1280) or adjust them for your layout.
4. Choose WebP when your host serves modern formats, or JPEG for maximum compatibility.
5. Click Generate images, review per-file sizes, and download the zip.
6. Copy the srcset, <picture>, or Next.js <Image> snippet and update sizes / alt for your page.

Processing stays on your machine.

WebP + fallback pattern

When you export WebP, the <picture> snippet includes a WebP <source> plus a fallback <img>. If your pipeline still needs JPEG or PNG for older clients, switch the output format before generating and use the <img srcset> snippet instead.

For additional byte savings on individual files, run outputs through Image Compressor only if you still need smaller variants after width selection.

Related tools

• Image Cropper — fix aspect ratio before generating responsive widths.
• Image Compressor — shrink individual outputs when width reduction alone is not enough.
• Markdown Preview — preview docs that embed responsive images.