A fast loading website is what everyone is looking for; no one loves to wait even for a little more seconds to have their site loaded. Therefore, many web developers and web designers think about how to make faster loading websites. This situation can be obtained through many ways; one of them is to focus on image optimisation. With a good image optimisation, many believe that a site can load faster.
So, whether you’re building full-size e-commerce websites or simply learning a few tips about it, you have to make sure your images load faster.
Be Selective and Preload Critical Images
First, you need to take a look at your site, then identify if there is any critical image asset. In most cases, logo or hero images are usually the critical image assets where the preload resource hint comes in. Preload is actually a way of hinting to the client that an asset should be retrieved before the browser parser would otherwise discover it. Therefore, you can use it for almost everything, but most of all, it works amazing for preloading critical imagery. The example below will show you how to use it in the HTML <head> element on order to preload a hero banner image:
Furthermore, you can also use preload in an HTTP header:
Below, we present two screenshot rolls of the same page loading in Chrome. You can see the different result between the two, since one scenario uses preload to load a hero banner image, while the other doesn’t.
From the example above, with preload the banner image appears in the browser window half a second faster, since a quick one liner gives the browser a head start.
Different from optimising JPEGs or PNGs, SVGs are comprised of text, specifically XML markup which means that typical optimisations you would apply to text-based assets can and should also be applied to SVGs. Beyond that, to tamp down the size of SVGs, you can use an optimiser, such as SVGO. However, if you are not only using vector artwork, but also creating it, you can automatically simplify your artwork to reduce the amount of anchor points in paths via the Simplify dialog window.
If you are using Illustrator CC, you can find this dialog’s menu by going to Object>Path>Simplify. By reducing Curve Precision, it is possible to remove extra path points in your artwork. If you want to remove extra path points in your artwork, you can reduce the Curve Precision, then optionally adjusting Angle Threshold. For example, if you reduce the Curve Precision of as little as 6%, you will remove 54 path points. Therefore, whenever you want to improve the appearance of your artwork, you can use judiciously.
Please remember that this tool will run aggressively, so at first, you might need to lower Curve Precision too much and once you are carefully crafted, artwork will devolve into a blob. You’ll read the rewards, as long as you strike the right balance.
Convert Animate GIFs to Video
Everyone loves a good animated GIF, since they can convey almost any sentiment using that. However, in terms of loading, they can really make your loading run so slow. Therefore, image optimisers such as gifsicle can help you shave off excess kilobytes by converting those GIFs into videos and embed them in the HTML5 <video> tag. The ffmpeg command line utility is well suited for this task:
The example of the commands above takes a source GIF (animated.gif) as input in the –I argument, and output videos with a variable bitrate maximum of 512 Kbps. In a test, a 989 Kb animated GIF is able to reduce to a 155Kb MP4, a 109Kb OGV, and an 85Kb WebM. This makes all video files comparable in quality to the source GIF. Therefore, since the ubiquity of <video> tag support in browsers, you can use these three video formats, as follows:
If you want to try the command above, remember to order your <source> tags, so that the most optimal format is specified, and the least optimal is specified last. Therefore, you will start with WebM videos first, but check the output file size of each video and go with whatever is smallest first and end with whatever is largest. So, wait no more to install the FFmpeg if you don’t have one.
Lazy Load with Intersection Observer
Most of us may have done lazy loading images, but many lazy loading scripts use CPU-intensive scroll event handlers. Such methods can contribute to sluggish interactions on a page. In fact, older hardware with less processing power is even more prone to the ill effects of this type of code. Even though execution throttling does help, it’s still messy and rather inefficient workaround for determining when elements are in the viewport.
Fortunately, with Intersection Observer API, you can have a simpler and far more efficient way to determine when elements are in the viewport. Below is the example of some basic lazy loading image markup:
<img class=”lazy” data-src=”/images/lazy-loaded-image.jpg” src=”/images/placeholder.jpg” alt=”I’m lazy.” width=”320″ height=”240″>
Here, we would like to load a placeholder image in the src attribute, and then store the URL for the image we want to lazily load in the data-src attribute. The <img> element a class of lazy for easy access with querySelectorAll is given to top it all off.. Then, we can simply use this code:
document.addEventListener(“DOMContentLoaded”, function(){
if(“IntersectionObserver” in window && “IntersectionObserverEntry” in window && “intersectionRatio” in window.IntersectionObserverEntry.prototype){
elements = document.querySelectorAll(“img.lazy”);
var imageObserver = new IntersectionObserver(function(entries, observer){
entries.forEach(function(entry){
if(entry.isIntersecting){
entry.target.setAttribute(“src”, entry.target.getAttribute(“data-src”));
entry.target.classList.remove(“lazy”);
imageObserver.unobserve(entry.target);
}
});
});
elements.forEach(function(image){
imageObserver.observe(image);
});
}
});
Here, we bind code to the document object’s DOMContentLoaded event in which this code will find out if Intersection Observer is supported by the current browser. We can grab all img elements with a class of lazy with querySelectorAll and then attach observers to them.
The observer contains reference to the elements we’re observing (entries) and the observer itself (observer). This code hinges on each observer entry’s is intersecting value. The observed element is intersecting returns 0, when the element is out of the viewport. It will return a value greater than 0, as the element enters the viewport. Then, we can swap the content of the image’s data-src attribute into the src attribute, and remove its lazy class. You can remove the observer with the observer’s unobserved method.
By using this method, you are choosing a much more easier method than mucking around with scroll handlers. So, hopefully, the methods above can be the best alternatives for you to optimise your images. Good Luck!
