search

GoogleChromeLabs / squoosh

Make images smaller using best-in-class codecs, right in the browser.
https://squoosh.app
Apache License 2.0
22.03k stars 1.56k forks source link

Add fit method that adds empty space without sacrificing aspect ratio #822

Open villesau opened 4 years ago

villesau commented 4 years ago

Is your feature request related to a problem? Please describe. let's say you have 1000px wide and 500px tall image. Now i'd like to resize it to 250x250px. Currently I have two options: To squeeze it horizontally, or cut it horizontally. Both are pretty suboptimal.

Describe the solution you'd like What i'd like is to keep the aspect ration of the original image so that it becomes 250x125.5px. But I'd like to add 62.75px both below and above the image so that it's 250px tall resulting 250x250px image. This is important if you want to resize logos to fit certain places that only allow squares.

jakearchibald commented 4 years ago

What colour would the new pixels be? Transparent?

villesau commented 4 years ago

@jakearchibald I imagined this with transparent background, but it could also stretch the color from outermost pixels. e.g if the topmost pixels are white, remaining space could be filled with white. If the topmost pixels are transparent, remaining pixels would be transparent. It would probably make sense to pick the color from corner pixels since they are least likely to have the actual content I believe.

So I think there could be at least few options:

  1. fill remaining space always with transparent
  2. pick the color intelligently from outermost (corner) pixels
  3. try to understand the dominating color (probably background) from the outermost row and use that
  4. let the user choose color for the fullfillment
  5. just stretch what ever you have in the outermost pixels. I believe this is very bad idea and would result very quirky images.

If I were to choose, I'd go with the option 2. Option 4 would be the safest, but more cumbersome.

jakearchibald commented 4 years ago

Would you be happy with 1 if there was another processor that allowed you to set the background with any value? As that is useful in other cases too.

villesau commented 4 years ago

@jakearchibald for me personally, option 1 would be completely fine since logos often have transparent background. And if there were a way to set background for the picture, then it would achieve the desired flexibility as well which is good.

On the other hand, I got excited of Squoosh because of the simplicity: It does very well almost everything one needs for simple resizing and conversion tasks and nothing more. So I'd be careful regarding potential feature creep. Though, I still feel that setting background color fits into feature set very well! :)

villesau commented 4 years ago

BTW, might be worth to consider removing the squeezing resize altogether in favour of aspect ratio keeping one. I'm not sure if there are any real use cases for functionality like that? If so, you probably really know what you are doing and use some more powerful image manipulation software anyways. Otherwise it's most likely mistake.

Cropping resize is more understandable. Many pics have space around that is OK to crop off.

jakearchibald commented 4 years ago

I don't think resizing without aspect ratio adds much complexity. It certainly doesn't add code. Resizing without aspect ratio is handy if the image you're resizing is anamorphic, such as a DVD video frame.

We might drop the "cover" option in favour of a proper cropping tool.