One of the fundamental steps to keep your website fit and fast is to optimize for web all the images that you are going to upload on it. There are several WordPress plugins that promise to do the job for you and we tested them all.
Here is the shocking news: NONE of them satisfied our parameters, so we decided to write a new blog post only on this topic and share with you our 3 favorite tools.
These tools can be used alone or in tandem. If you use them one after the other (as we do at Sparrow&Snow), you will become a black-belt of images optimization and your friends will start to envy your super fast website. So use these tips with caution.
1 – PHOTOSHOP (not free, but highly recommended)
Adobe’s algorithms of image optimization are between the most performative, and Photoshop remains our starting point to work on web images. The image we will use for this short tutorial has
1 – Open your image in Photoshop
2 – Go to File –> Export –> Save for Web (Keyboard Shortcut: Cmd + Opt + Shift + S)
3 – In the field under “Preset” be sure to check the JPG option and put quality at around 70-75. The lower it gets here, the better it is in terms of final size. In some cases, you can reduce the quality also until 60 without noticing any particular problem in your image.
4 – In “Image Size” put a width of 1600 (our recommended size) and the height will be adjusted automatically.
Tip! If you know that your image will be displayed on a “web surface” of maximum 800 px, you should consider to export it at double the size (1600 px in our case) to maintain the same quality also on retina devices.
5 – Save it.
6 – Notice how much you reduced your image (before and after) by comparing the old file with the new one (If you want to be quick, you can use the mac shortcut “Cmd + I” after selecting the files). You can also check if the images quality is the same and if you can reduce its quality even more (see step 3). You can easily reach the sweet spot between size and quality with 2 or 3 comparative tests. In our example, our image now has a size of 201.90 Kb (Remember the initial size? It was 7,1 Mb), and we can do even better with the next step …
2 – Compressor.io (free)
On the website
With our sample image, we saved an additional 39%, going down to 123.31 Kb.
The only down-side is that you have to upload your images one by one, but it is still one of the most powerful tools for web designers out there. If you need a tool that is capable of optimizing multiple images at once … go on reading.
3 – Kraken.io (free and pro versions available)
This tool has also extremely performative algorithms. Plus it allows you to upload multiple images at once, which can be extremely handy when you are on a deadline. Just visit https://kraken.io/web-interface and upload your images for a test. You can also import them directly from your Dropbox or Google Drive account. With our test image, we saved 41,93% (- 82,68 Kb) and we didn’t see a significative decrease in image quality.
And here it is our amazing final image, 1600 width, 1067 height and optimized until 119 Kb in size!
We would love to hear from you! If this article helped you in optimizing your website or you are using additional tools that we don’t know about, write us a comment down below and share your findings with the Sparrow&Snow community!
