11ty / eleventy-img

Utility to perform build-time image transformations.
https://www.11ty.dev/docs/plugins/image/
433 stars 53 forks source link

Fix incorrectly large reported height for animated gifs #182

Closed Gyanreyer closed 5 months ago

Gyanreyer commented 1 year ago

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 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.

monochromer commented 8 months ago

Is something blocking the merge of this PR?

zachleat commented 5 months ago

Shipping with v3.1.9, thank you!

zachleat commented 5 months ago

Changed to v3.2.0