How to Optimize Images for Your Website: Format, Size and SEO Settings

Image optimization is one of the fastest technical wins on almost any website. I have audited client sites since 2012, and the pattern repeats. The design looks good and the copy is solid. Yet the homepage still carries several multi-megabyte photos straight from a phone. In this guide I walk through the steps I actually use, from format choice and srcset to file names and image sitemaps.

What is website image optimization and why does it matter?

Image optimization is the process of delivering every image on your site at the smallest file size, the right dimensions and the right format, without a visible drop in quality. It also covers alt text, file names and sitemaps, so search engines understand what each image shows. In short, it serves speed and SEO at once.

The reason it matters is simple, because weight adds up. On most pages, images weigh far more than text. So when you want a lighter page, images are usually the first place to look. When I audit a site, I start by listing the ten largest files. Most of the time, photos and banners fill that list.

However, images are not only a speed topic. Traffic from Google Images can be a real channel for products, recipes, architecture and interior design. Good alt text also helps visitors who use screen readers. That means one piece of work brings three separate benefits.

How do images affect page speed?

First, the browser downloads every image as a separate file. The bigger the file, the longer the download, especially on mobile connections. Moreover, the largest visible element on a page is often a hero image or a product photo. So that single file decides the moment a visitor feels the page has loaded.

I cover the broader link between speed, rankings and revenue in a separate article. For that bigger picture, read how site speed affects SEO. Here I focus only on the image settings.

These are the mistakes I see most often in practice:

• Showing a 4000 pixel photo inside a 400 pixel box.
• Saving photos as PNG and bloating the file for no reason.
• Serving one image size to both phones and desktops.
• Leaving out width and height, which makes the layout jump.
• Installing a plugin and never checking its settings.

Each item on this list, however, has a fix in the sections below.

Which image format should you choose?

Format choice is the foundation of image optimization. Google states in its documentation that Search supports BMP, GIF, JPEG, PNG, WebP, SVG and AVIF. In other words, moving to modern formats does not stop your images from appearing in search. The real question is which format fits which type of image.

In practice, my default is WebP for photos and SVG for logos and icons. On high traffic product pages, I also test AVIF. Still, the final decision should rest on a comparison with your own images.

How much difference do WebP and AVIF really make?

Let me start with a sourced number. According to Google's WebP documentation, lossless WebP images are 26% smaller than PNGs. Lossy WebP images are 25 to 34% smaller than comparable JPEGs at equivalent SSIM quality. So you can serve the same picture with a clearly lighter file.

In contrast, I do not quote a fixed ratio for AVIF, because it varies. The result depends heavily on the image content and the encoder settings. In my field experience, AVIF often beats WebP on photos, but that is not a guarantee. On some graphics and images with sharp text, the gap shrinks or even reverses.

That is why I suggest a small test. First, pick five typical images from your site. Save each one as JPEG, WebP and AVIF at the same visual quality. Then note the file sizes in a table and compare the images side by side on screen. This way you get a real result for your own content instead of a generic claim.

On the other hand, a format switch alone is not enough. If an image has the wrong dimensions, converting it to WebP still sends too many pixels to the browser. Therefore format, sizing and compression work as one set of settings.

How do you serve a fallback format for older browsers?

The safest route to modern formats is the HTML picture element. Inside it, you list an AVIF source first, then a WebP source. At the end, you place a classic img tag with a JPEG. The browser picks the first format it supports and falls back if needed.

For example, you create three files for one product photo: product.avif, product.webp and product.jpg. Then you list them in that order inside picture. Current browsers receive the smallest file, while older devices still show the image without trouble.

Google also gives a clear warning here. Some browsers and crawlers do not understand these attributes, so you should always include a fallback src on the img tag. That means you never leave the inner img tag empty, even when you use picture.

If you run WordPress, Shopify or a similar platform, the system or a CDN often handles this for you. Even so, open the page source after setup and check which format the browser really gets. Some plugins convert files but only apply the output on certain templates.

