Standard Image Sizes for Websites: Every Format and Use Case

You export a hero image at the wrong dimensions, it either stretches into a blurry mess or crops your headline off-screen. You share a blog post and the social preview shows a random cropped fragment of your featured image instead of the clean rectangle you designed. Every image type on a website has a correct size, and guessing wrong costs you either quality or page speed.

This is the reference for the images themselves: hero banners, blog featured images, social share (OG) images, favicons, thumbnails, product photos, and logos, with the exact pixel dimensions each one needs in 2026. If you’re sizing the page layout — breakpoints, container widths, screen resolutions — start with our companion guide to website dimensions, which also has a free downloadable 2026 Website Dimensions Cheat Sheet. This guide is the image-specific companion to it.

What Are the Standard Image Sizes for a Website?

The core image sizes every website needs are: a 1920×1080 hero image, a 1200×630 blog featured/OG image, a 512×512 favicon source, 400×400 thumbnails, and 2000×2000 product photos. Everything below breaks these down by exact use case, aspect ratio, and format.

What Size Should a Hero Image Be?

A desktop hero image should be 1920×1080 pixels at a 16:9 ratio — wide enough to fill a standard monitor without upscaling, and light enough to compress well for LCP. For visitors on high-resolution 2K and 4K displays, export a 2560×1440 source version and let responsive srcset markup serve it only to screens that can use it.

Mobile hero images need their own crop, not a squeezed version of the desktop file. A 1080×1350 portrait crop (4:5) keeps faces and text readable on a phone screen instead of shrinking a wide banner into an illegible strip. Most modern themes and page builders let you assign a separate mobile hero image; use it.

Because the hero image is almost always what determines your Largest Contentful Paint (LCP) score, size and compress it deliberately — our page speed optimization guide covers exactly how much that single image affects your Core Web Vitals.

What’s the Right Size for a Full-Width Banner Image?

A full-width banner — the kind used for promotions, announcement strips, or mid-page section breaks — typically runs 1600×500 pixels, noticeably shorter than a hero image relative to its width. The lower height keeps it from competing with the hero for vertical space while still spanning edge to edge on desktop.

Unlike a hero image, a banner rarely needs a portrait mobile crop. Most themes stack banner text and simply let the image scale down proportionally, so a wide, shallow 3.2:1 ratio works across breakpoints without a second export.

What Size Should a Blog Featured Image Be?

A WordPress blog featured image should be 1200×630 pixels — the same 1.91:1 dimensions as an Open Graph image, which means one export does double duty as both your post’s header image and its social share preview. This is the size WordPress itself expects for the post-thumbnail and it’s what nearly every modern theme is built around.

Keep the file itself light: a well-compressed WebP at 1200×630 typically lands between 40–90KB, versus several hundred KB for an unoptimized JPEG at the same dimensions. For a full breakdown of how featured image sizing fits into your site’s overall layout system — including where it sits relative to your content width and sidebar — see our website dimensions guide and cheat sheet, the pillar reference this article extends.

What Is the Correct Open Graph (OG) / Social Share Image Size?

The correct Open Graph image size is 1200×630 pixels at a 1.91:1 ratio — the single dimension that works across Facebook, LinkedIn, X, Slack, Discord, WhatsApp, and iMessage link previews without a separate export per platform.

The catch is the safe zone: platforms crop differently on narrow screens, so keep any headline text or faces inside the center 1080×600 area rather than flush against the edges. Keep the exported file under 1MB — heavier files render slowly or get silently downscaled by some platforms.

What Size Should a Favicon Be?

A single favicon size no longer covers every surface it appears on — you need a set. Export from a 512×512 master and generate the rest down from it:

Start square, keep the design simple enough to read at 16×16, and export as PNG (or ICO for the classic browser-tab file) — a detailed logo that looks fine at 512px turns into an unreadable smear at 16px.

What’s the Best Size for Thumbnail Images?

Thumbnails used in grids, related-post widgets, or search results generally run 300×300 to 400×400 pixels at a 1:1 ratio. Square crops tile cleanly in a grid regardless of how many columns a layout uses, which is why almost every WordPress theme defaults thumbnails to square rather than matching the original image’s aspect ratio.

If your thumbnail is a cropped version of a wider featured image, crop toward the visual focal point (usually a face or the main subject) rather than a dumb center crop — most modern WordPress media libraries support this natively.

What Size Should Product Images Be for an Online Store?

Product photos for an online store should be at least 2000×2000 pixels at a 1:1 ratio — the resolution needed to support pinch-to-zoom and detail inspection without the image looking soft. For products where texture or craftsmanship matters (jewelry, apparel, electronics), export at 2500×2500 instead.

This matters more than it looks: shoppers who can’t zoom in to check stitching, material, or fine print convert at a measurably lower rate than shoppers who can. If you’re running or planning a WooCommerce catalog, our WordPress web design services team builds product image pipelines that handle multi-size generation and compression automatically, so a 2000px master doesn’t turn into a 2000px page-weight problem.

What Size Should a Logo Be?

There’s no single “logo size” — a logo needs at least three exports:

• Header logo: designed at high resolution but displayed around 250×80 px (or your theme’s header height); SVG is ideal since it scales to any display size with zero quality loss.
• Favicon source: a simplified square mark, exported at 512×512 px, because most full logos with wordmarks don’t survive being shrunk to 32px.
• Footer/print logo: often a monochrome or reversed variant, sized to match the footer’s narrower column width.

If your logo is currently a single PNG stretched into every one of these slots, that’s usually the reason it looks soft in the header or illegible as a favicon — each context needs its own export, not one file doing three jobs.

What Image Format Should You Use for Each Size?

Dimensions solve how an image looks; format solves how much it weighs. As a rule: WebP for anything photographic that isn’t a social preview file (hero images, thumbnails, product photos, blog featured images), PNG or JPEG for OG/social images since some platforms still handle WebP inconsistently in link previews, and SVG for logos and icons that need to stay crisp at any size.

The size-vs-quality tradeoff between formats is its own decision — see our full comparisons of WebP vs JPEG and WebP vs PNG for when each format actually wins.

Frequently Asked Questions

What is the ideal image size for a website?

There isn’t one universal size — it depends on where the image appears. A hero image should be 1920×1080, a blog featured/OG image 1200×630, product photos at least 2000×2000, and thumbnails 300–400px square. Match the size to the use case rather than using one dimension everywhere.

What size should I upload images to WordPress?

Upload at the largest size you’ll realistically display — typically 1920px wide for a hero or full-width image, 1200×630 for a featured image. WordPress automatically generates smaller cropped versions (thumbnail, medium, large) from whatever you upload, so there’s no need to manually create every size yourself.

Do I need different image sizes for mobile and desktop?

For hero images, yes — a 16:9 desktop crop often loses its focal point when squeezed into a narrow mobile screen, so a separate 4:5 portrait crop performs better. For most other image types (featured images, thumbnails, product photos), one properly sized export scales down fine across devices.

What’s the maximum file size for web images?

Aim under 200KB for most content images and under 1MB for OG/social images, regardless of pixel dimensions. A correctly sized 1920×1080 WebP hero image typically comes in well under 200KB; if yours is larger, compression — not dimensions — is usually the problem.

What size should a favicon be?

Export a 512×512 master, then generate 32×32 for the browser tab, 180×180 for the Apple touch icon, and 192×192 plus 512×512 for Android and PWA use. Most favicon generator tools create all four from a single square source file.

Why does my social share image look cropped or blurry?

Almost always a mismatched aspect ratio — if your OG image isn’t close to 1.91:1 (1200×630), platforms crop it to fit rather than resizing it cleanly. Re-export at the correct dimensions and keep key content inside the 1080×600 safe zone.

You Might Also Find Useful

• Website dimensions guide + cheat sheet — the full page-layout companion to this image-specific guide, with a free downloadable 2026 dimensions cheat sheet
• WebP vs JPEG — which format to export each image size in
• WebP vs PNG comparison — when PNG still beats WebP
• Page speed optimization — how image size and format affect Core Web Vitals
• WordPress web design services — image pipelines built into your site build, not bolted on after

• image optimization
• image sizes
• OG image
• Web Design
• WordPress