How to Add an Image Gallery to Your Website

A gallery has two parts: a grid of thumbnails and a lightbox that opens the full image on click. WordPress has Expand on click, Wix Pro Gallery has expand mode, and Squarespace grid galleries have a Lightbox toggle. In plain HTML, a CSS grid plus the native dialog element covers both with very little code.

Image sizes that keep a gallery fast
Use	Width to export	Format
Grid thumbnail	About 2x its displayed width (e.g. 600 px for a 300 px tile)	WebP or AVIF
Lightbox full view	1600 to 2400 px on the long edge	WebP or AVIF, JPEG fallback
Originals	Keep offline	Never upload 6000 px camera files

Updated October 28, 2026

Galleries are where sites get slow. Twenty unoptimised camera photos can weigh more than the rest of the site combined. Resize before upload, let the grid load small versions, and load the large file only when someone opens it.

Add an image gallery on We.Inc, WordPress, Wix, Squarespace or plain HTML

We.Inc

Upload or link your photos in the AI chat and describe the layout, for example 'add a 3-column gallery of these project photos that opens each one full size on click'.
Ask for alt text that describes each photo.
Click through the lightbox in preview on desktop and phone.
Publish.

Galleries are built by the AI in your page code rather than through Add-ons, which uses credits on a paid plan.

WordPress

Add a Gallery block and upload or select images from the Media Library.
Select each image (or set it globally in the Styles > Blocks > Image settings) and turn on Expand on click.
Remove any image links, which stop Expand on click from working.
Set the column count and crop option, then publish.

Wix

Add a Pro Gallery from Add Elements and upload your images.
Select the gallery, open Settings and go to the Settings tab.
Under 'When clicking on an item', choose the expand option.
In the Design tab, open Expand Mode and click Customize Expand Mode to set what info shows.

Squarespace

Add a Gallery section to the page and upload images.
Click the section's pencil icon and set the gallery type to Grid: Simple, Grid: Strip or Grid: Masonry.
Switch the Lightbox toggle on.
Set the lightbox background colour in Site styles > Colors under Galleries.

Slideshow gallery types do not support the lightbox.

Plain HTML

Lay out thumbnail buttons in a CSS grid.
Store each large image's URL in a data attribute.
On click, set the dialog's image source and call showModal().

Lightbox with the dialog element

Grid plus a native lightbox

Copying the thumbnail's alt text to the large image keeps the description available to screen readers in the open view.

<div class="grid">
  <button data-full="/img/room-1-1600.webp"><img src="/img/room-1-600.webp" alt="Living room with oak floor" width="300" height="300" loading="lazy"></button>
  <button data-full="/img/room-2-1600.webp"><img src="/img/room-2-600.webp" alt="Kitchen island in white marble" width="300" height="300" loading="lazy"></button>
</div>
<dialog id="lb"><img alt=""><form method="dialog"><button>Close</button></form></dialog>
<style>.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}.grid button{padding:0;border:0}.grid img,#lb img{width:100%;height:auto}#lb{max-width:90vw}</style>
<script>
  const lb = document.getElementById("lb"), big = lb.querySelector("img");
  document.querySelectorAll(".grid button").forEach(b => b.onclick = () => {
    big.src = b.dataset.full; big.alt = b.querySelector("img").alt; lb.showModal();
  });
</script>

Sources

Every gallery source here was checked on October 28, 2026.

WordPress developer docs for the Image block lightbox setting: https://developer.wordpress.org/themes/global-settings-and-styles/settings/lightbox/
Wix Pro Gallery click behaviour options: https://support.wix.com/en/article/wix-pro-gallery-choosing-what-happens-when-a-gallery-item-is-clicked
Wix Pro Gallery expand mode customisation: https://support.wix.com/en/article/wix-pro-gallery-customizing-the-expand-mode-for-your-gallery
Squarespace gallery sections and the Lightbox toggle: https://support.squarespace.com/hc/en-us/articles/360035636332-Gallery-sections
Squarespace lightbox behaviour with image links: https://support.squarespace.com/hc/en-us/articles/205812708-Setting-images-to-open-in-a-Lightbox

Grid, masonry or slideshow

A uniform grid with cropped squares looks tidy and suits products. Masonry keeps each photo's shape and suits portfolios with mixed portrait and landscape shots. Slideshows hide most images behind arrows, and Squarespace's slideshow layouts do not support its lightbox at all.

Our guides to website image sizes and optimising images for the web go deeper on export settings.

How it works

Pick and order the images; ten strong photos beat forty similar ones.
Resize and compress them for the web.
Write alt text for each image describing what it shows.
Add the gallery with a grid layout and turn on the lightbox.
Check on a phone that swiping and closing work.

Tips

Add loading="lazy" to thumbnails below the first screen so the page shows quickly.
Set width and height attributes on every image so the grid does not jump while loading.
On Squarespace, images with clickthrough links will open the link instead of the lightbox, so remove the links if you want the lightbox.
Lightbox captions do not show in Squarespace's lightbox view; put essential context in the grid caption or page text.

Frequently asked questions

What is a lightbox gallery?

A grid of thumbnails where clicking one opens a larger version over a dimmed page, usually with next and previous controls and a close button.

Do I need a plugin for a WordPress lightbox?

No, since WordPress 6.4 the Image block has an Expand on click option. Plugins add extras such as captions in the overlay, zoom and slideshow controls.

How do I make an image gallery in HTML without a library?

Lay out thumbnails with CSS grid, wrap each in a button, and on click put the large image into a <dialog> opened with showModal(). Escape closes it automatically.

Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.