How to increase website speed through image optimization
After a long time, I finally find the time to write on my blog, I left you with an article on where to find images to download for free for websites , so let's continue on this topic and I will now explain how and why to optimize images for the web to reduce site loading times.
As we well know, the use of images in the creation of a website is an important factor, because the images allow you to have a visually beautiful site and encourage the user to surf more, as well as being useful for making a web page more attractive. , explain or reinforce a concept described in the post. Or, in some cases, the images may be of primary importance, for example if we are talking about a photography website.
The loading speed is one of the aspects that Google takes into account when evaluating the website, especially in optical SEO , it's a fact that 40% of users leave a website if it loads more than 3 seconds. An aesthetically beautiful website, and at the same time fast, therefore allows you to have more views, more shares and even more sales.
To test the website loading speed you can use a tool like Google Pagespeed Tools or Pingdom Website Speed Test or GTMetrix:
In order to have a fast website, therefore, it is necessary to understand how to optimize images by reducing weight and size without losing quality.
The first thing to do to reduce the size of an image is to crop it, using a software such as Photoshop we can crop our image to eliminate the excess parts that we don't need, and create an image of the right size depending on the specific website and template resolutions, this will allow us to increase the visual impact, focusing the user's attention on the main elements of our image and, at the same time, to reduce the weight of the image.
To save an image optimized by Photoshop we can choose the Save for web function , and set the quality of the JPEG to 80% , in some cases it is also possible to do tests by setting the quality up to 60% to further reduce the weight of the image.
By doing this we will get an optimized image that will weigh much less than the original, always maintaining excellent quality.
Well, now that we have saved our image following the instructions above, we can already have an optimized image to be inserted in our web page, but if our site is full of galleries and photographs, further optimizing the images will allow us to increase performance more and the speed of the website.
Also in this case, as for TinyPNG, the use is very simple, just drag and drop the images to be compressed and start the compression. JPEGmini will return images optimized for the web.
WP Smush is available both in the paid version and in the free version, in most cases, for normal needs, the free version may suffice. The main differences with the paid version are:
As in other cases, the plugin allows you to optimize all the images in the library (including also the thumbnails), and is complete with all the functions necessary for compressing the images such as: the possibility of choosing the type of compression, saving a backup of original images, removal of EXIF data, the possibility of setting the maximum size for uploaded images.
It is possible to test the functionality of the Short Pixel Image Opztimizer plugin also in free version with the limit of 100 images per month or perform an online test by compressing a maximum of 20 images.
And have you had the opportunity to try these tools or have you tested other tools that you find interesting? If you have questions or suggestions let me know by leaving a comment under the article!
After a long time, I finally find the time to write on my blog, I left you with an article on where to find images to download for free for websites , so let's continue on this topic and I will now explain how and why to optimize images for the web to reduce site loading times.
As we well know, the use of images in the creation of a website is an important factor, because the images allow you to have a visually beautiful site and encourage the user to surf more, as well as being useful for making a web page more attractive. , explain or reinforce a concept described in the post. Or, in some cases, the images may be of primary importance, for example if we are talking about a photography website.
Why optimize images? Google, SEO and loading speed
The use of large or non-optimized images can penalize the speed of the website and it is for this reason that it is very important to optimize the images to reduce the loading times of our web pages.The loading speed is one of the aspects that Google takes into account when evaluating the website, especially in optical SEO , it's a fact that 40% of users leave a website if it loads more than 3 seconds. An aesthetically beautiful website, and at the same time fast, therefore allows you to have more views, more shares and even more sales.
To test the website loading speed you can use a tool like Google Pagespeed Tools or Pingdom Website Speed Test or GTMetrix:
In order to have a fast website, therefore, it is necessary to understand how to optimize images by reducing weight and size without losing quality.
Guide to Image Optimization
Crop and resize images with PhotoshopThe first thing to do to reduce the size of an image is to crop it, using a software such as Photoshop we can crop our image to eliminate the excess parts that we don't need, and create an image of the right size depending on the specific website and template resolutions, this will allow us to increase the visual impact, focusing the user's attention on the main elements of our image and, at the same time, to reduce the weight of the image.
Choose the saving format for the images
Once our image has been cut out, it is necessary to save it and choose the right format among those proposed by the graphic software used and which can be used on the web as JPEG, PNG or GIF . Already in this phase, our graphic editor, like Photoshop, allows us to optimize the image and reduce its weight.JPEG format
The JPEG format is one of the most widely used graphic formats, created specifically to compress images , it uses compression that alters the original data by eliminating the colors deemed superfluous and reducing the chromatic scale. There is therefore a loss of image quality, which is greater when the quality parameter that can be set by the user during the saving phase decreases.To save an image optimized by Photoshop we can choose the Save for web function , and set the quality of the JPEG to 80% , in some cases it is also possible to do tests by setting the quality up to 60% to further reduce the weight of the image.
By doing this we will get an optimized image that will weigh much less than the original, always maintaining excellent quality.
PNG format
The PNG format can be used if you need an image with a transparent background . Even the PNG format uses lossless compression which allows us to lighten the weight of the image even if the compression is reduced and therefore a PNG file will take up more space than a JPG file.GIF format
As for a PNG, GIF images can have a transparent background but the format only supports 256 colors so it will not be possible to use it for illustrations or photographs. Another peculiarity of the GIF format is that the images can be animated. The GIF format therefore, even if it is one of the oldest formats, is particularly useful in the case of simple images or with animations .Well, now that we have saved our image following the instructions above, we can already have an optimized image to be inserted in our web page, but if our site is full of galleries and photographs, further optimizing the images will allow us to increase performance more and the speed of the website.
Using programs to optimize images
Resizing images in Photoshop and reducing their weight is a time-consuming operation, for this reason it can be useful to use special tools to optimize the images to be used for the web. The image optimization programs perform the operations that we have previously done manually, automatically, lightening our work.The best tools that I got to test are:
TinyPNG
TinyPNG is not a real program but a web application that allows us to reduce the size of PNG files up to 70% of their original size without major quality losses. Using the application is very simple, just drag the file into the space provided or upload one or more files and then start the optimization process. At the end of the process we will be shown the initial size and the final size of the image with the relative optimization percentage. At this point we just have to download the optimized images and insert them on the website.JPEGmini
JPEGmini is an excellent JPG image compression software , which reduces the size of the images as much as possible without affecting the quality of the images. JPEGmini is available for both Windows and Mac for a fee, but it can also be used in the free version up to a maximum of 20 photos per day.Also in this case, as for TinyPNG, the use is very simple, just drag and drop the images to be compressed and start the compression. JPEGmini will return images optimized for the web.
RIOT
RIOT (acronym for Radical Image Optimization Tool ) is a software that can be used free of charge on Windows to optimize images . RIOT supports the compression of JPEG, GIF and PNG formats, i.e. the most used formats in the web, and has a feature that allows us to see the 2 images side by side, i.e. the original image and the optimized image, to be able to analyze immediately the quality of compression.WordPress plugin to optimize images
The various software can be useful for optimizing images before they are uploaded to the site, but sometimes it is necessary to compress the images already published on our web pages , what to do then? In this case we can achieve the same results with the use of plugins for WordPress (I speak of WordPress because substantially a considerable percentage of websites are now made through this CMS).The WordPress plugins for image optimization that I got to test are:
WP Smush
This plugin, which once downloaded and installed does not require specific configurations, allows us to quickly and easily optimize the images on our blog or WordPress site, considerably lightening the weight without weighing on the quality, and consequently speeding up site performance web. The WP-Smush plugin allows you to act automatically on the images being uploaded or to act directly, manually, on the images in the library.WP Smush is available both in the paid version and in the free version, in most cases, for normal needs, the free version may suffice. The main differences with the paid version are:
- Better compression with super-Smush (2 times more powerful than normal)
- Compression of images larger than 1MB (free version limit)
- Compression of all images with one click
- Backup of all uncompressed images for possible restoration
EWW Image-Optimizer
The EWW Image-Optimizer plugin , as in the case of WP-Smush, allows us to compress both the images already loaded on the WordPress site and the images that we will upload in the future. It allows you to reduce the weight of JPG and PNG images and among the various settings we also find the possibility of eliminating EXIF data and the possibility of optimizing the images that are part of the theme (i.e. those not present in the library).Imsanity
Another noteworthy plugin to reduce the weight of the images is Imsanity , once installed it allows us to set the maximum default size of the images that we will upload (very useful in the case of a multi-author blog where we cannot have full control of the inserted images) and the compression level. Through the plugin it is possible to perform a bulk compression of all the images already present in the library with the advice to provide a backup of the folder first, since Imsanity does not allow the restoration of the original images once the optimization has been carried out.Short Pixel Image Optimizer
Among the paid plugins I would also like to point out Short Pixel Image Optimizer , an excellent plugin that allows the compression of JPG, PNG, GIF and even PDF files . The plugin offers the possibility to be purchased in monthly packages or based on the number of images to be optimized.As in other cases, the plugin allows you to optimize all the images in the library (including also the thumbnails), and is complete with all the functions necessary for compressing the images such as: the possibility of choosing the type of compression, saving a backup of original images, removal of EXIF data, the possibility of setting the maximum size for uploaded images.
It is possible to test the functionality of the Short Pixel Image Opztimizer plugin also in free version with the limit of 100 images per month or perform an online test by compressing a maximum of 20 images.
Conclusions
Well, we have come to the conclusion and I think I have given you all the possible information on how to optimize the website images to reduce the loading times, because as I have explained, the loading speed is a fundamental factor especially in terms of SEO optimization.And have you had the opportunity to try these tools or have you tested other tools that you find interesting? If you have questions or suggestions let me know by leaving a comment under the article!