Image Size for Websites: The Ideal Resolution and File Size

Unlike social media — which has fixed, well-documented specs — websites have variable layouts, responsive designs, and very different use contexts. A homepage banner takes up 100% of the screen width. A product photo might appear at 400px or 800px depending on the device. A blog image is displayed within a text column.

There's no single correct size for a "website image" — but there are recommended ranges for each context, and understanding them makes the difference between a fast, well-displayed site and a slow site with blurry or overly heavy images.

Why image size affects your website

Two distinct problems arise when images aren't optimized:

Images too large in pixels: the browser downloads a 4000px photo to display at 800px — 80% of the transferred data is immediately discarded. The site gets slow with no visual gain.
Images too heavy in KB/MB: even with correct dimensions, an uncompressed photo can weigh 3 MB when it could weigh 150 KB with identical visual quality on screen.

The two problems have different solutions: the first requires resizing (adjusting the pixels); the second requires compression (reducing the weight without changing the pixels). In practice, applying both in sequence produces the best result.

💡 General rule: the maximum width for any web image rarely needs to exceed 1920px — the width of a Full HD monitor. For images that never fill the whole screen (columns, product grids, thumbnails), the limit is even lower. Beyond that, you're wasting bandwidth and hurting load time.

Reference table — sizes by image type

Image type	Recommended dimensions	Ideal weight	Format
Banner / hero (full width)	1920 × 600–900 px	100–200 KB	WebP / JPG
Desktop banner (boxed layout)	1200–1440 × 400–600 px	80–150 KB	WebP / JPG
Mobile banner	768 × 400–600 px	50–100 KB	WebP / JPG
Product photo (e-commerce)	800–1200 × 800–1200 px	60–150 KB	WebP / JPG
Product thumbnail	300–600 × 300–600 px	20–50 KB	WebP / JPG
Article / blog image	1200 × 600–800 px	60–120 KB	WebP / JPG
Post thumbnail (listing)	400–600 × 250–400 px	20–50 KB	WebP / JPG
Header logo	200–400 px wide	5–30 KB	SVG / PNG / WebP
Interface icons	24–64 px	1–5 KB	SVG
Favicon	16, 32, 180, 192, 512 px	1–10 KB each	.ico + PNG
Open Graph (social preview)	1200 × 630 px	80–150 KB	JPG / WebP
Section background	1920 × variable height	100–300 KB	WebP / JPG
Profile photo / avatar (site)	200–400 × 200–400 px	20–50 KB	WebP / JPG / PNG
Testimonial / customer image	80–150 × 80–150 px	5–20 KB	WebP / JPG

Dimensions by website type

Corporate sites and portfolios

Corporate sites usually have a maximum content width between 960px and 1440px. Banner or hero images tend to fill 100% of the layout width — so 1440–1920px wide is enough for modern monitors. Section images (team photos, office, services) rarely need to exceed 800px wide.

Main banner: 1920 × 700–900px, under 200 KB
Team photo: 400–600 × 400–600px, under 60 KB
Service / section photo: 800–1200 × 500–700px, under 100 KB

Blogs and content portals

In blogs, the content column rarely exceeds 760–800px wide. A featured image at 1200px is more than enough to cover any responsive layout with no waste. Thumbnails in post listings are even smaller — usually 300–500px.

Featured image: 1200 × 630px, under 100 KB
Images within the article: 800–1200px wide, under 80 KB each
Listing thumbnail: 400 × 250px, under 30 KB

E-commerce and online stores

In e-commerce, product photos are the most critical element — they're the main tool for convincing the customer. Resolution needs to be enough for zoom (when the site offers this feature), but weight needs to be controlled so it doesn't hurt the speed of listing pages, which load many images at once.

Main product photo (square): 800–1200 × 800–1200px, 80–150 KB in WebP
Additional product photos: same size as the main one
Product grid thumbnail: 300–500 × 300–500px, 20–50 KB
Category / promotion banner: 1440 × 400–600px, 80–150 KB

🛍️ For e-commerce: always use a white or neutral background in product photos — besides making compression easier (large uniform-color areas compress very well), it ensures visual consistency between products from different suppliers and improves the comparison experience in the cart.

Landing pages

Landing pages are designed for a single conversion action — and speed is critical: research shows every additional second of load time reduces conversion rate by 7–12%. Images on landing pages need to be aggressively optimized.

Hero / background: 1440–1920px wide, under 150 KB — top priority
Product / service photo: 600–800px, under 80 KB
Benefit icons: SVG whenever possible
Testimonial photo: 80–120px circular, under 15 KB

The impact of the 2× factor (Retina and HiDPI displays)

Retina (Apple) and HiDPI (other manufacturers) displays have double the pixel density — meaning they show more pixels per inch than regular monitors. For images to appear sharp on these screens, the image needs double the pixels of the display space.

Example: an image displayed at 400px wide on a Retina display would need 800px wide to appear sharp. Uploading only 400px results in a slightly blurry image on iPhones and MacBooks.

