The images have been attached to the web since the beginning and the question of their optimization arose quickly. You should know that these often represent the heaviest elements of our pages, therefore they must be processed before they can be put online.
But what are the real benefits of such optimization? And what tools and techniques are readily applicable to our images?
WHAT DOES IT MEAN TO “OPTIMIZE”?
The balance between these three points constitutes the balance of optimization. It is the search for these three factors that will make your images optimized and therefore suitable for the web. In summary, we seek to have the best visual rendering of these, ensuring that they do not degrade the user experience while being easy to access.
WHAT ADVANTAGES DO WE DERIVE FROM IT?
This will primarily improve the loading speed of your website in general. We know how important it is in the user experience. When a page takes a long time to load, we either close it or go somewhere else, and often the frustration is increased when it comes to images that take a long time to display. Either way, we don’t want that to happen.
If you do this well, our dear search engines will thank you. Really. We often neglect the referencing attribute of our media on our site, while well referenced images are synonymous with better indexing of your site in general, better accessibility and a growing user experience (and that we like).
Your files will be lighter, so your site will be even lighter, and beyond the loading speed and the points discussed above, the various backups and modifications made directly to your source files will be much faster (for a domain transfer, backup of the database, etc. ), in short, it’s a big time saver.
THAT’S ALL WELL AND GOOD, BUT HOW DO WE DO IT?
Here are some tips you can follow when adding an image to your website in the future:
First, start with an image that is large and of good quality to make sure it displays well. It is indeed much easier (I will even say feasible) to go from the largest to the smallest than the reverse. Then you have to make sure that this image is in the right format, and here are the two best ones:
JPEG : For your photos, as this is the ideal image format for anything akin to photography. Indeed, it is a light compressed format which still retains the property of having all the colors necessary for the depth of a photo.
PNG : This format is suitable for logos, graphics, designs, large areas of solid colors and anything that needs to be resized without losing quality. It is a heavier format, but the media recorded under this label will necessarily be smaller in size. Its biggest advantages are that it allows you to provide images with a transparent background and to have smooth borders that will pixelate very little when resizing.
HOW CAN I CONVERT MY IMAGE INTO THESE GOOD FORMATS, WHEN STARTING FROM THE RAW FORMAT?
So if you’re not a fan of image editing software such as Photoshop (I quote it, because it’s the one I use, no offense to others, I like you), there are websites that do for you! A few questions to our favorite search engines should be enough for you! (For the lazy ones, here )
We will seek to find the balance between the dimension (the physical size in fact), the resolution (the number of pixels it contains) and the weight of the final image that we want to import. To do so, certain specific criteria have become standards in image processing:
A web-friendly image should not exceed
Background images that cover the entire screen should have a maximum/minimum width of around 2000px.
Your photos that are displayed on your site should generally not exceed the weight of 200 to 300 ko (kilobytes), and anything similar to an icon, a graphic or a drawing (if you follow well, your PNG) must weigh around 100kb.
importance-of-having-an-alt-1
But what we don’t see is that it includes this little piece of information that will tell the robots what it is in concrete terms and therefore help them to index it.
importance-of-having-an-alt-2
Your goal here is to remember to fill in this field when importing your image (your developer will do it for you in most cases) in order to allow our favorite robots to list it correctly. Also, this allows computer readers when it comes to making someone with reduced capacity navigate on your website to read this information aloud and therefore inform the user in question about the nature of the objects he is reading. would have difficulty seeing or discerning. This is a significant concept of accessibility, especially when it is of above-average importance in your project. Finally, when your media isn’t displaying properly, it’s replaced with this alt text, which will make it clear to the user what it is, even if it doesn’t load.
CONCLUSION
Do not neglect the optimization of the different media that appear on our website is one of the keys you have in hand to push the level of your site above the competition on search engines. An advantage in terms of user experience, speed of use and SEO make this approach a real plus when it comes to improving conversion or user traffic on your site.
