Image Optimization Guide: How to Make Your Photos Load Fast

Why Images Are the Number One Speed Problem

Open any contractor website on a phone and check what is slow. Nine times out of ten, it is the images. A landscaper uploaded a 6 MB photo straight from their phone for the homepage hero. An HVAC company has 30 portfolio photos on a gallery page, each one 3 MB. A roofer's blog post about storm damage has uncompressed before-and-after shots that make the page take 12 seconds to load.

Images are usually 70 to 90 percent of the total weight of a webpage. Fix the images and you fix the site. Ignore the images and no amount of caching, CDN, or hosting upgrade will save you.

Pick the Right Format

Different formats are good at different things. Using the wrong format means a bigger file for no visual gain.

JPEG. The default for photos. Good compression, lossy quality. Use for any photo with lots of colors and gradients.

PNG. Use only for logos, icons, or images that need transparency. PNGs of photos are 5 to 10 times larger than the JPEG equivalent for no quality gain.

SVG. Use for logos, icons, and simple graphics. Scales infinitely with no quality loss and usually a fraction of the file size.

WebP. A modern format from Google. Roughly 25 to 35 percent smaller than equivalent JPEGs at the same quality. Supported by every major browser since 2020. There is no reason not to use it.

AVIF. Even newer. Roughly 50 percent smaller than JPEG. Browser support is now strong enough to use as the default with a JPEG fallback for older browsers.

For a contractor site in 2026, the right answer for most photos is AVIF first, WebP fallback, JPEG fallback. SVG for logos. PNG only when you specifically need transparency.

Right-Size Before You Upload

The single biggest mistake on contractor websites: uploading the original photo straight from a phone or camera. Modern phones produce images that are 4032 by 3024 pixels and 4 to 8 MB each. Your website almost never needs more than 1600 pixels wide for a hero image and 800 to 1200 for most other photos.

A good rule of thumb for sizing:

• Hero images: 1600 to 2000 pixels wide max
• Service page banners: 1200 to 1600 pixels wide
• Blog post images: 800 to 1200 pixels wide
• Thumbnails and gallery tiles: 400 to 600 pixels wide
• Logos: Export at 2x the displayed size, then compress

Resizing before upload usually cuts file weight by 80 percent before you even compress. The website speed testing guide shows how to measure the impact.

Compress, Then Compress Again

Once you have the right size, compress the file. Compression removes visual data the eye does not notice. Done right, a 1.5 MB photo becomes 200 KB with no perceptible quality loss.

Free tools that work well:

• Squoosh (squoosh.app). Browser-based, made by Google. Lets you compare formats side by side.
• TinyPNG (tinypng.com). Handles JPEG, PNG, and WebP. Drag, drop, download.
• ImageOptim (Mac) or FileOptimizer (Windows). Batch process whole folders at once.

For most photos, aim for under 200 KB. Hero images can go up to 300 KB if needed. Anything over 500 KB on a webpage needs justification.

If you are running WordPress, plugins like ShortPixel, Smush, or Imagify can automate this. If you are on a modern stack like Next.js, the framework's image component handles most of this work automatically. The Next.js versus WordPress comparison covers how much of this optimization can be handled by the platform itself.

Serve Responsive Images

A phone does not need the same image as a desktop. Serving a 1600-pixel image to a 375-pixel phone screen wastes data and slows the page. Responsive images solve this by serving the right size to each device.

Modern HTML supports this natively with the srcset attribute. You provide multiple sizes of the same image, and the browser picks the best one based on screen size and resolution. If you use a CMS or framework that handles images well, this is automatic. If you are hand-coding image tags, you have to write it yourself or use a service like Cloudinary or imgix.

This pairs well with a content delivery network, which can transform and serve the right image size on demand from the edge location closest to your visitor.

Lazy Loading: Don't Load What You Don't See

Lazy loading delays image loading until the visitor scrolls near the image. The first screenful loads fast, and the rest loads as needed.

In 2026, you do not need a plugin or library for this. The browser supports it natively with loading="lazy" on the image tag. Set it on every image below the fold. Leave it off the hero image and anything visible on first paint, because lazy loading those slows your Largest Contentful Paint score.

