We live in a digital world, and the need for low-latency delivery for site content comes with that. One of the biggest, if not the most significant, reasons your site might experience slow load times and high latency is unoptimized images that are too big for a device or browser. We know end-users look at online content through various lenses—mobile, desktop, tablet—and browsers—Chrome, Firefox, and Safari. We also know that not all devices are created equal, and the requirements needed to optimize site delivery can change on the fly.
Here are some quick facts:
- The average American spends 7+ hours online every day
- 40% of consumers abandon a website if it takes more than 3 seconds to load
- Nearly 80% of online shoppers are less likely to buy from a site if they are dissatisfied with a site’s performance
- A 1-second delay decreases customer satisfaction by 16% and customer conversion by 7%.
In essence: performance = trust.
Since a huge chunk of website data is images, image optimization is one of the best ways to reduce latency while ensuring site quality remains high.
What is Image Optimization
Image optimization does precisely what it says—it optimizes images for size, format, and compression based on the network bandwidth and properties of the requested device. This results in high-quality images in the optimum format, dimension, and resolution for the best experience possible on the user’s device.
How it Works at StackPath
SP// Image Optimization automatically transforms a single master image into a new size and format specific to each device—whether a desktop, tablet or smartphone. The compression and creation process is fully automated, intelligently detecting a presentation environment and creating new versions of website images to match the output criteria.
Step 1: Request
When an end-user requests one or more images from a customer’s website and the optimized images aren’t available, the CDN must request the image files from the origin where they are stored. When using image optimization, the image optimization platform will request the image from the origin, giving it information regarding where the original file is stored and the end user’s device and browser type. The request is then made through the image optimization platform so it can process them based on end-user specifications.
Step 2: Process
Once we’ve received the raw image file from the customer origin, each image is processed into an optimized size and format based on the device and web browser information provided in the CDN origin request. This processing primarily includes changes to the image size (mobile vs. desktop), format (JPEG, GIF, PNG, WEBP, etc.), and compression level (format support dependent) to make the image files as small as possible while retaining the highest quality.
Once processing is complete, the optimized images travel via StackPath CDN to be delivered.
Step 3: Delivery
StackPath will then pass the images back to the end-user via the CDN and cache them for future requests from end-users with the same device and browser type. This means consistently lower latency for your image delivery in the future, for as long as that image lives on your site.
How to add it to your StackPath CDN
If you’re interested in adding image optimization to your current CDN plan, fill out a request form to learn more.
The post SP// Image Optimization appeared first on Articles for Developers Building High Performance Systems.