Optimized image files v2 #38
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This updates the portfolio partial to use thuamnail images which are generated via Hugo's build system so that optimized images are used instead. Reduces main page load from 103MB to 5.28MB. Does not need manually handled/optimized images.
Closed
Contributor
|
Cannot upvote this enough. Really cool, @ssddanbrown |
Owner
|
Indeed, this is very cool. My bad that I didin't care about the image sizes and I really appreciate your work on this. Merging. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
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.
This is a follow-up and improvement to my PR yesterday in #37. See that for context.
Instead of manually needing image conversion, with loads of extra images in the repo, this auto-generates optimized webp images via Hugo.
This does mean that initial hugo builds can take a while extra, but rendered images are cached by Hugo so that typically only takes time during the first run, unless extra images have been added since.
This also sets image dimensions (auto-extracted from the hugo build process) on the images on the portfolio templates, so their dimension/aspect ratio are known to the browser, allowing browser-native lazy loading to be applied without messing up the masonry layout.
Reduces main page load from 103MB to 5.28MB, potentially less if the browser uses lazy loading.