Optimized image files #37
Closed
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
Converted image files to avif, at a 1100x1100 max size via imagemagik using: mogrify -resize '1100x1100>' -format avif -quality 60 * Retained the originals, moving them to a different folder. Updated references to these images from the portfolio entries. Reduces main page load from 103MB to 6.4MB. AVIF chose due to its wide browser support, with very good quality at smaller screen sizes.
Merged
Contributor
Author
|
Closing as #38 is a way better version of this. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Hello,
Thanks for the great site, I often find it very helpful!
One thing I noticed, was that the site seemed very heavy and slow to load.
Looking at the network info via devtools, I saw that it was loading in 103MB for the main page showing all spools, which was mainly due to there being a lot of relatively large images. That's pretty massive for a web page.
This PR converts image files to AVIF at a 1100x1100 max size via imagemagik using:
For single images, this can also be done via something like squoosh without needing to use the CLI.
I retained the originals, moving them to an
originalsfolder.I updated references to these optimized images from the portfolio entries.
I chose AVIF due to its wide browser support, with very good quality to file size ratio.
From my testing, this PR reduces the main page load from 103MB to 6.4MB with little impact to perceived quality.
Even 6.4MB is quite a lot. I did attempt to add browser-native lazy image loading to improve this further, but it doesn't work too well with the masonry layout. Could be done though, just with more work by pre-computing image aspect ratios or by using a fixed aspect ratio for all images. Though, I didn't go down these roads to avoid increasing the scope of this PR.
I appreciate you didn't ask for this optimisation/change, so feel free to reject this if you don't want to include these changes for any reason, I'd respect that.