How big should the file be?
web.dev's rule is to serve an image at the size it displays: a 500 x 500 slot needs 1000 pixels at a device pixel ratio of 2 and 1500 at 3, though it notes most eyes cannot benefit from DPR 3, so slightly smaller is often fine. [1]
There is no single target weight in web.dev's guidance; it says no universal compression setting exists and to check quality after compressing. [1] Lighthouse gives a practical test instead: it flags an image whose rendered size is at least 4 KiB smaller than the file served, and a JPEG that would save 4 KiB or more when recompressed at quality 85. [2][3]
Large images often decide Largest Contentful Paint. A good LCP is 2.5 seconds or less at the 75th percentile of page loads, over 4.0 seconds is poor, and img elements and CSS background images both count. [4]
| Display slot | Pixels at 1x | At 2x | At 3x |
|---|---|---|---|
| Card thumbnail | 400 | 800 | 1200 |
| Content image | 800 | 1600 | 2400 |
| Full-width hero on a 1440-pixel laptop | 1440 | 2880 | Rarely worth it |
| Phone hero, 390-pixel screen | 390 | 780 | 1170 |
What each builder does automatically
Shopify's own pages disagree slightly: the theme images page lists a 20-megapixel limit but also recommends uploads up to 5000 x 5000 or 25 megapixels. If an upload under 20 MB is rejected, reduce the pixel dimensions. [6]
| Builder | Resizing | Format conversion | Upload limits documented |
|---|---|---|---|
| Framer | Variants at 512, 1024, 2048 and 4096 px on the longer side; never upscales; srcset and sizes added | Most JPEG, PNG, WebP and GIF to AVIF at quality 80; lossless option gives lossless WebP; original served if smaller [5] | Not stated in the article |
| Shopify | Crop and resize in admin; CDN optimises delivery; theme may compress | WebP or AVIF to supporting browsers; GIF to animated WebP; TIFF and BMP converted on upload [6] | Theme images: 20 MB or 20 megapixels; product images: up to 5000 x 5000 px or 25 MP, under 20 MB [6][7] |
| Carrd | You resize and crop the share image when uploading it (Pro Lite or higher) [11] | Not stated in Carrd's share image doc [11] | Not stated in Carrd's share image doc |
Recommended dimensions by use
| Use | Guidance | Source |
|---|---|---|
| Hero or banner | Display width x 2; Framer caps variants at 4096 px | web.dev, Framer [1][5] |
| Square product image | 2048 x 2048 px usually displays best | Shopify [7] |
| Social share image | At least 1200 x 630 at 1.91:1; 600 x 315 minimum for large previews; under 8 MB | Meta [8] |
| Framer social preview | 1200 x 630, important content centred | Framer [9] |
| Gallery thumbnails | Thumbnail display width x 2 | web.dev [1] |
Which format to upload
web.dev calls WebP widely supported and reports AVIF savings of more than 50% over JPEG in some tests. Lossy compression suits photos; line art, sharp edges and text compress better losslessly, and coloured text on flat colour is prone to visible artifacts. [1]
Builders that convert formats change the advice. Framer says to upload JPEG, PNG, WebP and GIF files unmodified because it converts them. [5] Shopify recommends PNG for line drawings, text and transparent graphics, and JPEG for product images and slideshows. [6] Google Search can index BMP, GIF, JPEG, PNG, WebP, SVG and AVIF, and prefers descriptive file names over names like IMG00023.JPG. [10]
Pre-upload checklist
- Measure the widest display slot; export at about 2x that width
- Photos: JPEG or WebP; logos, screenshots and text: PNG or SVG
- Compress, then compare against the original at 100% zoom
- Resize camera originals before uploading to Shopify: theme images must stay within 20 megapixels and 20 MB, product images within 5000 x 5000 px and under 20 MB
- Rename files descriptively, lowercase with hyphens
- Write alt text, or mark the image decorative
- Social share image cropped to 1.91:1 with text kept away from edges
Check after publishing
Run Lighthouse on the live page. Since Lighthouse 13, the oversized-image and encoding checks sit under the Improve image delivery insight and list savings per image in KiB. [2][3] Fix the hero first, because it is the likeliest LCP element, and check the page on a phone as well as a laptop.
Questions before you decide
What size should a website hero image be?
Size it to the widest width it displays multiplied by the screen density: web.dev's example is 1000 pixels for a 500-pixel slot on a 2x screen. Framer generates variants up to 4096 pixels, so larger uploads add nothing there.
Should I convert images to WebP or AVIF before uploading?
On Framer and Shopify, usually not. Framer converts most uploads to AVIF at quality 80, and Shopify serves WebP or AVIF to browsers that support them. Compressing and sizing correctly still matters.
What is the best social share image size?
Meta recommends at least 1200 x 630 pixels at about 1.91:1, with 600 x 315 as the minimum for large link previews and a maximum file size of 8 MB. Framer uses 1200 x 630 for social previews.
Sources & verification
Product details and prices can change. Check the linked provider before buying.
- web.dev: image performance Accessed 30 Oct 2026
- Chrome for Developers: properly size images (Lighthouse) Accessed 30 Oct 2026
- Chrome for Developers: efficiently encode images (Lighthouse) Accessed 30 Oct 2026
- web.dev: Largest Contentful Paint Accessed 30 Oct 2026
- Framer Help: how are images optimized in Framer? Accessed 30 Oct 2026
- Shopify Help Center: theme images Accessed 30 Oct 2026
- Shopify Help Center: product media types Accessed 30 Oct 2026
- Meta for Developers: images in link shares Accessed 30 Oct 2026
- Framer Help: page titles, descriptions and social images Accessed 30 Oct 2026
- Google Search Central: image SEO best practices Accessed 30 Oct 2026
- Carrd docs: adding a share image Accessed 30 Oct 2026
Sources link directly to providers. Product buttons may use separately labeled affiliate links. Read our disclosure.