Why Image Size Is the #1 Speed Killer
When Google measures how fast your website loads, images account for more of the weight than almost anything else on the page. A single unoptimized hero image can easily be 3-5MB — larger than every other element on the page combined. That translates directly to a slow site, frustrated visitors, and lower Google rankings.
According to Google's own PageSpeed data, images typically make up 50-75% of a webpage's total byte weight. More importantly, a one-second delay in page load time reduces conversions by an average of 7%. For a small business website, that's real leads walking out the digital door.
The fix is not complicated — it just requires knowing the right dimensions and file sizes before you upload. Most people upload their images at the size they came off the phone or camera (often 4000px+ wide and 8MB+) and let the browser scale them down. This is the worst possible approach. The browser still downloads the full massive file, then shrinks it on screen. The visitor waits for all 8MB to arrive before they see anything.
The golden rule: Resize your image to its actual display dimensions before uploading. Never make the browser do that work for you.
The Complete Image Size Reference Table
These are the recommended dimensions for every standard image type on a small business website. The pixel dimensions represent the maximum display size — your actual file should be sized at 2x these dimensions only if you're supporting high-DPI (retina) displays, in which case the compression requirements become even more important.
| Image Type | Dimensions (px) | Max File Size | Best Format | Notes |
|---|---|---|---|---|
| // Homepage & Landing Pages | ||||
| Hero / Banner image | 1920 × 1080 | < 300 KB | WebP | Full-width background. 16:9 ratio. Critical to compress aggressively. |
| Hero image (mobile) | 768 × 1024 | < 150 KB | WebP | Serve a separate, cropped mobile version for portrait orientation. |
| Background section image | 1440 × 800 | < 200 KB | WebP | Used behind content sections. Darker images compress better. |
| // Blog & Content Pages | ||||
| Blog featured image | 1200 × 630 | < 150 KB | WebP | Also used as Open Graph image for social sharing. The 1.91:1 ratio is standard. |
| Blog thumbnail (grid) | 600 × 400 | < 80 KB | WebP | Card view on blog listing pages. 3:2 ratio works well in grids. |
| In-article body image | 800 × 500 | < 120 KB | WebP / PNG | Use PNG if the image contains text, charts, or screenshots (sharper). |
| // Branding & Identity | ||||
| Logo (header) | 200 × 60 | < 20 KB | SVG | Always use SVG for logos — scales perfectly at any size with no blur. |
| Logo (footer / dark bg) | 200 × 60 | < 20 KB | SVG | Keep a white/light version for dark backgrounds. |
| Favicon | 32 × 32 | < 5 KB | ICO / SVG | Modern browsers support SVG favicons. Also provide a 180×180 PNG for Apple touch icon. |
| Open Graph (OG) image | 1200 × 630 | < 200 KB | JPG / WebP | Displays when your page is shared on Facebook, LinkedIn, Twitter/X, Slack, etc. |
| // People & Team | ||||
| Team / headshot photo | 400 × 400 | < 80 KB | WebP | Square crop. Used in team sections, author bios, testimonials. |
| Testimonial avatar | 100 × 100 | < 20 KB | WebP | Small circles next to quotes. Heavily compressed is fine at this size. |
| // Products & Services | ||||
| Product image (square) | 800 × 800 | < 200 KB | WebP / PNG | Use PNG if product requires a transparent background. WebP otherwise. |
| Product thumbnail | 300 × 300 | < 50 KB | WebP | Grid listings. Keep consistent aspect ratio across all products. |
| Portfolio / case study image | 1200 × 800 | < 200 KB | WebP | 3:2 ratio. Showcase work at full width where possible. |
| // Icons & UI Elements | ||||
| Icon (UI, service icons) | 48 × 48 — 96 × 96 | < 5 KB | SVG | Always SVG. Pixel icons never look sharp on retina screens. |
| Partner / client logo | 200 × 80 | < 15 KB | SVG / PNG | SVG preferred if available. PNG with transparent background as fallback. |
Where Each Image Type Lives on a Page
Understanding where each image type appears helps you prioritize which ones to optimize first. Images that load above the fold (the part of the page visible before scrolling) have the biggest impact on perceived speed because they're the first thing visitors see.
// Anatomy of a small business webpage — image zones
Notice that the hero image is both the most visible and the most dangerous in terms of file size. Optimizing just this one image typically cuts your total page weight by 40-60% on most small business websites. Start there.
Which Image Format to Use (and When)
Choosing the wrong format is a silent performance killer. Here is a simple breakdown of the four formats you'll encounter, and exactly when to use each one.
Photographs & Complex Images
25-35% smaller than JPEG at the same quality. Supported by all modern browsers. Use this as your default for everything except logos and icons.
Logos, Icons & Illustrations
Vector-based — scales to any size with zero quality loss. A single SVG logo looks perfect on a tiny mobile screen and a 4K monitor. Always use SVG here.
Screenshots & Transparency
Lossless compression — no artifacts. Use for screenshots, diagrams with text, and images that need a transparent background where WebP isn't available.
Legacy Fallback Only
Outdated compared to WebP. Still useful as a fallback for very old browsers, but if you're creating new images, choose WebP over JPG every time.
Common mistake: Using PNG for photographs. A PNG photo can easily be 5-10x the file size of the same image as WebP. PNG is lossless, which sounds like a good thing, but for a photo on your homepage it's overkill that just slows everything down. Save PNG for screenshots, logos-without-SVG, and images with transparent backgrounds only.
How Big Should Your Files Actually Be?
Dimensions and format only tell part of the story. The actual file size in kilobytes (KB) is what determines how long a visitor waits for your page to load. Here is a realistic comparison of the same 1200×800px photograph saved in different formats at reasonable quality settings.
Relative file sizes — same 1200×800px photo at comparable visual quality:
A hero image saved as PNG instead of WebP can be 3x larger — that is the difference between a page that loads in 1.5 seconds and one that loads in 4.5 seconds. For reference, Google's Core Web Vitals target for Largest Contentful Paint (LCP) — the time until the biggest visual element loads — is under 2.5 seconds. A single unoptimized hero image can single-handedly fail this test.
Key rule of thumb
No single image on your homepage should exceed 300KB. Your entire homepage (all images combined) should ideally total under 1MB. If you're over that, start compressing.
The Best Free Tools for Compressing Images
You do not need paid software to optimize images properly. These three free tools handle 95% of what a small business website needs.
Squoosh (squoosh.app)
Made by Google. Drag in any image, choose WebP, set quality to 75-85%, and download. Instantly shows you the file size reduction before you save. The best single tool for converting and compressing website images. Handles batch processing and shows a live side-by-side comparison.
TinyPNG (tinypng.com)
Specializes in compressing PNG and JPG without any visible quality loss. Typically reduces PNG files by 50-80%. Free for up to 20 images at a time. Also useful for WordPress users — their plugin automatically compresses images on upload.
GIMP / Preview (Mac)
For resizing images to the right pixel dimensions before compressing, Preview on Mac is the fastest option — open the image, go to Tools → Adjust Size, set your target width, and export. On Windows, use Paint or the free IrfanView for batch resizing.
Recommended workflow: Resize to target dimensions first (using Preview/GIMP) → then compress with Squoosh (converting to WebP at 80% quality) → upload the result. Two steps, massive improvement. For logos, always ask your designer for the SVG source file — if they gave you only a PNG, ask again.
Quick Checklist Before You Upload Any Image
Run through this before adding any image to your website. It takes 60 seconds and prevents the most common mistakes.
- ☐ Resize first. Check the actual display width on your page (right-click → Inspect Element → hover the element to see its rendered size). Your image file should not be wider than that.
- ☐ Convert to WebP. Unless it's a logo (use SVG) or a screenshot with text (use PNG), convert to WebP before uploading.
- ☐ Check the file size. Hero images: under 300KB. Blog thumbnails: under 150KB. Everything else: under 100KB where possible.
-
☐
Name the file descriptively. Use
denver-plumbing-services-hero.webpnotIMG_4832.jpg. File names are read by search engines. - ☐ Add alt text. Every image needs a descriptive alt attribute. This is read by screen readers and search engines. Describe what's in the image in plain English.
- ☐ Test your page speed. After uploading, run your homepage through PageSpeed Insights. Aim for a score above 80 on mobile. If images are flagged, go back and compress further.
Getting your image sizes right is one of the highest-ROI things you can do for your website. It costs nothing, takes an hour to audit your existing site, and the speed improvement is immediately visible to both visitors and Google.