What dimensions should you upload images at?

The rule for sizing is simple, so it is easy to apply. Do not upload an image much larger than the biggest size it will ever display at. For example, if your blog content area is 800 pixels wide on desktop, a 5000 pixel photo is dead weight. For high density screens, about twice the display width is usually enough.

Specifically, on every project I first write an image size list. It shows the pixel size of each image slot on the site. As a result, the content team never has to guess when they upload photos.

1. Identify every image slot in the design: hero, card, product, in-article, logo.
2. Measure the real width of each slot on desktop and mobile.
3. Treat twice that width as the upper limit for high density screens.
4. Fix the aspect ratio, for example 4:3 or 1:1 for cards.
5. Hand this list to the content team in writing.

If you need a quick resize, the image resizer tool does the job. For a large catalog, though, I recommend automating this on the server or through a CDN.

How should you use srcset and sizes?

The srcset attribute lets you give the browser a list of versions of the same image at different widths. The sizes attribute tells the browser how much space the image takes at each screen width. Then the browser combines both and downloads the best fitting file.

For example, you prepare three versions of a blog image at 480, 800 and 1600 pixels. You list them in srcset with their width values. In sizes, you say "full screen width on mobile, 800 pixels on desktop". So a visitor on a phone never downloads the 1600 pixel file.

The web.dev guide to responsive images explains this pattern with detailed examples. The most common mistake I see in the field is a missing sizes value. Without it, the browser assumes the image fills the whole viewport and may pick a file that is too large.

• Check that the width values in srcset match the real file widths.
• Write sizes based on the actual layout of your design.
• Always keep a fallback src.
• Use picture with media queries when you need a different crop on mobile.

To check the overall mobile layout as well, see my mobile friendly test guide.

How do you pick the right compression setting?

Compression aims to drop detail the eye does not notice and shrink the file. For instance, lossy compression works well for photos. Lossless compression is safer for logos, screenshots and graphics with sharp lines. Whichever method you choose, never run a batch job before you check the quality with your own eyes.

My starting point in practice is this. I save photos at a medium to high quality setting and view them at 100% zoom. If I see artifacts on faces, product texture or areas with text, I raise the quality one step. This is a starting method from field experience, not a guarantee for every image.

In addition, image files carry extra data. Camera model, location and colour profiles rarely help on the web. Removing this metadata makes files smaller. It also stops you from publishing location data by accident. Do not skip this check, especially for shop and office photos taken on a phone.

Finally, compression is not a one time task. If every new upload does not go through the same process, the site gets heavy again within a few months. For this reason, you need a rule that runs automatically at upload.

Why do width and height attributes matter?

When you add width and height to the img tag, the browser reserves the right space before the image arrives. Without these values, the browser lays out the text first. Then the image loads and pushes the content down. That is why a page sometimes jumps just as a visitor goes to tap a link.

This jump ties directly to layout shift, one of the page experience metrics Google uses. However, I will not cover every metric here. I explain how I measure performance in detail in my Google Lighthouse performance test guide.

The practical rule is this. Even if CSS makes the image flexible, keep width and height values in the HTML that reflect the real aspect ratio. Modern browsers use this ratio to reserve the correct area. So you prevent the jump without giving up responsive design.

Likewise, background banners set through CSS need the same care. If the container has no fixed aspect ratio, a similar shift can happen.

How do you prioritise the most important image on a page?

Put simply, not every image has the same weight. The large image in the first screen shapes the visitor's first impression. To give it priority, you can add fetchpriority="high" to its img tag. As a result, the browser tries to fetch it before other files.

In contrast, it makes sense to load images below the fold later. How that technique works and when it hurts is a separate topic, so I will not go into detail here. One warning, though: never put the main image of the first screen on the deferred list.

The most frequent error I find is a theme setting that defers all images. In that case, the hero image arrives late too, and the page feels slow. So after you install a theme or plugin, check how the first screen image behaves on its own.

