What is Image Optimization?

Image optimization refers to the process of modifying and delivering high-quality images in the optimal format, dimension, and resolution for the device accessing them, all while keeping the smallest possible file size that will not result in noticeable image degradation.

Sound like an impossible task? Maybe, but in order to deliver a responsive website, this is hard to get around, unfortunately. Today, users visit your site from many different sources, from mobile devices to personal computers, using a variety of browsers. Users demand responsive experiences, and image optimization is a crucial part of this process as it can impact the speed of delivery as well as how your site performs in search.

Why Image Optimization is Important

Image optimization is important for a good viewer experience, but it is not mandatory. At a minimum, you must choose an image format that will display your images correctly regardless of the device they’re being viewed on. Additionally, you must keep in mind things like resolution and encoding of the image, both of which affect the quality and size of your images. 

Beyond physically transforming your images, you must consider things like the file name, ALT tags, and image metadata to help enhance search engine optimization (SEO).

While you can take on this task on your own using external tools, it becomes more difficult, costly, and time-consuming as your business grows and you need to scale. (No pun intended!) An image optimization solution, especially an edge-based one, can help automate and scale the work needed to optimize images on your website while also reducing or eliminating compute expenses, not to mention the cost of manually managing this. When paired with a CDN service, you can cache optimized images and expedite their delivery to the viewer.

How image optimization works

Image optimization solutions let you upload a high-resolution image and then define different settings to most efficiently serve the visitors to your site. Image optimization solutions are typically available as plugins or extensions to your content management system or stand-alone services, on-prem as well as online. These solutions let you specify transformation settings and then apply those settings server-side before delivering the image.

Some common practices when optimizing images for delivery is:

• Using on-the-fly device detection to deliver the optimal image file for your user’s screen size.

• Compressing images to optimize delivery based on platform, connectivity, compatibility, and more

• Scaling images to fit within a specific size

When loading your website and sending a request for the image, the user’s web client will use the website’s CSS to determine which version of the image is appropriate for the device. It will send a request for a specific image with those parameters, and the image optimization solution will apply the transformation before making the optimized image available.

Instead of trying to predict every device that might access your site and defining parameters for each of those scenarios, you can employ JavaScript APIs to programmatically detect details about the client’s browser and version number and request the most optimal transformation accordingly.

You can pair an image optimization solution with a CDN service to further expedite the delivery of optimized images. After the first request for the image is served, both the original image and transformed image are cached on the CDN server, with future requests for the same transformations served directly from cache with no need for modification. Requests for different transformations are served using the original image in cache, reducing traffic and workload to your origin.

Benefits of image optimization solutions

Using an image optimization solution helps you save time, reduce infrastructure costs, enhance your user experience, and improve your SEO.

1. Optimize workflows

Depending on the number of images on your site, it can be a time-consuming and tedious task to optimize and maintain your images. Today, it’s common for a single image to be transformed into 10 or more versions, each resulting in a separate file being created for the most popular screen resolutions. An image optimization solution saves you time by creating the images you need from a single, high-quality source file. By incorporating an image optimization solution in your workflow, you can have this happen automatically. No more manually creating multiple image files or using pre-processing scripts!

2. Save Money

Using an image optimization solution also helps save on infrastructure costs because you don’t need to store multiple versions of each file on your server or spend money on compute resources to perform the transformations. Using a CDN service saves you even more by helping cut your egress costs by serving images from cache and scaling as your needs grow.

3. Faster Delivery

The greatest benefit of using an image optimization solution with a CDN is the speed of delivery. A CDN lets you deliver images from cache, closer to your user, speeding up the time of delivery and thereby the time to load your site.

The time to deliver your site isn’t just important for the overall user experience, it has an impact on your site’s SEO. Search engines like Google crawl your site and take in the load speed as one of the factors for ranking your site in search results. If your images make your site slow to load, the search engine might deprioritize your site because of it. Having optimized images gives your user the right image for their device, rendered faster, and thereby improving your SEO.

By adopting image optimization practices, businesses can significantly improve website loading times, lessen load on origin, and ultimately enhance user satisfaction. The positive correlation between optimized images and search engine rankings further underscores the importance. With users demanding ever faster and smoother online experiences, the optimization of images becomes an integral part of maintaining a competitive edge in the virtual realm.

For additional information on Image Optimization, check out these original resources:

• Product page including live demo: https://www.fastly.com/products/image-optimization

• Image Optimizer eBook: https://learn.fastly.com/network-services-Performance-ebook-Image-Optimization.html 

• Automating Image Optimizer blog post:: https://www.fastly.com/blog/its-about-time-to-value-announcing-self-service-image-optimization

• Customer testimonial: https://www.fastly.com/video/fastly-image-optimizer 

Fastly Image Optimizer Tutorial https://docs.fastly.com/en/tutorials/fastly-io