Image optimization for SEO starts with a simple goal. Give visitors a clear, useful picture without making them download more data than they need. A good website image should support the page, look sharp on the right screen and load at the right time.
Business websites often get this balance wrong. A team uploads a full-size camera photo, places it inside a small content box and assumes the website will handle everything. Another team compresses every picture so heavily that products look blurry. Both approaches miss the real task, which is to match each image to its purpose.
This guide walks through a practical process for preparing better website images. You will learn what to change before uploading, what to check on the live page and how to avoid changes that make the experience worse.
Start with the purpose of each image
Before choosing a file format, decide what the image needs to do. A product photo should show details that help someone buy. A project photo should show the quality of the work. A screenshot should make a process easier to follow. If a picture adds no useful information, consider whether the page needs it at all.
Imagine a roofing company with a service page about damaged flashing. A close photo of the affected area can explain the problem better than a generic picture of a house. A second photo showing the finished repair can help readers understand the result. Ten unrelated stock photos would add more files without answering more questions.
Treat image selection as part of editing the page. Ask what the visitor learns from each picture and whether that information belongs at that point in the text. This also gives you a clear basis for writing captions and choosing a crop.
Resize images for their actual placement
A photo that looks small on screen can still be a large download. Making an image narrower with a page builder does not necessarily reduce the size of the underlying file. Check both the original dimensions and the way the published page delivers the image.
For example, a team might receive a photo that is 6,000 pixels wide for a content area around 900 pixels wide. Uploading that original as the only available version leaves the website with a much larger source than many visitors need. Keep the original as a master file, then prepare suitable versions for the page layout.
Screen density matters, so do not assume one image pixel must always match one screen pixel. A developer can use responsive image settings to offer several sizes. The browser can then choose a suitable file for the device. Google's responsive image guide explains how srcset and sizes support this process.
Choose a crop that keeps the important subject visible. A wide desktop banner may need a different crop on a phone. Check faces, product labels and important details at both sizes before accepting the final version.
Compare WebP, JPG, PNG and AVIF
There is no single format that wins for every image. JPG remains useful for photos. PNG can suit images that need lossless detail or transparency. WebP supports lossy and lossless compression as well as transparency. AVIF is another option with strong compression capabilities. The MDN image format guide explains their features and compatibility considerations.
Make the choice with a comparison rather than a rule copied from another website. Export the same photo in two suitable formats. Compare their file sizes, then inspect both at the size visitors will see. Look at fine edges, shadows, skin tones and small text. Keep the version that provides an acceptable result with less data.
A product label may need a different quality setting from a background photo. A screenshot with tiny text may need a different format from a portrait. Keep those decisions separate instead of applying one preset to your entire media collection.
If you use AVIF or another format in a custom website, check the browsers your audience uses and whether a fallback is needed. Also confirm that your website's upload and image-processing systems accept the format.
Compress with a visible quality check
Compression should be a review process. Start with a reasonable setting, export a sample and compare it against the original. Reduce quality further only while the image still does its job well.
Suppose a product photo starts at 1.8 MB and your chosen export becomes 180 KB. In this hypothetical example, the download is 90 percent smaller. That calculation tells you how much file weight you removed. It does not tell you whether the result is sharp enough or whether sales will improve.
Inspect details that matter to the buyer. Can someone still see the fabric texture, a connector shape or the finish on a surface? For a service business, can readers understand what changed between the before and after photos? Those questions give the quality check a business purpose.
You can use my free image converter to compare exports, adjust quality and set a maximum dimension. Conversion runs in your browser, and available input and output formats depend on browser support. Check the resulting size before uploading because a converted file can sometimes be larger than its source.
Write alt text that explains the image in context
Alt text gives a text alternative for an image. Google's image SEO guidance recommends useful descriptions in the context of the page and warns against filling them with keywords.
For a repair photo, a description such as “Cracked flashing beside a brick chimney before repair” tells readers what the picture shows. Repeating phrases such as “roof repair best roof repair cheap roof repair” adds no useful detail. Do not add a place name unless it is accurate and relevant to the image's purpose.
The right description depends on why the image appears on the page. A screenshot in a tutorial might need to identify the selected control. A portfolio photo might need to describe the completed work. Purely decorative images should use an empty alt attribute, alt="", so assistive technology can skip them, as explained in Google's alt text accessibility guidance.
Review alt text during content editing. Leaving it until the end makes it easier to forget the reason you chose the image in the first place.
Give images clear filenames and nearby context
Google uses several signals to understand an image, including its surrounding content, alt text and filename. A short descriptive filename gives more context than a camera-generated name. Name a file for what it shows and place it beside relevant text.
For a newly prepared project photo, chimney-flashing-repair.webp is easier to manage than IMG_8472.webp. This also helps your own team find the right asset later. Avoid long filenames that repeat several search phrases or make claims the picture cannot support.
A caption can explain something the image alone leaves unclear. For example, it might identify the repaired section or explain why a screenshot highlights a particular setting. Keep the caption useful rather than repeating the heading directly above it.
For existing images, weigh the benefit of renaming against the work involved. Changing a live image URL requires updating references and checking for broken files. Start with new uploads and with changes that solve a clear problem.
Load the main image promptly
Lazy loading delays images until they are needed. It can help with images farther down a page, but applying it to the main visible image can delay important content. The web.dev guide to Largest Contentful Paint warns against lazy loading the image that forms the page's LCP element.
LCP measures when the largest visible content element appears. Depending on the page, that element could be a hero photo, a product image or a block of text. Identify the actual element before changing loading settings.
If the main image is the LCP element, make sure the browser can discover and request it promptly. A developer may also use fetchpriority="high" where appropriate. Reserve that treatment for a genuinely important resource instead of marking every image as urgent.
For a long project gallery, images well below the first screen can often load lazily. Test the finished page while scrolling so visitors do not reach empty spaces and wait for each picture to appear.
Reserve space so the page stays steady
A page can feel awkward when text and buttons move as images load. One cause is an image whose space was not reserved in advance. Providing appropriate width and height attributes helps the browser establish an aspect ratio before the file arrives. The web.dev layout shift guide covers this issue.
Think about someone reading a service description and moving toward an inquiry button. If a picture suddenly expands above that button, the visitor has to find their place again. Stable spacing makes the page easier to use even when the connection is slow.
Check mobile layouts carefully after adjusting image dimensions. A crop, banner or gallery can behave differently at narrow widths. Scroll through the whole page and watch for movement, stretched pictures and unexpected gaps.
Test the live page after uploading
An optimized file on your computer is only part of the result. The website still needs to serve the correct version with suitable loading behavior. A theme, page builder or custom component may request a larger file than expected.
Run a before and after test using PageSpeed Insights. Its documentation explains the difference between lab results and real-user data. Lab tests help diagnose problems, while field data reflects visitors' experiences when enough data is available.
Keep a small record of the changes. Note the page URL, image dimensions, file weight and settings you changed. Test under similar conditions and inspect the page visually as well. One score should not replace checking whether the photos are clear and the page works properly.
Google states that Core Web Vitals are used by its ranking systems, but good scores do not guarantee top rankings. Image work should support useful content and a better experience alongside the rest of your SEO work.
Build a repeatable image workflow
A simple upload routine can prevent the same problems from returning. Choose the image, confirm your right to use it, save the original and prepare a web version. Then compare format and quality, write the relevant text and check the published page.
Give the person uploading content a clear brief. Explain which images need desktop and mobile crops, which details must remain readable and who checks the live result. A short shared process is more useful than asking everyone to “optimize images” without explaining what that means.
Begin with a manageable group of pages, such as your main service page and a few important projects. Use what you learn to set sensible defaults for future uploads. This turns a one-time cleanup into ongoing website care.
If the site also has crawl or indexing issues, read my guide to fixing technical SEO problems before publishing more content. Image improvements belong within that wider review.
For help finding oversized images, checking loading behavior and applying fixes across your website, explore my technical SEO and website performance service or tell me about your website. I can review the issues and help turn the findings into practical changes.