Optimiser les images : guide rapide en 3 étapes clés
- Melanie Robin
- January 18, 2023
- 11:58 a.m.
- 0 comments
Updated January 23, 2024
The art of optimizing images for the web has become crucial in today's digital age. As the saying goes, a picture is worth a thousand words, and Google seems to be well aware of this. Indeed, according to the Mountain View giant, the images are directly linked to 22.6 % of searches carried out on its platform. If your goal is to establish a solid online presence and guarantee an optimal user experience, optimizing your visuals remains an essential step that should not be overlooked. It's time to say goodbye to web pages that load slowly, disrupt your visitors' navigation - and make Google moan! In this article, we will sketch the ideal portrait of the optimized image.
What does “optimize an image” mean?
Optimizing images for the web means reduce image file size while preserving visual quality in order to slow down page download times.
Why optimize images?
Whether you own a showcase site or an e-commerce business, images are an integral part of the design of a website. Indeed, they tell stories that words cannot tell. You should know that the visual search is increasingly appreciated by Internet users. Here are 5 reasons why you should optimize the visuals of your website:
- illustrate your words and capture attention in a relevant way;
- make the user experience pleasant on your site;
- reduce the loading time of web pages;
- improve your organic visibility in image search;
- increase visits to your site.
Additionally, you will reduce server response time and the number of HTTP requests. A good point for the overall SEO score of your website. You will attract qualified traffic on your site from Google Images (Bing, etc.). In my opinion, visuals really influence how people interact with your content. They hold a power: that of generate engagement, or even sales.
Steps to image optimization
So how do you appear in Google Images? Here is the recipe.
# 1 Compress and resize your image
Compression reduces file size by removing unnecessary data and improves the speed of a site web. It is also possible to modify the dimensions of the image if it is larger than the size required for a web page. You will avoid overloading your server: a simple gesture, but far from being trivial for our planet. How to do ? There are online tools designed to compress and resize your visuals. I use the free online platform Squoosh. Easy to use, it is complete and accessible without registration. If your online sales site includes many visuals, it will be necessary to choose the premium version of this tool.
Screenshot of the Squoosh platform home page.
# 2 Name your image
The names of your files are important! Although this does not radically transform your image with Google, it is an essential factor in improve user experience on your website. The reason ? This allows users and search engines to quickly identify the contents of your files without having to open them. It's still very useful to have evocative file names to find them at a glance. Opt for simple, yet meaningful file titles, choosing terms that capture the essence of your image.
➡️ Ex.: a file called “P5241684.jpg” doesn’t speak to anyone.
Instead, prefer: “digital-photo-camera.jpg”.
# 3 Provide information the ALT attribute
The images play an important role in SEO (Search Engine Optimization) to attract visitors to your website. This alt text description, which does not appear on screen, provides information to users and search engines about the content of your visual. De plus, la balise ALT rend vos contenus accessibles aux personnes malvoyantes (via des lecteurs d'écran) ou aux internautes qui rencontrent des problèmes d'affichage. Pour bien utiliser l'attribut ALT, voici quelques conseils :
- describe the image precisely;
- insert a relevant keyword or key phrase;
- avoid keyword overload;
- write a 4-7 word description.
➡️ Ex.: prefer “personalized-wooden-photo-frame” instead of “photo-frame”.
It is not necessary to fill this tag for purely decorative images. To illustrate, here is an example of where the ALT tag is located in WordPress.
Screenshot: location of alternative text on the WordPress CMS (from the media library).
WordPress and other content management systems (CMS) provide a dedicated space for entering the description for this tag. Finally, don't forget to provide a caption: this explanatory text will appear below the image. It provides readers with additional information about the content displayed on the screen.
What you should not do
When it comes to optimizing the images on your website, certain practices should be avoided if you want to do things well.
Choosing an Inappropriate Image Format
On the web, you use different types of visuals which require appropriate formats. Here is an overview of common formats:
- The format .jpg for a photograph;
- The format .png for a simple image and transparent background;
- The format SVG for a logo, an illustration;
- The format GIF for an animated image;
- The format WEBP is versatile and can support various types of image formats.
Include spaces, special characters and accents
Stay smart: avoid using special characters like &*#%^ in your file names and alt text.
1- These special characters can create difficulties with some browsers and sometimes prevent users from accessing files.
2- Your ALT tag may be unreadable for users.
Do not separate words
By separating the words, your content will be more easily found by search engines and clear to Internet users. Although opinions differ on this subject, it is advisable to use the hyphen (located on the 6 key on the keyboard) to separate terms.
➡️ Example: photo-print-paris
Your file name will be read as three separate words by Google bots, which also applies to the ALT attribute.
Publish useless visuals of questionable quality
When we say that a picture is worth a thousand words, this expression goes far beyond a simple formula. To stand out from the crowd, be creative in the presentation of your message. Opt for royalty-free images or photos that are visually captivating and fit your goals. However, the ideal is to use your own visuals. If you manage an e-commerce site, it is strongly recommended to carry out professional shots of your products. Your images should highlight your products and encourage purchase, not the other way around. High-quality visuals convey your brand values and establish a connection between you and your customers. Google will favor personalized images for their unique and original character.
Write directly on visuals
Make sure to always post images that are clear and free of any distracting elements (like text or a logo). The reason ? Search algorithms and screen readers cannot identify text embedded in a photo or illustration. This implies that the keywords present in your visual will not influence your SEO positioning. If you have important information to convey, add plain text to your page for accessibility purposes
Forgetting to adapt the visuals for the mobile version
Today, the use of cell phones and tablets to browse the Internet is universal. A website not adapted to mobile devices leads to a significant loss of traffic. Additionally, Google now considers mobile optimization as an important criterion in site ranking. Make sure your images are sharp on all types of screens, regardless of their size.
What are the different types of web images?
Let's take a look at the various file formats you need to consider to optimize your website images.
Images, photos and illustrations
Whether for products from your online store or your e-commerce site, well-chosen images help your customers visualize and imagine themselves with your products. For static pages and blog posts, visuals enrich your texts and make your content more attractive and engaging.
Infographics
Screenshot : infographic example (source: Rawpixel.com).
Infographics are a great way to present data concisely, mixing text and graphic elements. They allow clarify complex topics in a simple way and striking. You can use various types of infographics, such as:
- informative infographics;
- timeline infographics;
- statistical infographics;
- and even more.
Their growing popularity should be noted! Personally, I find that Piktochart is a particularly effective tool for creating infographics in just a few clicks.
Screenshots
Also known as a screenshot, a screenshot is an image of what appears on the screen of a computer or mobile device at a given moment. It is ideal for illustrating the use of a specific function, providing examples, or helping to solve a problem. Currently my favorite tool for this is the Chrome Screenshoter app.
Animated images
This may include GIFs or small animations. They are used to attract attention or to explain a concept in a dynamic way.
Banners
Web banners can come in different shapes and sizes, but are often rectangular. The main purpose of a web banner is to promote a brand, product, service or event. It aims to attract the attention of site visitors and encourage them to click on the banner to find out more or take a specific action.
3D images
3D images, or three-dimensional images, are graphic representations that provide a perception of depth and volume. They are widely used in various fields, such as video games, animation, architecture, interior design, product visualization, films, etc. The emergence of Web 3.0, often associated with concepts like augmented reality (AR) and virtual reality (VR), is closely related to the use and development of 3D images.
Where to download royalty-free and free images?
Are you looking for photos for your website, blog, e-book or newsletter? There are many platforms offering free and royalty-free images for commercial use. An important reminder: be sure to always check the terms of use for each downloaded visual to ensure legal and licensed use. To optimize images effectively, favor the use of unique visuals, preferably yours. Here are three image banks that I enjoy using myself to bring a friendly and warm touch to my projects!
Pexels
Pexels offers a huge collection of free, high-quality images taken by professional photographers. All files are licensed under Pexels, which allows you to use them for free, even for commercial purposes. My advice : use specific keywords to find the ideal photo. So, are you ready to tell your story in pictures ?
Unsplash
Unsplash lists photographers, each more talented than the next. Again, you don't have to worry about copyright issues since the shots are free to use with no attribution required. These are not less than 3 million visuals and designs for all kinds of projects. You no longer have excuses for find the nugget image you need.
Screenshot from the Unsplash platform: example photos for the query “decoration”.
Picjumbo
Picjumbo offers high definition visuals taken by professional photographer Viktor Hanáček, the founder of the site. There you will find a wide selection of beautiful images relevant to your personal or commercial project: nature photos, cityscape photos, human portraits, food photos, etc. There is something for every taste ! It's here to discover one of the best free photo banks.
How to check the loading time of a page?
Loading speed is a key element to guarantee excellent user experience and to optimize your SEO. If this seems complicated, rest assured: online tools exist to evaluate the speed of your website. In this article, I highlight Google PageSpeed Insights. Google PageSpeed Insights is a free tool that evaluates your website's performance on desktop and mobile devices. By entering your site URL, you receive an overall score. The tool offers recommendations to improve the loading times of your pages. It also allows you to consult specific indicators such as the waiting time before receiving the first byte, the total size of the page, the responsiveness of the server, among others. This information is valuable for detecting areas for improvement. It's easy and straightforward!
Screenshot of the Google PageSpeed Insights tool interface.
What you must remember
Optimizing images means adopting a winning strategy for your website. Each optimized image improves the user experience for faster and smoother loading. It’s also a boost for your SEO: a well-optimized image means better visibility on search engines. And let's not forget the visual impact! Quality images capture attention and convey your message clearly and relevantly. More than a simple technical formality, it has become a significant ecological gesture. So, take the time to refine your visuals. This will make all the difference, for your users and for your business:
- choose an appropriate and unique visual;
- compress and resize the image;
- name your image;
- fill in the ALT attribute.
Consultant in natural referencing (SEO) and digital strategies in Paris. I help businesses optimize their online visibility.
Share on
