A travel shopper landing on the GogoBot home page gets a breathtaking digital experience.
NB: This is an analysis by Zubin Tavaria, director of marketing at Instart Logic.
A full-screen of images with dazzling details pops crisply into view with almost no wait.
Yet, how big are those images?
Larger than 1.5 megabytes, which is huge for a single image online. What’s more, GogoBot serves the same size images across all devices in order to better handle the high pixel ratio demanded by Apple’s Retina display.
To achieve this affect, GogoBot uses a new content delivery technology called Image Streaming.
This allows them to quickly paint in a "near perfect" of an image so the user can interact with the site even as more details stream down to fill out the picture in more granular detail in the background.
The result is seamless execution of what users perceive to be an incredibly snappy, sub-second digital experience delivery.
Another online travel site, BookIt, is in the process of tripling the amount of image data it plans to put on its home page.
Big, beautiful imagery like what GogoBot and BookIt run is now table stakes in the highly competitive online travel bookings market.
The same goes for a top-notch mobile experience. Unfortunately, creating a Responsive Web Design (RWD) site that looks stunning on any size of screen and preserves the visual impact of large images is no easy undertaking.
Smartphones and tablets receive data over wireless cellular or WiFi networks, both of which can become highly congested and can bog down to an unpleasant crawl.
This gets even worse with image heavy pages that must be built on the fly for RWD sites with dynamic image resizing. Images on travel sites often make up more than 60% of a page’s data footprint.
In other words, responsive sites, large images, and mobile devices all compound the same image handling bottlenecks facing many travel sites today.
Here are some key guiding principles that GogoBot and BookIt used to optimize their sites for fast performance, responsiveness, and mobile friendliness.
1. Replace static image sizes with scaled images
This is critical for the transition to Responsive Web Design sites, which are designed to seamlessly scale up or down to fit the display size on any device.
"Scaled" means that the image is expressed as a formula rather than as a size and the formula calls for a larger or smaller image in specific dimensions to match the size of the browser window.
NB: Old-style Content Delivery Networks can only serve static images in a limited number of sizes.
That’s why they struggle with Responsive Web Design sites. Bookit is in the process of replacing static images with scaled images as part of a transition to Responsive Web Design and saw an immediate reduction in web page load times in the high double-digits.
2. Use new image formats
Web publishers should look at Google’s WebP format for Android, Chrome, Mozilla, and Safari browsers.
WebP maintains the image while shrinking the amount of data required to display the image by 30%.
JPEG-XR does the same thing for Internet Explorer browsers, more or less. A service that automatically transcodes images to these formats based on the user’s browser is will make it easier.
3. Use an image optimization service
Some web performance solutions companies provide image optimization as a service.
Popular open-source tools (e.g. Google’s PageSpeed) automate the optimization of images but don’t come with a global network to deliver your content.
That network is mandatory.
4. Use an advanced image categorization service
The most advanced image optimization service can actually categorize the contents of the image and send more or less pixels down the pipe without inhibiting the perceived quality of the image.
For example, a beach might require fewer pixels than the face of a hula dancer.
This service can tell which type of picture is which. That will give you an additional 30% to 50% savings on the initial image load.
5. On mobile, stream the image once rather than download it twice
The old way to deliver a really big image while allowing the user to quickly interact with the site was to first download a smaller, low-quality image.
After that low-quality image loaded, then the rest of the site content could load and the user could click. Only after this first pass would a higher quality second image load to replace the first one.
A better way is to stream the image down in the background as described above.
Conclusions
Bookit and GogoBot both previously used a content delivery network (CDN) before switching to Instart Logic’s Software Defined Application Delivery system and experienced respectively, 30 – 45% improvement in load times.
The automatic resizing for Bookit specifically, has reduced infrastructure requirements, technical complexity and operational management overhead due to the 6x reduction in the number of images stored.
The service helped slash GogoBot’s page load times by 1.5 to 2 seconds without requiring any changes to code or user behavior.
There are many other ways to improve the delivery of images for travel sites. GogoBot and Bookit’s teams also took steps to trim unnecessary JavaScript and CSS from their sites to speed up load times.
A lot of those improvements are table stakes and should be in place on every site.
To gain an edge, travel and hospitality sites need to seek out new, innovative web performance services that will distinguish them from the crowd and enable them to deliver engaging customer experiences.
In the battle to get bookings, the site with the fastest web performance and most immersive experiences will win.
NB: This is an analysis by Zubin Tavaria, director of marketing at Instart Logic. It appears here as part of Tnooz’s sponsored content initiative.