I'm working on a site which uses the eleventy-image webc component and ran into an issue where animated gifs were getting ridiculously high height attributes set on them which would break the page.
It turns out this is because the base height value 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 pageHeight value for animated formats which actually reflects the dimensions that the image will be displayed at.
I added a check to Image.getFullStats to swap in this pageHeight value as the official height of the image when present, and that seems to have done the trick.
The problem
I'm working on a site which uses the
eleventy-image
webc component and ran into an issue where animated gifs were getting ridiculously highheight
attributes set on them which would break the page.It turns out this is because the base
height
value 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
pageHeight
value for animated formats which actually reflects the dimensions that the image will be displayed at.I added a check to
Image.getFullStats
to swap in thispageHeight
value as the official height of the image when present, and that seems to have done the trick.