When you run a static blog on the Hugo + Vercel combo, posting something photo-heavy — a travel log or a restaurant review, say — brings up one nagging worry. "Is my Git repository going to balloon in size?" and "Am I going to blow through Vercel's storage limits or network traffic caps?"

Here are three image-management tips that let you keep loading speeds fast and protect your Vercel quota, instead of uploading raw smartphone photos straight off the camera (5MB–10MB each).


1. Use Cloudinary's Free Image CDN (Most Recommended 👍)

This is the most common way to separate your blog hosting from your photo hosting.

  • Cloudinary free plan: provides roughly 25GB of storage and bandwidth per month
  • How it works: upload your image to Cloudinary, then embed the generated CDN URL (e.g., https://res.cloudinary.com/.../travel.jpg) in your post
  • Benefits: consumes 0 bytes of your Git repo and Vercel quota. Images load dramatically faster thanks to Cloudinary's global CDN

2. The GitHub Issues Image Upload Trick

This is a cost-free way to handle image hosting quickly, entirely within GitHub, without signing up for a separate image CDN service.

📌 How to upload images via a GitHub issue:
1. Go to your GitHub repository's Issues tab and click New Issue
2. Drag and drop a photo into the comment box, and GitHub automatically generates a CDN URL like https://user-images.githubusercontent.com/...
3. Copy that generated URL into your blog post, then just close the issue window without submitting it

3. Resize Images, Convert to WebP, and Store Them in static/

If you're not using an external CDN and instead uploading photos directly to the project's own static/images/ folder, you absolutely must put them on a size diet first.

🚨 Never upload originals as-is: shrink 4K/8K camera-original photos down to a width of roughly 1200px–1400px, convert them to .webp or a compressed .jpg, and get each one down to 100KB–300KB or less.
  • Compress with TinyPNG, or with Mac's Preview app / ImageOptim
  • Example file path: static/images/travel/singapore-01.webp
  • Tag to use in your post: <img src="/images/travel/singapore-01.webp" alt="Travel photo">

4. Conclusion

For a long travel post with a generous 10+ photos, the Cloudinary or GitHub CDN approach is the safest bet. For posts with just a small handful of images — 3 or 4 or fewer — I'd recommend converting to WebP and placing them in static/.

Put together a smart image-hosting strategy and you'll end up with a fast-loading, high-quality tech or travel blog!