Website Image Sizes in Pixels: A Practical Guide

There is no single best image size for every website. Choose dimensions from the image’s rendered slot, aspect ratio, crop behavior and screen density. For normal page content, serve responsive width variants with srcset and sizes. For a broad social link preview, 1200 × 630 pixels (about 1.91:1) is a practical starting canvas. LinkedIn documents a 1200 × 627 pixel minimum, a 1.91:1 recommendation and a 5 MB limit.

The sections below give usable dimensions by placement, explain what is official versus recommended, and show complete HTML for responsive delivery and social metadata.

1. Start with the rendered slot, not a universal canvas

A 1600-pixel image can be appropriate for a wide article column and wasteful for a 240-pixel card. Conversely, a small source becomes blurry when a retina display or a large desktop slot scales it up. Measure the largest width at which the image will actually render, then provide nearby candidates for common breakpoints and high-density screens.

Placement	Practical starting point	What to verify
Responsive article or documentation image	No universal dimension. Offer several widths with `srcset`; Google’s examples use 320, 480 and 800 px as illustrative candidates.	Rendered CSS width, device pixel ratio, crop and file weight.
Website or link preview	1200 × 630 px, about 1.91:1.	Each destination may crop or compress differently.
LinkedIn website share	At least 1200 × 627 px; 1.91:1 recommended; maximum 5 MB.	LinkedIn’s help page is the authority for its limit; it notes images below 401 px wide display as thumbnails. LinkedIn image specifications.
Instagram feed	1080 px wide; Hootsuite reports supported ratios from 1.91:1 through 4:5.	Images outside the range are cropped; grid presentation differs from feed presentation.
Instagram Stories or Reels	1080 × 1920 px (9:16).	Keep important details clear of interface overlays and safe-area edges.
Facebook feed	1080 × 566 landscape, 1080 × 1359 portrait or 1080 × 1080 square (secondary reference recommendations).	Placement and crop can change the result.
X in-stream photo	1280 × 720 landscape, 720 × 1280 vertical or 1080 × 1080 square (secondary reference recommendations).	These figures are not an official current X specification.

Social figures are not interchangeable with CMS, advertising or theme presets. Treat the Hootsuite and cross-platform values as recommendations and recheck the destination’s own documentation before publishing a campaign.

2. Calculate a content image’s pixel dimensions

Inspect the widest rendered slot in CSS pixels. A two-column article might render at 720 CSS px on desktop and 100% of a 390 px viewport on mobile.
Choose a candidate near the slot width and another around twice that width for high-density displays. For a 720 px slot, 720 and 1440 px candidates are reasonable starting points if the source detail justifies them.
Keep the original aspect ratio unless the design intentionally crops it. If the slot is 720 × 405, a 16:9 source avoids unexpected cropping.
Compress each candidate and compare visual quality at its actual display size. File weight is part of the image specification.

Do not upscale a small source merely to hit a target number. Find or export a larger original, or design the slot around the available asset. Google recommends choosing an image relevant and representative of the page and using high resolution when possible. See Google’s image SEO guidance.

3. Implement responsive images with `srcset` and `sizes`

The w descriptors tell the browser the intrinsic width of each file. The sizes attribute describes the slot width the browser should expect before it downloads an image. Keep a normal src fallback because some crawlers and older clients do not understand responsive attributes.

<img
  src='/images/article-800.jpg'
  srcset='
    /images/article-320.jpg 320w,
    /images/article-480.jpg 480w,
    /images/article-800.jpg 800w,
    /images/article-1440.jpg 1440w'
  sizes='(max-width: 700px) 100vw, 720px'
  width='1440'
  height='810'
  alt='Diagram showing how a responsive image source is selected'
  loading='lazy'
  decoding='async'>

In this example, a viewport up to 700 px uses nearly the full viewport width; wider screens reserve a 720 px column. The intrinsic width and height preserve layout space while the file loads. Use loading='lazy' for below-the-fold content, but keep the main above-the-fold image eager when it is the page’s primary visual.

Use `picture` for art direction or alternate formats

Use picture when mobile needs a different crop, or when you want to offer formats such as AVIF and WebP with a fallback.

<picture>
  <source
    media='(max-width: 700px)'
    srcset='/images/hero-mobile-640.webp 640w, /images/hero-mobile-960.webp 960w'
    sizes='100vw'
    type='image/webp'>
  <source
    srcset='/images/hero-800.avif 800w, /images/hero-1440.avif 1440w'
    sizes='(max-width: 1200px) 100vw, 1200px'
    type='image/avif'>
  <img
    src='/images/hero-800.jpg'
    width='1440'
    height='810'
    alt='Aerial view of a coastline at sunrise'>
</picture>

Google Search supports BMP, GIF, JPEG, PNG, WebP, SVG and AVIF referenced by an img src. Match the filename extension to the actual file type. Choose a format based on image content, browser support and resulting weight; do not convert every asset blindly.

Create a separate social-preview asset when your article artwork does not fit a 1.91:1 crop. A 1200 × 630 canvas gives services room to crop while keeping a useful preview. Keep the subject away from edges, avoid tiny details and check the result at thumbnail scale.

<meta property='og:type' content='article'>
<meta property='og:title' content='Website Image Sizes in Pixels: A Practical Guide'>
<meta property='og:description' content='Choose image dimensions by placement, crop and display size.'>
<meta property='og:url' content='https://example.com/guides/image-sizes'>
<meta property='og:image' content='https://example.com/images/image-sizes-1200x630.jpg'>
<meta property='og:image:width' content='1200'>
<meta property='og:image:height' content='630'>
<meta property='og:image:alt' content='Responsive website image sizes illustrated across common placements'>

