Let me show you a number I see in almost every audit: images make up 60–70% of the average page's weight. Not videos, not JavaScript — photos. A client last month had a 7.2MB homepage hero shot on a phone, displayed at 1200px wide. Resizing it to 1600px and exporting WebP took the page from 9 seconds to under 2 — same photo, same design, visitors stopped bouncing. If your site feels slow, image dimensions are suspect number one, and the fix takes minutes with our free image resizer.
The 2026 web size cheat-sheet
Rule of thumb: never serve more pixels than the display slot, plus a small margin for sharpness. Here are the widths I prescribe:
| Slot | Serve at | Target weight | Notes |
|---|---|---|---|
| Hero / banner ⭐ | 1600–1920px wide | < 300 KB | WebP 80. Full-width drama without the wait. |
| Blog content image | 1200px wide | < 150 KB | Matches article column on desktop. |
| Product photo | 1000–1200px square-ish | < 150 KB | Zoom-friendly without the bloat. |
| Thumbnail / card | 400–600px wide | < 60 KB | Listings show dozens — each KB multiplies. |
| Logo / icon | 2× display size | < 30 KB | SVG first choice; PNG fallback. |
| Open Graph / share | 1200 × 630 | < 200 KB | What WhatsApp & X unfurl. |
Retina displays: the 2× question
"But retina screens need double resolution!" — partly true, mostly over-applied. A 2× image is only visibly better on high-density screens held close, and it costs 3–4× the bytes. My practical policy after years of testing:
- Text-heavy graphics & logos: yes, serve 2× (or SVG). Soft text is immediately noticeable.
- Photographs: 1× to 1.5× is plenty. Nobody can tell a 1200px photo from a 2400px one in a blog column — but everyone feels the extra megabytes.
- Thumbnails: strictly 1×. They're small; density doesn't matter.
⚠️ The srcset trap
Responsive srcset is wonderful — but only if the variants actually exist at sensible sizes. Generating five versions of an already-oversized 5000px original just multiplies the problem. Resize the master to your largest slot first, then derive variants downward.
Formats & KB targets that actually work
Dimensions get you 70% of the way; format finishes the job. Export every photo as WebP quality 80–82 and most will land in the targets above with zero visible difference from the original. Fallbacks: JPEG 85 for email clients and old systems, PNG only for graphics with text. Then, if a file still misses its KB budget, run it through the Image Compressor — compressing an already-right-sized image barely touches quality.
My 10-minute full-site method
- List your slots. Hero, content, cards, thumbs — write down each display width from your CSS.
- Resize each master once. In the resizer, set the exact width with aspect lock, export WebP ~82. One file per slot.
- Name them honestly.
hero-1920.webp,card-600.webp— future-you will thank present-you during the next redesign. - Verify with data. Check the file sizes against the table above, then test the page on a throttled 4G connection. Feel the difference.
Right-size every image in minutes
Exact pixels, percentage scaling, WebP export — free, private, in-browser.
🖼️ Open the Free ResizerFAQs
What is the best image size for a website in 2026?
Heroes at 1600–1920px wide under 300KB, content images at 1200px under 150KB, thumbnails at 400–600px under 60KB — all as WebP. These cover virtually every layout without wasting bytes.
Does resizing images improve SEO?
Directly. Page speed is a ranking factor and images are usually the biggest payload. Right-sized WebP images cut load times dramatically, improving Core Web Vitals — which Google measures and rewards.
