Load images quickly for faster page speeds.
Optimizing images for your web application will product faster load times, reduce load on your origin server, and result in better overall user experience.
Serve more images, more quickly.
The image optimization techniques offered through section.io allow you to serve image-heavy pages more quickly, so you never have to worry about the number of images on your web application.
Increase overall page load time.
Images are one of the most resource-heavy elements of a webpage, and regularly slow down front end load time. By reducing image size and employing lazy loading, users will experience faster page load times.
Select optimal image formats and sizes.
section.io ensures your images are put into the optimal format and size without any work needed from you. The Application Edge will automatically selects the best image format (PNG, JPEG, WebP) for each request based on the requesting browser’s capabilities.
Reduce back end load and server cost.
By reducing image sizes, setting browser cache settings, and performing other image optimizations web applications will reduce the amount of work their servers need to perform to serve web pages and therefore reduce hosting costs.
Image Optimization: Technical Details
section.io’s Image Optimization is part of the Google PageSpeed module, which includes a range of front end optimizations. This allows you to deliver optimal image experiences for your users at the same time as:
Optimal image format selection
- Limiting code execution at your origin infrastructure
- Reducing bandwidth
- Increasing your application performance and scalability
Automatically select the best image format for the browser type requesting the page. Image formats sent will be chosen automatically based on the requesting browser’s capabilities and will include PNG, JPEG and WebP. WebP is a modern image format that is supported in modern browsers, and provides better compression and includes features of all other formats such as:
Size Images Automatically
- Lossy mode
- Lossless mode
To send fewer pixels to the browser, you can use section.io’s image optimization to automatically shrink an image to its actual display dimensions before it is sent to the browser. This also means the the browser will need to work less to render the image.
Lazy Loading of Images
The PageSpeed module can make decisions on the width and height of an image to send based on the design of the page, the visitor’s device, and the visitor’s actions.
Lazy loading is a technique which intelligently loads images only as they appear in your visitor’s browser. Above-the-fold images are loaded immediately, and images below-the-fold are only loaded as a visitor scrolls to them. This prevents your web server from loading images that are never viewed and allows you to create longer, image-heavy pages without a reduction in page load time.