The best image size for a website is 1920 pixels wide for full-width hero and banner images, 1200 x 630 for blog featured images, 800 to 1200 pixels wide for images inside content, and under 200 KB per file, saved as WebP or a compressed JPEG. Squarespace is the one platform that wants more: it asks for 2500 pixels wide so it can generate its own set of smaller versions. Those numbers cover almost every case; the rest of this post is the table by image type, the file-size limits that actually matter for speed, and the two settings on WordPress and Squarespace that people miss.
What is the best image size for each part of a website?
| Image | Pixels | Ratio | Target file size | Notes |
|---|---|---|---|---|
| Hero / full-width banner | 1920 x 1080 (2500 wide on Squarespace) | 16:9 | Under 500 KB | The largest image on the page decides your load time; compress this one hardest |
| Blog featured / social share | 1200 x 630 | 1.91:1 | Under 200 KB | Same image works for Facebook, LinkedIn and Google Discover |
| In-content images | 800 to 1200 wide | Any | Under 200 KB | Match the content column width; a 1200 px column does not need a 4000 px photo |
| Portfolio / gallery | 1500 to 2000 wide | 3:2 or 4:5 | 200 to 400 KB | Photographers: 2000 px is enough for a lightbox; full-resolution files invite theft and slow the page |
| Product image | 1000 to 2048 square | 1:1 | Under 200 KB | Square keeps grids even on WooCommerce, Shopify and Squarespace stores; zoom needs the larger end |
| Thumbnails and cards | 600 x 400 to 800 x 600 | 3:2 | Under 100 KB | Upload at twice the displayed size for sharp Retina screens |
| Logo | Up to 400 px wide, SVG if possible | Any | Under 50 KB | SVG stays sharp at every size; PNG with transparency otherwise |
| Favicon | 192 x 192 PNG | 1:1 | Under 100 KB | Multiples of 48 px show in Google results; Squarespace favicon guide |
| Background image | 1920 x 1080 | 16:9 | Under 400 KB | Blur or darken it; detail is wasted behind text |
Why does 1920 pixels cover most screens?
Because the common laptop and desktop displays are 1366, 1440, 1536 or 1920 pixels wide, and a browser rarely shows an image wider than the screen. Phones are narrower still: a 3x phone with a 390-point-wide screen can use an image up to 1170 pixels wide. A 4000-pixel photo straight from a camera is scaled down by the browser to fit, so the visitor gets no extra sharpness for the extra megabytes; they get a slower page. The exception is 4K monitors, which are still a small share of visitors and for which 2500 pixels is plenty; that is the reason behind Squarespace’s number.
What do WordPress and Squarespace do with big images?
| Platform | What happens on upload | Setting to know |
|---|---|---|
| WordPress | Since version 5.3, any image over 2560 px on its longest side is scaled down to 2560 and the original kept aside. It also creates thumbnail, medium, large and 1536 and 2048 px copies and serves the one that fits | Your theme decides the content width; check it and upload at that width or double it, not larger. Settings, Media sets the thumbnail, medium and large sizes |
| Squarespace | Creates seven resized versions (100 to 2500 px) from each upload and serves the closest fit | Squarespace asks for 2500 px wide, under 500 KB, and warns that under 1500 px can look blurry; 20 MB and 120 megapixel hard limits |
| Showit | Generates resized copies of every JPG and serves the one that fits the device; PNG and GIF are served as uploaded | Showit accepts JPG, PNG and GIF only (no WebP) and suggests 3500 px on the long edge for JPGs; size PNGs to the exact display size because they are not resized |
| Wix | Compresses and resizes on its own CDN | Upload at 2000 to 2500 px; Wix generates the rest |
The WordPress detail catches people out: uploading 6000-pixel originals does not give you 6000-pixel images, it gives you 2560-pixel ones and a full media library. Resize before upload and the library stays small.
Which format should you use?
- WebP for almost everything. Google’s own figures put WebP at 25 to 34 percent smaller than JPEG at the same quality, and every current browser supports it. WordPress accepts WebP uploads, Squarespace converts every upload to WebP automatically, and Showit does not accept WebP at all, so export JPG there.
- JPEG when a tool cannot produce WebP. Quality 75 to 82 is the sweet spot; above 85 the file grows and the eye cannot tell.
- PNG only for transparency or flat graphics with hard edges. A photo saved as PNG is three to five times larger than it needs to be.
- SVG for logos and icons; infinitely scalable and tiny.
- AVIF is smaller still but tooling is patchy; not worth the trouble yet for a small business site.
How do you resize and compress without losing quality?
- Export from Lightroom, Photoshop or Canva at the pixel width in the table, not “full size”, and in sRGB; a non-sRGB profile is the usual reason an image looks wrong on phones.
- Run the file through Squoosh (squoosh.app, free, in the browser) or TinyPNG; choose WebP, quality around 80, and compare side by side.
- Name the file for what it shows before uploading (
brand-photographer-austin-studio.webp, notIMG_4471.webp); the filename is one of the few image SEO signals you control. - Add alt text on upload; it is read by screen readers and by Google Images.
- On WordPress, add a plugin that converts and compresses on upload (ShortPixel, Imagify, EWWW) so the rule survives the day you forget.
Every step above feeds website speed on WordPress, where images are the largest cause of a slow score in almost every audit I run.
Does image size affect SEO?
Through speed, yes. Largest Contentful Paint, one of Google’s Core Web Vitals, is usually the hero image, and a 3 MB hero fails it on mobile before anything else on the page loads. Beyond speed, Google Images is a real traffic source for photographers, product businesses and anyone with a visual portfolio, and it rewards descriptive filenames, alt text and images that are large enough to be useful, which is where the 1200 to 2000 pixel range earns its keep. What does not matter: DPI. 72 versus 300 DPI changes nothing on screen, only in print.
If you want the sizes set once and forgotten, they are part of the theme settings and upload rules I configure on every WordPress build; photographers on Showit get the same in the photography website tips.
Frequently asked questions
1920 pixels wide for full-width hero images, 1200 x 630 for blog featured images, 800 to 1200 pixels wide for images in content, and under 200 KB per file in WebP or compressed JPEG. Squarespace asks for 2500 pixels wide.
1920 x 1080 pixels (16:9) at under 500 KB. On Squarespace upload 2500 pixels wide so it can generate its own smaller versions.
1200 x 630 pixels for the featured image, which also works as the social sharing image, and 800 to 1200 pixels wide for images inside the post.
Under 200 KB for most images and under 500 KB for a hero. Anything over 1 MB is slowing the page for no visible gain.
WebP for photos and graphics (25 to 34 percent smaller than JPEG), SVG for logos and icons, PNG only when you need transparency, JPEG as the fallback.
Yes. Images over 2560 pixels are scaled down on upload, and WordPress creates thumbnail, medium, large, 1536 and 2048 pixel copies. Resize before upload anyway so the originals do not fill your media library.
