Images can make a website look sharp or make it slow. In 2026, the goal is simple: use the smallest file that still looks crisp on modern screens, and make sure your site serves the right size image to the right device (desktop, tablet, mobile).
The team at Jezweb build and look after websites for Australian businesses, so we see the same image problems all the time: hero images that are 4-8MB, blurry logos, stretched thumbnails, and galleries that load like it’s 2009.
This guide gives you a practical set of sizes and limits you can follow straight away.
Some quick rules that cover 90% of websites
- Start with the correct aspect ratio so nothing gets cropped awkwardly
- Keep file sizes tight. Most website images should be well under a few hundred KB
- Stick to the right formats:
- JPG for photos
- PNG for transparency and crisp graphics
- SVG for logos and icons (where suitable)
- Use responsive images so mobiles do not download desktop sized files
- Avoid uploading massive images ‘just in case’. Use a sensible maximum width and let your site generate smaller versions where needed.
Website image size table for 2026
These are recommended upload sizes (not ‘display sizes’). If your site is set up for responsive images, it will generate smaller versions automatically.
| Element | Recommended dimensions (px) | Aspect ratio | Target file size | Best file type |
| Full-width hero (homepage) | 2560 × 1440 | 16:9 | ≤ 600 KB | JPG |
| Hero banner (shorter height) | 2560 × 800 | 16:5 | ≤ 550 KB | JPG |
| Page header banner (internal pages) | 1920 × 600 | 16:5 | ≤ 400 KB | JPG |
| Slider image | 1920 × 1080 | 16:9 | ≤ 500 KB | JPG |
| Blog featured image | 1200 × 630 | 1.91:1 | ≤ 250 KB | JPG |
| Blog in-article image | 1200 × 800 | 3:2 | ≤ 220 KB | JPG |
| Blog thumbnail / card image | 600 × 400 | 3:2 | ≤ 100 KB | JPG |
| Portfolio / case study tile | 900 × 600 | 3:2 | ≤ 160 KB | JPG |
| Ecommerce product main image | 1200 × 1200 | 1:1 | ≤ 280 KB | JPG |
| Ecommerce product gallery image | 1000 × 1000 | 1:1 | ≤ 240 KB | JPG |
| Product category tile | 800 × 800 | 1:1 | ≤ 200 KB | JPG |
| Team headshot | 800 × 1000 | 4:5 | ≤ 200 KB | JPG |
| Testimonial avatar | 200 × 200 | 1:1 | ≤ 30 KB | JPG or PNG |
| Company logo (header) | SVG preferred (or 320 × 120) | varies | ≤ 80 KB | SVG or PNG |
| Partner/client logo strip | SVG preferred (or 240 × 120) | varies | ≤ 60 KB | SVG or PNG |
| UI icons | SVG preferred (or 64 × 64 / 128 × 128) | 1:1 | ≤ 15 KB | SVG or PNG |
| Background image | 2560 × 1600 | 16:10 | ≤ 650 KB | JPG |
| Map placeholder / location image | 1200 × 800 | 3:2 | ≤ 220 KB | JPG |
| Social share image (Open Graph) | 1200 × 630 | 1.91:1 | ≤ 350 KB | JPG or PNG |
| Favicon set | 32 × 32, 180 × 180, 192 × 192 | 1:1 | tiny | PNG/ICO |
Tip: 2560px wide is a sensible upper limit for modern screens. Your website can then create smaller versions for mobile and tablet.
Choosing between JPG, PNG, and SVG
- JPG is best for photography and detailed images because it compresses well
- PNG is best when you need transparency (like overlays) or sharp edges (like UI elements)
- SVG is ideal for logos and icons because it scales cleanly at any size.
Responsive images matter more than exact pixel sizes
Even if you upload the perfect hero image, a phone should not be forced to download the same large file as a desktop.
A well-built site uses responsive images so the browser can load a smaller version on mobile and a larger version on desktop. This improves load speed and helps reduce layout and performance issues.
WordPress note: avoid uploading images that are too large
If you are using WordPress, it will often create multiple image sizes automatically. That helps, but it is still best practice to upload images that are already close to the maximum size you need. Oversized uploads increase storage, backups, and can slow down your workflow.
Quick upload checklist
Before you add an image to your website:
- Crop to the correct aspect ratio first
- Export as JPG for photos, PNG for transparency, SVG for logos/icons
- Keep file sizes within the targets above
- Use clear file names (for example, newcastle-kitchen-renovation.jpg)
- Add descriptive alt text for accessibility and SEO
Need a hand getting your images under control?
If your site feels slow, images are often the first place to look. Jezweb designs and manages business websites, hosting, and SEO, and we can help you resize, compress, and standardise your image library so your site loads faster and looks better on every device.