Ask HN: Where do you host images for your blog or landing pages? | Hacker News Reader

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

35 pointsakshaykumar9063 comments

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.

View on HN

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

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.

Me too.

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!

There are tools that will do this for you - some of the "static site" generators IIRC, or the minifiers.

You can even base64 the thumbnails and still have "click through" to the source image if desired.

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?

> If one is worried about scale, it's pretty easy to throw them behind a CDN...

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?

What problem would that solve? Using Cloudflare is very straightforward.

> What problem would that solve? Using Cloudflare is very straightforward.

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.

99,99% of people are overestimating their blogging needs. Unless you're Scott Hanselman the cheapest Hetzner VPS will cover all their hosting needs. It's amazing that even many developers nowadays don't really understand how far just basic hosting will take you before you need edge, cdn, s3 or anything else.

Netlify and similar services have replaced me ever launching my own server ever again for personal projects that involve static content. Not sure how Netlify affords to serve all the traffic but so far so good on the free tier.

Modern static hosting providers have generous free tiers, amazing UX, zero maintenance, and handle all the same if you have 1 or 1 million visitors (the only difference being your bill).

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

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.

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.

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.

Saving twelve bucks a year is, well, $12 per year. Better than nothing.

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

Haven't seen this site, thanks for posting. Interesting seeing so many boxes using NAT for IPv4, wonder how that gets shared, just one person gets port 80 and too bad for everyone else?

+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!

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.

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!

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.

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.

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.

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.

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.

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.

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

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.

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

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

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.

>I was looking for a lay of the land

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 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

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.

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.

>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.

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.

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

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

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.

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!

My blog is built on Github pages. I don't have lots of images, so they're hosted in the same repo of my website.

It’s probably not the cool answer but aws s3.

I use [DigitalOcean Spaces](https://www.digitalocean.com/products/spaces) with a custom domain fronting the assets. It's fairly cheap and easy to use.

My site is generated by Jekyll and then I just sync to S3 and serve it all through CloudFront - works pretty well https://atomic14.com

Your title mentions blogs - if you use self hosted WordPress and their Jetpack plugin (free), you get to use their CDN for free and seamlessly. Likely this is also already the case for WP.com

When it comes to GitHub repo, what does the URL of the image look like? Is some kind of hash added to the filename? At the moment I use media files from my WordPress blog to store images.

I just add them to an img folder in my Github repository and it is then served as part of the Github page. Just using `src=img/picture.jpg` works fine.

I've used systems like Docusarus[1] (for building my project documentation). It is build from my github project. And I end up with URLs on my server like https://mysite.com/docs/assets/images/connect-to-app-02c6a40...

But I've never tried to link directly to source file, not builded version on my server.

[1] https://docusaurus.io/

Try using the URL you get from dragging an image into a comment box (you don't even need to submit the comment).

It's not a long-term solution but it works.

On the same server, my Ghost instance manages it. I have Cloudflare before it all. I wish I'd get to outgrow this setup

I just commit them to the git lfs (in my case via netlify). Larger sites benefit from actual asset management systems though.

I scp them to some folder on my VPS and point nginx to it.

I also have ffmpeg installed on the VPS if some images are too big for my taste.

I use imgur most of the time, it's super simple and hasn't failed me yet

Check out upload.io - it was a refreshingly simple take on Cloudinary etc for me

Looks pretty cool, the UI is certainly a lot better than Cloudinary's.

for https://prose.sh we use https://imgs.sh

Scene7 or Cloudflare or AWS Cloudfront.

On the blockchain of course!

Vultr object storage

On the same server i have my website on. It's easy to implement and i don't have headaches due to GDPR. Performance is good, if it's properly optimized. I also add Hotwire Turbo if necessary.

On GH :)

Reply on news.ycombinator.com