Let’s face it—handling media files in static site projects can get messy if you don’t have a plan. You start out with one or two images, and before you know it, there’s a tangle of folders, duplicate files, and confusing names like final-final-logo2.png. Sound familiar?
Static site generators (SSGs) like Next.js, Gatsby, Nuxt, and Astro are great for building fast, lightweight websites. But they don’t always come with built-in media management tools. That part’s up to you. And if you skip it, you’re likely to run into headaches later.
This post walks you through some simple but powerful ways to manage media better in static site projects. Whether you’re building a blog, a landing page, or a full business site, these tips will save you time and frustration.
1. Organize Media from Day One
Before you upload anything, take a minute to plan your folder structure. Trust us—it makes a big difference. Put all your images, videos, and other media into clearly named folders right from the start. You could organize by file type (/images, /audio, /docs) or by page or section (/about, /products, /blog-posts). Whatever works best for your project.
Stick to a consistent naming system. Avoid generic names like image1.png or screenshot-new-final.png. Go for something meaningful and simple, like team-photo-2025.jpg or product-hero-banner.webp.
Also, think about version control. Repositories like Git aren’t ideal for storing large media files. If you’re dealing with a lot of images or videos, consider keeping them in a cloud storage service and referencing them with URLs.
You can also use a headless CMS like BCMS, which gives you folder support and a clean media manager that’s easy to use with static sites. It lets you preview files, organize folders, and handle images without jumping through hoops.
2. Optimize Images Before You Upload
Uploading raw image files straight from your camera or design tool? Not a great idea. These files are often way too large and can slow down your site.
Before you upload anything, compress it. Tools like TinyPNG, Squoosh, or ImageOptim can reduce file sizes without sacrificing quality. It takes seconds and makes a big difference in performance.
Use the right format for the job. JPGs work best for photos. PNGs are great for graphics with transparency. WebP is a modern format that offers smaller file sizes and good quality—many static site generators support it out of the box.
Also, set a standard size for your images. Don’t upload a 3000px-wide image if you only need it to display at 600px. You can always keep a full-size version somewhere else if needed.
3. Use External Media Services When It Makes Sense
For larger or dynamic sites, using external media services might be a better option than storing everything locally. Services like Cloudinary or Imgix let you store media in the cloud and deliver it through a content delivery network (CDN). They also offer features like automatic resizing, cropping, and lazy loading.
CDNs help your images load faster by serving them from locations closer to your users. This is especially helpful if your audience is spread out across different countries or regions.
Most static site generators make it easy to integrate with these services. You just need to plug in the URLs and tweak a few settings.
4. Keep Your File Names Clean and Consistent
Clean file names make your project easier to manage—and they help with SEO, too. Search engines look at image file names, so naming your image blue-sneakers-side-view.jpg is more useful than DSC100473.jpg.
Use hyphens between words, avoid special characters, and keep it simple. Stick with lowercase to prevent issues on case-sensitive systems.
Also, use descriptive alt text. This improves accessibility and helps your images appear in search results. Most static site generators let you include alt text in markdown or image components.
5. Don’t Rely on Inline Media Management
Dragging and dropping images into markdown or embedding external image links might seem quick, but it creates clutter and breaks easily.
Always store your media in dedicated folders and reference them properly. Use relative paths if the media is part of your project repo. If you’re using a CMS or an external service, use proper URLs with backup options in case links break.
Avoid embedding large images directly into HTML or markdown as base64 strings. It increases file size and hurts performance. Stick to clean paths and let your build process handle the rest.
6. Automate Media Handling with Build Tools
One of the best parts of using a static site generator is that you can automate image handling during the build process. Tools like gatsby-plugin-image, next/image, and astro: assets let you optimize and resize images automatically.
You can generate responsive image sizes, enable lazy loading, and even convert formats—all without lifting a finger.
Set up build scripts to compress and move media as part of your CI/CD pipeline. This keeps your media optimized and organized with every update.
7. Audit Your Media Regularly
Over time, projects fill up with old or unused media files. These files slow down your build and take up space for no reason.
Every few months, take time to audit your media. Look for files that aren’t linked anywhere or haven’t been used in recent updates. You can use tools or simple scripts to detect and delete them.
This habit keeps your project lightweight, easier to maintain, and faster to deploy. Plus, it forces you to stay organized—something your future self will thank you for.
If you’re working with static site generators, managing media the right way isn’t just a bonus—it’s a must. Keeping your files organized, optimized, and easy to find means your project runs better and loads faster. It also makes your life easier, especially when you come back to update the site weeks or months later.
Start with clear folder structures and clean file names. Use the right tools to compress and deliver media efficiently. And don’t forget to clean up every once in a while.
A little effort goes a long way when it comes to media management. So if your /images folder is a mess right now, take 10 minutes and sort it out—you won’t regret it.
