Tidak suka iklan? Pergi Bebas Iklan Hari ini 

Responsive Image srcset & sizes Generator

PengembangGambar

IKLAN · HAPUS?

MEMASUKKAN

Proses Otomatis

Modul Keluaran

<img> with srcset + sizes (width descriptors)

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

<picture> with art-direction <source> breakpoints

Gambar

Image URL Pattern *

Uji dengan validator: {w} as a placeholder for each width. If omitted, the width is inserted before the file extension (e.g. photo.jpg → photo-640.jpg).

Teks Alternatif

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

Atribut

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

KELUARAN

Sisi klien

IKLAN · HAPUS?

Memandu

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> atau <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.

Cara Penggunaan

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.

Fitur

Tiga mode output – 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 atau 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" dan decoding="async".
Copy-ready output – cleanly formatted HTML you can paste directly into your markup.

 Tanya Jawab Umum

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.