Humans have used images to tell stories for thousands of years. It help to illustrate a point without using any words. Nowadays, we still use images to better present the content on a webpage. There is one downside of using the images on the site — they can negatively affect a performance of your site.
Please understand me correctly, I am not saying that we should not use images on webpages at all. On the contrary, it is a good practice to use them since a page with images can get more views than a page that does not contain any images. The thing is that we need to use images wisely.
The image has to be optimized before adding it to your site. Unoptimized images have a huge impact on a load time of your WordPress site. It can increase a weight of your site, and as a result, make it slow. As you probably know, nobody really likes slow-loading sites. I want to share with you some tips on how to optimize images.
Use special tools to optimize your WordPress images
If WordPress allows you to upload large and unoptimized image files then it does not mean that you should do it. There are plenty image optimization tools, both free and paid. Use them to compress your images before publishing images on the site. Choose the one that works best for you.
You can use graphics editors such as Adobe Photoshop or GIMP to optimize images. Adobe Photoshop is a paid product that comes with the “Save for Web” feature. By using this command, you can reduce the file size of your image without significantly reducing its quality.
Alternatively, you can try GIMP which is an open-source, free image editing software that can be run on Windows, Mac or Linux. It is not as perfect as Adobe Photoshop but it can provide you with similar functionalities. So, you can use it to optimize images for a web as well.
There are some WordPress plugins that come with image compression capabilities. These plugins perform optimization of your images automatically on the site. Here are some the most popular ones: WP Smush, EWWW Image Optimizer, Compress JPEG & PNG images. Test these plugins to find which one fits you best.
If you do not want to use graphics editors and WordPress plugins then you can try web-based app for image optimization. Personally, I like Squoosh which is an image compression web app developed by Google. There are also other web apps such as TinyPNG, Optimizilla, Compressor.io, etc.
Let me briefly summarize what I have said above:
- Graphics editors: Adobe Photoshop, GIMP
- WordPress plugins: WP Smush, EWWW Image Optimizer, Compress JPEG & PNG images
- Web-based app: Squoosh, TinyPNG, Optimizilla, Compressor.io
As you can see, there are many tools to help you to reduce the file size of your images and optimize them for a web. Use them to improve a speed of your WordPress site and provide a pleasant experience for the site visitors.
Image formats matter when talking about the site performance
There are three most common file types that are used to publish images to the web: JPEG, PNG, and GIF. Each of these file types has an impact on a load time of the site. It is important to know a difference between them, so you can choose a right file type. Otherwise, it can negatively affect a performance of your WordPress site.
I am not going to go into technical aspects of each of these file types to show you a difference between them. To save your time, I want to share these super simple tips when to use each of these file types:
- GIF: use it if you want to have an animated image
- PNG: use it if you want to have an image with a transparent background
- JPEG: use if for regular images that do not need to be animated or/and have a transparent background
JPEG is the best choice from these three file types because it allows decent quality at a low file size. Note, a size of your image matters. The lower size of the image, the faster it will be loaded on the site. So, choose file types wisely.
Improve your site speed with a native lazy loading
This is an optional step but it can help you improve a load time of your site. I am very happy that browsers have started to implement a lazy-loading in its core. So, there is no need to load additional JavaScript library in order to perform a lazy-loading. It can be done using a native browser functionality.
Since this process has just recently started, a native lazy loading is not widely supported across all the browsers. But you can still use it as a progressive enhancement of your site to those with more advanced browser software. Moreover, you can easily add a native lazy loading to your WordPress site.
In conclusion, I would like to say that compressing images can help your WordPress site run faster. As you may see, it is not that hard to do so. It just requires some additional actions before posting an image to your site but it will be beneficial for the site performance.
Leave a Reply