how do i add a gallery that does not slow my site down

design · 2026-10-09 · 3 min

a gallery is a grid of images, and the technical version is a css grid with a lightbox on click. the version that matters is lighter: images exported at the size they are displayed, in a modern format, with width and height written in the html so the page does not jump while they load.

three ways, from least to most control

on wordpress the gallery block does the job: choose the columns, link each image to the media file, and most themes include a lightbox. wix has a pro gallery with layouts and hover effects, squarespace has gallery sections. if the site is hand-coded, a grid of figure elements plus a small lightbox script is enough, and it will weigh less than any builder's version.

the part that decides if it is fast

export every image at the largest size it will be shown, then half that for retina screens and no more. a photo straight from a phone is four to six megabytes; the same photo at 1600 pixels wide in webp is usually under 300 kilobytes. that difference is the difference between a gallery that opens and one that makes people leave. add loading lazy to everything below the first screen, and write alt text that describes the photo, not the file name.

what people get wrong

carousels that move on their own, so the visitor is reading image three while trying to tap image one. twenty photos where four good ones would sell better. and no compression step at all, because the upload button accepted the file and the page looked fine on a laptop on fibre. check the gallery on a phone, on mobile data, with the cache cleared.

faq

how many photos should a gallery have?

four to twelve. enough to show range, few enough that each one gets looked at. if you have forty, split them into categories or put the rest on a page for people who already decided.

do i need a lightbox?

it helps when the images carry detail, like interiors or products. for a portfolio where the grid is already large, clicking can simply open the full image in the same tab. test it with a thumb, not a mouse.

what about image rights?

use your own photos, or ones with a written licence that covers commercial use. a photo taken from google images is a bill waiting to arrive, and the request usually comes years later.