How to Optimize Images for Web: A Complete Guide

If your website is slow, images are almost certainly the reason. I have run hundreds of website audits through WL Tech, and in roughly 8 out of 10 cases, unoptimized images are the single biggest contributor to poor performance scores.

A typical small business homepage has 5-15 images totaling 8-15MB. After proper optimization, that same page can be under 2MB with zero visible quality loss. That is not a marginal improvement. It is the difference between a site that loads in 1 second and one that loads in 5 seconds.

This guide covers everything you need to know about image optimization for the web. No developer experience required. I will walk you through the formats, the tools, the techniques, and the specific steps you can take today to make your site faster.

If you have run a free website audit and seen image-related warnings, this is the guide that explains what to do about them.

Why Images Are the Biggest Performance Problem

Images account for more bytes on the average web page than every other resource type combined. HTML, CSS, JavaScript, and fonts together typically total 500KB-1MB. Images alone can be 5-15MB on a small business site.

When someone visits your page, their browser has to download every image before it can display the page fully. On a mobile phone with a 4G connection, downloading 10MB of images takes 4-8 seconds. That is 4-8 seconds where your visitor is staring at a blank or partially loaded screen.

This directly affects your Core Web Vitals. The Largest Contentful Paint metric, which measures how quickly the main content of your page appears, is usually a hero image or a large featured image. If that image is 3MB, your LCP is going to suffer.

It also affects your Lighthouse score. The "Serve images in next-gen formats" and "Properly size images" audits are two of the most common recommendations Lighthouse flags, and they are also two of the most impactful.

Step 1: Choose the Right Format

The first thing to get right is the file format. Using the wrong format can double or triple your file sizes for no reason.

WebP (Best for Most Images)

WebP is the best format for the vast majority of website images. It produces files that are 25-35% smaller than JPEG and significantly smaller than PNG, with no visible quality difference. It supports both lossy compression (for photos) and lossless compression (for graphics with transparency).

WebP is supported by all modern browsers including Chrome, Firefox, Safari, Edge, and Opera. The only browser that does not support it is very old versions of Internet Explorer, which less than 0.5% of web traffic uses today.

If you are using WordPress, plugins like WebP Express or ShortPixel automatically convert your uploads to WebP. If you are using a static site or custom build, you can convert images during the build process.

JPEG (Fallback for Photos)

JPEG is the traditional format for photographs. It is universally supported and produces reasonable file sizes with lossy compression. If you need maximum compatibility and cannot use WebP for some reason, JPEG is your fallback for photos.

The downside is that JPEG files are larger than WebP for the same visual quality. They also do not support transparency.

PNG (For Graphics With Transparency)

PNG is best for graphics that need transparency: logos, icons, diagrams, and screenshots with transparent backgrounds. PNG uses lossless compression, which means no quality loss but larger file sizes.

For most use cases, WebP with lossless compression produces smaller files than PNG. Only use PNG if you specifically need its format compatibility.

SVG (For Logos and Icons)

SVG is a vector format, which means it scales to any size without losing quality and the file size stays tiny. Use SVG for logos, icons, illustrations, and any graphic that was originally created as a vector.

A logo as a PNG might be 50KB. The same logo as an SVG might be 2KB. SVG files are also resolution-independent, so they look crisp on retina displays and 4K screens without any additional file size.

AVIF (Emerging Format)

AVIF is a newer format that produces even smaller files than WebP, sometimes 20-30% smaller. Browser support is growing but not yet universal. Chrome, Firefox, and Opera support it. Safari added support in version 17.2.

For now, WebP is the safer choice for broad compatibility. AVIF is worth considering as a progressive enhancement alongside WebP using the <picture> element.

Step 2: Resize Images to Display Dimensions

The second most common image problem is serving images that are much larger than they need to be. If your hero image is displayed at 1200 pixels wide but you uploaded a 4000-pixel-wide photo, the browser downloads 10x more data than it needs.

Find Your Display Dimensions

Open your website in a browser, right-click on an image, and select "Inspect." Look at the rendered dimensions in the DevTools panel. That tells you the maximum size the image is displayed at on a desktop screen.

For retina displays, multiply the display width by 2. If your hero image displays at 1200px wide, you need a 2400px-wide image for it to look crisp on high-density screens.

Common Image Size Guidelines

• Hero images: 1600-1920px wide
• Content images (in blog posts): 800-1200px wide
• Thumbnails and cards: 400-600px wide
• Logos and icons: Use SVG (resolution-independent)

Use Responsive Images with srcset

For images that appear at different sizes on different screens, use the srcset attribute. This tells the browser to download the appropriate size based on the device:

<img
  src="hero-1200.webp"
  srcset="hero-400.webp 400w,
          hero-800.webp 800w,
          hero-1200.webp 1200w,
          hero-1920.webp 1920w"
  sizes="100vw"
  alt="Description of the image"
  width="1200"
  height="800"
>

The browser automatically picks the right file. A phone gets the 400px version (50KB). A desktop gets the 1920px version (200KB). This can cut mobile data usage by 75% or more.

If you use WordPress, responsive images are generated automatically when you upload an image. The srcset attribute is added for you. You just need to make sure the original upload is not excessively large.

Step 3: Compress Images

Compression reduces file size by removing data that the human eye cannot perceive. There are two types:

Lossy Compression

Lossy compression discards some image data to achieve smaller files. At quality 80-85, the difference is invisible to most people. This is what you should use for most website images.

For WebP, a quality setting of 80 is a good starting point. For JPEG, 82-85 is the sweet spot. Going below 70 starts to produce visible artifacts.

Lossless Compression

