Using a CDN

Open the lesson folder

Introduction

Image manipulation and choosing the correct format can be a lot of work on a larger project. Fortunately, there are some services available which can help. This lesson will focus on Cloudinary.

We can make use of services such as Cloudinary to take care of a lot of work for us. Cloudinary is used to store and host our images, and also video if required. Once uploaded, we get a URL which we can use in our HTML. Not only does it host our images, but it also has many benefits.

Content Delivery Network

One of these benefits is it uses a CDN, which is a Content Delivery Network. This makes our content, in our case images, available across the world in multiple servers or data centers.

More locations means the images are served from the users closest source, rather than just having them in one central location for everyone, and this can speed up the delivery of our images. And also, if there are an issues with a server, it can easily be switched to avoid downtime.

Optimized Images

Not only does it serve the image from a local data center, it can also provide an optimized version too.

We only need to upload one image to Cloudinary, and it can convert and return an optimized file format, including formats such as webp and jpeg-2000 if browser support allows. The same for the size and quality too. We can set these up to be transformed into certain sizes for us, or allow it to choose for us.

Obviously we need to upload an image which is big enough for our biggest use case, since we don’t want to stretch an image too far and lose quality.

Using Cloudinary

If you have not used Cloudinary before and want to follow along, you can create a new account, which is free and has a huge free usage allowance. There is a paid version too, but the free account includes storing thousands of images so you should have no worries unless your project grows to a huge level.

For this lessons project folder, there is one single image, called road.jpg. This image is 5311 pixels wide, but this time we will not be linking to this image, instead we will upload to Cloudinary.

Once this has uploaded, we are given a URL to use in our project as the image src:

This will result in a URL similar to this:

https://res.cloudinary.com/your_account_number/image/upload/your_location/road.jpg

You can select the .jpg version as above, or, leave off the extension for Cloudinary to select the best image format.

You can double click the image for more detail:

This page has some pre-defined templates available. We can generate banners, square images, circles, and many more. Each provides a URL to use if required.

Custom Cloudinary Templates

Or, we can customize the image by selecting Create New Template:

From here we can change the size of the image, the quality, the format, and also add effects too.

When we make changes, we also get a new URL generated so we can use multiple versions in our projects.

Testing our images

Select any URL from Cloudinary. This can be the original upload, or, a modified version.

First, set the image to be 100% of the browser width in the style section:

  <title>Using a CDN</title>
  <style>
    img {
      max-width: 100%;
    }
  </style>
</head>

Now we can create an image using this URL:

<img
  src="https://res.cloudinary.com/your_account_number/image/upload/your_location/road.jpg"
/>

In addition to generating transformed images in Cloudinary, we can also make changes using the URL parameters:

     <!-- 1. REGULAR IMAGE -->
    <img
      src="https://res.cloudinary.com/your_account_number/image/upload/your_location/road.jpg"
    />
    <!-- 2. CHANGE ANGLE TO 90DEG -->
    <img
      src="https://res.cloudinary.com/your_account_number/image/upload/a_90/your_location/road.jpg"
    />
    <!-- 3. FIXED WIDTH IN PIXELS -->
    <img
      src="https://res.cloudinary.com/your_account_number/image/upload/w_200/your_location/road.jpg"
    />
    <!-- 4. WIDTH AUTO - CLOUDINARY CHOOSES FOR US -->
    <img
      src="https://res.cloudinary.com/your_account_number/image/upload/w_auto/your_location/road.jpg"
    />
    <!-- 5. FORMAT- CHANGE TO PNG -->
    <img
      src="https://res.cloudinary.com/your_account_number/image/upload/f_png/your_location/road"
    />
    <!-- 6. FORMAT AUTO TO LET CLOUDINARY CHOOSE MOST SUITABLE - POSSIBLY WEBP -->
    <img
      src="https://res.cloudinary.com/your_account_number/image/upload/f_auto/your_location/road"
    />

There are also many more options we can add here, and you will find many more in the Cloudinary documentation.

This is just an overview of Cloudinary, but it has many more features including adding presets to automatically configure, or transform our images each time we upload new ones.

There is a developer API to connect your project to do things like adding user uploads.

We can also combine these hosted images with srcset and the picture element too.

As you may expect, there is also many other providers which offer a similar service, we are not restricted to Cloudinary. Including services from Amazon and Cloudflare to name a few. When researching be sure to check which ones have the services you require, such as a CDN, image transforms, or possibly an API for deeper integration.