What is image optimization?

Image optimization refers to the process of creating and delivering high-quality images in the right format, dimension, and resolution for whatever device is accessing them, all while keeping the smallest possible file size.

Sound like an impossible task? It’s one that’s hard to get around, unfortunately. Today, users visit your site from a variety of sources, from mobile devices to personal computers. What they all have in common is they want to view the best version of your site as speedily as possible. Image optimization impacts both the speed of delivery and how your site performs in search.

At a minimum, you must format your images so that they appear correctly regardless of the device they’re being viewed on. Additionally, you have to consider things like the resolution and encoding of the image, both of which affect the quality and size of your images. Beyond transforming your images, you also have to 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 when you need to scale. An image optimization solution, especially an edge-based one, can help you automate and scale some of the work needed to optimize images on your website while also reducing or eliminating compute expenses. Paired with a CDN service, you can also cache optimized images and expedite their delivery.

Before you begin

We recommend reading the What is a CDN? essentials guide to understand some of the key concepts and terms we’ll be using in this guide.

How image optimization solutions work

Image optimization solutions are available as plugins or extensions to your content management system or stand-alone services. These solutions let you specify transformation settings and then apply those settings server-side before delivering the image.

Some common parameters include things like:

• crop: remove pixels from an image
• width: resize the width of the image
• quality: set a compression level for the image

You can define different settings to cover the different screen sizes that your site visitors may use. 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 to your servers for the image with those parameters, and the image optimization solution will apply the transformation to the image response.

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 request the correct 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. Requests for a different transformation are served using the original image in cache, reducing hits 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.

Depending on the number of images on your site, it can be very time-consuming to optimize and maintain your images. In today’s modern internet, a single image typically needs to be optimized 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!

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.

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

The time to delivery isn’t just important for your 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.

Why Fastly

Fastly’s Image Optimizer (Fastly IO) brings you all of the benefits described above plus full integration with our modern CDN network.

Much like other image optimizer services, Fastly IO retrieves the source image file from your origin and transforms it using the parameters you specify. However, the transformation in Fastly IO occurs at the edge, between your servers and the client, speeding up the time it takes to deliver the image.

Fastly IO works together with shielding, which designates a single POP to pull content from your origin and distribute it to other cache servers. After the transformation is applied, both the original image and transformed image are cached in the shield POP. If a POP in the network receives a request for an image transformation not in cache, the request will be forwarded to the shield POP (instead of your origin) and the transformation occurs at the shield. This speeds up the time it takes to fetch the image, prevents hits to your origin, and most importantly, lets that image be available to POPs throughout the network so you can serve more from cache.

You can further customize your transformations and employ automation using query string parameters. Fastly IO has defined several parameters that support a variety of image formats. Additionally, Fastly IO makes use of precomposed IO queries called transformation classes. Transformation classes automatically define multiple parameters in a single query. For example, the query string parameter class=large is used to deliver an image cropped to an aspect ratio of 16:9, resized to a width of 640px, and 75% quality compression all in one go. This is the same as if you had defined crop=16:9&width=640&quality=75 on your image. Not only does this let you transform your images more easily, it’s useful if you don’t want to expose your image optimization parameters publicly.

You can explore these transformation classes and other parameters in real-time using this interactive example.

What’s next

Check out our Introduction to Fastly Image Optimizer for a comprehensive tutorial on how to use Fastly's Image Optimizer to transform and cache your images. Once you’re ready to get started with Fastly IO, contact our Sales team.