Performance & Scalability

Image Optimization

Improve the load time of images by reducing their size through lossless or lossy compression, adding images in inline code, or lazy loading images.

Get Started

Load images quickly for faster page speeds.

Optimizing images for your web application will produce faster load times, reduce load on your origin server, and result in better overall user experience.

 feature icons green time green

The image optimization techniques offered through Section allow you to serve image-heavy pages more quickly, so you never have to worry about the number of images on your web application.

 feature icons green time green

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.

 feature icons green gear green

Section edge modules can ensure your images are put into the optimal format and size without any work needed from you. The Edge Compute Platform will automatically select the best image format (PNG, JPEG, WebP) for each request based on the requesting browser’s capabilities.

 feature icons green server green

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.

Get more front-end optimizations with Section.

Section offers specialized image optimization separately with Optidash and Cloudinary. Using an image optimization module in conjunction with Section’s dynamic caching and static caching will provide your application with the fastest load times possible, both in back-end and front-end load time.

Section also provides you the ability to test before deployment and immediately identify issues via log management and real-time metrics, meaning that applications using Section cache more content, scale faster, and block more threats than with any other solution.

Technical Details

Image Optimization

Section’s image optimization offerings include Optidash and Cloudinary, both of which offer specialized image optimization solutions. This allows you to deliver optimal image experiences for your users at the same time as:

  • Limiting code execution at your origin infrastructure
  • Reducing bandwidth
  • Increasing your application performance and scalability

Optimal image format selection: 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:

  • Lossy mode
  • Lossless mode
  • Transparency
  • Animation

Size images automatically: To send fewer pixels to the browser, you can use Section’s image optimization to automatically shrink an image to its actual display dimensions before it is sent to the browser. This also means the browser will need to work less to render the image.

The image optimization 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 of images: 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.

Ready to jump in?

Add image optimization to your edge stack to accelerate your application.