For most websites, a full-width hero image should be about 1920 pixels wide and under roughly 300 KB, blog and content images about 1200 pixels wide and under about 150 KB, product images around 1000 to 1500 pixels square at 100 to 200 KB, and thumbnails or logos much smaller. These are practical targets, not strict rules: the goal is to upload images at the size they are shown (with a 2x version for sharp screens where it matters) and compress them so pages load fast on mobile data.
- Upload at display size, not camera size.
- Keep most images under 200 KB, heroes under about 300 KB.
- Use WebP where you can and add width and height attributes.
- A whole page with images ideally stays around a few megabytes or less.
- Resize and shrink with the free cropper and Image Compressor.
A 40 MB homepage
Imagine a new restaurant website in Banani. The owner uploads twenty photos straight from a professional camera: dishes, interior, chefs, each about 2 MB. The homepage alone weighs about 40 MB. On a phone with average mobile data, a visitor would wait a long time and burn through a noticeable part of their data pack just to see the menu.
The same twenty photos, resized and compressed sensibly, would total around 3 MB and look identical on a phone screen. That is what these targets are for.
Recommended image sizes for websites
| Image type | Width in pixels | Target file size | Notes |
|---|---|---|---|
| Full-width hero banner | 1920 (plus a smaller mobile version) | Under about 300 KB | Your LCP image on most pages |
| Blog featured image | 1200 to 1600 | 100 to 200 KB | 1200 x 630 also works for social sharing |
| In-article image | 800 to 1200 | 50 to 150 KB | Match your content column width |
| Product image | 1000 to 1500 square | 100 to 200 KB | Larger if you offer zoom |
| Thumbnail or card | 300 to 600 | 20 to 60 KB | Grids, related posts |
| Logo | Display size x2 | Under 30 KB | SVG is ideal for simple logos |
| Team or profile photo | 400 to 800 square | 40 to 100 KB | Crop tight around the face |
Why 2x images exist (and when to skip them)
Many phones and laptops have high-density “retina” screens that show more pixels per inch. An image displayed at 600 pixels wide may look slightly soft unless the file is about 1200 pixels wide. WordPress handles this automatically with responsive image sizes (srcset), serving larger files only to screens that benefit. For decorative images, the 1x size is usually fine.
How to prepare images, step by step
- Find the display widthRight-click the image area, inspect it, or ask your designer. Note the widest it ever appears.
- Crop to the right ratioBanners 16:9 or wider, products often 1:1. Use the image cropper.
- ResizeTo the width in the table above.
- ConvertUse WebP for websites where supported with the image converter.
- CompressQuality 70 to 80 with the Image Compressor.
- Name and describeDescriptive file name and alt text. See our alt text guide.
Common mistakes
- Uploading 5,000 pixel camera photos and letting the theme shrink them in the browser.
- Using PNG for photos (files can be many times larger than JPG or WebP).
- Saving banners with text as heavily compressed JPGs so the text looks fuzzy.
- Forgetting width and height attributes, which causes layout shifts while loading.
Go faster
Hero images matter most for speed. Read how images affect LCP and our WordPress image optimisation guide.
Sources
Frequently asked questions
What is the best image size for a website banner?
About 1920 pixels wide for a full-width hero, with a smaller version for mobile, compressed to under roughly 300 KB.
How many KB should a website image be?
Most content images can be 50 to 200 KB. Hero images ideally stay under about 300 KB and thumbnails under 60 KB.
What size should blog featured images be?
1200 to 1600 pixels wide. A 1200 x 630 image also works well when the post is shared on social media.
Do I need retina 2x images?
For important images, a file about twice the display width looks sharper on high-density screens. WordPress serves the right size automatically with srcset.
Should I use PNG or JPG for website photos?
Use JPG or WebP for photos. PNG photos are usually much larger. Keep PNG for logos, icons and graphics with transparency.
Shrink photos for websites, email and forms in seconds, privately in your browser.
Guides for this tool
Guide · 3 min readLossy vs Lossless Compression: Which Should You Use for Images?
Guide · 3 min readHow to Email Large Photos: Make Images Small Enough to Send
Guide · 3 min readHow to Send High-Quality Photos on WhatsApp (HD and Original)
Guide · 3 min readWordPress Image Optimisation: Speed Up Your Website (2026 Guide)Want a tool, website or app like this for your business?
Every free tool on this site is designed and coded by Tanvir H, a Bangladesh-based WordPress and Elementor web designer with 7+ years of experience and 650+ projects for clients worldwide. Fast, mobile-first, search-optimised websites that turn visitors into customers.
- 650+ projects
- 7+ years
- 4.9★ rating
- Govt. registered freelancer
