← Back to the blog

Adding images and video for free

Two ways to add media - commit small images to the repo, and host video on Cloudinary's free tier.

  • #guide

Text lives in the repo. Media has two good homes depending on size.

Small images → the repo

For screenshots, diagrams, and photos, just put the file in public/images/ and commit it. Reference it with a leading slash:

![My diagram](/images/architecture.png)

Simple, free, and version-controlled. Keep files reasonably small (a few hundred KB) so the repo stays light.

Video (and large images) → Cloudinary

Git is a bad place for video. Instead, use Cloudinary - the free tier gives you plenty of storage and, crucially, no bandwidth charges.

  1. Make a free account at cloudinary.com.
  2. In the Media Library, drag your video in to upload it.
  3. Copy its delivery URL (it looks like https://res.cloudinary.com/your-cloud/video/upload/v123/clip.mp4).
  4. Drop it into a post with an HTML <video> tag:
<video controls playsinline preload="metadata"
  src="https://res.cloudinary.com/your-cloud/video/upload/clip.mp4"></video>

Or embed from YouTube / Vimeo

If the video is already online, embedding is the least work:

<iframe width="560" height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="YouTube video" frameborder="0" allowfullscreen></iframe>

All three approaches cost nothing and keep your build fast.