This is one of the easiest performance wins available. It costs nothing, takes minutes to add, and can cut initial page weight by 70 percent on image-heavy pages like portfolio galleries.

Alt Text: The Free SEO Win Everyone Skips

Every image needs alt text. This serves two purposes: accessibility (screen readers read alt text aloud for visually impaired users) and SEO (Google uses alt text to understand image content and to rank in Google Images).

Good alt text describes what is in the image, in plain language, with relevant context for the page. Bad alt text is empty, generic, or stuffed with keywords.

Good: "Tankless water heater installation in a residential garage in Boise"

Bad: "water heater," "image1.jpg," or "plumber plumbing plumber Boise emergency plumber"

For a roofing company posting a portfolio image, alt text like "New asphalt shingle roof installation on a two-story home in Meridian" tells Google exactly what the image is and reinforces both the service and the location. This pairs with the broader web accessibility basics that every contractor site should follow.

Filenames and Image SEO

Before you upload, rename the file. Phones default to names like IMG_4827.jpg, which gives Google nothing. Descriptive filenames give Google more context.

Good: boise-tankless-water-heater-install.jpg

Bad: IMG_4827.jpg

Use hyphens between words, all lowercase, no spaces or special characters. Keep filenames short and descriptive. Combined with good alt text and a captioned context on the page, properly named images can drive real Google Images traffic, especially for visual trades like landscaping, painting, hardscaping, and roofing.

Common Image Mistakes That Tank Performance

• Uploading raw phone photos. 6 MB images crush mobile performance immediately.
• Using PNG for photos. PNGs are for transparency and logos, not landscape shots.
• Skipping width and height attributes. Missing dimensions cause layout shift, which hurts your CLS score. The Core Web Vitals guide covers why this matters.
• Background videos used as decorative images. A looping video on the homepage hero can add 5 to 10 MB of weight and tank mobile load times.
• Lazy loading the hero image. Lazy loading delays the largest visible element on the page, hurting LCP.
• Hundreds of images on one gallery page with no pagination. Even with lazy loading, the DOM weight gets out of hand.

The website audit walkthrough explains how to systematically find and fix these issues across an existing site.

A Simple Workflow for Every New Image

When you add an image to your website, follow this short checklist:

1. Resize to the appropriate display width (usually under 2000 pixels)
2. Compress with Squoosh or TinyPNG
3. Convert to AVIF or WebP if your CMS supports it
4. Rename the file to be descriptive and hyphen-separated
5. Upload with width and height attributes set
6. Add descriptive alt text
7. Add loading="lazy" if it is below the fold

It takes 60 seconds per image once you have the routine down. The cumulative impact on page speed is enormous.

A complete site rebuild can wipe out years of image bloat at once. The website package from webIQ ships every site with proper image pipelines, modern formats, lazy loading, and responsive serving built in. See examples across trades or get started to skip the manual cleanup entirely.

Frequently Asked Questions

What is the ideal image file size for a website?

For most photos on a webpage, target under 200 KB after compression. Hero images can go up to 300 KB. Anything over 500 KB needs a strong reason to exist. Modern formats like AVIF and WebP make hitting those targets easier without sacrificing visual quality.

Should I use WebP or AVIF in 2026?

Use AVIF as the primary format with WebP as a fallback for slightly older browsers and JPEG as a final fallback. AVIF is roughly 50 percent smaller than JPEG at the same quality and supported by all major browsers as of late 2024.

Does image optimization really affect Google rankings?

Yes. Image weight is a major factor in Largest Contentful Paint and overall page speed, both of which feed into Core Web Vitals rankings. Optimized images also rank in Google Images, which can drive additional traffic, especially for visual trades like roofing and landscaping.

Will compressing my images make them look bad?

Not if you do it correctly. Modern compression at quality 75 to 85 is visually indistinguishable from the original at most viewing distances. The difference is mostly invisible on a phone screen. Test before and after to confirm.

Do I need a plugin to lazy load images?

No. Modern browsers support lazy loading natively with the loading="lazy" attribute on the image tag. No plugin or JavaScript library needed. Just leave it off the hero image and anything visible on first paint to avoid hurting your Largest Contentful Paint score.