Work smart, not hard
There are several tips and tricks on how to improve your images in order to reach a better web performance. This blog article will be the first part of a series of posts covering the topic of image optimization. It aims on presenting easy ways to catch the so-called ‘low hanging fruits’, all by following the principle of Pareto efficiency. You invest 20% of effort and earn 80% of the results; or in other words you make sure to try out methods which are easy to apply but highly efficient too.
Option 1: Deliver images in an appropriate size
Let’s get started with the first, while most underestimated, method.
Your images should be resized to the size, which you are embedding onto your website. To name an example: many web pages often use images with dimensions of 4000 x 3000 pixels (aprox. size 1.5 MB), which are subsequently scaled down to a smaller dimension like 400 x 300 pixels (~200 KB). This is not the most efficient way. However, resizing your images in advance can lead to a potential size saving of up to 95%. To raise the efficiency even more, responsive sizes should be added too. To work on a responsive base is nowadays key when working online. Content is viewed on different devices (e.g. smartphone vs. tablet vs. laptop vs. desktop computer). Hence, images should be displayed in an ideal version depending on the size of the screen.
To name another example: smartphones regularly possess a width around 480 pixels. Assuming the usage of an image, which is sized with 1920 pixels would result in a waste of bandwidth and slow(er) loading times. Especially when circumstances are not optimal and the user is browsing with 3G, this could have a substantial negative effect on the user experience. A more efficient solution is to add multiple images that are customized related to the individual screen width.
Option 2: Enable Caching for images with a far-future expiration (use longer period of validity)
Instead of loading images from scratch over and over, the following technology can be used. If requests happen repeatedly, the browser can load the images from cache. Images can be stored within the cache and it is recommendable to choose a longer validity period (for example 1 year) over a short caching period (like only 1 or 2 hours). A one-year term of validity is considered an appropriate time frame in regular terms.
Should the occasion arise that images need to be changed, this can be done by additionally adjusting the filename. If only the image is changed, the change won’t be visible due to loading the image from cache, if the user has visited the web page before and thus a cached version of the image is saved in his browser.
If using WordPress with Apache, caching can be done by using the Apache Expires module in the .htaccess file.
# .htaccess
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>or by setting the Cache-Control headers:
# .htaccess
<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=31556952, public"
</filesMatch>Option 3: Adapt images with lazy-load option in the web page area “below the fold”
To start of the third section of the blog article, two terminologies should be clarified.
- ‘Lazy-loading’ is a technique, which does not load the web page in full when accessing. Content is loaded dynamically when scrolling down. Images as an example are loaded, when the section they are embedded in is becoming visible in the browser window. ‘Lazy-load’, as the opposite of ‘Eager load’, is supported by many modern browsers.
- ‘Below the fold’ describes the area of a website that isn’t visible at first sight. It will be displayed when start scrolling.
Using this technique can massively reduce two components: your page-loading size and your page-loading time. Again, an example shall illustrate the effect. Let’s assume you have 6 images being placed ‘below the fold’. Each image is sized 200 KB, which sums up to 1.2 MB. This in turn means about 1 second extra page loading time. One second can be lots in terms of web performance, so it is totally worth being ‘saved’ by optimizing page loading in general.
As mentioned above, native lazy loading is supported by many, but not all browsers. Nevertheless, there are workarounds existing. Have a look on https://addyosmani.com/blog/lazy-loading/ for more insights.
<!-- regular image loading above the fold -->
<img src="myimage.jpg" alt="..." />
<!-- lazy image loading for modern browsers with lazy-loading supported -->
<img src="myimage.jpg" loading="lazy" alt="..." />Insider rule:
Reflect wisely on the use of your images, especially the number of images you are embedding without the lazy-load option. Concentrate on images as part of your header and on images, which you wish to rank with in the ‘Google Image Search’.
The results are worth the effort
Being successful in the world wide web requires customization, constant realization of state-of-the-art technology and a close look on the user’s needs. The presented options of image optimization are a good start to improve your web performance. If applied consequently, you will reach page loading speeds, which are better. Better than before, but also better as the majority of website out there.
The next part of the series will provide more advanced tips on image optimization, that will help you reach top-notch performance.
For updates and more great tips on efficient web performance, make sure you are not missing out by subscribing to my newsletter below.
Another very important point on SEO is the optimization and compression of images on the site. Here is an interesting article on this topic: https://optipic.io/en/blog/images-seo-optimization/
Compression is also a very important optimization measure, that I will handle in the next article. Also, thank you for the link recommendation.