Fix incorrectly large reported height for animated gifs #182
Conversation
This file contains 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
lovell
approved these changes
Jul 25, 2023
| @@ -415,6 +415,15 @@ class Image { | |||
| metadata.height = width; | |||
| } | |||
|
|
|||
| if(metadata.pageHeight) { | |||
| // When the { animated: true } option is provided to sharp, animated | |||
| // image formats like gifs or webp will have an inaccurate `height` value | |||
There was a problem hiding this comment.
Multi-page/frame images are processed by libvips as a "toilet roll" of images, which is why the height is the total of all frames, and therefore the page height is also made available. Hope this helps explain the situation.
|
Is something blocking the merge of this PR? |
|
Shipping with v3.1.9, thank you! |
|
Changed to v3.2.0 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
The problem
I'm working on a site which uses the
eleventy-imagewebc component and ran into an issue where animated gifs were getting ridiculously highheightattributes set on them which would break the page.It turns out this is because the base
heightvalue that sharp returns in its metadata for animated gifs is actually the sum of the height of every frame, meaning if you have a 720x720 animated gif with 100 frames in it, the reported height will come back as 72,000px. That doesn't seem helpful!The fix
Digging into sharp's docs, the metadata will include an additional
pageHeightvalue for animated formats which actually reflects the dimensions that the image will be displayed at.I added a check to
Image.getFullStatsto swap in thispageHeightvalue as the official height of the image when present, and that seems to have done the trick.