1. Home
  2. Solutions
  3. Tutorials

Introduction to Fastly IO

This tutorial guides you through the steps to set up Fastly's Image Optimizer ("Fastly IO") for a real website. It builds on the concepts introduced in Introduction to Fastly's CDN, and it guides you through the steps of optimizing the images for Taco Labs, the static website we previously used as an example.

1. Introduction

This section describes the initial things you need to be familiar with when setting up Fastly IO for an example website.

2. Setting up Fastly IO

Let's get started by picking up where we left off in Introduction to Fastly's CDN. At that end of that tutorial, we had a fully-functional website (Taco Labs) configured to use the Fastly CDN. You can use the same Fastly service and configuration as a starting point for this tutorial.

3. Adding niceties

There are two ways Fastly IO can interact with our images. The first is by using the default settings we specify in the Fastly web interface. These settings will be applied to every image on our website. In addition to the default settings, we can apply additional transformations to individual images by using query string parameters and headers. Let's take a look at the default settings first.

4. Updating the Taco Labs website

We've enabled Fastly IO, configured the default settings, and verified that Fastly IO is automatically transforming all of the images on our website. Now we can add some new images to the Taco Labs website and make use of all of Fastly IO's features.

5. Wrapping up

That's it! We've successfully enabled and configured Fastly IO for Taco Labs, but we still have a couple other items to cover. First, we need to discuss how to purge optimized images from cache. We also need to cover Fastly IO troubleshooting steps you can follow if you run into trouble. Finally, we'll discuss next steps that can help you get even more out of Fastly IO.

Fastly
© Fastly 2024