Better Leverage 11ty Image Plugin

[ninjulia]

Issue

• Currently set up entirely in eleventy.js file
• Only supporting images for Design Highlights
• Design Highlights are failing the Lighthouse test anyway #43

Possible Solutions

• Use new WEBC method
• Do not create new image sets on every build
• Refactor code from eleventy.js into a separate file
• Leverage <eleventy-image> WebC component in all templates
• Export large, high-res images from native files and save in new top level folder

[ninjulia]

JUST RELEASED: Eleventy Image v4.0.0

• Also handle dribbble images (check imported image quality)

[ninjulia]

Resource: Super fast responsive image loading in Eleventy

[ninjulia]

Note: 11ty Image v4.0.0 works with 11ty3.0 (currently still in alpha). Here's an update guide: upgrading to 11ty 3.0