Ask HN: Where do you host images for your blog or landing pages? I am curious what are the current best practices and offerings for hosting images (or short videos, gifs, etc.) for small to mid scale websites? Currently, I am using Cloudinary but the management interface leaves a lot to be desired. I have seen some static sites use GitHub repositories for hosting images which I think is a pretty cool hack. |
But I've never tried to link directly to source file, not builded version on my server.
It's not a long-term solution but it works.
I also have ffmpeg installed on the VPS if some images are too big for my taste.
I used to upload assets for apps to S3 to be served from there when I just started thinking that my CDN is going to be taking the vast majority of hits for static files so why should I be adding a step to my deploy process?
But at that point, why don't you just put your entire site into a CDN?
I would think a landing page / blog would be mostly static?
I took it one step further: I don't have an image-heavy site, so I degrade the resolution to make images as small as possible, then embed them in the HTML as base64 strings. Very portable!
If you're really worried, cloudflare can help with caching. FWIW, this is served off domestic broadband with cloudflare caching: https://search.marginalia.nu/explore/random It's survived the HN front-page, despite being a bit of a pathological case since the images are random out of a pool of tens of thousands. Images are also larger than they appear visually. Native res is like this: https://search.marginalia.nu/screenshot/187889
Turns that $5/month to less than $3/month for low traffic sites.
If you're on the Netlify side of things, I have a plugin there that automates images https://github.com/colbyfayock/netlify-plugin-cloudinary/
There's a ton others too: https://cloudinary.com/documentation/cms_ecommerce_integrati... https://cloudinary.com/documentation/partner_built
Hope that helps, happy to brainstorm other ideas as well!
Alternatively, as others have said, you can just plop them on the server and call it a day.
1 GB per month / 0.00390625 GB average item size = 256.00 unrounded number of objects
1 GB x 0.0230000000 USD = 0.02 USD
100,000 GET requests in a month x 0.0000004 USD per request = 0.04 USD (S3 Standard GET requests cost)
40 GB x 0.0007 USD = 0.028 USD (S3 select returned cost)
0.023 USD + 0.04 USD + 0.028 USD = 0.09 USD (Total S3 Standard Storage, data requests, S3 select cost)
Internet: 40 GB x 0.09 USD per GB = 3.60 USD
Total: $3.69
1,024 GB per month / 0.00390625 GB average item size = 262,144.00 unrounded number of objects
1024 GB x 0.0230000000 USD = 23.55 USD
1,000,000 GET requests in a month x 0.0000004 USD per request = 0.40 USD (S3 Standard GET requests cost)
1,024 GB x 0.0007 USD = 0.7168 USD (S3 select returned cost)
23.552 USD + 0.40 USD + 0.7168 USD = 24.67 USD (Total S3 Standard Storage, data requests, S3 select cost)
262,144 number of objects x 0.000005 USD = 1.31072 USD (Cost for PUT, COPY, POST requests for initial data)
Internet: 1024 GB x 0.09 USD per GB = 92.16 USD
Total: $118.14
CloudFlare Pages (https://pages.cloudflare.com/) has a free plan with 100 sites, unlimited requests, unlimited bandwidth. Maximum file size 25MB, 20,000 files, 100 domains, 100 custom headers, 2,000 static redirects, 100 dynamic redirects. (https://developers.cloudflare.com/pages/platform/limits/) Unknown if there's a commercial restriction.
For example, we use GitHub Pages for hosting the landing page. So for hosting images, we use GitHub itself and it mostly works.
For the blog, we currently use Substack, but thinking of maybe moving it to GitHub Pages too.
FYI, here is our repo: https://github.com/dstackai/dstack
Maybe recalibrate the suggestions based on the above. (Or the submitter can further clarify why hosting local image assets instead of using a CDN is not feasible in his particular case so the crowdsourced answers can be more productive to his goals.)
EDIT add: Sure, obvious technical answer may be applicable but some replies have a bit of condescension that doesn't seem appropriate and respectful of this person's tech background.
Why & how did you arrive at the decision to use Cloudinary to host images for your Savory website instead of locally hosting them yourself?
Have you looked at your Cloudinary analytics dashboard to quantify what magnitude of bandwidth you're dealing with?
Are you currently on Cloudinary's free tier plan or paid? Since you mentioned the Github image hack, are you looking for a zero cost hosting of images?
The more datapoints and constraints you provide as background, the better the advice in your replies will be.
I don't know the current state of doing this, but it has been problematic in the past because they don't return the right content-type headers.
Some files are files that are part of the web site. They are put there by the developer(s) of the web site. Things like maybe the logo image in the header, or that cool rotating flaming skull in the footer. These files just go on the file system of the web server.
Some files are user uploads. A person writing a blog post wants to upload some images to be inserted into that blog post. For these sorts of files I just use whatever object storage system makes the most sense given the circumstances S3, GCS, etc.
I use this way more often than I should TBH. YMMV
Note: Only do this for images you have backed up elsewhere (heck, in git itself is fine). This is purely to prevent having to spend any $$$ on hosting/CDN whatever
I use Zola the static site generator. My repo is here https://github.com/purton-tech/cloak/tree/main/www
My hosting provider (Render) requires an add-on for file storage, so last I checked AWS S3 free tier was the cheaper option.
You can even base64 the thumbnails and still have "click through" to the source image if desired.
From the original question:
> I am curious what are the current best practices and offerings for hosting images (or short videos, gifs, etc.) for small to mid scale websites?
At that point your images are in the same place, and have the same workflows, as your entire site. If your blog / landing page is spread among different services, it'll take more time to maintain, more time to train a newcomer to understand, more points of failure...
IE, if you use one of the "git repo -> CDN" products, your images and static content are part of the same workflow, and the CDN handles all of your scalability issues. Your update process simply becomes a "one and done" pull request with 100% off-the-shelf automation.
> Using Cloudflare is very straightforward
Last weekend I hit a bug in Cloudcannon -> Cloudflare's certificate handling. Our landing page was down for about half a day. Fortunately it was Sunday night and most of our customers aren't the kind of people who'd be browsing our landing page on a Sunday. It was resolved quick enough, but it would have been a lot more frustrating if we were a consumer product or our blog was a lot more integral to our business.
I'm not entirely sure where to point the finger, though. We "bring our own cert" instead of using Cloudflare's (or Cloudcannon's) automatically-generated certificate.