How Optimized Images Decrease Page Load Times

A recent Imperva Incapsula survey showed that consumers expect fast site rendering, with 62 percent only willing to wait five seconds (or less) for a page to load. Only 4 percent of respondents said that they were willing to wait more than 20 seconds before leaving your site.

At the dawn of the internet, an image-laden webpage might have taken an inordinate amount of time to render in a browser—if its images weren’t somehow optimized, typically through compression. Today, image compression is only part of the solution to improved page load times.

Image optimization encompasses several other ways to refine graphics to lighten pages, reduce load times and decrease the burden placed on network resources — including data reduction in relation to mobile data plans.

Perhaps not so widely known is that search engines evaluate page load times when ranking websites. Faster loading pages get higher placement. In turn, such optimized pages offer site visibility to a wider user base while also enhancing their experience once they click your page link.

Optimization Methods

Your web page layout and structure should determine optimization methods. These can include the use of light-image formats, reducing image size and limiting the number of graphics a visitor’s browser is required to load.

• Image compression – Common raster file formats are .JPG (.JPEG), .GIF and .PNG, the latter being a lossless, non-patented format that replaces .GIF. Rather than using a collection of individual pixels, vector file formats such as .PDF, .SVG, and .EPS use coordinates and graphic parameters to compose a smaller image than its raster counterpart.

Converting raster images to a vector format is one way to reduce page rendering time while retaining full image quality. But it’s best reserved for such graphics as geometric shapes and is not suitable for photographs (the latter providing complex detail).

Vector images – Vector images such as .pdf, .ai, .eps use coordinates and graphic parameters to build images. Vector images are generally smaller than their raster counterparts. Using vector images to replace raster images reduces page load times but not image quality.

This works for images that are geometrical shapes and graphics but is not suitable for those that are more complex, such as photographs.

• Image caching – Storing images on a proxy server offers fast access. Called image caching, it greatly increases page rendering speeds.

Proxy caching places copies of your image files on regional point of presence (PoP) servers. Being more readily available than if they resided only on your origin server(s), image rendering within visitors’ browsers is again accelerated. For sites using several images that remain unchanged for a given time and are shared between pages (e.g., corporate branding, page headers and footers), proxy caching can be especially advantageous.

Caching images within visitors’ browsers is also frequently used today. It limits repeated HTTP requests while also reducing the number of downloaded bits required to display a given image.

Image Optimization and the CDN

• Automated image compression – Using a content delivery network (CDN) lets your site visitors enjoy the benefits of image optimization without requiring any of your personnel to manipulate files on an individual basis. You’re able to determine the balance between image quality vis-à-vis page rendering speed.
• Progressive rendering – Advanced CDNs quickly render a highly-pixelated version of each image in a browser. Over the next few moments, it’s replaced by several variants, each one providing successively higher quality. The visitor’s perception is that of a reduced page time.
  
• Custom rules and policies – Fully-featured CDNs let you establish caching policies for all proxy servers that serve your site. Many also let you set rules on a file-by-file basis, as well as for certain file types and groups of files.

Incapsula CDN uses advanced proxy caching to hold copies of your entire website content — including images. With over 30 PoPs strategically located worldwide, your site visitors are rapidly served content by the data center closest to them. Our custom policies, rapid cache purging and delivery rules let you determine the caching method for specific files.