feat: add 11ty image plugin for image optimization #79
+1,912
−577
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What I did
eleventy-img
plugin which helps optimize image loading by providing correct height and width for images and enables defaults ofloading="lazy"
rhb-img
component that uses the webc based implementation of theeleventy-img
plugin. Modified to always output the same format as the extension of the image. As well as provide adata-attr
to track the original src to help link the hashed image.public
folder in favor of justassets
. This helps align the webc expectation of a local path in thesrc
before transformation instead of a standard img tags end source of/assets/*
alt
attributes on images withalt="[ERROR: MISSING ALT TAG]"
these will need resolved before merging see Missing alt tags #78assets/posters
as they are not standard images.rollup.config
to match pathing changesfont-display: swap;
to font css as a Lighthouse optimization.Closes #38
TODO:
alt
tags with proper descriptive textTesting instructions