Image SEO: How to improve visual visibility
Images are a basic part of any website: they improve the user experience, illustrate written content and can attract substantial traffic from Google Images. However, images are often the...
Images are a basic part of any website: they improve the user experience, illustrate written content and can attract substantial traffic from Google Images.
However, images are often the most neglected aspect of SEO. Large files that slow page loading, missing or generic alt text attributes and outdated formats are problems that affect both search engine rankings and website accessibility.
Google has repeatedly confirmed that optimized images have a positive effect on Core Web Vitals metrics, especially Largest Contentful Paint (LCP), which measures the loading time of the largest visible element on the page.
An unoptimized main image can be the single factor that pushes the performance score below the acceptable threshold, affecting the entire page's ranking in organic results. And in today's competitive environment, every second of loading delay costs visits and conversions.
In this guide you will learn how to optimize images for SEO at every level, from choosing the format and compressing files to using the correct HTML attributes, schema markup and loading strategies that follow Google's recommended best practices.
We will cover each element in detail, with specific examples and tips you can apply to your website immediately.
Image SEO: how to improve visual visibility
SEO for images involves balancing visual quality with technical performance. The goal is to provide clear, relevant images that load quickly, are understood by search engines and contribute to a positive user experience on the website. Every image published on the site is an opportunity to gain additional visibility in Google searches, including the Google Images tab, an often underestimated source of organic traffic.
Choosing the right image format
The file format directly affects image size and quality. Each format has specific advantages depending on the type of visual content, and the wrong choice can result in files 3-5 times larger than necessary. Understanding the differences between formats is the first step in technical image optimization.
- WebP: Google's recommended format for the web. Provides compression that is 25-35% better than JPEG at the same visual quality. Supported by all modern browsers, including Safari from version 14 onward
- AVIF: a next-generation format with better compression than WebP. Browser support is growing; ideal as the primary format with WebP as a fallback for older browsers
- JPEG: recommended for photographs and images with gradients. Good compression with a controllable loss of quality. Remains a solid choice when WebP is unavailable
- PNG: recommended for images with transparency, logos and graphics with solid-color areas. Larger files than JPEG/WebP, but essential for certain types of content
- SVG: ideal for logos, icons and vector illustrations. Scales to any size without losing quality and has very small file sizes
Image compression and sizing
Image file size is the main factor affecting loading speed. A single uncompressed 5 MB image can double a page's loading time and turn a positive user experience into a frustrating one. Proper compression can reduce image sizes by 60-80% without perceptible visual differences.
Practical sizing rules
- Maximum width: do not upload images wider than the container displaying them. If the content area is 800px, the image should not exceed 1600px (for retina screens with double pixel density)
- JPEG quality: 75-85%: provides the best balance between quality and size. Below 70%, artifacts become visible and affect the perceived quality of the content
- Target size per image: under 200 KB for regular images, under 100 KB for thumbnails, under 500 KB for hero images on main pages
- Retina images: serve images at twice the displayed size for high-pixel-density screens, but compress aggressively to offset the increase in size
The alt text attribute: importance and best practices
The alt attribute (alternative text) is an image's most important SEO element and also one of the most frequently implemented incorrectly. It performs three basic functions at the same time, which is why it deserves special attention when publishing content.
- Accessibility: read by screen readers for people with visual impairments, allowing them to understand the page's visual content
- Context for Google: helps search engines understand the image's content and index it correctly in Google Images
- Visual fallback: displayed when the image fails to load because of a slow connection or server errors
Rules for writing effective alt text
- Describe the image's content: "Chart showing organic traffic growth of 150% in 6 months" is much more useful than "chart" or, worse still, "image001.jpg"
- Include the keyword naturally: if the image is relevant to the page's keyword, include it naturally in the alt text without over-optimizing
- Be concise: 5-15 words are usually enough. Avoid long sentences that become difficult for screen readers to process
- Do not start with "Image of...": Google and screen readers already know it is an image, so this clarification is redundant
- Do not repeat alt text: each image should have unique alt text describing that specific content
- Decorative images: for dividers, borders and backgrounds, use alt="" (empty) to signal that the image conveys no content information
Naming image files
The image's filename provides an additional signal to search engines before they process the content or alt text. Use descriptive names with hyphens between words that reflect the image's content and the main keyword of the page where it appears.
- Correct: optimizare-seo-imagini-ghid-complet.webp, grafic-crestere-trafic-organic.jpg
- Incorrect: IMG_20240315_001.jpg, screenshot1.png, image(1).jpeg, photo.webp
Responsive images and the srcset attribute
Modern websites are accessed on devices with screens of varying sizes, from mobile phones with 5-inch screens to 32-inch desktop monitors. Serving the same 2000px image to every device wastes bandwidth and slows down the mobile experience, affecting the Core Web Vitals score and mobile search rankings.
The srcset attribute lets the browser choose the most suitable image version based on the device's screen size and pixel density. WordPress automatically generates several size variants for each uploaded image and adds the srcset attribute to the HTML. Check that your theme uses these variants correctly and does not override the default behavior through CSS or JavaScript.
Standard WordPress sizes and their uses
- Thumbnail (150x150px): used in widgets, recent article lists and compact galleries
- Medium (300x300px): used in articles for images inserted within the text
- Large (1024px wide): used as the main article image in templates with wide content areas
- Full size: the original uploaded size, used only when zooming or downloading is necessary
Lazy loading: deferred image loading
Lazy loading defers the loading of images that are not visible in the page's initial viewport. The browser loads images only when the user scrolls toward them, greatly reducing initial loading time and the amount of data transferred for visitors who do not scroll through the entire page.
WordPress automatically adds the loading="lazy" attribute to images starting with version 5.5. However, there is a critical rule to follow: the main image (hero image or featured image) must NOT use lazy loading. It must load immediately because it directly affects the LCP metric in Core Web Vitals. A lazy-loaded hero image can increase LCP by 1-3 seconds, severely penalizing the performance score.
For the main image, add the fetchpriority="high" attribute, which signals to the browser that this resource has the highest loading priority. Combined with the absence of the lazy attribute, this ensures the main image loads as quickly as possible.
Schema markup for images
Structured data helps Google understand the context of images and can generate rich snippets in search results. ImageObject schema markup allows image details to be specified, while Article schema includes the "image" property, which specifies the article's representative image, used by Google in search results, in Google Discover and on other display surfaces.
- name: the image's descriptive name, similar to the alt text
- description: a detailed description of the content, longer than the alt text
- contentUrl: the image's full URL, including the extension
- author: the author or copyright holder
- datePublished: the image's publication date
- width and height: the image's dimensions in pixels, required for rich snippets
Image sitemap
An image sitemap helps Google discover and index all the images on your website, including those that cannot be discovered through ordinary crawling. This is especially important for websites with photo galleries, portfolios or online stores with many product images. SEO plugins such as Yoast SEO automatically generate the image sitemap and include it in the website's XML sitemap .
Check the "Coverage" section in Google Search Console to see how many images have been indexed and whether there are image indexing errors . A well-configured image sitemap can greatly increase the number of indexed images and visibility in Google Images.
Common image optimization errors
Even websites with quality content make systematic mistakes in image optimization. Identifying and fixing them can bring quick improvements in performance and rankings.
- Images without alt text: check every page and fill in missing alt text. Use Google Search Console to identify image indexing problems
- Oversized images: a 10 MB photo uploaded straight from a phone drastically slows the page. Always compress before uploading
- Incorrect format: using PNG for photographs produces files 3-5 times larger than the JPEG or WebP equivalent
- Missing dimensions in HTML: images without specified width and height cause layout shift (high CLS), a negative metric for Core Web Vitals
- Important text in images: Google cannot read text in images. Important information must be included in HTML, not embedded in graphics
- Lazy loading on the hero image: one of the most common errors that directly penalizes the LCP score
- Generic or missing alt text: "image", "photo", "img" or an empty field have no SEO value and do not help users with visual impairments
Source references
Dorel Tănase
Original author at GOAI. Published here in English with permission.
