Responsive image converter

How responsive images work

A phone with a 390 px screen doesn’t need the same 2400 px photo as a desktop monitor. Responsive images let the browser choose the smallest file that still looks sharp. It’s one of the quickest ways to improve page speed and Largest Contentful Paint.

srcset lists the sizes you have

The srcset attribute tells the browser which widths exist, for example hero-768.webp 768w. The browser combines that with the screen’s pixel density. A 2× phone showing an image 390 px wide will pick a file around 800 px wide.

sizes says how wide the image will display

Browsers choose an image before your CSS loads, so sizes describes the layout ahead of time. (max-width: 768px) 100vw, 768px means full screen width on small screens and 768 px otherwise. If sizes doesn’t match your layout, visitors download the wrong file.

picture adds modern formats with a fallback

AVIF is usually 20–50% smaller than WebP, and WebP is usually 25–35% smaller than JPEG at similar quality. Inside <picture>, each <source> offers one format, and the browser takes the first one it supports. Setting width and height on the <img> reserves space and prevents layout shift.

Questions

Are my images uploaded?

No. Decoding, resizing and encoding all happen in your browser with the Canvas API. Once the page has loaded, the converter keeps working offline.

Why are some of my widths missing?

The converter never enlarges an image. If your original is 1500 px wide, a 1600 px output is replaced with a 1500 px one.

What quality should I use?

75–82 suits most photos. Use 60–70 for large hero backgrounds, and go higher for images with text or sharp edges.