2. Setting up Fastly IO

Let's get started by picking up where we left off in Fastly 101. 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.

Enabling Fastly IO

It's time to enable Fastly IO for our service. Let's log in to the Fastly web interface, clone the active version of the service, and select Image Optimizer from the sidebar. We'll see the screen shown below.

Enabling Fastly IO in the Fastly web interface

Click the Contact me button to start the process. A Fastly team member will contact you with pricing details and enable Fastly IO for your account. Once Fastly IO is enabled for your service, the default settings will appear on the Fastly IO page, as shown below.

The default Fastly IO settings

We'll talk about these settings later when we customize them for Taco Labs. For now, just know that when you see these settings in the Fastly web interface, you can rest assured that Fastly IO is enabled. However, there are still a couple of things we have to do before Fastly IO is working for our service.

Verifying that shielding is enabled

Services that use Fastly IO need to have shielding enabled. Using shielding with Fastly IO helps ensure that the original images are only transformed once, which in turn reduces latency and the number of required origin fetches. If you followed along with Fastly 101, you've already enabled shielding for your service.

You can verify that shielding is enabled by visiting the Origins page in the Fastly web interface and viewing the details for your host. If shielding is enabled, you'll see a shield POP specified, as shown below.

Shielding settings in the Fastly web interface

If you just enabled shielding for the first time, click the Activate button to activate the new version of the service configuration.

Adding the Fastly IO header and request condition

Adding the Fastly IO header to our service is another prerequisite for enabling Fastly IO.

We can set headers in the Fastly web interface. Click the Edit configuration button to clone the service and create a new draft version. Then, on the Content page, click the Create a header button. The Create a header page appears, as shown below.

Creating the header for Fastly IO

Fill out the Create a header fields as follows:

  • In the Name field, enter a human-readable name for the header.
  • From the Type / Action menus, select Request and Set.
  • In the Destination field, enter http.x-fastly-imageopto-api.
  • In the Source field, enter "fastly".
  • From the Ignore if set menu, select No.
  • In the Priority field, enter 1.

Click the Create button to save the header.

Now we need to create a request condition to ensure that only our image assets are routed through Fastly IO. If we sent non-image content through Fastly IO, it wouldn't be optimized, but we'd still be charged for it. To ensure that we only optimize images, we'll create a condition by clicking the Attach a condition link next to the header we just created. The Create a new condition page appears, as shown below.

Creating the condition for Fastly IO

Fill out the Create a new condition fields as follows:

  • From the Type menu, select Request.
  • In the Name field, enter a human-readable name for the condition.
  • In the Apply if field, enter req.url.ext ~ "(?i)^(gif|png|jpe?g|webp)$".

Click the Save and apply to Fastly Image Optimizer button. Then we'll click the Activate button to activate our service configuration.

Examining VCL as an alternative

We learned in Fastly 101 that the web interface modifies the Varnish Configuration Language (VCL) code for our service. That's what just happened when we created our header and condition. The web interface hides the complexity, but behind the scenes, it takes our settings and uses them to generate custom VCL code that is used every time we activate our service configuration.

As you gain experience with VCL, you'll become more comfortable with modifying the VCL directly. For example, while going through this guide, we could have added the header and condition to the VCL instead of using the controls in the web interface. Let's take a look at how that could work.

We can use the Fastly web interface to create a VCL snippet. Click the Edit configuration button to clone our service and create a new draft version. On the VCL snippets page, click the Create snippet button. We'd add a name for our snippet, select type within subroutine (recv (vcl_recv)), and then copy and paste the following VCL code:

1
2
3
if (req.url.ext ~ "(?i)^(gif|png|jpe?g|webp)$" {
  set req.http.x-fastly-imageopto-api = "fastly";
}

Creating a VCL snippet for Fastly IO

Adding this VCL would have the same effect as the steps we performed in the previous section when we added the header and condition in the web interface. As noted earlier, we aren't going to actually add this VCL to our service, so let's click the Cancel link.

Verifying that Fastly IO is working

We've enabled shielding and added the required header and condition for Fastly IO. Now we can check to see if Fastly IO is working for our service:

1
$ curl -sI "https://io.tacolabs.com/assets/tacos.jpeg?width=200"

This command loads an image from the Taco Labs website and resizes it using Fastly IO. The ?width=200 parameter tells Fastly IO to resize the image's width to 200 pixels. We'll see the following in the output:

1
fastly-io-info: ifsz=98106 idim=720x467 ifmt=jpeg ofsz=12494 odim=200x130 ofmt=jpeg

If everything's working, the output of the terminal command will contain the image dimensions (odim) and the width will be set to 200. Fastly IO is enabled for our service and ready to start transforming our images!



Back to Top