Images are usually the heaviest element on any web page. In many cases they account for more than 50% of the total weight of a URL, and that has a direct impact on on-page SEO (more specifically on loading speed, user experience, and, of course, rankings).
The problem is that many websites upload images exactly as they come from the camera or stock library, without any previous treatment. A 4 MB file where an 80 KB file would do. A PNG format where there should be a WebP. An image without an alt attribute where Google cannot read anything.
Why optimizing images is an essential part of SEO
Google has made it clear for years that loading speed matters. First with Page Speed as a ranking signal, then with Core Web Vitals, and now by integrating them directly into how it evaluates page experience.
Among the metrics that most affect rankings, LCP (Largest Contentful Paint) measures how long it takes for the largest visual element on the page to appear. In most cases, that element is an image. If that image is too heavy, in the wrong format, or not prioritized correctly, LCP rises sharply and directly harms rankings. But it is not just about speed. Well-optimized images also provide:
- Visibility in Google Images, which in some sectors generates a considerable amount of traffic.
- Semantic context through the alt attribute, which helps Google understand what the page is about.
- Better browsing experience, especially on mobile, where a poorly sized image can break the layout and increase the bounce rate.
Image formats and which one to use in each case
The format is the first decision to make and probably the one with the greatest impact on the final file weight.
| Format | Recommended use | Compression | Transparency | Browser support |
|---|---|---|---|---|
| WebP | Photographs, banners, illustrations | Lossy and lossless | Yes | Very high (95%+) |
| AVIF | High-quality photographs | Lossy and lossless | Yes | High (Chrome, Firefox, Safari 16+) |
| JPEG / JPG | Photographs without transparency | Lossy | No | Universal |
| PNG | Logos, icons, images with text | Lossless | Yes | Universal |
| SVG | Icons, logos, vector illustrations | Lossless (vector) | Yes | Universal |
| GIF | Very simple animations | Lossless (8-bit) | Partial | Universal |
In practice, the recommendation is clear:
- For photographs and complex images: WebP as the main format, with JPEG as a fallback if you need universal compatibility.
- For logos and icons: SVG whenever possible. They are vector files, weigh very little, and scale perfectly to any resolution.
- For images with transparency: WebP, and PNG only when WebP support is not guaranteed.
- For animations: looping video (MP4 or WebM) instead of GIF, which is a very inefficient format.
Image dimensions and size
A very common mistake is uploading a 3000x2000 pixel image when the container where it is displayed is 800x500. The browser loads the full-size image and then visually reduces it using CSS. All that extra weight is downloaded for no purpose.
The rule is simple: the image should have the dimensions in which it will be displayed, or at most twice that size for high-density screens (Retina, for example). A good workflow for sizing images:
- Identify the maximum width of the container in your design.
- If you need to support Retina screens (@2x), multiply that width by 2.
- Resize the image before uploading it with those exact dimensions.
- Use the
srcsetattribute to serve different sizes depending on the device (we will see this later).
As a practical reference for the most common sizes:
| Use | Recommended width |
|---|---|
| Hero image (main header) | 1200-1600 px |
| Blog article image | 800-1200 px |
| Image in grid or columns | 400-800 px |
| Product thumbnail | 300-600 px |
| Icon or logo | SVG (no px restriction) |
Compressing images for use on the web
Compressing an image does not mean it has to look bad. The key is to adjust the compression level to the type of image and how it will be used.
- Lossy compression: Reduces file size by removing information the human eye barely perceives. It is the most commonly used for photographs. A quality level between 70 and 85 in JPEG or WebP usually delivers visually flawless results with a very small file size.
- Lossless compression: Does not remove information; it only reorganizes and encodes it more efficiently. Suitable for images with text, screenshots, or graphics with flat colors, where any loss of quality is immediately noticeable.
There is no single answer to how much an image should be compressed, but there is a rule that works: compress until you notice visual degradation and then go one step back up. In most photographs, a well-compressed file should not exceed 150-200 KB. If you are above that, it is worth reviewing the process.
For images that are not visually critical (supporting icons, listing thumbnails, background images), you can lower the quality much more without users noticing.
The importance of the alt attribute
The alt attribute is alternative text that describes the content of an image. Search engines read it to understand what the image is about, and screen readers use it to describe the image to people with visual impairments.
Many treat alt text as a field that must be filled in so the validator warning does not appear. That is a mistake. A well-written alt can help rank in Google Images and adds semantic context to the entire page. Some specific examples to understand the difference:
| Image | Incorrect alt | Correct alt |
|---|---|---|
| Photograph of a pasta dish | imagen1.jpg |
Spaghetti carbonara with pancetta and Parmesan cheese |
| Screenshot of an analytics chart | chart |
Monthly organic traffic chart showing 40% growth in six months |
| Company logo | logo |
SeDigital logo, SEO agency in Madrid |
| Decorative image with no content | decoration |
alt="" (deliberately empty) |
On the last point: purely decorative images should have an empty alt attribute (alt=""), not a missing one. Without the attribute, some screen readers will read the file name, which is usually useless to the user.
Should the keyword be included in the alt text? Yes, when it is natural and makes sense. It is not about repeating it in every image on the page, but including it in images where it really describes what is visible. Forcing the keyword into images that are unrelated to it is over-optimization, and Google detects it.
Is the file name important for SEO?
The image file name is another contact point Google uses to understand its content. It is not a major SEO signal, but applying it correctly costs nothing. The rule is simple:
- Use descriptive words separated by hyphens.
- Write in lowercase.
- No spaces, no special characters, no accents.
- Include the main keyword when relevant.
| Incorrect name | Correct name |
|---|---|
IMG_20240312_094521.jpg |
optimizar-imagenes-web-ejemplo.webp |
foto plato pasta (1).png |
espagetis-carbonara-receta.webp |
new-image-FINAL-v3.jpg |
auditoria-seo-informe-ejemplo.webp |
Responsive images with srcset
The srcset attribute lets you tell the browser about several versions of the same image at different sizes, so the browser itself can decide which one to load depending on the screen and device resolution.
Without srcset, a 400 px wide mobile phone downloads exactly the same image as a 1600 px monitor. With srcset, each device downloads only what it needs. The basic syntax:
<img
src="imagen-800w.webp"
srcset="
imagen-400w.webp 400w,
imagen-800w.webp 800w,
imagen-1200w.webp 1200w
"
sizes="
(max-width: 600px) 400px,
(max-width: 1000px) 800px,
1200px
"
alt="Image description"
width="1200"
height="800"
/>What each attribute does:
src: default image for browsers that do not support srcset.srcset: list of available versions with their real width in pixels.sizes: tells the browser at what size the image will be displayed depending on the viewport, so it can choose the most appropriate version.widthandheight: essential to avoid CLS (layout shifts) while the image loads.
What is lazy loading and how does it help optimization?
Lazy loading delays image downloads until the user approaches them while scrolling. This significantly reduces the weight of the page’s initial load, since images below the fold are simply not downloaded until they are needed. To implement it in HTML, use an attribute:
<img
src="imagen-fuera-del-fold.webp"
alt="Description"
width="800"
height="600"
loading="lazy"
/>It has support in most modern browsers, so you do not need any additional library in most cases.
Here comes the most common mistake: applying loading="lazy" to the main image on the page, the one visible as soon as it loads. That tells the browser to wait before loading it, which drives up LCP and directly penalizes Core Web Vitals. The rule is clear:
- Images above the fold (visible without scrolling): no lazy loading, or better still, with
loading="eager"and preload. - Images below the fold:
loading="lazy".
The relationship between images and Core Web Vitals
Two of the three main Core Web Vitals metrics are directly related to images.
LCP: Largest Contentful Paint
Measures how long it takes to render the largest visible element on screen. On most pages, that element is an image or a header banner. For LCP to be good, Google states it should occur in less than 2.5 seconds. The factors that most affect the LCP of an image:
- File weight (compression and format).
- Whether the browser discovers it late in the code (images in CSS or loaded with JavaScript).
- Whether it is not explicitly prioritized.
For the LCP image, the best thing you can do is add a <link rel="preload"> in the <head>:
<!-- In the document <head> -->
<link
rel="preload"
as="image"
href="imagen-hero.webp"
imagesrcset="imagen-hero-400w.webp 400w, imagen-hero-800w.webp 800w, imagen-hero-1200w.webp 1200w"
imagesizes="100vw"
/>This tells the browser to download that image with maximum priority, even before the parser has finished reading the HTML. In HTML, you can also use the fetchpriority="high" attribute directly on the image tag:
<img
src="imagen-hero.webp"
alt="Descriptive title for the main image"
width="1200"
height="600"
fetchpriority="high"
/>CLS: Cumulative Layout Shift
Measures unexpected layout shifts. When the browser starts rendering the page without knowing an image’s dimensions, it reserves zero space for it. When the image finishes loading, it pushes all the content down. That jump adds to CLS. The solution is to always add the width and height attributes in the HTML:
<!-- Bad: the browser does not know how much space to reserve -->
<img src="foto.webp" alt="Description" />
<!-- Good: the browser calculates the aspect ratio and reserves the space -->
<img src="foto.webp" alt="Description" width="800" height="600" />With width and height values, the browser can calculate the image aspect ratio before downloading it and reserve the exact space. It does not matter if you later change the size with CSS; the aspect ratio is maintained and there are no jumps.
The influence of a CDN on image loading
A perfectly compressed image traveling from a server in Frankfurt to a user in Buenos Aires will take longer than the same image served from a node in Sao Paulo. That is what a CDN (Content Delivery Network) solves.
A CDN distributes your static files (including images) across multiple points of presence around the world. When someone requests an image, they receive it from the node closest to their location.
Some CDNs such as Cloudflare, Fastly, or Bunny.net also include automatic image optimization: conversion to WebP depending on the browser, on-the-fly resizing, automatic compression. If you have a website with a lot of international traffic, using a CDN with these capabilities can make a very noticeable difference in performance.
Tools for optimizing images
You do not need to do all this manually. There are tools that automate much of the process:
| Tool | Type | What it does |
|---|---|---|
| Squoosh | Web / CLI | Compression with real-time preview, multiple formats including AVIF |
| ImageOptim | macOS | Lossless compression of PNG, JPEG, and GIF |
| Sharp | Node.js / CLI | Resizing, format conversion, and compression in automated workflows |
| FFmpeg | CLI | Conversion from GIF to MP4/WebM video |
| cwebp | CLI | Conversion to WebP from JPEG or PNG with quality control |
Plugins for CMS
| CMS | Plugin / Solution | Main features |
|---|---|---|
| WordPress | ShortPixel, Imagify, Smush | Automatic compression on upload, conversion to WebP, lazy loading |
| WordPress | Native (v6.1+) | Automatic WebP generation on image upload |
| PrestaShop | WebP Converter for Media | Serve WebP to compatible browsers with fallback |
| Shopify | Native | Shopify already serves WebP automatically in modern themes |
Analysis and audit tools
- PageSpeed Insights: detects images without dimensions, without lazy loading, in inefficient formats, or uncompressed.
- Lighthouse (Chrome DevTools): same information locally, with more detail.
- WebPageTest: shows the loading waterfall with the weight and order of each image.
- Screaming Frog: audits all site images for empty alt text, excessive sizes, and broken URLs.
Is it worth including images in the sitemap?
Google has an extension protocol for sitemaps (if you want to know how to create a sitemap in PrestaShop, we have a complete article on our website) that allows you to declare the images associated with each URL. It is not essential, but it can help crawling on websites with a lot of visual content where not all images are easily detectable by the crawler. The basic structure would be:
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
<url>
<loc>https://www.tusitio.com/articulo-ejemplo/</loc>
<image:image>
<image:loc>https://www.tusitio.com/wp-content/uploads/imagen-principal.webp</image:loc>
<image:title>Descriptive image title</image:title>
<image:caption>Caption or extended description</image:caption>
</image:image>
</url>
</urlset>If you use WordPress with Yoast SEO or RankMath, these plugins already include images in the sitemap automatically.
Common mistakes when optimizing images for websites
Keeping all of the above in mind is not much use if mistakes are made during execution. These are the most common mistakes:
- Applying lazy loading to the hero image: We mentioned it earlier, but it is worth repeating because it is the most damaging mistake. The main image on the page should load as soon as possible, not lazily. Applying
loading="lazy"delays LCP and directly penalizes Core Web Vitals. - Not including width and height on images: Without these dimensions, the browser cannot reserve the space before the image loads. The result is layout shifts that affect CLS and the user experience, especially on slow connections.
- Uploading PNG when the image is a photograph: Lossless PNG is ideal for screenshots, logos, and flat illustrations. For a photograph, it creates huge files without any visual benefit. A photograph in WebP or JPEG compressed at 80% is practically indistinguishable from its PNG version, but can weigh 10 times less.
- Missing, generic, or over-optimized alt text: Do not leave the alt empty on images with content, and do not fill it with a list of keywords. The alt should describe what is in the image precisely and naturally. If the keyword fits there, good. If not, do not force it.
- Not reviewing images on mobile: An image can look perfect on desktop and behave terribly on small screens: overflowing the container, appearing at a ridiculous resolution, or loading at a weight that drains the mobile connection. Reviewing image performance on mobile separately is essential, especially because Google uses the mobile version for indexing.
- Forgetting images on category pages and product pages: In ecommerce, image optimization is often considered for the blog or homepage, while the thousands of product pages that may have heavy uncompressed images, no alt text, or JPEGs where WebP could be used are forgotten. In a large catalog, this can mean dozens of unnecessary megabytes per category page.
Checklist for optimizing images for websites
A summary of everything to review before publishing or auditing images on a website (you can also leave it in the hands of our expert SEO team):
| Review point | Status |
|---|---|
| WebP (or AVIF) format for photographs and complex images | ☐ |
| SVG for logos and icons | ☐ |
| Dimensions adjusted to the screen container | ☐ |
| Compression applied (target: under 100 KB for content images) | ☐ |
Descriptive alt attribute on all content images |
☐ |
| Descriptive lowercase file name with hyphens | ☐ |
width and height attributes on all images |
☐ |
srcset configured to serve sizes by device |
☐ |
loading="lazy" on images below the fold |
☐ |
| LCP image without lazy loading, with preload or fetchpriority=“high” | ☐ |
| Images included in the XML sitemap | ☐ |
| Mobile review of display and performance | ☐ |
Frequently asked questions about image optimization for websites
What is the best format for website images?
WebP is the most balanced choice between compatibility and efficiency. It has support above 95% among modern browsers and offers between 25% and 40% weight savings compared with JPEG. If your CMS generates AVIF natively and you have no compatibility restrictions, AVIF can reduce weight even further, but its support is still not universal.
How much should an image weigh on a website?
There is no absolute limit, because it depends on the size and visual importance of the image. As a general reference: content images below 100 KB, thumbnails and icons below 30 KB, and hero images between 100 and 250 KB depending on their dimensions and quality.
Do images in CSS also affect LCP?
Yes, and more than images in HTML. Images loaded through background-image in CSS are not discovered until the browser has processed the stylesheet. This delays their loading compared with images declared directly in the HTML. For the LCP image, it is always best to use an <img> or <picture> element in the HTML.
Is it worth using AVIF if not all browsers support it?
Yes, by using the <picture> element with a fallback to WebP or JPEG. That way, browsers that support AVIF will download it and the rest will receive the WebP or JPEG version. There is no loss of compatibility, and the weight saving in modern browsers can be considerable.
Does image alt text help page SEO?
Yes, in two ways. First, it provides semantic context to the page and reinforces topical relevance when the keyword fits naturally. Second, it is the main route for Google to index images in Google Images, which in sectors such as food, travel, fashion, or decor can generate a notable amount of traffic.
How do I know if images are affecting my website’s LCP?
Open PageSpeed Insights, enter the URL of the homepage or your most important pages, and review the diagnostics section. If the LCP is an image, the tool itself identifies it and tells you which part of the loading time corresponds to downloading that image. Lighthouse in Chrome DevTools offers the same information in more detail, directly in the browser.
