Following my first blog article on the topic of image optimization, this blog post shall cover advanced image optimization techniques. I will present four methods, which will ultimately help improve your web performance by making your images more workable.
1. Image compression
This subchapter will be started off with basic information on the common image types PNG and JPG. The first one is used for quality-loss compression and transparency, while the second one (JPG) is used due to being equipped with the best compression rate. Both being powerful image types, it is however not sufficient to ‘just’ export files in either PNG or JPG format.
You are asking yourself what you can do more than the usual exporting process you are familiar with?
Ever heard of the tool GTmetrix? You can check your website speed with it. Following the process, the tool will present you the potential savings regarding image size(s) and additionally offers an option to compress your images even more. As a user-friendly tool, you are able to download an optimized version directly – by simply clicking the link named “optimized version”. Details can be seen in the illustration below.
Cool, isn’t it? To give you some context on how efficient this tool is. Most software does not apply the best possible compression rate, hence there is still room for better compression. We are talking about average rates like 10-20%, in rare cases even improvement rates of up to 85%.
Insider tipp:
You should aim at optimizing your images in advance, meaning before uploading them to your website. Following this sequence will save time compared to first checking with GTmetrix and downloading the optimized images from there (no need to double up on work).
tinyjpg.com and tinypng.com as alternative providers can compress your images even more without having to fear a decrease in quality.
2. Advanced Image compression
The next subchapter will cover a technology that is being classified as advanced image optimization method. WebP is a so-called Next-gen image format and, as the name implies, a new compression format. It is even better than PNG and JPG and can deliver you an even higher rate of optimization potential.
Use Google Lighthouse Report to learn how much volume of data (=KBs) and therefore how much loading time could be saved by using the WebP-format instead. The subsequent figure makes the described effects available in a visual manner and displays how efficient the switch to next-gen formats potentially could be.
There is one important fact to take into account when planning on changing to next-gen formats. Unfortunately, to date these formats are not supported by all browsers. As a consequence, you need to include fallbacks in addition when using them. I wrote more about this in a previous blog article:
3. Deliver images from a cookie-free domain
The third subchapter addresses the option of working with subdomains which are free of cookies. Images (or in better words: static image files) should be delivered from a different domain or subdomain, which doesn’t use cookies, for example static.your-domain.com
Applying this method will benefit you with two advantages. Besides the avoidance of extra traffic that is generated when sending cookie information through network requests, the usage of cookies on a domain (or a website) could possibly prevent the effective caching of static files.
I will show you with a simple experiment, that it is technically possible to deliver different images depending on the cookies that a user has stored. If the cookie value changes, the browser would need to fetch an image again, even though it has already cached the image file.
4. Deliver images from a CDN
The last subchapter engages with the topic of a ‘Content Delivery Network’ (short ‘CDN’). This kind of network stores your static files on multiple servers around the world, or in other words it serves as a global cache. On demand, it then delivers the assets (here: image files) from the closest server available – meaning the server which is closest to the region of your user(s).
This option is – in most cases – associated with costs. Some popular providers are KeyCDN, Cloudflare or Stackpath. An alternative supplier with a lower expense rate is BunnyCDN.
If you are using WordPress with the Autoptimize plugin, then ShortPixel is already integrated and has a free plan, which includes up to 100 images/month
WebP conversion for supported browsers and Lazy-Load images