search

sanity-io / image-url

Tools to generate image urls from Sanity content
https://www.sanity.io/docs/presenting-images#mY9Be3Ph
MIT License
67 stars 23 forks source link

`SVG` images: using `dpr` alongside `rect` from sanity schema returns incorrectly cropped image #60

Open chandlervdw opened 1 year ago

chandlervdw commented 1 year ago

SVGs Only: dpr and rect produce incorrectly cropped image

This may be a duplicate of #32 but I have found this when trying to transform SVGs, which I understand are untouched unless exported as a different format. I'm outputting the SVG as "webp" via .format('webp').

✅ Original Image

You can test this with any SVG using the query parameters in the URL but here is an SVG that is 608 wide and 320 wide:

https://cdn.sanity.io/images/97bpcflt/production/f93de94dc1033f751587b1224f492fec3ff2780d-608x320.svg?&w=608&fm=webp

image

✅ Apply rect

If I apply rect, the image is cropped. Great! Below, I've added &rect=0,0,608,320 that essentially does nothing.

https://cdn.sanity.io/images/97bpcflt/production/f93de94dc1033f751587b1224f492fec3ff2780d-608x320.svg?&w=608&fm=webp&rect=0,0,608,320

low-res useless crop

To ensure that cropping is actually working, let's update the rect parameter to actually crop the image. Below, I've moved the starting point of the crop to 200 pixels in from the left and the top (rect=200,200,408,120). This isn't necessary, but to keep the same size ratio, I've also subtracted 200 pixels from the width property (w=408).

https://cdn.sanity.io/images/97bpcflt/production/f93de94dc1033f751587b1224f492fec3ff2780d-608x320.svg?&w=408&fm=webp&rect=200,200,408,120

low-res crop

✅ Remove rect, apply dpr

If I remove the rect parameter and append &dpr=2 to the end, I get a scaled version of the original image. Fantastic!

https://cdn.sanity.io/images/97bpcflt/production/f93de94dc1033f751587b1224f492fec3ff2780d-608x320.svg?&w=608&fm=webp&dpr=2

scaled image

🚫 Apply dpr and rect

If I apply any dpr alongside rect the image is jacked up. Below, I've added &dpr=2&rect=0,0,608,320 that should increase the resolution of the image but essentially do no cropping. Alas, it incorrectly crops the image. Ratfarts!

https://cdn.sanity.io/images/97bpcflt/production/f93de94dc1033f751587b1224f492fec3ff2780d-608x320.svg?&w=608&fm=webp&dpr=2&rect=0,0,608,320

high-res broken useless crop

For sanity's sake (pun intended), let's update the rect and width parameters to actually crop the image like we did before (rect=200,200,408,120, w=408).

https://cdn.sanity.io/images/97bpcflt/production/f93de94dc1033f751587b1224f492fec3ff2780d-608x320.svg?&w=408&fm=webp&dpr=2&rect=200,200,408,120

high-res broken crop

This issue does not present itself for png images. I only tested against svg but I suspect it may be present for gif, as well.