The best image size for a website depends on where the image goes: about 1920×1080 px for a full-width hero banner, 1200×630 px for blog featured images, 1000–2048 px square for product photos, and 300–600 px for thumbnails. Keep most images under 200 KB, save them as WebP or JPG, and serve smaller versions to phones.
There's no single correct size, because your theme decides how wide each image displays. A hero that spans a 27-inch monitor needs far more pixels than a sidebar thumbnail, and every extra kilobyte slows the page. The numbers below are common recommendations that work across most themes and site builders; always check your own theme's documentation, since some crop or resize images on their own. The guide also covers file size targets, formats, responsive images and how images affect Core Web Vitals.
- Hero / full-width banner: 1920×1080 px (16:9), or 2560 px wide for sharp results on large high-density screens. Aim for under 300 KB.
- Blog featured image: 1200×630 px, which also works as the social share preview.
- Product images: square, 1000–2048 px. Shopify recommends 2048×2048.
- Format: WebP (or AVIF) for photos where your platform supports it, JPG as the fallback, PNG or SVG for logos.
- Speed: the largest image on the page is usually the LCP element. Size it properly, don't lazy-load it, and Google's “good” LCP threshold is 2.5 seconds.
What is the best image size for a website?
Upload images at roughly the largest width they will display, times two for sharp high-density (Retina) screens where it matters, and no larger. Here are the common recommendations by image type:
| Image type | Recommended size (px) | Aspect ratio | File size target |
|---|---|---|---|
| Hero / full-width banner | 1920×1080 (up to 2560 wide) | 16:9, or wider like 3:1 | Under 200–300 KB |
| Slim page banner | 1920×600 to 1920×800 | About 3:1 to 2.4:1 | Under 200 KB |
| Blog featured image | 1200×630 | 1.91:1 | Under 150 KB |
| In-article image | 1200–1600 wide | Any; 16:9 or 3:2 common | Under 150 KB |
| Product image | 1000–2048 square | 1:1 | Under 300 KB |
| Thumbnail / grid tile | 300–600 square | 1:1 | Under 50 KB |
| Logo | SVG, or PNG at 2× display size (e.g. 500×200) | Your logo's shape | Under 30 KB |
| Favicon | Square source 512×512; serves 32×32, 180×180 and up | 1:1 | A few KB |
| Social share (Open Graph) | 1200×630 | 1.91:1 | Under 300 KB |
These are starting points, not rules. If your theme shows the blog image at 800 px wide, a 1600 px upload is plenty. If your store theme displays product images in a 4:5 frame, use 4:5. Shopify, WordPress, Squarespace and Wix all generate smaller versions automatically, so the upload size mostly matters for the biggest display.
What size should a website hero image be?
1920×1080 px is the safe default; go to 2560 px wide if your audience uses large high-density displays and your platform serves smaller versions to phones. Full-width banners stretch to the browser width, and the most common desktop widths are 1366 to 1920 px. Many themes crop hero images to fit the screen height, so keep the product and any text in the middle 60% of the frame.
- Keep the subject centered. Phones show a narrow vertical slice of a wide hero.
- Don't bake text into the image. It gets cropped on mobile and can't be read by search engines. Use real HTML text over the image instead.
- Consider a separate mobile crop (for example 1080×1350) if your theme supports one.
If your best product shot is square or vertical, it won't fill a 16:9 banner. Our AI image extender widens it to a 1920×1080 website banner by generating matching background, without redrawing the product (8 credits per size).
Turn a square product photo into a 1920×1080 website banner without cropping the product.
Make a banner7 days free · 50 credits · No credit cardWhat size should blog featured images be?
1200×630 px. It's the standard Open Graph size that Facebook, LinkedIn, Slack and other apps use when someone shares your link, so one image serves both the blog and the share preview. If your theme shows featured images at 16:9, use 1200×675 or 1600×900 and set a separate 1200×630 social image in your SEO plugin.
What size should product images be on a website?
Square, between 1000 and 2048 px, with every product in the same shape. Shopify recommends 2048×2048 px so zoom stays sharp. For WooCommerce and other platforms, 1000–1600 px square is usually enough unless you use a zoom feature. Consistency matters more than the exact number: a grid where every product is the same shape and fills a similar share of the frame looks professional. Our Shopify product image size guide goes deeper.
AiArter's product photo studio exports Shopify 2048×2048 images with the product kept from your photo and processes up to 50 at a time.
What size should a logo and favicon be?
Use an SVG logo if you can; otherwise a PNG at twice the size it displays. Most headers show logos between 150 and 300 px wide, so a 500–600 px wide PNG with a transparent background covers high-density screens. Our guide to making a logo background transparent helps if yours has a white box around it.
For the favicon, start with a square image of at least 512×512 px. Google's guidelines say a favicon must be square and at least 8×8 px, and recommend larger than 48×48 px. Browsers use 32×32, iPhones use a 180×180 Apple touch icon, and Android and web app manifests use 192 and 512 px. Most site builders generate all of these from one upload.
How big should image files be for a website?
Under 200 KB for most images, under 300 KB for a hero, and under 50 KB for thumbnails. File size, not pixel size, is what slows pages down. A 1920×1080 photo can be 150 KB as WebP or 1.5 MB as an uncompressed PNG, and the two look almost the same.
- Resize first. Don't upload a 4000 px phone photo for a 1200 px slot.
- Pick the right format (see below).
- Compress at around 75–85% quality for WebP or JPG. Most people can't see the difference.
- Check the result at 100% zoom on the edges and text.
Our free image compressor does steps 1 to 3 in your browser for up to 20 images: pick JPG, WebP or PNG, set a quality, cap the longest side (for example at 2000 px) and see how much you saved. It also converts iPhone HEIC photos. For exact pixel sizes, the free marketplace image resizer takes custom widths and heights. For more on resizing cleanly, see how to resize an image without losing quality.
Which image format is best for websites?
WebP for photos, with JPG as a fallback; AVIF where your platform supports it; PNG or SVG for logos and graphics with transparency. WebP files are typically 25–35% smaller than JPG at similar quality, and every current browser supports it. Shopify and many CDNs convert uploads to WebP or AVIF automatically, so on those platforms you can upload JPG or PNG and let them handle it. Our JPG vs PNG vs WebP guide compares them in detail.
| Format | Use for | Transparency | Notes |
|---|---|---|---|
| WebP | Most photos and banners | Yes | Small files; universal browser support |
| AVIF | Photos, if supported | Yes | Smaller still; slower to encode |
| JPG | Photos; fallback | No | Works everywhere |
| PNG | Logos, screenshots, cutouts | Yes | Large for photos |
| SVG | Logos and icons | Yes | Sharp at any size; tiny files |
What are responsive images and srcset?
Responsive images let the browser download a smaller file on a phone and a larger one on a big screen, from the same <img> tag. You list several widths in srcset, describe how wide the image displays in sizes, and the browser picks. WordPress, Shopify, Squarespace and Wix do this for you; you only write it by hand on a custom site.
<img src="hero-1280.webp"
srcset="hero-768.webp 768w, hero-1280.webp 1280w, hero-1920.webp 1920w, hero-2560.webp 2560w"
sizes="100vw"
width="1920" height="1080"
fetchpriority="high"
alt="Ceramic mug on a wooden table">Always include width and height attributes (or a CSS aspect-ratio). They let the browser reserve space before the image loads, which prevents the page from jumping, measured as Cumulative Layout Shift (CLS).
How do images affect Core Web Vitals?
The biggest image above the fold is usually the page's Largest Contentful Paint (LCP) element, so its file size often decides your LCP score. Google treats an LCP of 2.5 seconds or less as good.
- Don't lazy-load the hero. Use
loading="lazy"on images below the fold only; the hero should load immediately, ideally withfetchpriority="high". - Serve the right size with srcset so phones don't download desktop images.
- Compress hard, and prefer WebP or AVIF.
- Set width and height to avoid layout shift (CLS should stay at or under 0.1).
- Avoid sliders with several large images loading at once on first view.
Run a page through Google's PageSpeed Insights. It names your LCP element and flags images that are oversized, unoptimized or missing dimensions, so you fix the ones that matter first.
Image SEO is about more than size: descriptive file names and alt text help search engines and screen readers. See our guide to product image alt text.
Frequently asked questions
What is the best image size for a website?
It depends on placement: about 1920×1080 px for full-width hero banners, 1200×630 px for blog featured images, 1000–2048 px square for product images and 300–600 px for thumbnails. Keep most files under 200 KB.
What size should a website banner be?
A full-width banner is commonly 1920×1080 px (16:9), or 1920×600 to 1920×800 px for a slim banner. Keep important content centered, because themes crop banners differently on phones.
What is the best image format for a website?
WebP for photos, with JPG as a fallback, and SVG or PNG for logos and graphics that need transparency. Many platforms, including Shopify, convert uploads to WebP automatically.
How many KB should a website image be?
Aim for under 200 KB for most images, under 300 KB for a hero image and under 50 KB for thumbnails. Resizing to the display width and compressing at 75–85% quality usually gets you there.
Do large images slow down a website?
Yes. Large image files are one of the most common causes of slow pages and poor Largest Contentful Paint scores. Resize, compress, use WebP and serve smaller versions to phones.
What size should a favicon be?
Start with a square image of at least 512×512 px. Google requires a square favicon and recommends larger than 48×48 px; browsers use 32×32 and iPhones use a 180×180 Apple touch icon.
Make clean square product photos and 1920×1080 banners from the photos you already have, with the product kept exactly as shot.
Start free trialSee pricing7 days free · 50 credits · No credit card. Trial images carry a small “Made with aiarter” mark; paid plans export clean files you can use commercially.
