Where do you put your images?
This week starts another mini-series, this time dealing with media, specifically images and maybe a little bit of video. Let me know if there is anything you’d like to see.
We’ve talked a bit about serving up static files when we explored static sites. Most of those hosts serve their content over a CDN which is designed to optimize delivery by getting your assets, including media/image files, closer to the end user.
However, those services typically treat images like any other file. It also may mean that you need to keep your images in your Git repository with the rest of your content. That might be fine for some icons and small accent images, but for anything larger like photos or other imagery which is part of your content, you may want to consider an alternative. The main reason being that distributed version control systems (DVCS) like Git and Mercurial, don’t handle large binary files very well.
On top of that there are often special needs around preparing images for your site. You may have a single source photo, that itself may be multiple megabytes in size, which you want to resize into a thumbnail and maybe a couple of different versions for mobile and other uses. You can of course find tools to do what you want as part of your build, or you can check out some services which cater to this exact need.
While video is something handled by a couple of these services, I’m not sure I’d recommend them for video streaming/hosting. If you want to have video on your site, you can start with the obvious YouTube or Vimeo, or look at some of the other dedicated video hosting services. I will explore those options in a future issue.
Cloudinary
I’ve used Cloudinary for a couple of years now without any complaints. My usage needs are very low volume, and simple but I found them to be easy to use and their free tier was quite generous. I don’t recall the exact details, only that it got even more generous at one point before the current pricing model came to be. They still have a free tier, but they have moved to a credit-based system where credits can either be used for transformations or storage or transfer. It is hard to say exactly what you now get for the 25 free credits you can get. An example mix would be 5 GB of storage, 10 GB of traffic and 10,000 image transformations. Probably more than you need for your blog or personal project. Oh they also do video, but I’ve not used that feature before.
ImageKit.io
When you look at the free tier of ImageKit, it really puts the others into perspective, because this is a generous offer. Basically, unlimited requests and transformations, just a cap of 20 GB bandwidth per month. They also don’t charge for fair use of storage either. They are an optimization and delivery service, so as long as your bandwidth is at least 80% as much as your storage, there is no extra charge for it. Their paid plans are also much more reasonable. The main difference I can see is they don’t process video, nor do they offer quite the extensive suite of transformations as others.
Sirv
At this point the 500MB of storage Sirv provides for free seems a bit laughable. As does the 2GB of bandwidth. However Sirv does seem to offer some interesting transformations including image spin and image zoom, the latter of which provides a way to display high resolution imagery in a smaller area allowing interactive zooming. But if that interests you, Sirv might be the right choice.
Netlify Large Media
I wanted to point out Netlify here again (can you tell I’m a fan), because they provide Git LFS (large file support) integration which allows you to track your media inside your repository, but host it with Netlify instead. It provides transformation options, allowing up to 2,500 free transformations each month. I’m adding this to the bottom of the list because, while this is a nice feature, it is not without its limitations, and it can be a bit more technical to deal with. However, it might be perfect for what you need.
https://www.netlify.com/docs/large-media/
Yet another option for stashing your images is using object storage from your favourite cloud provider. S3, DigitalOcean Spaces, Firebase, etc. all provide hosting for files that you can use if you want to keep your images separate from the rest of your content. Most, if not all, of the services above use one or more of these storage providers themselves.