Pictures make a website look nice. But at the same time, they can make it slow. And slow websites irritate their users — after all, no one likes to wait.
In order to make a website both beautiful and fast, you need to optimize your images. And that’s how you can do it:
- Decrease the resolution. Every image is a combination of pixels. The more pixels — the bigger the size. By decreasing the resolution, you lower the amount of pixels — but end up losing some finer details.
- Decrease the number of colors. Every pixel has a color value stored in the image. The more colors there are in the image — the bigger this value is. By decreasing the number of colors in the image, you can drastically decrease the file size — by decreasing the overall quality.
- Change the compression algorithm. There are many compression algorithms. JPEG is the most effective, but it usually distorts the image ever-so-slightly. PNG supports transparency and has no distortions, but the end result is quite larger. WebP combines the advantages of JPEG and PNG, but in order to work normally, it needs a modern CPU. All these algorithms have many different variations, each with its own positives and negatives.
Not every picture should be 4096×2160 with a million of shades — black-and-white photo can certainly do with 256 color pallette, while a small icon doesn’t need to be larger than 128×128. Every image has its own perfect size/quality ratio, but trying to find it manually will take quite awhile.
Fortunately, there are WordPress plugins that can help you with that.
The best plugin for image optimization. EWWW optimizes all pictures — both new and already uploaded on the website. So if you want some images to remain untouched, you should add them to the exceptions.
Plugin supports many compression algorithms, but the most effective ones are TinyJPG and TinyPNG. The can decrease the size of images up to 60% without any visible quality loss.
In order to use TinyJPG and TinyPNG, you will need an API key — a special license that will let EWWW use these algorithms. In order to get the key, go to https://tinypng.com/developers.
WP Smush.it is a good alternative to EWWW. Although its algorithms are not as good, WP Smush.it can automatically change the resolution of the images. Just set the highest allowed resolution and plugin will automatically make all the pictures fit it.
Also, WP Smush.it can reformat .gif animation into indexed png files. This drastically decreases its size.
Overall, EWWW compression is better, but WP Smush knows a couple more tricks.
The most simplistic plugin for image optimization. Set up the highest allowed dimensions, set the compression quality and enjoy your life while Imsanity works its magic under your guidance.
Imsanity is not as agile as EWWW or WP Smush.it, but it is much faster. So if your website doesn’t have enough hosting power already — Imsanity is amazing. On the other hand, if you haven’t hit the hosting’s limits already — EWWW or WP Smush.it are much, much better.
Hammy is a rather unorthodox solution. It was made for websites with responsive design and thus makes many versions for every image. This ensures that users with mobile phones get a small image that loads in milliseconds, while users with large displays get a full-sized one.
Hammy increases the loading speed for mobile versions of the website, but PC users will not feel any difference from it.
Similar methods are employed by PB Responsive Images.
Lazy Load increases the initial page loading speed, but it increases the overall load on the website. Plugin loads only the images that the user sees right now and streams the rest of the images as the user scrolls down the page.
This is an interesting solution — but also suboptimal. Unless you have HTTP/2 on your hosting, Lazy Load will create an excessive amount of HTTP-requests, which will clog up the traffic. So before installing Lazy Load, you should check the version of HTTP your hoster supports.
How to optimize images
Unihost recommends following the Retina standard. Retina is a standard for images that are so sharp, that the human eye cannot see the separate pixels. Apple coined in the name first, in order to differentiate between MacBook and iPad models, but ever since the name was used for ultra-sharp displays and the content made with them in mind.
You can find other advices on website speed-up in our article «9 ways to speed-up your website». Also, you may be interested in transferring to HTTP/2 — new standard that makes websites load much faster.
Want to see more articles like this one? Subscribe to Unihost blog newsletter and our social media accounts for other insights into the inner workings of the websites!
Subscribe to get useful articles and updates.