Responsive image calculator
Tell this calculator how wide an image is shown on phones and on desktop, and it lists the widths to export and writes the srcset and sizes markup. Phones download small files, and large high-density screens stay sharp.
Export these widths: 320px, 480px, 640px, 768px, 960px, 1200px, 1440px, 1540px.
Markup
<img
src="/images/kitchen-960.jpg"
srcset="/images/kitchen-320.jpg 320w,
/images/kitchen-480.jpg 480w,
/images/kitchen-640.jpg 640w,
/images/kitchen-768.jpg 768w,
/images/kitchen-960.jpg 960w,
/images/kitchen-1200.jpg 1200w,
/images/kitchen-1440.jpg 1440w,
/images/kitchen-1540.jpg 1540w"
sizes="(max-width: 768px) 100vw, 608px"
width="608"
height="405"
alt="Describe what the image shows and why it matters"
loading="lazy"
decoding="async"
/>Want me to check the images on your site?
Send me your website and I’ll tell you which images are oversized and what they should be. Free.
How to use it
Enter your site’s maximum content width and how much of it the image fills on desktop.
Set how wide the image is on phones and where your layout switches.
Choose the highest screen density you want to support.
Export the listed widths, then copy the markup.
Why it matters
Images are usually the heaviest part of a page. Sending a 2400-pixel photo to a phone that shows it 390 pixels wide wastes most of the download, and phones are where speed matters most.
The srcset attribute lists the versions you have, and sizes tells the browser how wide the image will be shown. With both, the browser chooses the smallest file that still looks sharp on that screen. Without sizes, it assumes the image fills the whole screen and often downloads one far too big.
Good alt text belongs on every meaningful image as well: describe what the image shows and why it is there. Decorative images get an empty alt attribute so screen readers skip them.
Good to know
Use modern formats
AVIF and WebP are much smaller than JPEG at the same quality. Use a picture element to offer them with a JPEG fallback.
Set width and height
Always include width and height attributes so the browser reserves space and the layout doesn’t jump.
Lazy load below the fold
Add loading="lazy" to images further down the page. Never lazy load the main hero image.
Responsive image calculator: questions
srcset lists the image files available and their widths. sizes tells the browser how wide the image will be displayed at different screen widths, so it can pick the right file before the layout is known.
Enough to cover your smallest and largest display sizes at the densities you support, spaced so each step is noticeably larger. This calculator suggests a set for your layout.
For most photos, 2x is a good ceiling. Beyond that the file size grows quickly and few people can see the difference. Logos and icons are better as SVG.
Describe what matters about the image in context, in a short sentence. Don’t start with “image of”. If the image is purely decorative, use alt="".
Keep reading
- nick@tavro.ca
- 587-439-9994
- Calgary, Alberta