Image Gallery Challenge

Open the lesson folder

Overview

This lesson has a basic project created to test out your skills. If you already have a project you can apply these techniques to, then that is great. Or you may have an upcoming project where you can try things out.

The starter folder contains the following:

This folder has just one image to get you going, and you will need to download some more to use for this project. Somewhere like Pixabay, or Unsplash is ideal.

The index.html contains <img> elements to use for your images:

<section>
  <img src="images/camp.jpg" alt="" />
  <img src="images/camp.jpg" alt="" />
  <img src="images/camp.jpg" alt="" />
  <img src="images/camp.jpg" alt="" />
  <img src="images/camp.jpg" alt="" />
  <img src="images/camp.jpg" alt="" />
  <img src="images/camp.jpg" alt="" />
  <img src="images/camp.jpg" alt="" />
  <img src="images/camp.jpg" alt="" />
</section>

And some styling to place the images into a grid:

section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

img {
  width: 100%;
}

The challenge

What I would like you to do is to download the images for this gallery that you would like to use. You can then optimize and try out the techniques you have learned to efficiently load them up in the browser.

There is no right way of doing this, the idea is just to try things out, optimise, reduce file sizes and generally make loading the images more efficient.

You could do it in batches, apply the changes, record your results, and repeat until you are happy with the results.

Good luck!