Do Your Images Need To Go On A Crash Diet?

1. DO YOUR IMAGES NEED TO GO ON A CRASH DIET?

2. In a previous post, we talked about the leading indicators of a fatter website, with images being on the top of the list. When it comes down to slimming down a website, there isn’t a singular solution, due to the wide variety of elements on a page – there's static and dynamic content, images, JavaScript, HTML... the list goes on. Each element plays a part in the site’s overall performance and adds weight, affecting page load times to different degrees. While a content delivery network would give you the optimization improvements you need across the board, there are ways you can start small. Taking one element and focusing on a solution to optimize its delivery would be a quick fix.   As you can see, images account for a great deal – roughly 63% – of an average webpage’s total size (HTTP Archive), making it the top contributor to the continuing web obesity epidemic. If it came down to picking just one aspect of the site to optimize in order to reap the most benefit in drastically reducing page load times, option one would be images. In essence, you can think of image optimization as a crash diet for your site.

3. WHAT’S THE PROBLEM? The problem with images is threefold: they take over a majority of the webpage’s content, at times they are not properly sized, or there’s an issue of flabby compression. Due to varying output formats, compression levels, and quality levels for different images, image delivery for web and native applications has historically required a great deal of effort, as a different configuration is needed for each individual image. Because of the effort required, many people opt to set a single quality level for each image, which often results in a much higher level than what is actually necessary for many images. This negatively impacts performance, as the user ends up downloading more data than is necessary. It also degrades the quality of the image by choosing a one-size-fits-all compression level. Start shedding the pounds on your webpage by honing in on the problem at hand: cutting out these unnecessary calories.

4. HOW CAN YOU SOLVE IT? Just as there are many popular crash diets, there are multiple ways to optimize images. There is image adaptation (resizing, cropping, etc.) and image transcoding, for example, which allow you to slim down your site without compromising image quality. Both image transcoding and adaptation apply machine-learning techniques, powered by Instart Logic’s SmartVision technology, to automate the image optimization process. The service is able to make intelligent decisions with every image that passes through the image compute model, see what patterns exist in the image, and then make quick decisions. This is what allows Instart Logic to analyze roughly 50 billion images on a monthly basis (manually, it takes about 5 seconds to optimize an individual image). By first bucketing the images into a group and taking predefined parameters within the group, the service then takes these predefined parameters and applies the necessary optimizations. Image resizing involves pulling the original high-resolution image from the backend web servers and then resizing or cropping the images on-the-fly. Image transcoding requires understanding the unique characteristics and visual content for each individual image, and then learning and automating the process of determining the best image compression, format and quality levels for each image in respect to its distinct attributes. Image adaptation involves determining the threshold for a user to recognize an image on any device without perceiving a degradation in image quality. Being able to determine this threshold allows web applications to significantly cut down on image data sent to the browser. Start render time is drastically reduced as initial paint occurs almost instantaneously, and the remaining image data continues to stream in the background.

5. The key here is perceived performance. Take a look at the following play-by-play page load of two webpages. Which site looks like it loads faster? Though both sites have the exact same load time, the first webpage is perceived to load faster, and that’s also what your users will think. Putting your site on a crash diet with image optimization will do the trick. As the extra calories are immediately shed by some form of image optimization, your site instantaneously reflects the results with a faster start render time, giving the impression that it’s loading faster. Perceived performance is like wearing black; if your users think your page is fast, it’s fast!

6. For an e-commerce site like Naked Wardrobe, the crash diet makes all the difference. Instart Logic’s SmartVision technology shaved down their page load time by 50%, and the magic behind the boost is image transcoding. By taking images that were once 1 MB and over, and deciding the best compression, format and quality level for these images and slimming them down to 200 KB, overall performance has drastically improvedand continues to do so. THE DOWNSIDE An unfortunate downside to crash diets is that you generally tend to gain all the weight back after the diet is over; the same can be said for image optimization. If you are only optimizing your images, you will gain all the weight back as soon as new images are added to the site, as they have to be optimized as well. Using a service that automates this ensures that your application stays svelte.  

7. Instart Logic makes application delivery fast, secure, and easy. Instart Logic provides the first cloud application delivery service in the world to extend beyond the limited backend-only cloud architectures of the past with an innovative, intelligent end-to-end platform delivered as a service.Our end-to-end platform combines machine learning for performance and security with a CDN for delivery. Designed for DevOps and mobile-first applications. Discover how it can work for your website/application. Request a Demo