The most practical solution is to use images at double the maximum display width — but compress well so the weight doesn't double in the same proportion. A well-compressed 800px image in WebP usually weighs less than an unoptimized 400px PNG.

The right format for each situation

Situation	Ideal format	Why
Photographs (product, banner, team)	Lossy WebP	25–35% smaller than JPG with equivalent quality
Header logo	SVG	Vector, any size with no loss, smallest file
Logo when SVG isn't supported	PNG with transparent background	Preserves the necessary transparency
Interface icons	SVG	Scalable, animatable via CSS, tiny file
Screenshot with text	Lossless WebP or PNG	Sharp text — JPG creates artifacts around letters
Open Graph / social preview	JPG or WebP	Maximum compatibility with preview platforms
Background with transparency	WebP with alpha channel or PNG	The only format with transparency besides PNG

How to prepare images before uploading

The recommended workflow for any image intended for a website is:

Define the usage dimensions. What's the maximum space this image will take up in the layout? Use the reference table above or inspect the element in the browser (F12 → select the image's space).
Resize to double the display space. To cover Retina displays without excessive waste. Use the Resize Image tool to set the exact width in pixels.
Convert to WebP. If your site or CMS supports WebP (most modern ones do), convert before uploading. Use the Image Converter for a quick conversion.
Compress. Apply compression to reduce the weight within the recommended ranges. Use the Image Compressor to optimize JPG, PNG, and WebP with no perceptible visual loss.
Check the result. Open the compressed image and compare it with the original. If the difference isn't visible, the result is good.

Prepare your images for your site now

Resize and compress your site's images in seconds — nothing to install, no account needed.

Resize image Compress image

Checking your site's current image sizes

To find out if your current site's images are optimized, use these tools:

Google PageSpeed Insights (pagespeed.web.dev): analyzes the URL and lists images with room for reduction, showing the estimated savings in KB for each one.
Chrome DevTools → Network → Img: filter requests by image type and see the size of each loaded file. Sort by size to identify the heaviest ones.
WebPageTest.org: detailed waterfall analysis, showing which images load first and how long they take.

Most common image size mistakes on websites

Uploading photos straight from the camera: camera photos are 3–12 MB and 4000–8000px wide. No site needs images like that without resizing and compressing first.
Using PNG for photos: photos in PNG end up 5–10× larger than in JPG or WebP with no visual gain. Use PNG only for images with transparency or graphics with sharp edges.
Not having a mobile version of images: serving a 1920px image to a 390px phone is pure waste. HTML's srcset attribute solves this automatically.
Forgetting Open Graph images: when someone shares a page on WhatsApp or LinkedIn without a configured preview image, the platform shows a generic or blank thumbnail. Always set the og:image meta tag with a 1200×630px image.
Logo in JPG: JPG's forced white background shows up in contexts with a colored or transparent background. Always use SVG or PNG for logos.

Frequently Asked Questions

What's the maximum image size for a site to load fast?

There's no single limit — it depends on the image type and context. As a practical reference: no content image (photo, banner, product) should exceed 300 KB under normal conditions. Full-screen hero banners can reach up to 200 KB. Thumbnails and photos within text should stay under 80 KB. Google PageSpeed considers any image "efficient" if it loads in under 2 seconds on a 3G connection — which corresponds to roughly 100–200 KB for most image types.

What's the ideal product photo size for e-commerce?

800×800px or 1000×1000px at a 1:1 (square) ratio is the most common standard in e-commerce. This size covers product page display well, works for basic zoom, and still allows compression down to 80–150 KB in WebP. If your site offers advanced zoom (click to enlarge to 100%), consider 1200×1200px as a maximum — beyond that, the visual benefit rarely justifies the extra weight.

What is the Open Graph image and why do I need to set it up?

Open Graph is the protocol that defines which image appears in the preview when a URL is shared on WhatsApp, Facebook, LinkedIn, Telegram, and others. Without this image configured, platforms pick any image from the page (usually the first one they find) — the result is often an ugly or blank preview. Set the og:image meta tag with a 1200×630px image on every important page of your site.

Do I need to create different versions of each image for mobile and desktop?

For most sites, you don't need to create versions manually. HTML's srcset attribute lets you declare multiple versions and let the browser choose the most suitable one for each device. Platforms like WordPress and Shopify generate these variants automatically. What matters is making sure the original image has enough pixels for the largest possible display — usually 1920px for banners and 1200px for content images.

My site uses WordPress — do I need to worry about image size?

Yes, especially on upload. WordPress automatically generates smaller-size variants, but it always starts from the original file. If you upload 8 MB camera photos, WordPress creates smaller variants — but keeps the original on the server, and the variants' quality depends on the original's resolution. The ideal practice is to resize and compress before uploading: a well-compressed 1200px image in WebP will generate better variants and take up much less server space than a raw camera photo.

How do I know what image size my specific layout needs?

The most precise way is to inspect the element in Chrome: right-click the area where the image will appear → Inspect → check the element's size in the CSS properties (width and height in pixels). Multiply by 2 to cover Retina displays. That's the ideal size for that specific image in that layout. For most cases, the reference table in this article is enough as a starting point.