Image galleries

Make lots of photos look good instead of cluttered.

What does it look like?

<ul class="image-gallery">
	<li><img alt="This is a placeholder image" src="https://images.unsplash.com/photo-1666090314187-1ca4b41249c8" /></li>
	<li><img alt="This is a placeholder image" src="https://images.unsplash.com/photo-1666090377623-7e1ead5dca7f" /></li>
	<li><img alt="This is a placeholder image" src="https://images.unsplash.com/photo-1666090324714-02fa5229c779" /></li>
	<li><img alt="This is a placeholder image" src="https://images.unsplash.com/photo-1646308070521-6a837a3a543e" /></li>
	<li><img alt="This is a placeholder image" src="https://images.unsplash.com/photo-1646308070503-a9acfebaac77" /></li>
	<li><img alt="This is a placeholder image" src="https://images.unsplash.com/photo-1646308070559-f69cd2a69e5f" /></li>
</ul>

How does it work?

Copy the code and replace the images with your gallery photos. Make sure to update the alt text on each of your photos, and make sure it's something descriptive.

You can use photos of any size but avoid using images that show text or data, as some images will stretch and crop to fit the space available, leaving the information cut off.

Compress your images before uploading

Lots of images on the page will slow it down. Make sure each image is a really low file size - under 100kb, if not smaller. Under 50kb is even better! You don't want to slow your site down to the point where people aren't bothering to stick around and wait.