広告が嫌いですか? 行く広告なし今日 

Responsive Image srcset & sizes Generator

開発者画像

広告削除する？

入力

自動処理

出力モード

<img> with srcset + sizes (width descriptors)

<img> with density descriptors (1x / 2x)

<picture> with art-direction <source> breakpoints

画像

Image URL Pattern *

プレビューするには {w} as a placeholder for each width. If omitted, the width is inserted before the file extension (e.g. photo.jpg → photo-640.jpg).

代替テキスト

Widths

Widths (px)

Comma-separated list of image widths in pixels. In <picture> mode each width also becomes a min-width breakpoint.

sizes Attribute

Tells the browser how wide the image renders at each breakpoint. Defaults to 100vw if left blank.

Density Settings

Display Width (px)

The 1x display width. A 2x (and optionally 3x) variant is generated automatically.

Include 3x variant

属性

Add loading="lazy" and decoding="async"

出力

クライアント側

広告削除する？

ガイド

Responsive Image srcset & sizes Generator

Build pixel-perfect responsive image markup without memorizing syntax. This generator turns a simple URL pattern and a list of widths into ready-to-paste <img> または <picture> HTML, complete with correct srcset width descriptors, density descriptors, and a sizes attribute. It runs entirely in your browser, so no images are ever uploaded.

使用方法

Choose an output mode: width descriptors, pixel density, or art-directed <picture>.
Enter your image URL pattern using {w} as a placeholder for the width.
List the widths you have exported (for example 320, 640, 960, 1280, 1920).
Optionally set a sizes value describing how wide the image renders on screen.
Copy the generated HTML straight into your template.

機能

3つの出力モード – width-descriptor srcset, density-descriptor srcset (1x/2x/3x), and full <picture> art direction.
Automatic descriptors – widths are sorted and tagged with the correct w または x descriptor.
sizes attribute builder – ships a sensible 100vw default and lets you supply custom media conditions.
Smart URL patterns – use a {w} token, or let the tool insert the width before the file extension.
Performance attributes – optionally add loading="lazy" と decoding="async".
Copy-ready output – cleanly formatted HTML you can paste directly into your markup.

 よくある質問

What is the difference between the srcset width descriptor and the sizes attribute?

The srcset width descriptor (such as 640w) tells the browser the intrinsic pixel width of each candidate file. The sizes attribute tells the browser how wide the image will actually be displayed at different viewport widths. The browser combines both, together with the device pixel ratio, to pick the smallest file that still looks sharp.
When should I use density descriptors instead of width descriptors?

Density descriptors (1x, 2x, 3x) are best for fixed-size images such as logos, icons, or thumbnails that always render at the same CSS width. Width descriptors are better for fluid images whose display size changes with the layout, because they let the browser choose based on both viewport size and pixel density.
What is the difference between srcset on an img and the picture element?

srcset on an img lets the browser pick a resolution for the same image, which is called resolution switching. The picture element with source media queries lets you serve genuinely different images or crops at different breakpoints, which is called art direction. Use picture when the composition itself needs to change.
Why does responsive image markup improve page performance?

Serving an image that matches the display size avoids sending oversized files to small screens. This reduces bytes downloaded, speeds up rendering, lowers bandwidth costs, and improves Core Web Vitals metrics like Largest Contentful Paint, especially on mobile devices.