What Image Size Should You Use for Websites?

Quick Reference: Recommended Image Sizes

Here are the numbers you came for. Bookmark this table.

These are real-world targets — not theoretical minimums. Use them as your baseline, then tighten where your content allows.

Why Image Size Matters for Web Performance

A 5 MB hero image and a 200 KB optimized version look identical at most screen sizes. The difference? The 5 MB version takes 4–10 seconds to load on a typical mobile connection. The 200 KB version loads in under a second.

Google's Core Web Vitals measure Largest Contentful Paint (LCP) — the time until the largest element on screen is visible. For most websites, that element is an image. Oversized images are the single most common cause of failing LCP scores, which directly affects search rankings.

The business case is simple: faster images = better rankings + lower bounce rates + higher conversions. Shopify data consistently shows that each 100ms improvement in load time increases conversion rates by about 1%. A bloated image gallery costs real money.

Image Dimensions vs File Size: Two Different Problems

These terms get conflated constantly, and they solve different problems.

Dimensions (width × height in pixels) determine how large an image renders on screen. Serving a 4000×3000 px photo to a blog column that's 800 px wide means the browser downloads 12 million pixels to display 2.4 million. That's waste.

File size (kilobytes or megabytes) determines download time. Two images can share identical dimensions but have wildly different file sizes depending on format, compression level, and content complexity.

Fix both:

1. Resize dimensions to match the display size (within 1.5–2× for retina screens)
2. Compress to hit the file size target

Doing only one is a half-solution. A 400×300 thumbnail that's still 800 KB is still broken.

Recommended Sizes by Image Type

Hero and Banner Images

Hero images span the full browser viewport. The standard safe width is 1920 px — covers most desktop displays without upscaling. For height, 1080 px works for landscape layouts; shorter crops (600–800 px) load faster with less visual trade-off.

Target 200–400 KB. If your hero has a lot of detail, 400 KB is acceptable. A simple gradient-heavy graphic can get to 80 KB.

Blog Post Headers

The standard is 1200×630 px — it doubles as your Open Graph image for social sharing and fits neatly in blog layouts. Under 200 KB. Most well-compressed blog headers land at 80–120 KB with WebP.

Product Images

E-commerce product images need room for zoom interactions. 800×800 is the practical minimum for a zoom-capable product gallery. High-end stores use 1200×1200, but file sizes should stay under 200 KB. Square crops (1:1 ratio) are standard for grid layouts.

Thumbnails

Grid thumbnails, related posts, search results — these display at 200–400 px on screen. Serving them at 400×300 is sufficient. Keep file sizes under 50 KB.

Logo Files

Use SVG wherever possible — SVG is resolution-independent and typically 2–15 KB. For raster logos (WebP/PNG), 200×60 px covers most header use cases. Never use a 2000 px logo in a header — browsers can scale it down, but they still download the full file.

Favicons

You need two versions:

• 32×32 px ICO or PNG — browser tab, bookmarks
• 180×180 px PNG — Apple Touch Icon for iOS home screen

Generate both from a single high-res source (512×512 PNG works well as a master).

Open Graph Images

When your page is shared on LinkedIn, Twitter/X, Slack, or Facebook, the platform pulls your OG image. The universal safe size is 1200×630 px — it's the correct aspect ratio for every major platform. Under 200 KB. Use JPG or WebP; PNG is often unnecessarily large for photographs.

File Size Targets by Use Case

"Total image budget" means the combined file size of all images loaded on first paint. Lazy-loaded images below the fold don't count against the initial budget.

How to Resize and Compress Images for Your Website

You have two tasks: resize to correct dimensions, then compress to target file size. You can do both in one step.

Pixotter's resize tool handles dimension resizing — set exact pixel dimensions or resize by percentage, with output in any format. For file size reduction, Pixotter's compression tool uses WebAssembly in the browser, so your images never leave your machine.

Because Pixotter processes everything client-side, you can run an entire image library through the pipeline without uploading to a third-party server. For batch work (resizing a product catalog, optimizing a blog's image folder), this matters.

Practical workflow:

1. Identify the display dimensions for each image type on your site
2. Resize to 1.5× that display size (for retina screens — a 800 px column gets a 1200 px image)
3. Export as WebP at 80–85% quality
4. Check the file size — if it's above target, drop quality to 75% or reduce dimensions
5. Use srcset to serve different sizes to different screen widths

For reducing file sizes on already-sized images, How to Reduce Image Size covers the compression side in detail. For format choices (when to use WebP vs AVIF vs JPG), see Best Image Format for Web.

If you have a specific file size target, Compress Image to 200KB walks through hitting an exact byte target.

Common Mistakes That Slow Down Websites

Serving original camera photos. A DSLR or iPhone photo is 4000–6000 px wide and 5–15 MB. This is never appropriate for web use. Resize before uploading to your CMS.

Uploading retina images without compression. A 2x retina image at full quality is 4× the data of a standard image. At 85% WebP quality, the visual difference is invisible. The file size difference is not.

Using PNG for photographs. PNG is lossless, which makes it excellent for logos, icons, and screenshots with text. For photographs, PNG is 3–10× the file size of a well-compressed WebP or JPG with no visible quality benefit.

Not using WebP. WebP has had 95%+ browser support since 2020. AVIF is now at 90%+ support. There is no reason to serve JPG to modern browsers — a WebP at the same visual quality is 25–35% smaller.

Ignoring mobile. A 1920 px image loaded on a 390 px wide phone screen downloads 24× more pixels than necessary. Even if the browser scales it down, it downloaded every one of those pixels. Use srcset to serve smaller images to smaller viewports.

Forgetting above-the-fold images. Lazy loading is smart, but applying it to the hero or first visible image blocks LCP. Images visible on first paint should load eagerly (loading="eager" or no loading attribute at all).

FAQ

What resolution should website images be?

72 PPI is a web convention, but it doesn't control display quality — pixel dimensions do. For standard screens, match your image width to the display width. For retina (HiDPI) screens, use 1.5–2× the display size. A 800 px wide image slot gets a 1200–1600 px source image.

What's the maximum file size for a web image?

No hard maximum, but treat 500 KB as a single-image ceiling for hero images, and 100–150 KB as the target for most content images. The entire above-the-fold image budget should stay under 1 MB.

Should I use JPG or PNG for my website?

WebP for both. JPG is acceptable for photos when WebP isn't an option. PNG should be reserved for images requiring transparency (logos, icons) or screenshots with sharp text. For everything else, WebP's compression is superior to both.

What size should a website background image be?

1920×1080 px, 200–500 KB. If the background is abstract or blurred, you can get away with much less. A heavily blurred background can be compressed aggressively — 80–120 KB is achievable with minimal visual loss.

What image size do I need for a responsive website?

Create multiple sizes and serve them with the HTML srcset attribute. A common set: 400 px (mobile), 800 px (tablet), 1200 px (laptop), 1920 px (desktop). The browser picks the right size automatically based on screen width and pixel density.

How large should product images be for e-commerce?

800×800 px minimum for standard display, 1200×1200 px if you want zoom functionality. Multiple angles are more valuable than one giant image. Keep each product image under 150 KB.

Does image size affect SEO?

Yes, directly. Core Web Vitals (especially LCP and CLS) are ranking signals. Oversized images tank LCP scores. Images also need descriptive alt text, relevant filenames, and correct dimensions in the HTML to avoid layout shift. Compress everything above the fold.

What's the best image size for a blog post?

Header image: 1200×630 px, under 200 KB. Inline content images: match the content column width (typically 700–900 px), under 150 KB each. For a blog post with 3–4 inline images, total image weight should stay under 600 KB.