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?<p>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.
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.<p>If you're really worried, cloudflare can help with caching. FWIW, this is served off domestic broadband with cloudflare caching: <a href="https://search.marginalia.nu/explore/random" rel="nofollow">https://search.marginalia.nu/explore/random</a> 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: <a href="https://search.marginalia.nu/screenshot/187889" rel="nofollow">https://search.marginalia.nu/screenshot/187889</a>
In the same place. Why anything else? <i>Much</i> 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.
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: <a href="https://github.com/cloudinary-devs/gatsby-transformer-cloudinary" rel="nofollow">https://github.com/cloudinary-devs/gatsby-transformer-cloudi...</a> (only supports images so far)<p>If you're on the Netlify side of things, I have a plugin there that automates images <a href="https://github.com/colbyfayock/netlify-plugin-cloudinary/" rel="nofollow">https://github.com/colbyfayock/netlify-plugin-cloudinary/</a><p>There's a ton others too:
<a href="https://cloudinary.com/documentation/cms_ecommerce_integrations" rel="nofollow">https://cloudinary.com/documentation/cms_ecommerce_integrati...</a>
<a href="https://cloudinary.com/documentation/partner_built" rel="nofollow">https://cloudinary.com/documentation/partner_built</a><p>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.<p>Alternatively, as others have said, you can just plop them on the server and call it a day.
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)<p>CloudFlare Pages (<a href="https://pages.cloudflare.com/" rel="nofollow">https://pages.cloudflare.com/</a>) 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. (<a href="https://developers.cloudflare.com/pages/platform/limits/" rel="nofollow">https://developers.cloudflare.com/pages/platform/limits/</a>) Unknown if there's a commercial restriction.
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?<p>For example, we use GitHub Pages for hosting the landing page. So for hosting images, we use GitHub itself and it mostly works.<p>For the blog, we currently use Substack, but thinking of maybe moving it to GitHub Pages too.<p>FYI, here is our repo: <a href="https://github.com/dstackai/dstack" rel="nofollow">https://github.com/dstackai/dstack</a>
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?).<p>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.)<p>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.
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<p><a href="https://github.com/toolinbox/iPic" rel="nofollow">https://github.com/toolinbox/iPic</a>
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<p>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.<p>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.<p>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.<p>I use this way more often than I should TBH. YMMV<p>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. <a href="https://pages.cloudflare.com/" rel="nofollow">https://pages.cloudflare.com/</a><p>I use Zola the static site generator. My repo is here <a href="https://github.com/purton-tech/cloak/tree/main/www" rel="nofollow">https://github.com/purton-tech/cloak/tree/main/www</a>
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.<p>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!
I use [DigitalOcean Spaces](<a href="https://www.digitalocean.com/products/spaces" rel="nofollow">https://www.digitalocean.com/products/spaces</a>) 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 <a href="https://atomic14.com" rel="nofollow">https://atomic14.com</a>
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.
for <a href="https://prose.sh" rel="nofollow">https://prose.sh</a> we use <a href="https://imgs.sh" rel="nofollow">https://imgs.sh</a>
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.