Today we’re pleased to announce the Netlify Image CDN. Resize, crop, and reformat any image just like this:
https://example.netlify.app/.netlify/images?url=/owl.jpg&w=800&h=600
To see how easy it is, check out our live demo.
Images are one of the most important things affecting the performance and user experience of your website, but they can be hard to get right. It can be tempting to just slap in an <img> tag with a src attribute pointing to your image, but this method can lead to huge file sizes, frustration for your users, and a sea of red on your Core Web Vitals. When it comes to building for the web – speed matters.
Of course, some frameworks offer built-in image handling. These can be great if you are able to use them, but this type of framework-specific image optimization often hurts build times. Not to mention, these are of no help to sites built without frameworks.
At Netlify, we believe in creating the best developer workflow and user experience for all frameworks - and none - which is why we’ve created the Netlify Image CDN. Netlify Image CDN is designed to be used by everyone, however you choose to build your site.
Resize, crop, and format images
We started by looking at the most important actions that developers need to perform on their images. We’re big fans of the full-featured digital asset management platforms and when you need them, there’s little substitute, but there are times when you might not need all of that power. There are, however, a few actions that every site needs.
At the top of the list is resizing and cropping – nothing affects performance more than unnecessarily large images being loaded onto a webpage. We’ve all seen those sites that accidentally use a multi-megapixel image for a thumbnail, which is why we’ve now made it dead simple to resize your images, with the added functionality of lots more options for how you want to crop and resize them so they look just right.
Next, we decided to address image format. While JPEG and PNG files have served us well, we can do so much better with newer technologies. Modern browsers support several advanced new formats that offer dramatically better quality and compression level, which means developers can maintain image quality but dramatically decrease the size of the file to optimize for web performance.
Browser support is good, but not universal. This means figuring out which image file type to choose for each of your visitors is cumbersome, so with Netlify Image CDN, we automatically deliver the best format supported by your user’s browser. We’ve started with AVIF and WebP, which have the best browser support, but we’re excited by new formats like JPEG XL and will be keeping an eye on browser support for these. By using our Image CDN, your sites will benefit from the performance enhancements of these new formats, automatically, as we start delivering optimized image assets to supporting browsers.
Finally, there’s quality. Not all images need to be pixel perfect, and you can get significant improvements in file size by adjusting the value to balance quality with file size.
Local and remote images
We wanted to give these benefits to all of your images, so Netlify Image CDN supports both local images from your deploy and remote images from other servers. To prevent abuse and improve your security, you can configure explicit allow rules for your source image domains and paths.
Powerful services can sometimes feel overwhelming or complex. Mistakes can undo all of your hard work, so we wanted to make this feel as simple and accessible to developers as we could, which is why we’ve given Netlify Image CDN the simplest possible API. It works out-of-the-box for all of your local images and the transformation options are passed as regular query params.
An Image CDN URL looks like this:
https://example.netlify.app/.netlify/images?url=/owl.jpg&w=800&h=600
This will resize the image “/owl.jpg” to fit within an 800px x 600px box, and automatically deliver the best format.
To use a remote image, pass in the complete URL:
https://example.netlify.app/.netlify/images?url=https://example.com/owl.jpg&w=800&h=600
Then, add the domain to your netlify.toml file:
[images]
remote_images = ["https://example.com/.*"]
Integrate everywhere
Automatic integrations are coming soon for most frameworks, so you won’t need to think about them at all in the near future, but you can use them with all the major frameworks today if you use a library like Unpic. This is my personal project, but it now has full support for Netlify Image CDN, and lets you easily use it today with ten different frameworks.
After telling you about all the reasons why Netlify Image CDN is great, let’s get on to why you might not want to use it:
- If you need more advanced image and video management check out solutions from our partners like Cloudinary and Bynder. For example, removing backgrounds, changing colors, 360 viewers and powerful AI powered transforms like generative fill and removal. They offer a complete set of features for managing all of your assets and enable ecommerce stores to easily scale their websites without sacrificing performance. Their integrations with Netlify makes using them a breeze.
- If your CMS or ecommerce provider has a built-in image CDN, you might want to use that instead. Unpic can help there, or you can use the SDK from your CMS provider. Great performance for your users is what is most important to us, and there’s no point in resizing the image twice.
We hope you give the Netlify Image CDN a try today.
Ready to get started? Read the Netlify Image CDN docs.
Let us know what you think – head over to the forums and leave us a note.