Google advises selecting an image relevant and representative of the page, avoiding generic logos and extreme ratios for preferred search or social images, and writing useful alt text. Alt text should describe the image in context for people using screen readers; it is not a place to add a keyword list. Descriptive filenames provide a small additional clue about the subject.

5. Account for crop, ratio and focal points

Fixed-ratio cards: crop with object-fit: cover and set object-position so the subject remains visible.
Variable-ratio article images: preserve the source ratio and let the container grow.
Portrait social posts: keep faces, product details and labels inside the central safe area.
Logos and diagrams: avoid aggressive cropping; use object-fit: contain or an asset made for the slot.

.card-image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}

6. File size, format and loading checklist

Export only the pixels the slot needs; excess dimensions increase transfer and decoding work.
Use JPEG or WebP for photographs, PNG or SVG for graphics requiring sharp transparency, and AVIF or WebP when they reduce weight without visible artifacts.
Set intrinsic dimensions to prevent layout shift.
Use descriptive filenames such as responsive-image-srcset-diagram.webp.
Write concise, contextual alt text. Use an empty alt only for purely decorative images.
Lazy-load below-the-fold images and reserve eager loading for the primary visual.
Inspect the final response headers and compressed byte size, not only the editor’s source dimensions.

Google notes that images can be a major contributor to page size, which can make pages slower and more expensive to load. Measure on a representative mobile connection before setting a site-wide quality target.

7. Verify the image at real viewport sizes

Check the rendered page at the narrowest mobile width, a typical laptop width, a wide desktop width and a high-density display. Confirm that:

the selected candidate is close to the rendered width;
the focal subject survives every crop;
the social preview uses the intended og:image;
text inside artwork remains readable at thumbnail size;
the image does not cause layout shift or block the largest content from loading.

8. Or skip the browser setup

When you need screenshots of the finished page to review image crops across routes or viewports, ScreenshotNeo provides a website screenshot API. One GET request returns PNG, JPEG, WebP or PDF, and the API supports full-page capture, device presets, custom viewports, retina scale, element capture, dark mode, custom CSS and JavaScript, waits, blocking rules and caching. Cookie banners, newsletter popups and chat widgets are removed before the shot. Bot checks, blank pages and failed loads are never billed, and response headers identify the page verdict and billing status. Its MCP server lets Claude, Cursor and other MCP clients call take_screenshot, get_page_info and capture_pdf.

See the ScreenshotNeo API documentation for all options. The following calls capture the example page as a WebP image:

cURL

curl -G 'https://api.screenshotneo.com/v1/shot' \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://example.com/guides/image-sizes \
  -o image-sizes.webp

Python

import requests

r = requests.get(
    'https://api.screenshotneo.com/v1/shot',
    params={
        'access_key': 'YOUR_API_KEY',
        'url': 'https://example.com/guides/image-sizes'
    },
    timeout=90,
)
r.raise_for_status()
open('image-sizes.webp', 'wb').write(r.content)

Node.js

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://example.com/guides/image-sizes'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot failed: ${res.status}`);
const buffer = Buffer.from(await res.arrayBuffer());
await Bun.write('image-sizes.webp', buffer);

ScreenshotNeo includes 1,000 shots per month free with no card. Paid plans start at $5 for 3,000 shots, and every feature is available on every plan. Create a free ScreenshotNeo account.

9. Troubleshooting

Symptom	Likely cause	Fix
Image looks blurry on phones	Only a low-width candidate is available or `sizes` understates the slot.	Add a larger candidate, correct `sizes` and inspect the device pixel ratio.
Browser downloads the largest file every time	Missing or incorrect `sizes`, or all candidates have the same descriptor.	Use accurate `w` descriptors and describe the CSS slot in `sizes`.
Layout jumps while loading	No intrinsic dimensions or reserved aspect ratio.	Set `width`/`height` or an `aspect-ratio` container.
Social card is cropped badly	Source ratio does not match the destination.	Export a dedicated 1200 × 630 preview and keep the focal point central.
LinkedIn rejects the image	Image is under 1200 × 627 or over 5 MB.	Meet LinkedIn’s documented minimum and compress below its limit.
Modern format is not displayed	Missing fallback or incorrect MIME type.	Keep a JPEG or PNG `img src` fallback and configure the server’s content type.
Alt text is unhelpful	Filename or keyword list was copied into `alt`.	Describe the image’s purpose and visible subject in one short sentence.

10. Performance, reliability and cost considerations

Responsive candidates reduce transfer size, but too many variants increase storage, build time and cache keys. Start with a small set that matches your real breakpoints, then add candidates when measurement shows a gap. Cache immutable, fingerprinted files for a long period. For user-uploaded images, validate dimensions, decode safely and generate derivatives asynchronously so a large original does not block page requests.

For screenshot-based review, cache captures when the page has not changed and use a deliberate TTL. Capture only the viewport or element needed for a check; reserve full-page shots for cases where below-the-fold image behavior matters. Treat bot checks, blank pages and timeouts as diagnostic outcomes and inspect the returned verdict and billing headers.

FAQ

Is 1920 × 1080 the best website image size?

Only when the rendered slot and 16:9 ratio justify it. Most content images need responsive candidates tied to their actual CSS width.

Should every image be 1200 × 630?

No. That canvas is mainly a practical social link-preview starting point. Article images, cards, logos and stories use different slots and ratios.

Does a larger pixel dimension improve SEO?

Resolution alone is not a ranking guarantee. Relevance, useful alt text, appropriate dimensions, supported formats and page performance all matter.

Do I need separate mobile and desktop files?

Use separate crops when the composition must change. Otherwise, one source set with srcset can serve different widths efficiently.