How to Create an Image Gallery With HTML Source: Hubspot

Now, it’s time to add the images. First, upload your images to your website or CMS, or if you’re building your website locally, place the images in the same folder as your HTML file.

Using the <img> tag, I’ll add each of my images in the order I want them presented on the page. The src is the file pathway of the image, either on your website or locally. I’ll then add meaningful alt text that describes the images.

You can copy the code below to help you get started.

Here’s what the code looks like with my friend’s photos from his trip. Notice how the images are on the page, but I wouldn’t call it a gallery just yet. The images are all there, but they’re so large that you can’t see them in full, and they’re all stacked on top of each other.

So now, it’s time to turn this into a proper gallery. We’ll add some CSS and apply it to gallery-container. The line display: grid transforms the images into a gallery.

I want the photos to be in columns, so I’ve included the grid-template-columns rule. We want the grid to repeat in one line and to fit the size of the screen. Besides that, I’ve added a 10-pixel gap between images. You can see the CSS below.

Let’s see how the images look with CSS:

Still a bit wonky. The photos are incredibly cropped! Luckily, some extra CSS specifying the width and height of the images should do the trick.

Now, we have a gallery!

Creating No-Code Galleries

You don’t need to know how to code to build image galleries. Your content management system should include drag-and-drop elements. All you have to do is upload your photos and click away.

Tips for Making a Gallery

Before you start building beautiful image galleries, I wanted to share three tips that you should keep in mind.

1. Prioritize responsive design.

When creating your image gallery, focus on making it responsive. I found that utilizing CSS grid layouts is the first step. From there, set your image widths in percentages rather than fixed pixels. This allows your images to scale proportionately based on screen size.

Responsive design enhances the user experience, allowing visitors to enjoy your images whether they’re viewing them on a large desktop monitor or a smartphone screen.

2. Optimize image loading.

When uploading images online, image size matters. If your images are 5000 pixels wide, they’ll take a long time to load, and you’ll likely need to compress them in your style sheet. Instead, crop or compress your images before you build your gallery.

Now, users won’t need to wait for giant image files to load. This not only benefits users but also positively impacts your site’s performance. Fast load times are rewarded by Google.

Additionally, utilizing lazy loading can be a game-changer. It delays the loading of images until they are about to come into the user’s viewport, improving page load times.

3. Add captivating descriptions.

A picture is worth a thousand words, but it doesn’t always tell the whole story. Incorporate compelling and meaningful descriptions for each image. I noticed that this adds a personal touch and engages visitors. It’s an opportunity to tell a story, share insights, or evoke emotions.

Curating Your Gallery

Whether you’re a photographer looking to showcase your portfolio or an artist sharing visual creations, an image gallery offers a dynamic canvas for your work. Start with the tips above, and may your foray into building image galleries be both enjoyable and successful.