Best Image Sizes for Websites in 2026

A practical reference for the image dimensions that actually work on the modern web. Every size below accounts for retina (2×) displays — what users see on phones, laptops, and most desktop monitors built in the last decade.

Quick Answer

If you only need one number per use case, these are the sizes that ship on most production sites today:

• Hero / full-width banner: 1920×1080
• Blog post header: 1200×630 (also works as Open Graph)
• In-article content image: 800×600 to 1200×800
• Thumbnail / card: 400×400
• Avatar / profile photo: 200×200
• Favicon: 32×32 (PNG/ICO) or any size as SVG

Standard Image Sizes for Website Layouts

These are the recommended dimensions for the most common layout slots on a website. Each one is sized for retina displays — meaning the file is roughly twice the pixel dimensions of the visible container so the image stays sharp on high-density screens.

Why these numbers? 1920×1080 is the most common desktop viewport, so a hero image at that size renders 1:1 on the largest audience and scales down cleanly via srcset for everyone else. 1200×630 matches Facebook and LinkedIn's Open Graph recommendation, which means a single asset can serve as both the in-page header and the social preview — saving editorial overhead and keeping branding consistent.

Thumbnails at 400×400 give you 2× density on a 200px container — sharp on retina, small enough that even ten of them on a grid page won't hurt page weight. For logos, prefer SVG: it stays crisp at any resolution and usually weighs less than a PNG.

File Size Budgets by Image Type

Pixel dimensions are only half the answer — the byte weight is what your visitors actually wait for. These are practical budgets to hold yourself to after compression:

A useful sanity check: the whole page should land under about 1–2 MB, and images are usually the largest share of that. If a single image is above 500 KB, it is almost always either oversized in pixels or saved at an unnecessarily high quality setting.

Common Aspect Ratios

Picking a consistent ratio per context matters more than the exact pixel count — mismatched ratios are what make grids and cards look broken.

How to Size Any Image Slot

Tables cover the common cases, but eventually you hit a slot nobody wrote a number for. The method is always the same:

1. Measure the rendered width of the slot at its largest — inspect the element and read the layout width in CSS pixels.
2. Multiply by 2 for retina. (Going to 3× is rarely worth the bytes; the perceived difference is small on typical content.)
3. Cap at about 2500 pixels. Beyond that you are paying for pixels almost nobody will see.
4. Generate responsive variants and let the browser choose — 400, 800, 1200, 1600 and 1920 wide covers essentially every viewport.

<img
  src="/photo-1200.jpg"
  srcset="/photo-400.jpg 400w,
          /photo-800.jpg 800w,
          /photo-1200.jpg 1200w,
          /photo-1600.jpg 1600w"
  sizes="(max-width: 768px) 100vw, 800px"
  width="1200" height="800"
  alt="..." loading="lazy">

Always set width and height attributes. They let the browser reserve the right space before the image loads, which prevents layout shift — one of the Core Web Vitals Google measures. To see what your pages are actually serving versus what they render at, run a free image audit.

Best Image Sizes for Social Media & Open Graph

Social previews are easy to get wrong because every platform has slightly different requirements. The good news: a single 1200×630 image satisfies the major ones (Facebook, LinkedIn, Slack, Discord). Twitter/X uses a near-identical 1200×628 — a 2-pixel difference that no one will ever notice.

Pinterest is the exception: tall 2:3 images perform dramatically better than the standard 1.9:1 social aspect, so it's worth a separate asset if Pinterest is part of your distribution. Keep OG images under 8 MB (Facebook's upper limit) but realistically under 1 MB — most platforms re-encode anything larger.

Best Sizes for Favicons & App Icons

Favicons have gotten more complex than they used to be. A modern site needs at least three: a 32×32 PNG or ICO for browser tabs, a 180×180 Apple touch icon for iOS home screens, and 192×192 plus 512×512 PNGs for Android. If you can supply an SVG favicon, do — Chrome, Firefox, and Safari all support it now and a single file replaces several.

Retina & HiDPI: When to Use 2× and 3×

Most modern devices have a device pixel ratio (DPR) of 2 or higher, which means the screen has twice as many physical pixels as CSS pixels. An image that's 400 CSS pixels wide on a 2× display is actually rendered using 800 physical pixels — so if your image file is only 400 pixels wide, it gets stretched and looks soft.

• 2× DPR (most common): Serve images at 2× the rendered size. This is the right default for almost everything.
• 3× DPR (flagship phones): Consider 3× for critical hero images only. Above 2×, the visual improvement is marginal but the file size cost is real.
• 1× DPR: Standard displays — natural size equal to rendered size is optimal. Increasingly rare.

The cleanest way to handle this without serving oversized images to everyone is the srcset attribute, which lets the browser pick the right file based on the actual device. See our natural vs rendered dimensions guide for the underlying mechanics.

Common Mistakes With Web Image Sizes

Picking the right dimensions is only half the job. The mistakes below are what actually cause slow pages — even when the "recommended" size was used.

1. Uploading the camera original. A 6000×4000 photo from a DSLR displayed at 800×600 is sending the user 50× more data than they need. This is the single most common image performance bug — see our guide on finding oversized images.
2. Ignoring rendered vs natural size. A 1920×1080 hero is correct for a full-width slot, but wrong for a 600×400 sidebar slot. The recommended size depends on where the image is rendered, not what it's called.
3. Skipping modern formats. WebP cuts file size by ~30% vs JPEG with identical visual quality. AVIF cuts another 50%. Both are supported in every modern browser. There's no reason to ship JPEG-only in 2026.
4. Forgetting srcset on responsive layouts. A single 1920×1080 hero served to a phone wastes 1.5 MB of bandwidth. srcset with three or four sizes solves this in about ten lines of HTML.
5. Compressing too aggressively on hero images. Quality 60 is fine for backgrounds, terrible for product photos. Match compression to the image's role on the page.

Frequently Asked Questions