OPTIMIZE ITS IMAGE
An image file is determined by several attributes.
The ones we are interested in are resolution, height, width, compression and file format.
The resolution
Concerning the resolution, expressed in dpi, the rule is simple:
Resize the image
For the size of the image, we must consider the display medium. If you want to import a logo for example, you don’t need to upload an image that is more than 500 pixels wide.
Generally speaking, we recommend that photos never exceed 1200 pixels in width.
Even if some screens offer much larger display media, the gain in quality does not justify the longer loading time. Don’t forget that the majority of users consult your site on their smartphone!
We recommend that you never upload images larger than 150kb to WordPress.
How to resize?
It cannot be said enough: you should not rely on WordPress or a recompression plugin to reduce the size of your images. If your photos are more than 4000 pixels wide with a weight of 150MB, no plugin will be effective to reduce the weight below the 150kb we recommend.
The best paid tool to process your photos is still photoshop. To export for the Web, choose files->export->save for the Web (Inherited).
With this tool, you can set the image size, the export format, the compression quality. Each time you change a setting, the tool shows the estimated weight of the image at the bottom left of the photo.
On Mac OsX: The Preview tool
When you open your image on the Mac, you already have a set of tools for resizing the image. You can crop your image and resize it with the menu Tools-> Resize. If you work with JPEGs, you can also set the compression ratio. Without being as complete as Photoshop, this option is useful to quickly export your images.
And on Windows: The Paint tool
Not super complete, the Paint tool also allows you to resize photos, but in this case, we prefer to turn to free image editing software like the inevitable Gimp.
Use WordPress to resize the photo
When you add an image to WordPress, it is automatically resized into multiple versions of different sizes. You can choose between the original image size, a medium size and a thumbnail.
Rename the file name
It is essential to rename your file. Why is this? Because Google indexes your images. And a file called IMG10349.jpg isn’t really going to speak to him. We recommend injecting as many keywords as possible into your file names.
Add an attribute in your images
When you add an image to WordPress, it is possible to add descriptions, as well as alternative text in case the image does not load. Since Google is very fond of this data, it would be a shame to leave it out. So, when you have added an image to WordPress, don’t forget to fill in the fields in the right column: alternative text, title, description, caption. You do not need to provide a different text for each of these parameters.
The file format
The choice of file format will have a great impact on the weight of the final image.
The JPEG format
The JPEG format is perfectly suited for photos with a lot of details, shades and colors. This is the most used format for photos.
The PNG format
The PNG format, unlike JPEG, manages transparency and is therefore ideal for inserting a logo, an icon,… It is a very effective format for simple images, with few nuances and details.
The SVG format
The SVG format is a vector format, like the AI files of the Illustrator program. The image is described using vectors that allow the image to be resized at will without losing quality, but also to minimize the file size. However, this format can weaken the security of your site and is not natively supported by WordPress.
The GIF format
Popularized by the same on the Internet, the GIF format can be an alternative to the JPEG format and will be mainly used for its faculties in term of animation.
Compression
The objective of compression is to maximize the quality of our image while keeping the file size as low as possible.
It is highly recommended to keep your image size below 150kb, even when using a plugin that automatically recompresses images.
150Kb may not seem like much in our world where we consume gigabytes by the bucketload. But don’t forget that your site will have several images, and by adding all these images, we can quickly arrive at a page weighing a few megabytes.
Most of the public hosting services simply cannot provide sufficient performance with pages that are megabytes in size.
Not to mention that 4G connections on smartphones are slower than WiFi connections, so a site that is too heavy may take a long time to load.
Optimize your images automatically: the Imagify plugin
First of all, you have to keep in mind that no plugin is going to be miraculous to resize your images. If you send a 150MB raw photo, no plugin will allow you to go below 150kb.
Only an optimization via Photoshop, Gimp or the tools integrated to your operating system will allow you to compress your images correctly.
This being said, it is not useless to add a compression plugin on your website, in order to gain some extra Kb.
Our preference is for Imagify, which is fairly easy to learn and does the job for a reasonable fee. You can pay monthly or buy GB packs when you have a large flow of images to process. The free version of the plugin allows to recompress 25mb/month. Its interface is intuitive and all processes run in the background so you don’t have to worry about them.
How to find the images that slow down your site?
When working on WordPress, we recommend using Google Chrome. This browser has a variety of tools that will help you understand how your site works.
Go to the menu View->Options for Developers -> Development Tools.
You then find yourself with a panel that offers you all sorts of options to monitor your site, the tab that interests us is called ‘Lighthouse’ because it allows you to make a complete diagnostic test.
Click on ‘Generate Report’ to get the report for your site. You will then receive a note about the different aspects of your site as well as recommendations concerning the management of your images.
Nous voici à la fin de notre tutoriel sur le redimensionnement des images pour WordPress. Si vous avez des questions ou si quelque chose n’est pas clair, n’hésitez pas à nous contacter!
