Images can make or break your website. Get the dimensions right and your pages load fast, look sharp on every device and rank better in search. Get them wrong and you are looking at slow load times, blurry visuals and frustrated visitors clicking away.
At Zach’s Web Designs, we optimize hundreds of images every month across client projects. This guide compiles the exact website image size guidelines we use in production, with pixel dimensions, file weight targets and format recommendations for every element on a modern site.
Quick Reference Table: Website Image Sizes at a Glance
| Element | Dimensions (px) | Max File Size | Best Format |
|---|---|---|---|
| Hero / Banner | 1920 x 1080 | 200 KB | WebP / AVIF |
| Full-width background | 1920 x 1080 | 250 KB | WebP |
| Blog thumbnail | 1200 x 630 | 100 KB | WebP |
| Blog featured image | 1200 x 675 | 120 KB | WebP |
| In-article image | 800 x 600 | 80 KB | WebP |
| Product photo | 1500 x 1500 | 150 KB | WebP / JPEG |
| Product thumbnail | 500 x 500 | 40 KB | WebP |
| Logo | 250 x 100 | 20 KB | SVG / PNG |
| Favicon | 32 x 32 | 5 KB | ICO / PNG |
| Open Graph (social share) | 1200 x 630 | 100 KB | JPEG / PNG |
The Golden Rule of Web Image Sizing
Before we go through each element, remember this principle: never upload an image larger than it will be displayed. A 4000 pixel wide photo compressed into a 400 pixel container is wasted bandwidth. However, to account for retina displays and high density screens, size your image at roughly 2x the display area.
So if your blog thumbnail displays at 600 pixels wide, upload it at 1200 pixels wide. Beyond that, you are just adding weight without visible improvement.
Hero Images and Banners
The hero image is the first thing visitors see. It needs to load fast while still looking crisp on 4K monitors.
- Recommended dimensions: 1920 x 1080 pixels (16:9 ratio)
- Alternative for wider designs: 2560 x 1080 pixels
- File weight target: under 200 KB
- Format: WebP first, with JPEG fallback if needed
- Compression quality: 75 to 80 percent
Mobile Hero Considerations
Serve a cropped version at 800 x 1000 pixels for mobile using the picture element or responsive images. A landscape hero cropped for a phone often looks empty and forces visitors to scroll past nothing.
Blog Thumbnails and Featured Images
Blog imagery has two jobs: attracting clicks on your archive page and looking good when shared on social media.
Blog Archive Thumbnails
- Dimensions: 1200 x 630 pixels (works for grid layouts and social sharing)
- Aspect ratio: 1.91:1
- File weight: under 100 KB
- Format: WebP
Featured Image at the Top of a Post
- Dimensions: 1200 x 675 pixels (16:9)
- File weight: under 120 KB
- Format: WebP
Inline Article Images
- Dimensions: 800 x 600 pixels for standard illustrations
- Screenshots: keep original resolution but compress heavily with PNG or WebP
- File weight: under 80 KB
Product Photos for E-commerce
Product images sell. They also need to support zoom features without turning your product page into a 5 MB monster.
- Main product image: 1500 x 1500 pixels (square is safest for grids and zoom)
- Alternative for lifestyle shots: 2000 x 2000 pixels if zoom is critical
- Product thumbnails: 500 x 500 pixels
- File weight: 100 to 150 KB for main, under 40 KB for thumbs
- Format: WebP for speed, JPEG as fallback
- Background: pure white (#FFFFFF) for catalog consistency
Shopify and WooCommerce Specifics
Both platforms will generate multiple sizes automatically from your upload. Feed them a clean 2048 x 2048 pixel square and let the platform handle responsive variants.
Background Images
Full-screen backgrounds have the highest risk of tanking your Core Web Vitals scores.
- Dimensions: 1920 x 1080 pixels maximum
- File weight: under 250 KB, ideally under 200 KB
- Format: WebP with heavy compression (65 to 70 percent)
- Pro tip: apply a subtle blur or overlay so aggressive compression is invisible
Social Sharing Images (Open Graph and Twitter Cards)
When your page gets shared on Facebook, LinkedIn or X, this image is the preview. Get it wrong and shares look broken.
| Platform | Dimensions | Ratio |
|---|---|---|
| Facebook / LinkedIn (og:image) | 1200 x 630 | 1.91:1 |
| X / Twitter (summary_large_image) | 1200 x 628 | 1.91:1 |
| 1000 x 1500 | 2:3 | |
| Instagram (square) | 1080 x 1080 | 1:1 |
Keep key text and faces within the center 80 percent of the frame. Platforms crop preview images differently depending on where they appear in the feed.
Icons, Logos and Favicons
- Logo (header): use SVG whenever possible. If raster, export at 500 x 200 pixels and display at 250 x 100
- Icons: SVG is non-negotiable. Icon fonts are outdated
- Favicon: supply a 32 x 32 ICO plus 180 x 180 apple-touch-icon and 512 x 512 for PWA
Which File Format Should You Use in 2026?
Format selection has changed a lot. Here is what we recommend right now:
- WebP: the default choice. Supported by every modern browser, 25 to 35 percent smaller than JPEG at equivalent quality
- AVIF: even smaller than WebP but slower to encode. Great for hero images where every KB matters
- JPEG: use as fallback or for photography where WebP support is uncertain
- PNG: only when you need transparency and cannot use WebP
- SVG: logos, icons, illustrations with solid shapes
- GIF: avoid. Use MP4 or WebM video for animations
How to Compress Images Without Losing Quality
Tools we use daily at Zach’s Web Designs:
- Squoosh.app for one-off exports with full control over quality
- ShortPixel or Imagify as WordPress plugins for automated compression
- TinyPNG for quick batch work
- Cloudflare Polish or Bunny Optimizer at the CDN level for zero-effort optimization
Common Image Mistakes That Kill Site Speed
- Uploading a 5000 pixel wide photo straight from a phone or camera
- Using PNG for photographs (JPEG or WebP is 5 to 10 times smaller)
- Skipping the width and height attributes in HTML, causing layout shift
- Not lazy-loading below-the-fold images (add loading=”lazy”)
- Serving the same image to desktop and mobile
- Forgetting alt text (bad for accessibility and SEO)
FAQ: Website Image Sizes
What is the ideal image size for a website in KB?
Aim for under 100 KB for standard content images and under 200 KB for full-width hero or background images. Anything above 300 KB should be reviewed and compressed further.
Are all websites built at 1920 x 1080?
1920 x 1080 is the most common desktop viewport, which is why hero images and backgrounds are usually sized this way. But your content area is often narrower (1200 to 1440 pixels), so inline images should be sized accordingly.
Should I use 4:3 or 16:9 for website photos?
Use 16:9 for hero images, video thumbnails and blog headers. Use 4:3 or 1:1 for product photos and portrait style content. Consistency within a section matters more than the specific ratio.
Is WebP better than JPEG in 2026?
Yes. WebP is now supported by 97 percent of browsers globally and produces files 25 to 35 percent smaller than JPEG at the same visual quality. Use it as your default and keep JPEG only as a fallback if needed.
How do I resize images without a Photoshop license?
Free options include Squoosh.app (in-browser), GIMP (desktop), Photopea (browser-based Photoshop clone) and the built-in image editor in WordPress. Any of these will handle resizing and compression for typical web use.
Do image dimensions affect SEO?
Indirectly, yes. Properly sized images improve page load speed and Core Web Vitals scores, both of which are ranking factors. Additionally, correctly sized images with descriptive filenames and alt text can rank in Google Image Search and drive traffic on their own.
Need Help Optimizing Your Site’s Images?
Following these website image size guidelines will put you ahead of most competitors on load speed and visual polish. If you would rather have a professional handle the entire optimization workflow, from format conversion to CDN delivery, get in touch with our team. We audit sites, build performance budgets and implement automated pipelines so your images stay lean forever.