Using SmartVision to optimize image quality and performance
With today’s explosion of mobile devices and their many associated screen sizes, web publishers have a harder job balancing image quality with performance. The goal is always to find the “sweet spot” between high image quality and fast performance without degrading user experiences. Analyzing an individual image and choosing an appropriate quality level is how you can achieve this balance. However, doing this for hundreds of thousands of images across multiple sizes for different devices can quickly become impractical.
Here’s the good news: Instart Logic’s SmartVision technology uses computer vision to intelligently determine the ideal compression level for images, for every image on your site, processed in the cloud. This technology intelligently reduces the size of images without affecting quality, thereby delivering crisp, device-optimized images faster and allowing users to interact with the web page almost immediately.
Let’s poke around with a few elements on the Playground and see how the SmartVision technology works.
The Impact of Image Compression Differs for Different Images
To understand the SmartVision technology better, let’s focus on two example images in the Playground library. The first image survives an aggressive compression level, the second does not. Let’s start with the former.
The image of the cruise ship below is delineated into two segments. On the left is the original high-def image. On the right panel of the image, you’ll see how compression affects the quality at the various levels on the scale. Take a look at this image at 10%, 35%, and 90% image quality. Notice that as you compress the file at different quality levels, the file sizes and the download time are affected.
After compressing the file to 90% quality, it looks the same as the original; the naked eye cannot tell the difference. As you decrease the image quality to 10%, however, the image looks very different from the original. At 10% image quality, the clouds in the image are pixelated and the quality is severely degraded. It looks more like you’re playing Minecraft rather than gazing at a pillowy cloud!
While you can set a single safe compression level for all of the images on your site, you might not be optimizing for performance across all your images. SmartVision solves that challenge, and balances the image compression, quality and performance automatically on an image-by-image basis. Use the SmartVision button to see how our computer vision algorithms set the quality level.
Compressed areas in white. Diff 40.1255
The above image (also on the Playground) is a diff tool, included to illustrate which pixels are most affected by the modification of the image quality setting. It shows you which areas are most impacted through white dots. In the case of the image above, the highest density of white dots is where the water meets the ship, so pay particular attention to these areas when applying changes.
As you play around with the various image quality levels, notice how the estimated download time in milliseconds changes for various device types and connections. Finding the ideal image quality level that reduces file size and offers fastest performance, but still maintains the image’s fidelity is critical.
Take a look at another image to see how SmartVision intelligently assesses the file and compresses it at a different quality level than the previous image. Do you notice how the shine on the shoe is more dull at a lower quality level? Or how the the chain on the purse appears shinier as you improve quality? SmartVision would serve your image at 50% quality, compressing the image file to 29.34 KB from 943 KB, all while shaving milliseconds off your image download time.
As you can tell, the image of the shoes and purse compresses at a much different level than that of the cruise ship. Considering all of the elements that you can toy with on the Playground, try to see if you can find the sweet spot on the image solely with your eyes, and then click the “used” button to turn SmartVision on to see how you match up.
Try It Out for Yourself!
Users and consumers take the old adage “a picture tells a thousand words” to heart. They demand high resolution images and expect high performance. Instart Logic image scientists have invented advanced image processing algorithms based on the latest computer vision research that can actually gain a unique and detailed understanding of each image.
Tinker around with more images on our Playground to see how SmartVision can dramatically accelerate web performance and provide an enriched user experience.