Image size for a website: pixels, weight and format
A full-width hero image needs four files, from 800 to 2,400 pixels wide, and a product card needs three, from 480 to 1,440. On our own sites, a 1,600-pixel hero weighs about 100 KB in AVIF, and a 960-pixel product image about 17 KB. These numbers come from the files on our three sample sites, measured in October 2026.
What size should website images be?
Make each image in several widths and let the browser pick the one that fits the screen. This is what we serve on our sample sites.
| Where the image sits | Shape | Widths we make |
|---|---|---|
| Hero, full width | landscape | 800 · 1,200 · 1,600 · 2,400 px |
| Hero on a phone | portrait | its own frame, 810 × 1,080 px |
| Product card in a grid | square | 480 · 960 · 1,440 px |
| 360° product view | square | 800 px per frame |
A phone 400 pixels wide needs a hero 800–1,200 pixels wide, because its screen has two or three device pixels for each CSS pixel. A large desktop screen gets the 2,400-pixel one. Nobody gets a file wider than they can show.
How much should a website image weigh?
Weight follows width and format. That is why published advice disagrees so much.
- 200 KB“under”, for a hero · TinySEO, 2026
- 400–500 KBfor most images · Wildings Studio
- 10 MBfor a hero · Shopify, 2026
Here is what the same images weigh on our sites, as a median across all files.
So a phone that loads an 800- or 1,200-pixel hero gets 29–84 KB, and a large screen 217–289 KB. Both are the same picture. Detail adds weight: at 1,200 pixels, the architecture photos on VORMLAND weigh 84 KB against 58 KB for the interiors on SALTHOLM, and our largest 2,400-pixel file reaches 892 KB.
Which image format is best for a website?
Use AVIF for photos and renders, with a JPEG fallback. On our product cards, the JPEG at 960 pixels is 3.3 times heavier than the AVIF of the same image, as a median across 92 pairs.
- 3.3×JPEG heavier than AVIF, our product cards
- 96.35%of browsers read AVIF
- 97.18%of browsers read WebP
caniuse.com, StatCounter data for September 2026 · Safari on iPhone: AVIF from iOS 16, WebP from iOS 14
The JPEG fallback covers the rest of the browsers. Hand this to whoever builds your site:
<picture>
<source type="image/avif" srcset="chair-480.avif 480w, chair-960.avif 960w, chair-1440.avif 1440w"
sizes="(max-width: 900px) 50vw, 25vw">
<img src="chair-960.jpg" srcset="chair-480.jpg 480w, chair-960.jpg 960w, chair-1440.jpg 1440w"
sizes="(max-width: 900px) 50vw, 25vw" alt="Oak dining chair" loading="lazy">
</picture>WebP is a good choice when your platform can’t make AVIF. Keep PNG for logos and images with a transparent background.
Which image should load first?
The first image a visitor sees should load first, and the rest should wait. Google measures how fast the largest image on the first screen appears (Largest Contentful Paint), and counts it in the PageSpeed score. More on Core Web Vitals →
- Mark the hero as important. The hero gets
fetchpriority="high", so the browser asks for it before anything else. - Hold back the rest. Images further down use
loading="lazy". On SALTHOLM, slides two to four of the hero slider load only after the page has loaded. - Give phones their own first frame. On TARNHOLM, the video cover was a 2,560 × 1,440 JPEG of 265 KB. It is now a 1,920 × 1,080 WebP of 44 KB, and phones get a portrait 810 × 1,080 frame of 21 KB. Both the width and the format changed, so not all of that saving is the format.
On 30 September 2026, after these and other fixes, our three sample sites scored 96–100 on Google PageSpeed on a phone. See the scores and the fixes →
A 960-pixel product image: 17 KB in AVIF, 57 KB in JPEG.
Video cover: 265 KB before, 44 KB after, 21 KB on a phone.
01
Do renders need different sizes?
No, the same widths work. But a render usually arrives as a large export, and a catalogue has many of them, so the workflow matters more than one perfect setting. On TARNHOLM, each product render becomes six files: three widths in AVIF and three in JPEG.
Our sister studio, Render Friends, makes the renders. We prepare and place them on the site. If you already have renders or photos, the same steps apply.
02
What if your site runs on a builder?
A builder makes the smaller versions for you: Shopify’s own 2026 guide says it resizes images for smaller screens. You still choose the size you upload.
Upload the widest version the page will show, not the original export. On our sites the widest hero is 2,400 pixels.
Images are one of the six things we check in a free review. You get a short document: what to fix first, how much work each fix is, and an honest verdict.
Send it with the button on the right→
Questions about image size
What size should a hero image be?
Make it in several widths: 800, 1,200, 1,600 and 2,400 pixels for a full-width hero. Give phones their own portrait frame if the picture crops badly.
Is 72 dpi needed for web images?
No. Browsers use the width and height in pixels. The dpi number in the file does not change how big an image looks on a website.
Should I use WebP or AVIF?
AVIF, with a JPEG fallback, if your site can serve it. On our product images it is 3.3 times lighter than JPEG at the same width. WebP is the next best choice.
How do I check my own images?
Run Google PageSpeed Insights on a page and look at the largest image it names. Or send us your site for a free review: images are one of the six things we check.