Originally published January 2025 — updated for 2026.
Does your website take forever to load? Images are almost always the culprit. Unoptimized images slow your site down, frustrate visitors, and hurt your SEO — page speed is a confirmed Google ranking factor. The good news: image optimization is one of the highest-return fixes in all of web design, and it’s not complicated. Here’s the practical guide I follow on every website I build.
Find the Sweet Spot for Total Page Size
For a smooth experience and fast load times, aim for a total page size between 1 and 1.5 MB, and never exceed 3 MB. Hosting video? Embed from YouTube or Vimeo instead of uploading the file to your own site — self-hosted video balloons page weight and buffers poorly, and visitors hit the back button before your page ever finishes making its first impression.
Why Page-loading Speed Costs You Real Money
Slow pages aren’t just annoying — they cost visitors and revenue. Google deprioritizes slow-loading sites, and users on slower connections may never see your content at all. Aim for your site to load within two seconds.
Google’s own research on mobile load times shows how quickly patience runs out — as load time grows from 1 second, the probability of a visitor bouncing increases:
- 1s → 3s: bounce probability increases 32%
- 1s → 5s: increases 90%
- 1s → 6s: increases 106%
- 1s → 10s: increases 123%
Every second you shave off is measurable retention. Image optimization is usually the fastest way to regain those seconds.
Optimal Image Sizes for Websites
Want crisp images that load fast? Two numbers cover most situations:
- Full-width images: resize to 1920 pixels wide, and keep the file under 250 KB
- Inset or smaller images: resize to 960 pixels wide, targeting around 125 KB
This diagram is a good reference for common image sizes that are optimal for quicker page loading:
A Quick Image-Sizing Cheat Sheet
Here’s a simple trick to size an image perfectly for its spot on the page:
- Take a custom screenshot of the exact area where the image will go.
- Open it in your image editor and resize it to match the screenshot’s dimensions.
How to take a custom screenshot:
- Windows: press Windows key + Shift + S and drag over the area you want to capture.
- Mac: press Command + Shift + 5, adjust the selection box, and capture.
These videos walk through it step by step:
Mac tutorial
For Windows/PC Users
The Best Image File Types for Websites
The right format preserves quality while keeping files small. Here’s the current landscape:
WebP — The workhorse of the modern web. Developed by Google, WebP compresses files 25–35% smaller than JPEG at equivalent quality, supports transparency, and is supported by every current browser. This is my default for nearly every image I upload.
JPEG (or .jpg) — The longtime standard for photos, still perfectly serviceable and universally compatible. If your workflow produces JPEGs, converting to WebP on upload is an easy win.
SVG — Perfect for logos and icons. SVGs are vector-based, so they stay razor-sharp at any size — from a favicon to a full-screen header — and usually take up very little space.
PNG — Still fine for graphics that need transparency when WebP isn’t an option, but its large file sizes make it a last resort for the web these days.
AVIF — The newest contender, with even better compression than WebP. Browser and WordPress support have matured, but WebP remains the safer default for most sites in 2026. Worth watching.
HEIC — The format iPhones shoot in. Never upload it to a website — browser support is unreliable. Convert to WebP or JPEG first.
GIF — Only if you genuinely need a simple animation; for anything else, its quality-to-size ratio lost the fight years ago.
TIFF — A print-production format. Ideal for the commercial printer, never for the web.
Pro Tip: when in doubt, WebP. Most WordPress optimization plugins (and SiteGround’s own Speed Optimizer) automatically convert uploads.
Image Names & Alt Tags Matter for SEO
Two more habits that cost nothing and pay twice: Descriptive file names. Google reads them. Name files for what they show, before you upload.
Alt tags. Alt text describes an image for screen readers — helping the millions of visually impaired users who rely on them — and for search engines, which can’t “see” your photos. Missing alt text is also one of the most common accessibility failures on the web. Write a plain description of what’s in the image, working a relevant keyword in naturally where it genuinely fits. (Alt text stuffed with keywords helps no one and Google knows the trick.)
The Inspect-Tool Shortcut for Checking Any Image
Need to check what size an image is actually displaying at on a page?
- Right-click the image and choose Inspect.
- The browser highlights the image’s HTML.
- Hover an image to view its dimensions and natural dimensions.This works on any website — including your competitors’ — and it’s the fastest way to diagnose an image being served far larger than its display size.
Optimization Is the Cheapest Speed Upgrade There Is
Large, unoptimized images quietly ruin more websites than any other single factor — and fixing them costs nothing but attention. Right-size the pixels, choose modern formats, name files descriptively, and write real alt text: your site gets faster, ranks better, and works for every visitor, including the ones using screen readers.
Every WordPress website I build for Oklahoma City businesses has this baked in — WebP conversion, properly sized uploads, and Core Web Vitals performance from day one, on hosting I manage myself. If your current site is dragging and you suspect the images (you’re probably right), reach out — I’ll take a look and give you an honest read on what it would take to get it up to speed.
