Images (and other media) are the biggest parts of a web page. The bigger the image, the longer it takes to load. At worst, you can see the image build up line by line! And a fast loading page is important. Primarily for your visitors, but also for the search engines.
The right size
Make sure the image has the right size before you use an image on a page. You don’t want a 4000×3000 pixel image being stuffed in a 400×300 pixel space. Always adjust the size of the image to the size it will have on your website. If you want images to open in a lightbox, you might need to leave them somewhat bigger, like 800×600 px.
Optimize the image
After you’ve adjusted the image to the right size, you can take the next step: optimizing the image by compressing it. Compressing an image means that all of the unwanted information will be stripped from the image. There are a few methods to do so. Some compress lossless, some compress lossy. In most cases, the quality will be sufficient for a website. Sometimes images are compressed to maybe 10 percent of their original size. Imagine what a difference that makes in load time!
You can find several compressing tools online. Upload the image, have it optimized and download the optimized image. After that you can use it on your website. I like tinypng.com. You can also use a plugin that does the job for you.
For optimizing the images on this website I used the plugin WP Smush. Now I have switched to Imagify. With this plugin, all the images I upload are optimized automatically. This is done by sending the image to the Imagify servers, optimize it and send it back to my web server. This is a very fast process and it even shows exactly how much smaller the image has become. Without noticeable loss of quality!
What Imagify won’t do, is resize the image to the size you want. You can set a standard maximum width to which all bigger images can be scaled, but that is it. You still have to resize an image to the size that’s needed.
The options of the Imagify plugin:
- Three optimization levels: Normal, Aggresive and Ultra
- Optimize automatically at uploading images to the media library
- Back up original image
- Whether or not to keep the EXIF-information
- Setting the maximum width. Images that are too big, will automatically be resized to the maximum. After that, they will be optimized
- Bulk smushing the media library
- Choose which image sizes should be optimized. Images sizes that are set in functions.php or in plugins can also be selected
- You can also optimize images on the website of Imagify
Imagify not only optimizes the images you upload. If you have images that were uploaded before you installed Imagify, you can optimize them also from the media library. Imagify checks every image in the library and optimizes all images that weren’t optimized!
Imagify has a free plan, with a limit of 25 mB per month. You get an extra 25 mB on signup. That extra 25 mB can help you re-optimize your media library, when necessary. Anything above 25 mB per month will cost you. I use the free plan. After optimizing all the images again, I still had enough left for new images. For me the free plan looks to be enough.
After using WP Smush for a very long time, I moved over to Imagify. Not because it was really necessary, but to see if it was any better. Great advantage of Imagify is that it optimizes images much more than WP Smush. Everything works almost the same. 25 mB is enough for me, so I think I will stick to Imagify. Although WP Smush has served me very well the last years.