Images make your website more engaging, more persuasive, and easier to understand. They also happen to be one of the heaviest things you ship to a browser. On a page that has not been optimised, images can account for the majority of the total page weight, which means they have an outsized effect on how fast your site loads and how well it ranks.
Image optimization is the practice of serving high-quality images in the right format, dimensions, and file size, while giving search engines the context they need to understand what each image shows. Done well, it speeds up your pages, improves the experience for visitors, and strengthens your on-page SEO all at once. This guide walks through the steps that matter most in 2026.
Why image optimization matters for SEO
There are three connected reasons to take images seriously.
- Page speed. Lighter images load faster. Faster pages keep visitors engaged and support better rankings, since page experience is a genuine ranking consideration.
- Context for search engines. Crawlers cannot "see" an image the way a person does. Filenames, alt text, and surrounding content tell them what the image is about, which helps both your page and your visibility in image search.
- Better user experience. Sharp, fast, correctly-sized images signal quality and keep people on the page, which feeds back into engagement signals.
The payoff compounds: better experience leads to better engagement, which supports rankings, which drives more qualified traffic and conversions.
How to optimize your website images, step by step
1. Resize to the dimensions you actually display
Image dimensions (for example 1920x1080 pixels) and file size (for example 850 KB) are two different things, and both matter. A common and costly mistake is uploading a huge original and letting the browser shrink it with CSS. The browser still downloads the full-size file. Instead, resize the image to the largest size it will ever be shown at before you upload it. For responsive layouts, use the srcset attribute so different devices receive appropriately sized versions.
2. Choose the right file format
Format has a big impact on quality-to-size ratio. Use this as a quick reference:
| Format | Best for | Notes |
|---|---|---|
| WebP | Most photos and graphics on the web | Strong compression at high quality; widely supported |
| AVIF | Photos where you want the smallest files | Excellent compression; check support for your audience |
| JPEG | Photographs, as a fallback | Universal support, larger than WebP at similar quality |
| PNG | Graphics needing transparency or sharp edges | Larger files; avoid for photographs |
| SVG | Logos, icons, simple illustrations | Scales infinitely, tiny file size |
For most websites, WebP is the sensible default for photographs, with a JPEG fallback where you need maximum compatibility.
3. Compress without visible quality loss
Compression reduces file size by removing data the human eye barely notices. Aim for the point where the file is as small as possible while still looking crisp. Both lossy and lossless options exist; for most web photos, moderate lossy compression gives the best balance. Many content management systems and build tools can compress images automatically, so this can often run without manual effort once configured.
4. Write descriptive filenames
Rename files before uploading. A name like blue-running-shoes.jpg tells search engines far more than IMG_4821.jpg. Use lowercase words separated by hyphens, keep it descriptive and concise, and avoid keyword stuffing.
5. Add meaningful alt text
Alt text is the single most important tag for image SEO and accessibility. It describes the image for screen readers and for crawlers, and it displays if the image fails to load. Write it as a natural, accurate description of what the image shows. Include a relevant keyword only where it fits honestly. Purely decorative images can use empty alt text (alt="") so assistive technology skips them.
6. Use lazy loading
Lazy loading defers off-screen images until a visitor scrolls near them, so the initial page load is faster. Modern browsers support this natively with the loading="lazy" attribute. Apply it to below-the-fold images, but not to your most important above-the-fold image, which you want to load immediately.
7. Specify width and height
Always set explicit width and height attributes (or reserve space with CSS). This lets the browser reserve the correct space before the image loads, preventing the page from jumping around as it renders. That stability is measured by Cumulative Layout Shift, one of the Core Web Vitals.
8. Consider a CDN and caching
A content delivery network serves your images from a location close to each visitor, cutting load times for a global audience. Combined with proper browser caching, returning visitors get near-instant image loads. If you serve customers across different regions, this can make a noticeable difference.
9. Help search engines discover your images
Optimising an image only pays off if search engines can find it. Make sure important images sit inside your standard HTML markup rather than being loaded only by scripts that crawlers may not execute. Where images are central to a page, include them in an image sitemap, or in the image extension of your existing XML sitemap, so they can be indexed. Surrounding the image with relevant text, a descriptive caption, and a clear heading also strengthens the context search engines use to understand it.
How image optimization connects to Core Web Vitals
Google measures real-world page experience through Core Web Vitals, and images touch two of the three metrics directly. Largest Contentful Paint, which tracks how quickly the main content appears, is very often an image, so serving a lightweight, correctly-sized hero image is one of the most effective ways to improve it. Cumulative Layout Shift, which measures unexpected movement as the page loads, improves when you reserve space for images with explicit width and height. In other words, the same habits that make images lighter also lift the exact metrics search engines use to judge page experience, which is why image work delivers such reliable returns.
Common image mistakes that slow sites down
- Uploading full-resolution originals. A camera photo can be several megabytes; displayed at web size it should be a fraction of that.
- Relying on the browser to resize. CSS scaling shrinks the appearance, not the download.
- Skipping alt text. This hurts both accessibility and image search, and it is easy to fix.
- Using PNG for photographs. PNG is for graphics and transparency; photos belong in WebP or JPEG.
- Lazy-loading the hero image. Deferring your most important above-the-fold image slows the perceived load.
An image optimization checklist
- Resize each image to the largest size it will actually display.
- Serve modern formats such as WebP, with fallbacks where needed.
- Compress to the smallest size that still looks sharp.
- Give every file a descriptive, hyphenated filename.
- Write accurate, natural alt text for every meaningful image.
- Lazy-load below-the-fold images.
- Set explicit width and height to avoid layout shift.
- Use a CDN and caching for faster global delivery.
- Include important images in your sitemap so they can be discovered.
Frequently asked questions
Does image optimization really affect rankings?
Indirectly but meaningfully. Optimized images speed up your pages and improve user experience, both of which support rankings, and good alt text and filenames help you appear in image search.
What is the best image format for websites in 2026?
WebP is a strong default for most photographs thanks to its balance of quality and small file size. AVIF can be even smaller, and SVG is ideal for logos and icons.
How important is alt text?
Very. It is essential for accessibility and it is the clearest signal you can give search engines about an image's content. Describe the image accurately rather than stuffing keywords.
Should I compress images manually?
You can, but most modern platforms and build tools compress automatically once configured, which keeps things consistent without ongoing manual work.
Conclusion
Optimizing your images is one of the highest-return jobs in on-page SEO. It costs little, it speeds up your site, it improves accessibility, and it opens up image search as an extra source of traffic. Work through the checklist above and you will have faster pages and a better experience for every visitor. If you would like a specialist team to handle the technical detail as part of a wider strategy, explore our SEO services in Thailand.
