For search engine optimisation (SEO), an often underestimated aspect is gaining increasing importance: image SEO. For companies looking to optimise their online presence, it is essential to understand and utilise the power of visual elements for search engine optimisation. This article offers a comprehensive insight into the world of image SEO and provides valuable SEO tips for optimising your company website.
Images are not just aesthetic elements of a website, but play a crucial role in SEO and user experience. Properly optimised images can improve loading times, increase user engagement, and boost visibility in search engines. Companies that neglect image SEO risk leaving valuable potential for their online visibility untapped.
The direct influence of images on the user experience
Image content has a significant impact on user experience:
- You create an engaging and user-friendly website
- You quickly convey complex information.
- You specifically direct attention to certain areas of the website, highlight important content, or reinforce calls to action.
Optimised images are essential to provide website visitors with a positive experience. Conversely, unoptimised or incorrectly optimised images can:
- The website loading times increase and the user experience is affected
- To convey unclear or confusing information
- To distract from other important content and make navigation more difficult
Central measures for image optimisation and maximum SEO performance
To fully leverage the benefits of image SEO, you should integrate the following 10 optimisation points into your workflow.
Media Library Inventory and Cleanup
Check your media library and remove unused, outdated, or redundant images to save unnecessary storage space and improve clarity.
Define image size
Determine the optimal image size (pixel dimensions) based on its placement on the website to minimise load times and maximise display quality. Image size is usually determined by width in pixels. Images that span the full width of the screen are typically 1920px wide on desktop. The standard content width is 1080px. Test the view of your images on different devices (desktop, tablet, mobile) to ensure they look good and scale appropriately.
Strategically select file formats
Please select the appropriate file format for each image type to achieve an optimal balance between file size and image quality:
- JPEG: Ideal for photos and colourful images with minimal loss of quality.
- PNG: Suitable for graphics with few colours, transparent backgrounds, or text.
- WebP: Modern format that supports both lossy and lossless compression, and often offers smaller file sizes than JPEG and PNG.
- GIF: Suitable for simple animations.
- SVG: Optimal for logos, graphics, and illustrations, as it offers lossless compression and scalability.
Minimise file size and optimise load times
Reduce the file size to a minimum (ideally under 150 KB per image, icons around 10 KB) without compromising image quality to improve website loading times.
Developing meaningful filenames for search engines
Use descriptive, keyword-rich filenames to help search engines interpret the image content. Ensure that filenames are always in lowercase, do not contain umlauts, and use hyphens to separate words.
Strategically use ALT attributes
Include precise, descriptive alternative text (ALT text) explaining the image content for search engines and screen readers. The ALT text should include relevant keywords but be phrased naturally and understandably.
Optimise image title
Use the `alt` attribute to provide additional context and information about the image.
Use captions strategically
Add informative captions to enhance the context of the image and to improve user understanding.
Implement responsive image design
Ensure that images are displayed correctly and optimally on all devices (desktop, tablet, smartphone) by using responsive image techniques.
Integrate structured data for images
Use Schema.org markup to provide search engines with additional information about your images and increase the chances of rich snippets in search results.
Create an image sitemap
Create and submit a separate image sitemap to search engines to help them index your visual content.
Technical aspects of image optimisation
Compression and size optimisation
Use specialised plugins in your content management system to compress images without affecting visual quality.
Responsive image design
Implement responsive image techniques such as the srcset attribute to provide optimal image sizes for different screen resolutions.
The „srcset“ attribute is an HTML attribute that is used in the<img>The `srcset` attribute is used to specify different image sources for varying screen sizes, resolutions, or other device characteristics. It allows the browser to select and display the most suitable image based on the current device conditions. Simply put, the `srcset` attribute is a way to implement responsive images that automatically adapt to the different requirements of desktops, tablets, and smartphones. It helps to optimise loading times, improve user experience, and conserve bandwidth.
How does the „srcset“ attribute work?
The srcset attribute contains a list of image URLs, separated by commas. Each URL is accompanied by a descriptor that describes the image's characteristics. There are two types of descriptors:
- Width Descriptors (w): Specifies the width of the image in pixels.
- Pixel density descriptors (x): Specify the pixel density of the image (e.g. 1x for standard resolution, 2x for Retina displays).
The browser uses these descriptors in combination with the device information to select the appropriate image from the list.
Example:
XML
<img src=“bild-standard.jpg“
bild-klein.jpg 320w,
bild-mittel.jpg 640w,
bild-gross.jpg 1024w“
Description of the image
In this example, three different image versions are offered for different screen widths:
- small-image.jpg for devices up to 320 pixels wide.
- image-middle.jpg for devices up to 640 pixels wide.
- image-large.jpg for devices with a width of up to 1024 pixels.
The browser automatically selects the most suitable image version to ensure optimal display and minimise loading time.
Benefits of the srcset attribute:
- Responsive Images: Adapting to different screen sizes and resolutions.
- Improved loading times: Only the required image is loaded.
- Optimised User Experience: Clear and sharp images on all devices.
- Bandwidth Efficiency: Reducing data usage for mobile users.
- SEO benefits: Faster loading times have a positive impact on search engine rankings.
Using the `srcset` attribute is a best practice for modern web design and helps to optimise websites for a variety of devices and screen sizes.
Image Content Strategy
Relevance and Context Select images that support and complement the text content. This improves user understanding and signals relevance to search engines.
Using infographics and charts: Complex information should be presented visually. Infographics can act as standalone SEO assets and generate backlinks.
Measurement and analysis of image SEO performance
Key Performance Indicators (KPIs) for Image SEO: Monitor metrics such as image loading times, ranking in image search results, and traffic from image search engines.
Performance Monitoring and Optimisation Tools Use tools such as Google Search Console, PageSpeed Insights and specialised image SEO plugins within your CMS for continuous optimisation.
Image SEO is part of the SEO strategy
Image SEO is an indispensable part of a holistic SEO strategy. By implementing the presented best practices, companies can significantly improve their visual presence in search engines. With the advent of visual search and AI-powered image analysis, the importance of image SEO will continue to grow in the future. Companies that invest in optimising their visual content now will put themselves in an optimal position for future developments in the field of search engine optimisation.
