The best image size is the smallest source that looks sharp in the image’s rendered slot. There is no universal 1200-pixel or 2000-pixel rule. Measure the slot at your layout breakpoints, generate a set of width candidates, and let the browser choose with srcset and sizes. Keep intrinsic dimensions or an equivalent aspect-ratio reservation so images do not move the page while loading.
What “image size” means
Image size can mean pixel dimensions, file size, or the dimensions at which an image is displayed. These are related but not interchangeable:
- Rendered size: the width and height of the image’s CSS box.
- Intrinsic size: the pixel dimensions encoded in the file.
- File size: the number of bytes transferred.
- Aspect ratio: the relationship between width and height, such as 16:9 or 1:1.
Start with the rendered slot. An image shown at 500 × 500 CSS pixels is generally well served by a 500 × 500 source on a 1× display. A 3× device may select a source near 1500 × 1500, although sending the maximum possible density is not automatically worthwhile: the visual improvement may be hard to perceive while the download is much larger.
Choose dimensions from the real layout
Measure every meaningful slot
Inspect the actual content column, card, hero, thumbnail, and full-bleed regions at the breakpoints your site uses. Measure the CSS width, not the width of the largest original in your asset folder. A card that is 320 CSS pixels wide on a phone does not need a 2000-pixel download merely because the desktop design has a large hero.
Free tools Windows power users keep installed
One-click scans. No signup required.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Build a width ladder around those measurements
Create several nearby widths that cover the measured slots, plus a larger candidate where high-density screens justify it. For example, a project might generate 400, 800, and 1200 pixels for a hero. That is an example ladder, not a universal breakpoint standard; your measured slots should determine the values.
Preserve the intended ratio
Keep the same aspect ratio across ordinary responsive candidates. If the source is 16:9, keep each width at 16:9 so the browser can swap files without changing the composition. If mobile needs a different crop rather than a smaller version of the same crop, use <picture> for art direction.
Use srcset and sizes for responsive resolution
Width-descriptor candidates tell the browser what intrinsic widths exist. The sizes attribute tells it how wide the image will be in the layout. The browser combines those hints with viewport width and device-pixel ratio to choose a candidate. Width descriptors without sizes do not provide the intended selection behavior.
<img
src="hero-800.jpg"
srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w"
sizes="(min-width: 900px) 800px, 100vw"
width="800"
height="450"
alt="A product dashboard"
>Here, the image is expected to occupy 800 CSS pixels at viewports 900 pixels and wider, and the full viewport width below that. The browser can select the closest candidate for the current viewport and density rather than downloading the 1200-pixel file everywhere.
Make the image fluid without losing intrinsic information
img {
max-width: 100%;
height: auto;
display: block;
}max-width: 100% lets an image shrink inside a narrow container. The intrinsic width and height attributes still describe its ratio and help the browser reserve space before the file arrives.
Write accurate sizes conditions
Describe the slot, not the source file. If a two-column layout gives the image half of a 1200-pixel content area with a 24-pixel gap, its slot is roughly 588 CSS pixels, not 1200. Update the condition when the layout changes. An inaccurate value can make the browser choose a source that is unnecessarily large or visibly soft.
Reserve space to prevent layout shift
Always provide width and height attributes, or reserve the same ratio in CSS. The browser can then allocate the correct box while the image downloads.
<img
src="article-800.jpg"
srcset="article-400.jpg 400w, article-800.jpg 800w, article-1200.jpg 1200w"
sizes="(min-width: 1000px) 760px, calc(100vw - 32px)"
width="1200"
height="675"
alt=""
>The attributes describe the 1200:675 ratio even when the browser selects a smaller candidate. Do not omit them because the image is responsive; responsiveness changes the width, not the ratio reservation.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
When to use <picture>
Use srcset and sizes when the same image composition should be delivered at different resolutions. Use <picture> when you need explicit source selection:
- Art direction: a tight mobile crop and a wide desktop crop.
- Format selection: a modern format with a fallback for browsers that do not support it.
- Media conditions: a source that changes at a particular breakpoint.
<picture>
<source media="(max-width: 599px)" srcset="hero-mobile-600.jpg 600w">
<source type="image/webp" srcset="hero-800.webp 800w, hero-1200.webp 1200w" sizes="100vw">
<img src="hero-800.jpg" width="1200" height="675" alt="Team members collaborating">
</picture>Keep the fallback <img> complete: it supplies the default source, dimensions, and alternative text.
Rank #3
Compression, formats, and quality
Generate candidates in formats supported by your project and compress each one at its intended quality. Pixel dimensions and encoding are separate decisions: a correctly sized image can still be wasteful if it is poorly compressed, while an aggressively compressed image can look poor even at the right dimensions.
- Keep the same ratio for resolution candidates unless you deliberately change the crop.
- Use an appropriate photographic or illustration format rather than forcing every asset through one format.
- Inspect the visual result at the rendered size, including on a high-density display.
- Do not create an excessive number of nearly identical widths; each extra file adds build, cache, and maintenance cost.
A repeatable sizing workflow
- Inventory slots: list heroes, article images, cards, avatars, logos, and decorative backgrounds.
- Measure layouts: record the CSS width at each breakpoint and note whether the slot is full-bleed or constrained.
- Choose a ladder: select nearby widths that cover those slots and add density coverage where it has a practical benefit.
- Generate assets: resize without changing the ratio, then encode and compress in the formats your site supports.
- Write markup: add width descriptors, an accurate
sizesexpression, intrinsic dimensions, and useful alt text. - Handle art direction: switch to
<picture>only when composition or format conditions require it. - Verify delivery: inspect the browser Network panel on narrow and wide viewports and confirm that mobile is not downloading a desktop original.
- Audit the result: check visual quality, transfer bytes, and layout stability in a performance audit.
Common mistakes and fixes
| Symptom | Likely cause | Fix |
|---|---|---|
| Every device downloads the largest file | Only one src, or an inaccurate sizes |
Add width candidates and describe the real slot with sizes. |
| Images look soft on high-density screens | No larger candidate near the rendered slot multiplied by device density | Add a sensible higher-resolution candidate and verify its selection in DevTools. |
| Page content jumps as images load | Missing intrinsic dimensions or reserved ratio | Add width/height or an equivalent CSS aspect ratio. |
| Mobile crop is awkward | Resolution switching used where composition must change | Use <picture> with a mobile-specific crop. |
| Files are still heavy after resizing | Encoding quality or format is inefficient | Re-encode each candidate, compare visual quality, and remove unnecessary originals from delivery. |
| Browser chooses a surprising candidate | Slot measurement or sizes does not match the CSS layout |
Inspect the computed image width, correct the media condition, and retest at each breakpoint. |
Performance and reliability checks
Confirm what was actually downloaded
Open DevTools, enable the Network panel, filter to images, and test representative mobile and desktop viewport widths. Check the transferred file, intrinsic dimensions, and response size. A mobile test that downloads a desktop-sized original is evidence that the candidate ladder or sizes expression needs correction.
Recommended Free Tools
Balance density and bytes
A larger candidate can improve sharpness on a high-density display, but the largest possible source is not automatically better. Choose the highest practical density for the slot, then compare its visual benefit with its additional bytes.
Keep caching predictable
Use stable filenames or cache-friendly URLs for generated candidates. When an image changes, change its version or content hash so stale files do not persist indefinitely. Do not add candidates merely to cover hypothetical widths that your layout never renders.
Or skip the browser setup
To capture a responsive page for visual checks, documentation, or regression review without maintaining browser automation, ScreenshotNeo returns a screenshot or PDF from one request. It can accept consent banners before capture and remove more than 60 known consent platforms, newsletter popups, and chat widgets. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed; the response identifies the page verdict and billing status in X-Page-Verdict and X-Billed headers.
Use the API documentation for all options: ScreenshotNeo API docs.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
cURL
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)Node.js
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);Options include full-page capture with lazy images loaded, CSS-selector element capture, dark mode, 12 device presets or a custom viewport, retina scale, PDF paper settings and page ranges, HTML/CSS rendering, custom JavaScript and CSS, pre-capture clicks, hidden selectors, waits, request and resource blocking, headers, cookies, user agents, authorization, timezone, geolocation, transparent backgrounds, resizing, chosen cache TTLs, signed image links, asynchronous jobs with signed webhooks, bulk capture for up to 100 URLs per call, usage data, and an OpenAPI specification. Parameter names used by other screenshot APIs also work, which can simplify migration. An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients.
There is a free allowance of 1,000 screenshots per month without a card. Paid plans start at $5 for 3,000 screenshots; every feature is available on every plan. Create a free ScreenshotNeo account.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Frequently asked questions
Should every website image be 1200 pixels wide?
No. A 1200-pixel source may be appropriate for one large slot and wasteful for a small card. Derive widths from each slot’s rendered CSS dimensions.
Is a 2× or 3× image always necessary?
No. Device-pixel ratio can justify a larger candidate, but the visual gain and extra transfer cost depend on the image and audience. Provide a practical higher-resolution option and verify the result.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Can CSS alone make oversized images efficient?
No. CSS can shrink an image visually, but it does not replace responsive source selection. Use srcset and sizes so the browser can avoid downloading an unnecessarily large file.
When should I crop separate mobile assets?
Only when the composition needs to change. If the same composition works at every width, keep one ratio and use responsive candidates; use <picture> for genuine art direction.
Frequently Asked Questions
What dimensions should a website hero image have?
Measure the hero’s CSS slot at its breakpoints, then create candidates around those widths while preserving the hero’s aspect ratio. Mark them up with srcset and an accurate sizes value.
Do width and height attributes force an image to that size?
They establish intrinsic dimensions and reserve the aspect-ratio space; responsive CSS and the selected source can still render the image at a different width.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minutePC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11How can I tell whether responsive images work?
Use the browser Network panel at representative viewport widths and inspect which candidate was downloaded, its intrinsic dimensions, and transferred bytes.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