I also prefer to deliver the main image with an img tag instead of a CSS background. The browser discovers an img tag in the HTML earlier than a background inside a CSS file.

How should you write alt text?

Alt text is a short, context-aware description of what an image shows. In its image SEO best practices, Google recommends informative alt text without keyword stuffing. Its example makes the point well. A phrase like "Dalmatian puppy playing fetch" is far more useful than a list of keywords.

When I write alt text, I ask one question. What does someone who cannot see this image need to know to understand the page? On a product page, a line such as "black leather backpack with front pocket, side view" works. In contrast, "bag bag buy cheap bag" hurts accessibility and looks like spam.

• Describe the content of the image and its purpose on the page.
• Keep it short, roughly one sentence at most.
• Skip filler such as "image of" or "photo of".
• Leave alt empty for purely decorative images.
• Use a keyword only if it fits naturally.

If you want to check the clarity of short copy too, the readability checker helps.

Does the file name really matter for SEO?

A file name is a small hint that helps Google understand what an image is about. Google's own example says "my-new-black-kitten.jpg" is better than "IMG00023.JPG". The difference will not cause a ranking leap. Still, the cost of sending the right signal is close to zero.

In practice, these are the rules I follow. I use lowercase letters and separate words with hyphens. I also avoid special characters. For example, instead of "Red Sofa Set FINAL.jpg", I write "red-sofa-set.webp". The address stays readable and does not break on different servers.

Google also recommends translating file names for localized content. If you run a multilingual site, name the image on the English page in English and the one on the German page in German. For the wider framework, see my multilingual website SEO guide.

To speed up renaming, the slug generator turns any phrase into a clean, hyphenated name.

What is an image sitemap and who needs one?

An image sitemap is a sitemap type where you list the image URLs on your pages for Google. According to Google's image sitemap documentation, it helps Google discover images it might not find otherwise. You can add several image URLs for each page.

That said, not every site needs one. On a small business site that serves images through standard img tags in the HTML, Google already finds them during crawling. In contrast, galleries that load images with JavaScript, large product catalogs and photo heavy sites gain real support from an image sitemap.

Google's documentation adds one more detail. If your images live on a CDN, on another domain, you can still list those URLs in the sitemap. However, Google recommends that you verify the CDN domain in Search Console too.

Also note that Google no longer uses the extra caption, title and license tags you may see in older guides. Keep the sitemap simple with image URLs only. To build a standard sitemap from scratch, use the XML sitemap generator.

Why does the text around an image matter?

Google understands an image not only through its alt text but also through the content around it. The heading, caption and paragraph near an image carry strong clues about its subject. So place each image next to the text it relates to, not in a random corner of the page.

For example, on a furniture site, a sofa photo belongs next to the text about that sofa's dimensions and fabric. Showing the same image in an "other products" strip at the bottom weakens the context. A short caption under the image also draws the visitor's attention.

Moreover, if an image needs its own page, write a meaningful title and description for it. Google can use the page title in image results. To add context such as product or recipe details, my schema markup guide is a good starting point.

In practice, I use a simple test. I hide the image and read only the text. If the text lets me guess what the image shows, the context is strong. If not, I add one or two sentences next to it. This small habit sends the same message to both the visitor and the search engine.

Which tools should you use for image optimization?

Above all, tool choice depends on the size of the site and the technical skills of the team. A small business that uploads a few images cannot use the same method as an online store that adds hundreds of product photos every day. That is why I think about tools on three levels.

• Manual editing: Desktop image editors and browser based compressors. Enough for sites with few images.
• CMS plugin: Resizes, converts and compresses at upload. Always check its settings.
• Image CDN or server side processing: Creates the image on request for each device. The most scalable path for large catalogs.

For measurement, Lighthouse and PageSpeed Insights show where to start. Warnings such as "properly size images" or "serve images in next-gen formats" point to the biggest gains. Read them like a to-do list and measure again after each fix.

