How to start a basic and cheap image pipeline.

Image pipelines are usually part of larger cloud providers that require an expensive subscription. Today we can do a large amount of that with AWS services. Three, we will be using are Cloudfront, S3, and lambda.

We have to break down what does an image pipeline does. To give us a direction of staring down this journey.

The first thing that an image pipeline has to do is to store our images for us. It also has to be flexible, handle the scale, and is pretty cheap. S3 fits that bill perfectly. We can store "infinitives" amounts of files in S3 with proper disaster recovery processes around it cheaply.

Since we are using S3, we can use both Cloudfront and lambda to fill in some image pipeline logic.

Let's go ahead and use the AWS CLI to create that S3.

1
$ aws s3 mb s3://[bucket-name] 

The next part of an image pipeline is serving the images to the internet. It doesn't just serve the image; it also caches around the world. The Image pipeline is making it very fast for your users of the site downloading the images.

For this, we are going to use a CloudFront that connects easily to S3. We are also going to set CloudFront to serve a particular prefix within the S3 bucket. The reason for just using a prefix for serving will be more apparent later.

First, we have to allow CloudFront to connect to the S3 bucket.

We will then create a CloudFront distribution that connects to our new bucket and in the origin path area. We will want to add the prefix "/output".

Ok, let's review what we have created so far. We have a scalable image store using S3; we can serve those images to the world using CloudFront.

Now comes the business logic; we can stop here and allow systems to upload images to CloudFront and get some great benefits. The last of an image pipeline is creating the images for your application.

Let's create a simple lambda application in any language you want. Still, we choose to use nodejs with the library sharp to do image resizing. As well as the s3-stream npm library, this allows us to read in the image that was uploaded. Then take that image and create three different images. These images should match the application's breakpoints; we also choose to use webp as our output file.

That is all that is needed to create a basic and cheap image pipeline. It is usually one of our first additions when we start working with a client. They see faster speeds immediately around image downloads.