Building a Photography Site with the 11ty Image Plugin
Images are one of the biggest concerns for performance on the internet. Even with the large amount of JavaScript most sites ship with, image optimization is the easiest way to increase the speed of your website. Making a photography site with performant images isn’t an easy task on your own. Luckily, 11ty has an Image plugin that makes it a bit easier.
In this chapter, we’ll review setting up a site that uses collections, dive into a complex use case for JavaScript data files to make image data generation easier, and then explore the Image plugin for setting up proper image formats and sizes for multiple styles of photo blog template, all with a focus on performance.
We’ll cover the following:
- Setting up the basic project with collections
- Writing a data file to automatically create an image array for each post
- Installing and configuring the Image plugin
- Creating a specialized template...