Size each image for the widest space it fills, then double that width for high density screens. A full width hero works at 2560 by 1440, a blog body image at 1600 wide, a square product photo at 2048 by 2048 on Shopify, and a social share image at 1200 by 630. Keep photos under roughly 200 KB.
| Slot | Pixels to export | Aspect ratio |
|---|---|---|
| Full width hero | 2560 x 1440 | 16:9 |
| Blog body image | 1600 x 900 | 16:9 |
| Product photo (Shopify) | 2048 x 2048 | 1:1 |
| Share image (og:image) | 1200 x 630 | 1.91:1 |
| Logo | SVG, or PNG at 2x its display size | Matches the logo |
Updated
There is no official standard for a hero or blog image. What does exist is simple arithmetic: how many CSS pixels the slot is wide, times the screen density you want to look sharp on. The table below applies that rule to every common slot, and where a platform publishes its own number, such as Shopify for products or Facebook for share images, we use the published figure.
Enter the width an image fills in your layout, in CSS pixels, and choose the screen densities to cover. The calculator lists the pixel widths to export and writes the matching srcset.
Slot widths are typical desktop layouts. Measure your own theme and apply the 2x rule if yours differ.
| Slot | CSS width | Export pixels | Ratio | Budget | Note |
|---|---|---|---|---|---|
| Full width hero | 100vw (up to 1280+) | 2560 x 1440 | 16:9 | 250 KB | Add 1280 and 1920 wide copies in srcset |
| Contained hero | 1200 | 2400 x 1350 | 16:9 | 200 KB | Twice the container width |
| Banner strip | 100vw | 2560 x 800 | 16:5 | 150 KB | Keep text out of the outer edges; the sides crop on phones |
| Blog featured image | 800 to 1200 | 1600 x 900 up to 2400 x 1350 | 16:9 | 150 KB | Match your theme's content width |
| Blog body image | 720 to 800 | 1600 x 900 | 16:9 or 3:2 | 150 KB | Body columns are narrower than heroes |
| Product photo | Grid card | 2048 x 2048 | 1:1 | 200 KB | Shopify's recommended square size |
| Collection or category card | 400 | 800 x 800 or 800 x 1000 | 1:1 or 4:5 | 80 KB | Use one ratio across the whole grid |
| Team or avatar photo | 200 | 400 x 400 | 1:1 | 40 KB | Often shown in a circle; centre the face |
| Logo in header | about 160 | SVG, or PNG at 320 wide | Logo's own | 20 KB | SVG stays sharp at every size |
| Background texture | 100vw | 1920 x 1080 | 16:9 | 150 KB | Lower quality is fine behind text |
| Share image (og:image) | Not shown on page | 1200 x 630 | 1.91:1 | Under 8 MB (aim far lower) | Facebook's recommended size |
| Favicon | 16 to 32 | SVG plus 32 x 32 ICO or PNG | 1:1 | 5 KB | See the favicon guide for every size |
The browser picks the smallest file that still covers the viewport at the screen's density. width and height set the ratio so nothing jumps while it loads.
<img
src="/img/hero-1920.webp"
srcset="/img/hero-1280.webp 1280w,
/img/hero-1920.webp 1920w,
/img/hero-2560.webp 2560w"
sizes="100vw"
width="2560" height="1440"
alt="Workshop bench with hand tools laid out"
fetchpriority="high">Browsers lay pages out in CSS pixels. A phone or retina laptop packs two or three device pixels into each of those, so an image exported at exactly its CSS width looks soft on them. Doubling the width fixes that for nearly everyone.
Going past 2x rarely pays off for photos. The file roughly doubles again in weight and the extra detail is hard to notice at normal viewing distance.
Most layouts scale images to fit their column, so the ratio decides how a picture sits on the page. Pick one ratio per slot, crop every image to it, and the grid stays tidy whatever the width.
Common choices are 16:9 for heroes and article images, 1:1 for products and avatars, 4:5 for portrait cards, and 1.91:1 for share images.
The largest image above the fold is often the element that decides Largest Contentful Paint. A heavy hero slows the page more than any other single file, so it deserves the most care.
Set a budget per slot and stick to it. When a photo will not fit the budget at good quality, try WebP or AVIF before reducing resolution.
For a hero that spans the full browser width, export 2560 by 1440 for big screens and add 1280 and 1920 wide versions in srcset so phones and laptops download less. If the hero sits inside a 1200 pixel container, 2400 wide is enough.
Shopify's help centre says square product images usually display best at 2048 by 2048 pixels. Uploads can be up to 5000 by 5000 pixels and must be under 20 MB. Keep every product photo the same ratio so collection grids line up.
Facebook's sharing docs recommend at least 1200 by 630 pixels, a 1.91 to 1 ratio, and a file under 8 MB. Smaller images still work down to 600 by 315 but show at a reduced size.
Pixel size and file size are separate. A 1600 wide photo saved as WebP or a well compressed JPEG usually lands between 80 and 200 KB. If an image is far above that, lower the quality setting or switch format before you shrink its dimensions.
Usually not different crops, just smaller copies of the same file listed in srcset. Use the picture element only when a phone needs a different crop, such as a tall version of a wide banner.
Related: Image compressor, Social media image sizes, How to optimize images for the web, Favicon sizes and code, Image cropper.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.