TL;DR
- Resize images to the largest size they’re actually displayed at before uploading.
- Modern formats like WebP and AVIF are usually much smaller than JPEG or PNG at similar quality.
- Set width and height attributes and lazy-load images below the fold, but not the main image at the top.
- Write alt text that describes the image for someone who can’t see it, and use descriptive file names.
A single unoptimized photo from a modern phone can be several megabytes, larger than the rest of the page combined. On a mobile connection, that’s the difference between a page that appears instantly and one that visitors abandon.
Size first, then compress
- Resize to the display size. If an image is shown at most 1,200 pixels wide, there’s no reason to upload a 4,000-pixel original. Allow roughly twice the display size for high-density screens.
- Compress. For photos, quality settings around 75 to 85 are usually indistinguishable from the original.
- Choose a modern format where your platform supports it.
| Format | Best for | Notes |
|---|---|---|
| JPEG | Photos | Universally supported |
| PNG | Graphics with sharp edges or transparency | Large for photos |
| WebP | Photos and graphics | Supported by current major browsers; often much smaller than JPEG |
| AVIF | Photos | Often smaller still; check your platform’s support |
| SVG | Logos and icons | Scales without blurring |
Loading behavior
- Set width and height attributes (or CSS aspect ratios) so the browser reserves space, which prevents layout shift; see Core Web Vitals.
- Lazy-load images below the fold with
loading="lazy". - Don’t lazy-load the hero image or anything visible as the page opens; it’s often the Largest Contentful Paint element.
- Use responsive images (
srcset) so phones download smaller files than desktops. Most CMSs do this automatically.
Help search engines understand images
- Alt text: describe what the image shows and why it’s there, in plain language. “Technician replacing a water heater in a garage” beats “water heater plumber plumbing services cheap.”
- File names:
water-heater-replacement.jpgtells more thanIMG_4821.jpg. - Context: place images near related text and use captions where they help readers.
Common mistake: Don’t stuff keywords into alt text. It’s there for people using screen readers first, and Google’s guidance warns against keyword-filled alt attributes.
Good images also matter on phones, where most of your visitors are; see mobile-first indexing.
FAQ
Does my CMS optimize images automatically?
Many platforms create several sizes and serve the right one, and some convert to WebP. They usually don’t fix a huge original that’s displayed small, so resizing before upload still helps.
Should every image have alt text?
Every meaningful image should. Purely decorative images, like background flourishes, can have an empty alt attribute so screen readers skip them.
Do I need an image sitemap?
Usually not for a small site. Images in your pages’ HTML are found as Google crawls them. Image sitemaps help when images are loaded in ways crawlers might miss.
Search engines update their systems and documentation often. This guide reflects Google’s published guidance at the time of writing; check Google Search Central for current details, and test changes on a staging copy of your site before making them live.