What You Actually Need Before You Start
The barrier to embedding an image gallery is lower than most people expect. You need three things: your images hosted somewhere with a direct URL, a basic HTML file, and a few lines of CSS. That's it. No JavaScript is required for a functional, good-looking gallery — though you can add it later for lightbox effects.
The most important piece is having reliable, permanent image URLs. If you host images on a service that changes or expires links, your gallery breaks silently — and you might not notice for weeks. Choose a hosting solution that gives you stable direct embed URLs from the start.
For the code examples in this guide, we'll use a simple CSS grid layout. It works in every modern browser, requires no dependencies, and is easy to customize without touching a library.
How to Host Your Images for Embedding
Before you write a single line of image gallery code, your images need to live somewhere on the web with a public, direct URL — meaning the URL ends in a file extension like .jpg, .png, or .webp. Many cloud storage services don't give you this by default; they serve a preview page instead.
Foldr's free image hosting is built specifically for direct embedding. When you upload an image, you get a permanent direct link you can drop straight into an <img> tag. No account is required on the free tier, and files up to 2GB are supported — more than enough for high-resolution gallery images.
If you're building a gallery with a consistent theme — say, a product portfolio or a photo series — organizing your images into group photo albums makes it easier to manage your URLs and share the full set with collaborators or clients alongside the embedded version.
The Core Image Gallery Code: HTML Structure
The HTML structure for a grid gallery is minimal. You wrap your images in a container div with a class like `gallery`, then place each `<img>` tag inside the container. Here's a clean starting point you can copy directly:
```html <div class="gallery"> <img src="https://your-direct-image-url-1.jpg" alt="Description of image 1"> <img src="https://your-direct-image-url-2.jpg" alt="Description of image 2"> <img src="https://your-direct-image-url-3.jpg" alt="Description of image 3"> <img src="https://your-direct-image-url-4.jpg" alt="Description of image 4"> <img src="https://your-direct-image-url-5.jpg" alt="Description of image 5"> <img src="https://your-direct-image-url-6.jpg" alt="Description of image 6"> </div> ```
Always include descriptive `alt` attributes. They matter for accessibility and for SEO — search engines use alt text to understand image content. Don't just write `alt="image1"`; describe what's actually shown.
The CSS: Making the Gallery Responsive
CSS Grid is the most straightforward way to build a responsive image gallery without media query gymnastics. The `auto-fill` and `minmax` combination lets the browser decide how many columns fit based on viewport width — no breakpoints needed.
```css .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; padding: 16px; } .gallery img { width: 100%; height: 200px; object-fit: cover; border-radius: 6px; display: block; } ```
The `object-fit: cover` rule is key. It crops images to fill their grid cell uniformly, so a mix of portrait and landscape photos still looks clean. If you need to show full images without cropping, switch to `object-fit: contain` — but be aware you'll get whitespace around non-square images.
For a masonry-style layout (Pinterest-like, variable row heights), you can swap to `columns` CSS instead of grid. It's a single-property change and works well for photography portfolios where cropping would ruin the composition.
Adding a Lightbox Without a Plugin
A lightbox lets visitors click a thumbnail to see the full-size image in an overlay. You don't need a library for a basic version. You can use the native HTML `<dialog>` element combined with a small JavaScript function — under 20 lines of code.
```html <dialog id="lightbox"> <img id="lightbox-img" src="" alt=""> <button onclick="document.getElementById('lightbox').close()">✕ Close</button> </dialog> <script> document.querySelectorAll('.gallery img').forEach(img => { img.style.cursor = 'pointer'; img.addEventListener('click', () => { const lb = document.getElementById('lightbox'); document.getElementById('lightbox-img').src = img.src; lb.showModal(); }); }); </script> ```
Style the `<dialog>` element with a dark background and centered image to get a clean modal effect. This approach works in all modern browsers and adds zero third-party dependencies to your page. If you need more advanced features like swipe gestures or keyboard navigation, that's the point where a lightweight library earns its place.
One practical note: if your gallery images are large files, the lightbox will load slowly on mobile connections. Consider hosting a full-resolution version separately and using a smaller compressed version as the gallery thumbnail — then point the lightbox `src` at the full-resolution URL.
Embedding the Gallery on Different Website Types
On a plain HTML site, paste the HTML and CSS directly into your page. Put the CSS in a `<style>` block in the `<head>` or in an external stylesheet. The gallery will render immediately — no build step required.
On site builders like Webflow, Framer, or Carrd, look for a custom code or embed block. Paste the full snippet (HTML + inline `<style>` tags) into that block. Most platforms support this even on free plans, though some restrict JavaScript — which only affects the lightbox, not the gallery itself.
For static site generators like Hugo, Jekyll, or Eleventy, you can turn this into a reusable partial or shortcode. Pass image URLs as parameters and let the template loop generate the `<img>` tags. This scales cleanly to large galleries without manual HTML editing.
On WordPress specifically, you can use the Custom HTML block in the Gutenberg editor. Paste the snippet in, preview it, and it works — no plugin needed. This is useful when you want exact control over layout that the built-in Gallery block doesn't offer.
Keeping Your Gallery Updated Without Touching the Code
One underrated problem with static galleries: updating them means editing HTML. If you add or remove photos often, that gets tedious fast. A smarter approach is to use swappable images — where you keep the same URL but replace the image file behind it.
Foldr's swappable images feature (available on Pro) lets you update the image a URL points to without changing the URL itself. That means your gallery code stays the same; you just swap the file on the backend. This is especially useful for product shots, event photos, or anything that needs periodic refreshes.
For teams managing a shared gallery, storing source images in a dedicated Foldr Space keeps everything organized in one place. Team members can upload directly to the space, and the direct embed URLs remain consistent — so the gallery on your site stays current without a developer touching the HTML.
Performance Tips for a Fast-Loading Gallery
Image galleries are one of the most common causes of slow page loads. A few targeted optimizations make a significant difference. First, compress your images before uploading. Tools like Squoosh or ImageOptim can reduce file size by 60–80% with no visible quality loss at screen resolutions.
Add `loading="lazy"` to your `<img>` tags. This tells the browser to defer loading images that aren't in the viewport, so the page loads fast even if the gallery has 30+ photos. It's a one-attribute change with meaningful impact: `<img src="..." alt="..." loading="lazy">`.
If your gallery images are all roughly the same dimensions, add explicit `width` and `height` attributes to each `<img>`. This prevents layout shift (CLS) as images load — a metric Google factors into search rankings. You don't need exact pixel values; just the aspect ratio in consistent units works.
Finally, consider serving images in WebP format. It offers better compression than JPEG or PNG for most photos. When you upload to Foldr, you can upload WebP files directly and use those URLs in your gallery — the format is supported by all modern browsers.
Frequently Asked Questions
Do I need JavaScript to embed an image gallery on my website?
No. A functional, responsive image gallery requires only HTML and CSS. JavaScript is only needed if you want interactive features like a lightbox overlay or image carousel. The CSS Grid approach described in this guide works in all modern browsers with zero JavaScript.
Why are my embedded images not showing up on my website?
The most common cause is using a URL that points to an image preview page rather than the image file itself. Your `src` URL must point directly to the image file and typically ends in .jpg, .png, .webp, or similar. Check that the URL opens just the image (no surrounding webpage) when pasted into a browser.
How do I make my image gallery responsive on mobile?
Use `display: grid` with `grid-template-columns: repeat(auto-fill, minmax(220px, 1fr))`. This automatically adjusts column count based on screen width — no media queries needed. Adjust the `220px` value to control the minimum column width and effectively how many columns appear on mobile.
Can I embed a gallery on a site builder like Webflow or Carrd?
Yes. Most site builders include a custom HTML or embed block where you can paste your gallery code. Include your CSS in a `<style>` tag within the same block. Note that some platforms restrict custom JavaScript on free plans, which would affect a lightbox but not the gallery grid itself.
How do I update gallery images without editing my HTML every time?
Use a hosting service that supports swappable image URLs — where you replace the image file but keep the same URL. This way, your HTML stays unchanged and the gallery automatically reflects the updated image. Foldr's Pro plan includes this feature specifically for this use case.
Is there a limit to how many images I can include in a gallery?
There's no hard HTML limit. In practice, performance becomes the bottleneck — loading 50+ full-resolution images at once will slow any page significantly. Use `loading="lazy"` on your img tags to defer off-screen images, and compress files before uploading to keep load times reasonable.
Pick one page on your site that would benefit from a gallery — a portfolio section, a product page, an event recap — and implement the CSS Grid version described above. It takes under 15 minutes from first upload to live embed. Once it's working, you can layer in the lightbox and lazy loading improvements at your own pace.