Website Image Size Guide (2026)
Website hero images are 1920 × 1080 px (16:9) at 72 DPI. Blog thumbnails are 1200 × 630 px, product photos are 1000 × 1000 px, and favicons are 32 × 32 px.
Images make up the majority of a typical webpage's payload. Oversized files inflate load times, hurt Core Web Vitals, and drop conversion rates — Google's own data shows a 32% higher bounce rate when page load goes from 1s to 3s.
The right dimensions plus modern compression (WEBP or well-tuned JPG) keeps every hero, thumbnail, and product photo sharp without the page-weight penalty.
The table below covers the common web use cases. Every recommendation targets sharp display on retina screens at reasonable file size.
Common website image dimensions
| Asset | Dimensions | Ratio | Format | Max size |
|---|---|---|---|---|
| Hero / Banner (desktop) | 1920 × 1080 | 16:9 | WEBP / JPG | 300 KB |
| Hero / Banner (mobile) | 1080 × 1350 | 4:5 | WEBP / JPG | 200 KB |
| Blog Thumbnail / OG Image | 1200 × 630 | 1.91:1 | WEBP / JPG | 200 KB |
| Blog Inline Image | 1200 × 800 | 3:2 | WEBP / JPG | 150 KB |
| Product Photo | 1000 × 1000 | 1:1 | WEBP / JPG | 150 KB |
| Product Zoom | 2000 × 2000 | 1:1 | JPG | 500 KB |
| Team / Avatar | 400 × 400 | 1:1 | WEBP / JPG | 60 KB |
| Favicon | 32 × 32 | 1:1 | PNG / ICO | 5 KB |
Resize an image for your website
The tool below is preset to the 1200 × 630 OG image size — the most common web share dimension. Select any other platform to resize for it too. Nothing uploads.
Drop your image here
JPG · PNG · WEBP · HEIC — processed locally
Free: up to 2 platforms · Need more? View pricing →
Social
Ads
Logos & Branding
Crop mode
Fill crops to exact size · Fit pads to preserve full image
Format
PNG for logos · JPG for photos · WEBP for web
2 free exports remaining today
Live preview
Your preview will appear here
Why website image size matters
Every extra kilobyte your page loads is another millisecond your visitor waits. Google's Largest Contentful Paint (LCP) target is 2.5 seconds — a single oversized hero image alone can blow that budget on a 4G connection.
Correct dimensions matter as much as compression. A 4000 × 3000 px photo scaled down by the browser to fit a 1200 px container still ships the full 4000 px file to the visitor. Resizing to the actual display width cuts payload by 5-10x with zero visible difference.
Frequently asked questions
What size should a website hero image be?
Full-width website hero images should be 1920 × 1080 px (16:9) at 72 DPI. This covers most desktop viewports without upscaling and stays under 300 KB when saved as JPG at quality 80.
What resolution do I need for a website image?
Web images use 72 DPI. Pixel dimensions matter, not DPI — a 1920 × 1080 px image renders identically at 72 or 300 DPI on screen.
What is the ideal file size for a website image?
Keep photos under 300 KB and thumbnails under 100 KB. Use WEBP where supported for the smallest files at the same visual quality.
JPG, PNG, or WEBP for website images?
Use WEBP for photos and JPG as the fallback. Use PNG only when you need transparency or crisp text overlays.
Do I need a 2x image for retina displays?
Yes for critical hero and brand images — export at 2x the display width and let the browser downscale, or use srcset to serve the right size per device.
Does image size affect SEO?
Yes. Google's Core Web Vitals penalize slow-loading pages, and oversized images are the most common cause of slow LCP scores.