Image CDNs
Unfinished article
Using a CDN to host images has several advantages. For git based sites keeping images out of the repo is good because every time they are changed git keeps a full version of the image. If the images don’t change perhaps that doesn’t matter. But the other advantage is having the CDN make image transformations for you thus making an image of multiple sizes and aspect ratios for different screens.
The only problem is which service to choose from? Below is a list of different services that have a free tier. A few considerations to be taken into account are cost, integration, and features. Many of these services offer a free tier but some are much better than others. If you’re using a particular piece of software like a CMS you might want a direct integration. For instance Cloudinary and Uploadcare offer direct integration with Netlify CMS. This means you can choose images and upload new images directly to their servers from the CMS itself. Such integrations are nice but not absolutely necessary. It depends on your project and how you intend to add images to the site.
There are various features but the most important for most projects is image resizing for responsive design. Most services offer image resizing in one form or another. You add height and/or width to the CDN image url and the resized image is generated on the server ready to use. You can add such sizing to HTML elements like <picture> and srcset to let the browser choose the right image based on the user’s screen size.
Another similar feature is auto formatting. The CDN will automatically choose the best format for the browser. So for example while Chrome and Firefox can use the webp format Safari cannot and so will need a jpeg version of the image.
However an even simpler way to this is with what Uploadcare call Adaptive Delivery. This is much simpler. You just link to the full size image on the CDN server and when a user requests the image one of the right size is generated on the fly.
It’s also worth considering that there are other ways to create multiple files. Adobe Photoshop allows saving images in different qualities in multiple sizes in one go.
Hugo also has it’s own built-in image processor too. But these services are pretty handy so here is a list
- Netlify Large Media - integrates with Netlify CMS, 100gb bandwidth
- Uploadcare - free forever inc. unlimited transformations, 30gb bandwidth, 3gb storage, Netlify CMS plugin
- Cloudinary - credit based free tier but with a max of 20gb bandwidth. Integrates with Netlify CMS.
- ImageKit.io - free forever tier w 1000 transformations pcm and 20gb storage and 20gb bandwidth
- Gumlet.com - 1gb bandwidth, recommeded by travis.media
- Imgix.com - Always free, 1000 origin images, infinite transformations, ‘bandwidth included’ ??
- Sirv.com - 500mb storage (we only have about 135mb so far) and 2gb bandwidth. Zoomable images will have Sirv branding on them. Easy to set up?
- Statically.io is a free CDN for hosting open source projects.
- Git LFS - not a service but a software, a plugin for Git. Used by Netlify’s Large Media service but can be used on it’s own.
- None of the above - Just keeping image files in the regular places of your site also has some advantages too.