![]() ![]() I have a directory of images that I want to compress: With our tool written, we now need to test it out. In our package.json file, we’ll add a start script to run our application: "scripts": ` Īwait converted.toFile(newImageFilePath) Handily, this package ships with TypeScript definitions, so we don’t need to install a separate types package. You’ll note that we’re using the tinify npm package that is developed here. We’re going to initialize a simple Node.js console application called tinify using TypeScript and ts-node: mkdir tinify You can just use the API directly if you like, but I prefer to use a client library - we’ll be using the Node.js library. The API supports a number of image formats including PNG, JPEG, and WebP, so it’s not just for PNGs - in fact, we’ll be using the WebP format in this post. It’s worth noting that the name “TinyPNG” is a bit of a misnomer. ![]() I personally rarely find I optimize more than 500 images per month, so I’m happy with the free plan. If we need to optimize more than that, we’ll need to pay for a subscription. We can get a free API key which allows us to optimize 500 images per month. ![]() In this post, I’ll show you how to optimize images automatically using the TinyPNG API. We can do this manually using tools like TinyPNG or Squoosh, but it’s also possible to automate this process completely. It’s a good idea to optimize our images to make sure they’re not unhelpfully large and hindering the performance of our projects. I run Lighthouse on my blog and I’m always looking for ways to improve the performance of the site one of the things that Lighthouse flags is image optimization. If we’re not careful, we can end up with a site that’s slow to load and expensive to host a really bad combo! Images are a big part of the web - they’re also a big part of the web’s payload. If you want to learn about automating image optimization, then you’ve come to the right place, as you can do just that with the TinyPNG API! This post will demonstrate clearly how to do that so you can optimize your images with ease in your projects. John Reilly Follow MacGyver turned Dev □❤️ TypeScript / ts-loader / fork-ts-checker-webpack-plugin / DefinitelyTyped: The Movie Automate image optimization using the TinyPNG API ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |