Ask HN: Where do you host images for your blog or landing pages?

[akshaykumar90]

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.

[mattw2121]

I guess I'm behind the times, but I just store them on the file system where I am serving the website from.

[mdasen]

If one is worried about scale, it's pretty easy to throw them behind a CDN like Cloudflare or Bunny.net. They'll cache the static file for you so that your web server isn't always delivering it.

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?

[bombcar]

This is what I’ve done - if you want to be a bit more protective you can do some things to make sure they’re not hotlinked from elsewhere, but that’s up to you.

[marginalia_nu]

If you aren't getting hundreds of requests per second, and the resources aren't huge, there's really no reason why you can't host them yourself. Especially with webp, the bandwidth is negligible.

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

[chrismorgan]

In the same place. Why anything else? Much simpler, and no extra HTTPS connection to make, and probably within ε on file delivery performance (though that’s heavily subjective). There’s almost never any reason to do it any other way.

[gh123man]

You can go surprisingly far with a $5/mo Digital Ocean droplet and the Cloudflare free tier. Just host your website the boring way, put CF in front of it and they will cache and serve all of your static content for free.

[bradley_taunt]

This is a good workflow and pretty flexible. I would actually recommend NearlyFreeSpeech for hosting and BunnyCDN for caching etc.

Turns that $5/month to less than $3/month for low traffic sites.

[sofixa]

Why not use CloudFlare Pages directly? It avoids you having to deal with and maintain a droplet, beings the $5/month to $0/month, reduces attack surface, makes scaling "magic", etc. The only caveat is that your site needs to be fully static, but it probably already is anyways.

[kingsloi]

+1, I use DO's App platform to host 3 static nuxt.js sites, and because they're all static, it's all under their free tier, which is a huge plus!

[Ptchd]

or $5/year with a cheap VPS https://www.lowendstock.com/

[colbyfayock]

Colby from Cloudinary here what framework / tooling are you using? Sorry you haven't had a great experience with the UI, but if you stick around with Cloudinary, I would suspect there's a lot of solutions where the processing / uploading can be automated, such as using a Cloudinary plugin within a headless CMS (like Contentful) where you just use a URL or plugins like the Gatsby plugin: https://github.com/cloudinary-devs/gatsby-transformer-cloudi... (only supports images so far)

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!

[janeway]

The image is placed in my website directory and then my static site generator, jekyll, uses a relative path tag to generate the path for the final compiled website on my machine. This static website is then uploaded to github. If I was uploading elsewhere, the workflow would be the same. Only the relative path is hardcoded and the domain therefore doesn’t matter. The true filepath is to some github link in my “_site” directory, but neither I nor the user see it. Static sites are very easy to manage in this way.

[pocketsand]

S3 has no minimum fee. For a small site they'll probably send you a 4 cent invoice each month. You can then throw cloudflare in front of the S3 box for free.

Alternatively, as others have said, you can just plop them on the server and call it a day.

[0xbadcafebee]

Let's see what the pricing calculator says. Assuming you stored 1GB of content, with 4MB images, and you transferred out 40GB of content each month:

  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

And for 1TB stored & transferred & 1M GETs each month:

  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

Assuming Cloudflare had a significant cache hit rate, you'd save a decent chunk of change.

[0xbadcafebee]

GitHub Pages works for non-commercial purposes. You get 1GB to serve and max file size is 100MB. Soft bandwidth limit 100GB/month, with some rate limiting. Best to put CloudFlare in front (actually I can't get CloudFlare to work with Google Pages, their cache never expires so no new pages show up through CloudFlare)

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.

[TrueGeek]

The first option is what I'm using. CloudFlare in front of GitHub Pages. It seems to work well, my blog gets literally dozens of visits a month and it's never gone down.

[brycewray]

Have done both “local” (site host) and Cloudinary. With static sites in particular, a lot of it depends on your preferred site-building tool. The Hugo static site generator does a pretty impressive job of managing and processing images out of the box while, with most other SSGs, you’ll need to wrangle plugins and packages and you won’t get the same high performance. Thus, apart from Hugo sites, Cloudinary may end up being a better solution — although you’re right about its UI, and I’d say the same thing about its documentation. Even if you do use Hugo, it may be better to go with Cloudinary so you can avoid having to keep a lot of images in the site repo.

[cheptsov]

Just curious, what do you use for hosting the blog or landing page itself?

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

[jasode]

Some meta-commentary about some of the replies ... so far, there are 4+ replies suggesting the obvious step of storing in the images on the same web server host. But I notice the submitter is software engineer ex-Stripe, ex-Yelp, ex-Adobe... so I'm guessing he already knows that simple setup but doesn't locally host gifs & vids for technical reasons (bandwidth?, latency?).

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.

[uptown]

Sometimes the best answer is still the obvious one, regardless of the audience.

[dewey]

Seems even more appropriate to reply with the most obvious answer and not some overengineered / "will it scale" setup then.

[akshaykumar90]

OP here. All answers are good. I was looking for a lay of the land and appreciate all the options people are chipping in with.

[subpixel]

I have an entire repo set up to share images via iPic - I just select an image locally and with a keyboard command updload it and add the url to my clipboard

https://github.com/toolinbox/iPic

[Archelaos]

My own Web-site is mostly static, so images (I don't use video) are in the file system. For customer's it is sometimes more complex: The setup of dynamic Web-site content happens in a database application. The images are stored in their raw format in a database and transfered to the file system of the Web-site in the right dimensions and scale when their associated data-set (such as a specific product information, etc.) is to be published. This makes it easy to reuse the images in other contexts, e.g. PDFs, or to adapt to changes in the Web-site layout, e.g. low resolution/high compression for mobile.

[beemaestro]

Okay this might be an overkill but my images are on CloudFront. I store them in S3, which get served through the CDN. It’s practically free at my scale. The actual blog is a GitHub pages site.

[tyingq]

>use GitHub repositories for hosting images

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.

[Apreche]

That depends.

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.

[madmax108]

Simple hack for one-off (or a few) images. Go to any Github repo and create a new Issue, drag and drop your image into the issue-box. Github uploads it to their server and adds a markdown link for the image, which has a perfectly usable *.githubusercontent.com url that you can pick and use anywhere.

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

[ianpurton]

I commit to a github repo and that gets deployed to cloudflare pages. https://pages.cloudflare.com/

I use Zola the static site generator. My repo is here https://github.com/purton-tech/cloak/tree/main/www

[D13Fd]

I do Amazon S3. Not because I have any particular love for Amazon, but because it was the default in the original template I used, and it was easy to set up and almost free. It has worked well. Most months I'm under the free tier usage limit, and the largest bill I've seen so far was less than $5.

My hosting provider (Render) requires an add-on for file storage, so last I checked AWS S3 free tier was the cheaper option.

[HHalvi]

I have been super impressed by the latency of the images hosted on Imagekit. Used to host images on Cloudinary, found Imagekit to be faster for my visitors + more affordable. I currently have 2 accounts with them, one for my personal website/blog on free tier and a paid tier for landing pages for my employer. Highly recommend them, no affiliations, just a super happy customer!