Lossless compression reduces file size without discarding any data. The file is mathematically identical to the original when decompressed. The tradeoff is that file size reduction is much smaller, typically 10-20% compared to 60-80% with lossy compression.

Use lossless compression only when you need pixel-perfect reproduction, such as for technical diagrams or medical images.

Compression Tools

• Squoosh (squoosh.app): Free, browser-based, excellent for one-off conversions. Supports WebP, AVIF, and JPEG with a visual quality slider.
• TinyPNG (tinypng.com): Free for up to 20 images at a time. Compresses PNG, JPEG, and WebP. Simple drag and drop.
• ImageOptim (macOS): Free desktop app that strips metadata and applies compression. Great for batch processing.
• ShortPixel (WordPress plugin): Automatically compresses and converts images on upload. Free tier covers 100 images per month.
• Squoosh CLI or sharp (Node.js): For developers, batch processing in build pipelines.

Step 4: Add Width and Height Attributes

Every <img> tag should have width and height attributes. This is one of the simplest fixes with one of the biggest impacts on layout stability.

Without width and height, the browser does not know how much space to reserve for the image while it downloads. It assumes the image takes zero space, renders the page, then jumps the layout when the image finally loads. This is called layout shift, and it is measured by the Cumulative Layout Shift Core Web Vital.

With width and height, the browser reserves the correct space immediately. No layout shift. The page feels stable and professional.

<img src="photo.webp" width="1200" height="800" alt="Description">

This takes 5 seconds per image and can improve your CLS score from failing to passing.

Step 5: Lazy Load Below-the-Fold Images

Lazy loading tells the browser to defer loading images until the user scrolls near them. This means images below the fold do not compete with critical above-the-fold content for bandwidth.

In modern browsers, this is as simple as adding the loading="lazy" attribute:

<img src="photo.webp" loading="lazy" width="800" height="600" alt="Description">

This is supported by all modern browsers. WordPress adds it automatically since version 5.5.

Do not lazy load your hero image or any image in the first viewport. Those should load immediately because they are part of the initial render. Lazy loading the LCP image will actually hurt your performance score because it delays the most important image on the page.

For more on this, see my guide on how to fix LCP, which covers the hero image problem in detail.

Step 6: Add Alt Text for SEO and Accessibility

Alt text serves two purposes: it describes images to screen readers for visually impaired users, and it tells search engines what the image shows. Both are important.

Good alt text is descriptive and specific:

• "Plumber fixing a leaky pipe under a kitchen sink"
• "Exterior of Riverside Fitness Studio at sunset"

Bad alt text is generic or keyword-stuffed:

• "image"
• "IMG_4823.jpg"
• "plumber plumber services emergency plumber best plumber"

Write alt text as if you were describing the image to someone who cannot see it. Keep it under 125 characters. Do not include "image of" or "photo of" since screen readers already announce that.

Step 7: Use a CDN for Image Delivery

A content delivery network (CDN) stores copies of your images on servers around the world. When a visitor in New York loads your site, they get images from a New York server instead of your origin server, wherever that is.

This reduces the time it takes to download images, especially for visitors far from your server. My guide on CDNs covers this in detail.

Some CDNs also offer on-the-fly image transformation. Cloudinary, Imgix, and Cloudflare Images can automatically resize, compress, and convert your images to WebP based on the visitor's browser. This means you upload one high-quality image and the CDN handles all the optimization.

If you are not ready for a dedicated image CDN, a basic CDN like Cloudflare's free tier still helps with delivery speed. See our guide on website caching for how CDN caching works.

Common Image Optimization Mistakes

After auditing hundreds of websites, these are the mistakes I see most often:

1. Uploading full-resolution photos straight from a camera or phone. A typical phone photo is 4000x3000 pixels and 4-8MB. If it is displayed at 800px wide, you are downloading 20x more data than needed. Always resize before uploading.

2. Using PNG for photos. PNG is lossless, which means photo files are enormous. A photo that would be 200KB as a JPEG or 150KB as a WebP could be 2-5MB as a PNG. Use PNG only for graphics with transparency.

3. No width and height attributes. This causes layout shift on every image load. It is the most common cause of poor CLS scores on the sites I audit.

4. Ignoring WebP. If you are still serving JPEG and PNG only, you are leaving 25-35% file size reduction on the table. WebP is supported everywhere that matters now.

5. Lazy loading the hero image. This delays your LCP image and can drop your Lighthouse score by 15-20 points. Only lazy load images below the fold.

How to Audit Your Images

The fastest way to check if your images are optimized is to run a website speed test. Lighthouse will flag specific issues:

• "Serve images in next-gen formats" means you should convert to WebP
• "Properly size images" means you are serving images larger than display size
• "Efficiently encode images" means your compression is too weak
• "Avoid layout shifts" often points to missing width and height attributes

You can also check individual images in Chrome DevTools. Open the Network tab, filter by "Img," and reload the page. You will see every image the browser downloads, its file size, and its dimensions. Anything over 500KB for a non-hero image is worth investigating.

Quick Action Checklist

If you want to optimize your images today, here is the order to do things in:

1. Convert all images to WebP format
2. Resize images to 2x their display dimensions
3. Compress at 80-85 quality
4. Add width and height attributes to every img tag
5. Add loading="lazy" to below-the-fold images only
6. Add descriptive alt text to every image
7. Set up a CDN for image delivery

If you do all seven steps, you will typically see a 60-80% reduction in total image weight, a 20-30 point improvement in mobile Lighthouse performance, and a passing CLS score. This is the single highest-impact change most small business websites can make.

If you want a professional to handle this for you, WL Tech offers image optimization as part of every fix engagement. Run a free audit first to see exactly which image issues your site has, then decide whether to fix them yourself or have us do it.