Optimising your images for mobile SEO: 10 valuable tips

Through our Mobile SEO Agency Optimize 360 

10 tips for optimising your images for the SEO mobile

Are you looking for solutions to improve the performance of your website on the screens of mobile devices?

One of the keys to success is optimising the images on your site.

Find out here, in 10 points, how to optimise your images for Mobile SEO so you can rank higher in search engines such as Google.

Mobile SEO

1. Choosing the right image format for Mobile SEO

The choice of image format is crucial to their performance on mobile devices. Formats such as JPEG and PNG are commonly used. However, you can also use more recent formats, such as the WebP from Google, which offers numerous advantages in terms of compression and image quality.

Format comparison

    • JPEG : This format offers high-quality lossless compression, ideal for photographs.
    • PNG : This format supports transparency and has a higher resolution. It is suitable for images with text or graphics.
    • WebP : This format, developed by Google, offers aggressive compression with quality rendering that is superior to JPEG and PNG formats.

2. Reduce the size of image files

To improve loading speed of your website pages on mobile devices, it's essential to compress images without losing quality. To do this, you can use online tools or plugins integrated into your CMS (Content Management System) to automatically reduce the size of your images.

Examples of online tools

  • TinyPNG: Compresses both JPEG and PNG images.
  • Compressor.io: Reduces file size considerably while maintaining good image quality.
  • ImageOptim: Optimises and compresses images on MacOS in just a few seconds.

3. Use the right dimensions

It is important not to use images that are too large for mobile devices. The ideal is to have different formats for each type of screen (desktop, tablet, smartphone). It is therefore advisable to set a maximum width by default so that the image is displayed correctly for the medium used.

Recommendations for dimensions

    • Desktop : 1200px to 1600px wide
    • Tablet : 800px to 1024px wide
    • Smartphone : 400px to 600px wide

4. Display images in "responsive" mode

To ensure optimal browsing comfort on different screen resolutions, it's vital that your images are "responsive" and adapt automatically to the size of the user's screen. The simple fact of integrating a CSS in your site is all you need to make the necessary adjustments.

CSS code for responsive images

img {
   max-width : 100%;
   height : auto;

5. Use lazy loading

The " lazy loading "This allows images to be loaded only when they are visible on the screen, significantly improving the loading speed of web pages. To do this, you can use plugins or scripts JavaScript that integrate this functionality into your website.

Examples of plugins and scripts

    • A3 Lazy Load : Plugin WordPress makes it easy to disable lazy-loading on your site.
    • Lozad.js : Lightweight JavaScript library for implementing lazy-loading.

6. Using vector images

Vector images (SVG) have the advantage of being resizable without loss of quality. They are particularly suitable for logos, icons and illustrations. By using these formats, you avoid overloading your page with image files that are too large, while guaranteeing good resolution on mobile screens.

7. Using CSS sprites

Combining several images into a single image, called a "sprite", can considerably reduce the number of HTTP requests and improve the performance of your website. This technique is mainly useful for icons and small images that can be combined into a single image file.

8. Add alt tags to your images

alt" attributes are essential for the referencing of your images, but also for accessibility by the visually impaired. By adding a clear and precise description of each image, you can improve your search engine ranking and make your site more accessible.

9. Optimising image file names

The choice of name for your image files is also important for mobile SEO. It is therefore preferable to use descriptive and relevant names, containing keywords related to the subject of the image, rather than generic names (e.g. "image01.jpg").

10. Adopt an appropriate caching strategy

To avoid your pages loading too slowly on mobile devices, consider implementing an optimal caching policy. Thanks to caching, browsers can retrieve images stored locally, which considerably reduces loading times on subsequent visits.

blank Digital Performance Accelerator for SMEs