To do this we need to set up a few things:įirst in the root of the project, let’s create our Netlify configuration file at netlify.toml. To get started, we need our base Netlify Function which we’ll use to process our image data. To do this we can first initialize our Git repository with: git initįollow along with the commit! Step 1: Creating a new Netlify Function gitignore file as if we check this into Git, we don’t want to check in all of our node modules, resulting in a huge repository. Once finished you should now see a package.json file inside of your project. That means we should scaffold our project to prepare for that step.Ĭreate a new directory and inside that directory run: npm initĪt this point npm will prompt you for some questions, including the project name, and the author, where you can walk through these questions or keep hitting Enter until you reach the end. We’re going to building this project from scratch and later on we’ll need to use npm in order to install libraries to our project (Cloudinary and BlurHash to start). Step 0: Starting a new npm project from scratch In order to follow along, you’ll need both a free Netlify account and a free Cloudinary account.ĭisclaimer: I work for Cloudinary as a Developer Experience Engineer. To do this we’ll need to “sign” our image URL so that we can securely use the serverless function, so we’ll also walk through doing that. Once that’s finished, we’ll inject it into the Cloudinary transformation pipeline when generating an image, so that we can create that blurred placeholder on the fly. We’ll be able to test that this is working using a tool called Postman. We’re going to create a Netlify serverless Function that will take some input image data, convert it to a BlurHash representation, and return it back. This is where Netlify Functions come in, where we can use Netlify to easily build and deploy serverless functions that allow us to make requests to an API endpoint.īy combining the two, we have a great way to run our own custom processing. One of the features of Cloudinary is the ability to use Custom Functions giving developers a way to run their own processing on images.Ĭloudinary invokes this function and caches the results, meaning every subsequent request will be super fast from it’s CDN. How does this work with Cloudinary and Netlify Functions? Note: Don’t worry, you don’t need to know Typescript, we don’t use it at all in this tutorial. It’s available in a variety of languages but we’re interested in the JavaScript world, so we can use the Typescript flavor, where we can install it right from npm. What is BlurHash?īlurHash is an open source library that takes an input image and generates a small, blurred representation of that image. Blurred Colby using BlurHash!īecause of the size, they load super fast, allowing us to gracefully trickle in loading of the full assets as we have resources. In addition to Lazy Loading, which defers loading until we need the media item, we can use blurred placeholder images, which are very tiny inline representations of the image. When loading media on the web, you often don’t want to load every single image and video all at the initial page load.īy doing that, you create a ton of network request for large files, some potentially not needed yet, slowing down the experience for the visitor of your page.
0 Comments
Leave a Reply. |