What is Image Optimization
The majority of a website’s data is typically comprised of images. Website image optimization refines images so as to lighten pages, reduce load times and lessen the burden of network resources, including data usage in the case of mobile data plans.
Image optimization can also increase your search engine optimization (SEO) rankings, as search engines factor in page load speed when ranking sites. The result is significant load savings, an improved user experience and increased site visibility.
Image Optimization Methods
Optimization methods vary based on the web page layout and structure. The most prominent image optimization tools involve compressing image size, using light-image file formats and minimizing the number of images site visitors need to load in their browsers.
Image Compression
Compression reduces image detail and size by removing some of its header information. The favored file formats for raster image compression are .png, .jpg, and .gif—each containing static pixel color data.
Each lets you adjust the quality, level of detail and size when saving each image. The tradeoff is that each of these “lossy” formats results in a degradation in image quality.
Vector Images
Vector images (e.g., .pdf, .ai, .eps) use coordinates and graphic parameters to compose a scene. Vector images are smaller than their raster counterparts. Using them to replace raster images can decrease page load times without significantly sacrificing image quality.
Vector and raster image resolutions.
That said, this method is primarily used for images containing geometrical shapes and graphics. It’s not suitable for those having complex details, such as photographs.
Image Caching
The most effective optimization method is image caching. It’s the process of storing image files within a user’s browser cache or on a proxy server for fast and easy access.
Browser-side caching reduces application requests and a given page’s download size.
Proxy caching, on the other hand, stores image files on point of presence (PoP) servers, which assist in accelerating page rendering times. Both first-time visitors as well as repeat users who may have cleared their browser cache are able to quickly access images.
Caching is especially useful if your site contains a number of images that are shared among pages and remain unchanged for a duration.
The CDN Perspective
While file compression, vector image use and image caching are effective image optimization methods, such manual file herding can become involved at times.
Employing a CDN can ease the process of image optimization in several ways:
- Granular cache controls – CDNs offer user-friendly dashboards that let you define site-wide proxy caching policies, or set rules for individual files, file groups and specific file types. Proxy caching cuts down on bandwidth while reducing the burden on origin servers for first-time visitors, as well as those returning who may have cleared their browser cache.
- Automated compression – CDNs automate image compression and let you set the balance between page load speed and image quality.
- Progressive rendering – This method is used by advanced CDNs and involves the quick loading of a highly pixelated image version. It’s then progressively replaced by higher quality variants. The result is a viewer-perceived reduction in page load times.
Progressive rendering leads to a perceived drop in page load times.
The Imperva CDN uses robust proxy caching to store all of your website content—including images—thereby enabling their rapid retrieval. Additionally, custom delivery rules let you specify caching methods for specific files to make sure your largest files are easily accessed.