If you want to plan image optimization as part of a web project from day one, I put these settings on the pre-launch checklist in my web design service.

How should online stores handle product images?

In ecommerce, the number of images quickly reaches thousands, so any manual process breaks down over time. My first step is to write an image standard. It defines the aspect ratio, the background and the pixel width of every product photo. Without this standard, automation also gives inconsistent results.

Above all, the biggest trap with product images is using the huge original files for zoom on listing pages as well. Create a separate, small version for the card on the listing page. Download the large file only when a shopper zooms in.

Also, use a separate, well named image for each colour variant. Then someone who searches Google Images for "navy linen shirt" can reach the right variant. If you want to review your store setup as a whole, we build these standards together in my ecommerce consulting work.

Finally, remember that category pages show dozens of images at once. Using small versions there is the step that cuts total page weight the most.

Which image optimization mistakes should you avoid?

Over the years I have seen the same mistakes repeat across different sites. Most of them do not come from bad intent. They come from the comfort of "we installed the plugin, job done". The list below reflects the notes I take most often in audits.

1. Changing image URLs without redirecting the old ones. Image search traffic can disappear because of this.
2. Uploading the same image many times under different names and bloating the library.
3. Embedding text inside the image, where neither Google nor screen readers can read it easily.
4. Blocking the image folder in robots.txt by accident.
5. Over-compressing product photos until they look blurry.
6. Keeping simple graphics such as logos in a heavy photo format.

The first item happens a lot during redesign projects. So I add image URLs to the checklist in my guide on how to protect SEO during a website redesign. To verify redirects, you can use the redirect checker.

How do you measure the results of image optimization?

Image optimization without measurement is just a guess. Before I start any project, I record the current state of a few key pages. I note total page weight, image count, the size of the largest image and lab test results. Then I make the changes and measure the same pages again under the same conditions.

Lab tests give fast feedback, so they suit quick checks. However, real user data matters as well. The experience reports in Search Console show over time whether the gains reach actual visitors. This data arrives with a delay of a few weeks, so be patient.

For image search, set the search type to "Image" in the Search Console performance report. This way you can track which queries show your images and which ones earn clicks. Naturally, the effect of new file names and alt text takes some time to appear there.

I suggest you keep the results in a simple table with date, page, change and result. This record lets you base your next decision on data. Months later, you can also answer the question "where did this gain come from?" with confidence.

What does a step by step image optimization checklist look like?

Next, let me turn everything above into a practical order. I follow this sequence when I start a new site or rework an existing one. Finishing each step before the next one makes it easier to see which change improved what.

1. List the heaviest images on the site.
2. Set a target size for every image slot.
3. Convert photos to WebP or AVIF and logos to SVG.
4. Define fallbacks with picture and responsive versions with srcset and sizes.
5. Fix the compression setting after a visual check and strip metadata.
6. Add width and height to every img tag.
7. Give priority to the main image in the first screen.
8. Clean up alt text and file names.
9. Create an image sitemap if needed and submit it in Search Console.
10. Record before and after measurements.

Once you write this order down, your agency, developers and content team speak the same language. I add the list as a template in our project management tool. Each new page then comes with these tasks by default. As a result, the check depends on the process, not on one person's memory.

The list looks technical, but most steps run on their own once you set them up. The real challenge is keeping the content team disciplined with every new upload.

Should you do image optimization yourself or get help?

On a small business site, you can apply most of the steps in this guide yourself. Resizing a few dozen images and cleaning up file names and alt text takes a few hours. On a ready-made platform, plugin settings solve a large part of the work.

In contrast, on sites with thousands of product images, a CDN and a custom theme, the job becomes a technical project. Server side conversion, cache rules and redirects for old URLs can cost traffic if they go wrong. In that case, working with a specialist lowers the cost of trial and error.

I usually treat image work as part of a wider technical audit. It is more efficient to rank image fixes alongside the other technical issues on the site. If that fits your needs, you can review the scope on my SEO consulting page. In short, measure first and then start with the heaviest file.