Ability to upload multiple image files

[gavinmassey77]

This is a fantastic tool, however as a feature request for v1.* I would hope that it was possible to upload multiple images based on a set of previously defined variables.

I would suggest the UI would work similar to what you have defined however once you have set the encoding & quality settings there would be an option to drag additional images into page and have them all compressed and available for download.

Without this the tool takes too long to compress multiple images. (we certainly would want to re-use the same options thousands of times over and uploading them one at a time is not feasible)

[kosamari]

Thanks for the suggestion @mortalgav.
Yes, batch process is something we've been discussing and something we'll definitely consider for v2.

Would be great to get feedback on usecase so we can design appropriate interaction... how would you imagine using Squoosh in your workflow? Would you use it for your website/app building or something else?? Any feedback welcome :)

[merfire]

Hi @kosamari, really great application and presentation 🥇

It would be really great if we could set compression settings and drag multiple images for optimization.
For example jpeg.io but with custom compression settings. Because jpeg.io doesn't have custom settings I sometimes have to use jpeg-optimizer which is great when I find compression level I like, but it is a pain when you have multiple images because you have to change settings for every new image you want to optimize.

I would definitely use squoosh in my workflow when building websites/apps, the side by side comparison of images is extremely useful and better then anything I have used so far.

[gavinmassey77]

I agree with merfire - an better version of the 2 links above would be quite suitable.

EG: have the ability to:

• Have the ability to upload multiple files
• Define the optimisation settings of the files (this could be done using the existing UI eg - to optimise the first uploaded image in the batch)
• Ability to start the optimisation process.
• Ability to download the compressed files.

AS A USER with multiple images of a similar size, quality and format (eg a picture album)
I WANT TO set compression levels using one image as a test-case, then have all uploaded images compressed using the same settings
SO THAT I only need to define the compression settings once and not for each image.

[jakearchibald]

This seems reasonable, and not hard from a code perspective. As always, the hard part is UI. We'll throw around some ideas.

[dartrax]

Would be great to get feedback on usecase so we can design appropriate interaction... how would you imagine using Squoosh in your workflow? Would you use it for your website/app building or something else?? Any feedback welcome :)

I'm looking for an image compressor for our company's internal knowledge wiki.
Our employees mainly have digicam or smartphone photos that often do not need that big resolution that would waste our server's storage. They are encouraged to compress the pictures before uploading, and squoosh makes a very good job showing them what setting will have what impact to photo quality and file size, while needing no installation on the companys PCs.
I would recommend squoosh if it had the ability to compress a bunch of pictures at once, but in the meantime I have to look for another tool to recommend.

[kosamari]

Tagged for V2. UX study & planning needed.

[marvinpoo]

Thanks for the suggestion @mortalgav.
Yes, batch process is something we've been discussing and something we'll definitely consider for v2.

Would be great to get feedback on usecase so we can design appropriate interaction... how would you imagine using Squoosh in your workflow? Would you use it for your website/app building or something else?? Any feedback welcome :)

Over here, we use it to optimize a whole set of photos for our estates photos before uploading and spreading them out on the web. Our assistants love the feature but it consumes a lot of time if you try to reduce the size for 20, 30 or even 40 images.

[ilikescience]

@kosamari @jakearchibald this is a feature I'd love to have. Any way I can help out with the UI/UX?

[ICPDeutschland]

Love the tool, but if you want to optimize all pictures of a website that has grown for some years it is not really practicable.

I can easily download an entire picture folder with 700 pics via FTP, but then I have to save every single picture to optimize it. (Would take days I guess).

So please add a batch feature that opens one picture after the other, optimizes it and saves it to another folder - or even overwrite the original file...

That would be really great!

Best regards
Tom

[ZeeCoder]

I frequently get batches of design related images at my work that are not optimised.
Would be great if I could easily drag and drop the whole thing as is.

[surma]

Fwiw, for batch jobs, you can always use squoosh to figure out which codec to use and then use one of the many existing CLIs like ImageMagicks convert until we ship something in squoosh.

[ragavanrajan]

Hi Guys, Any idea when can we expect this feature live please.

[elaijuh]

It would be awesome if API could be provided as a service

[jakearchibald]

Hi Guys, Any idea when can we expect this feature live please.

There's no set date. When this issue is closed, you know it's shipped.

[Phroneris]

A usecase of mine is for Mastodon custom emojis.

I'm a sub-admin of a Mastodon server (instance) and managing many custom emojis.
Our media server isn't necessarily stable, I mean it sometimes gets slow, so I'm planning on compressing the size of them to reduce media traffic as much as possible.
Then, I don't want to process about 200 custom emojis one by one manually.

[surma]

@Phroneris That sounds like a normal CLI (like OptiPNG or imageoptim) will serve you much better than squoosh. The whole point of Squoosh is that you can visually inspect what your codec settings are doing. For your use case, you can just apply your settings to all the files via CLI.

[Phroneris]

@surma That must be really true, but I don't know how options I use in Squoosh (for example the number of palette colors) should be translated into exact commands for the existing tools.
I tried reading some source codes of Squoosh and the manual of CLI options of OptiPNG, but I, not a nice programmer, couldn't understand them as commands I should use.
If the process can also be written as a one-liner command, I hope a feature to show it when a user tweaks the options of Squoosh on browser.

Fortunately, I found that Sqoosh allows d&d-ing an image on the editor screen to preserve existing option tweaks (except width and height when resizing). So my situation has got better.
Thanks.

[janispritzkau]

Are there already people working on it? I would be interested to implement batch processing. I had imagined a tab view or list at the right top corner to switch between the imported images and add a extra button to process and download them all at once.

[justingolden21]

This seems reasonable, and not hard from a code perspective. As always, the hard part is UI. We'll throw around some ideas.

Some quick mockups in MS Paint:

Home screen

Edtior

Using the material folder icon

I simply uploaded a grid of charms from Hollow Knight to demonstrate that the items could be stitched together and displayed in a grid. The complexity of the grid could be as simple as squares or rectangles of the same size, or smarter such as the Google Photos app which aligns pictures based on their aspect ratios intelligently.

I think that the folder button should be in the same row as the others, and probably a different background color to signify that it's an action of a slightly different category, but the premise remains: simply add one button to the main page and in the editor just display them as a grid. It's implementing multiple files and testing cases such as some files are incompatible, some files are too large, too many files, varying file types, etc, however even this is simply displayed by Google Photos and they can all be run with the same settings (which is the point of this feature), so it should be no problem.

I feel that the UI complexity shouldn't have to increase much to add one feature, which can be seen on two screens, and will most often be done just by dragging in multiple files instead of one.

[jakearchibald]

Issues with this suggestion:

• It isn't clear what happens when a single file is dropped on an existing edit
• It doesn't seem possible to remove one item from the batch
• Layout is pretty complicated if the items aren't uniform
• 'multiple files' is in the same UI space as demo images, which seems like a bad fit
• It's no longer clear what the size output refers to
• What does 100% refer to when it comes to the zoom level?
• It seems confusing that reducing the palette to 2 colors will result in more than two colours in the output

I feel that the UI complexity shouldn't have to increase much to add one feature

I don't think we should underestimate the effort that goes into a natural-feeling UI.

[justingolden21]

Thank you for the quick reply. I'll provide some answers, which keep in mind, are just my opinion.

It isn't clear what happens when a single file is dropped on an existing edit

I would say have a toggle switch at the top, and you can switch modes between one file and multiple. If they drag it in single file mode (default, keep default functionality the same for users) then it overrides, if the toggle is on (can be saved in cookies, but not necessary) then add the file

It doesn't seem possible to remove one item from the batch

Just create a grid view, hovering over the item has a × in the top right, upon clicking it the item is removed. There could be an "Undo" toast on the bottom of the screen for a few seconds if we really want to follow Google's principals there, which I think would be good, but not necessary in minimum viable product.

Layout is pretty complicated if the items aren't uniform

Lay them out in smart tiles like in Google Photos:

'multiple files' is in the same UI space as demo images, which seems like a bad fit

Agree. That's why I suggested changing the color, but changing position or size or any other aesthetic to indicate that it's a button of a different category would suffice. Or we could just remove the button entirely and optionally mention at the bottom in small text you can upload multiple. We don't really need a button for it. Additionally, we could have a sample where it has multiple demo images to demonstrate this functionality.

It's no longer clear what the size output refers to

I think this one is intuitive. The total file size. We can do some quick math and calculate an average as well. See the UI on the bottom of kraken

What does 100% refer to when it comes to the zoom level?

That's a good question. For multiple files, it's arbitrary, so we could keep the slider and simply remove the labels if we want. Or 100% is more of a default size for the preview. I don't think it would be too confusing. We don't even need zooom functionality in multiple, as long as we preserve it in single file mode. The important thing is, without taking away functionality, adding a mode where users can upload multiple images seamlessly.

It seems confusing that reducing the palette to 2 colors will result in more than two colours in the output

Is this directed at me or someone else? Testing it myself that seems to be the case as well. Seems like a separate issue.

[jakearchibald]

I would say have a toggle switch at the top, and you can switch modes between one file and multiple. If they drag it in single file mode (default, keep default functionality the same for users) then it overrides, if the toggle is on (can be saved in cookies, but not necessary) then add the file

This seems pretty confusing, and we don't really have space to add extra toggles on mobile.

Just create a grid view, hovering over the item has a × in the top right, upon clicking it the item is removed.

There's no such thing as 'hovering' on mobile. Also this seems bad ux. The user could go to perform a click-drag, but pop a close button appears under their mouse and the image is gone. This also seems really tricky with small images.

Lay them out in smart tiles like in Google Photos:

Google Photos smart tiles often crop parts of the image which seems like a really bad idea here.

That's why… but… or… Or…

UX is hard 😄

I think this one is intuitive. The total file size.

I don't think this is intuitive or useful. You could end up with 95% of that total taken by one image and you'd have no way of knowing.

What does 100% refer to when it comes to the zoom level?

That's a good question. For multiple files, it's arbitrary

What you mean by 'arbitrary' is the number is "meaningless, but there's nothing to indicate that it's meaningless, so it's confusing to the user".

It seems confusing that reducing the palette to 2 colors will result in more than two colours in the output

Is this directed at me or someone else?

You.

Testing it myself that seems to be the case as well. Seems like a separate issue.

I'm not sure what you're talking about here. Can you describe the problem? Unfortunately posting a link to the 'new issue' page isn't enough. You need to fill in the form to describe the problem.

I appreciate you're trying to help here, but I feel like you've either underestimated the problem, or undervalue UX in an app like this.

[lefti696]

Cant wait for this feature to be implemented in Squoosh app! I think this is the most anticipated feature.

[justingolden21]

I apologize if it seems I'm undervaluing the problem. I understand it's a lot of work, I'm just trying to contribute my personal opinion on it. Trust me, I know UI/UX is a lot of work.

As for the toggle taking up a lot of room, I really don't think so. They usually look like this, no?

You're right about no hovering on mobile, usually it's just a long press. Plenty of sites have mobile friendly features with hover controls as well. Not to undermine the issue, it is definitely worth pointing out, just point out myself that there is a solution.

As for cropping off parts of the photos... maybe. But it's just a preview, and they're going through many photos at once. The main thing is adding the necessary functionality in a simple and understandable way in my opinion. If they want to go into detail on each individual photo then this may not be the feature for them. Could also add a mode where clicking on the photo opens a larger preview in a modal, but not necessary in my opinion.

As for the summary with multiple files and viewing which ones saved what space, see what Kraken does:

What I meant about the zoom was it doesn't have to be on a set scale, if all of the images are of different aspect ratios and pixel sizes, just zooming to fit more/fewer on screen. It would in effect be a different zoom level for each one, it's just a display option, like in google photos they are all zoomed to different levels to fit well, or in gmail there are options for "comfy" or "compact" for your view, which are just kind of arbitrary, we don't need the exact pixel height of each email, just that it's "larger" or "smaller".

To be honest, I have no idea what you're saying about the color thing. I thought you were talking about a bug where reducing the color palette to 2 colors still displays the output image with more than 2, but I don't see how anything about reducing colors was relevant to the conversation previously, so I'm having trouble following on that one, sorry.

Again, I don't mean to undermine anything going on, I know it's a lot of work and I'm simply offering suggestions, not actually contributing anything. I don't mean to be a burden, just to offer my insights to the problem, because I see several possible solutions for some of these problems and I would love to see this feature make it to the app, I agree with lefti696 that this is likely a highly anticipated feature.

[angelicochris]

Is this ever going to become a thing? Through your web tools we discovered the images on our site are all unoptimized and now have a lot of catching up to do. Doing them one at time just isn't an option. Any solutions we can do while we wait for this feature to be added?

[justingolden21]

An example of a dynamic grid of photos (for UI concept): https://codepen.io/jensimmons/full/QWjqbJj

@angelicochris Sadly, I have to link to an external tool since Squoosh.app doesn't support this. However, Kraken.io Kraken.io supports this.

[ignasblazys]

Would love to have batch export function. I guess you can use ImageMagick if you have the technical knowledge to do so, but for a designer like me it would be way easier to work with.

[wving5]

maybe we could just add a small feature which can convert current squoosh settings to
equivalent imageMagick comand line options

Would love to have batch export function. I guess you can use ImageMagick if you have the technical knowledge to do so, but for a designer like me it would be way easier to work with.

[jakearchibald]

If we get round to this, it'll be later this year. We're humans with a finite amount of time in the day, with lots of other things to do. This isn't a money-making app 😄

[ignasblazys]

Take your time guys <3

[HugoCortell]

Good luck guys! I really look forward to this!

[surma]

We shipped the CLI, which allows to process batches of images!

[ignasblazys]

Woop woop!!

…

On Thu, 10 Dec 2020, 12:59 Surma, ***@***.***> wrote: We shipped the CLI <https://github.com/GoogleChromeLabs/squoosh/tree/dev/cli>, which allows to process batches of images! — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#301 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AHXWOE2IJBG62Y7ZBD3RKG3SUCS2BANCNFSM4GD7T6TA> .

[Phroneris]

Me (#301 (comment)):

If the process can also be written as a one-liner command, I hope a feature to show it when a user tweaks the options of Squoosh on browser.

Google Chrome Labs:

Me: SUPER.

[justingolden21]

Awesome news, thank you for listening to me and others and beginning to implement this : )

[designarti]

Seems everybody willing to settle onto CLI. Since no news since December last year, I assume I'm going to stick to the ol' good ImageOptim.

[JBENEITEZ]

Good morning guys! May I ask how can we use the CLI for batch optimisation? My programming knowledge is very limited, any tutorial or example that could be shared? Many thanks for this amazing software

[dannyFig]

I currently have about 2000 images to compress. 😅😳 Why? I export my After Effects compositions in "PNG Sequence" format so that I may re-import it to create a Lottie animation. I LOVE this app but don't think I have the proper sedation to make this happen. 🤪 @jakearchibald ~ I'd be glad to pay for this app. 🙃

[lefti696]

use CLI
sample command:
find . -name "*.png" -exec squoosh-cli --mozjpeg '{"quality":75,"baseline":false,"arithmetic":false,"progressive":true,"optimize_coding":true,"smoothing":0,"color_space":3,"quant_table":3,"trellis_multipass":false,"trellis_opt_zero":false,"trellis_opt_table":false,"trellis_loops":1,"auto_subsample":true,"chroma_subsample":2,"separate_chroma_quality":false,"chroma_quality":75}' --output-dir '/out' --suffix '-compressed' {} \;

[kosamari]

@dannyFig :　
You can batch process this via CLI.

1. try out settings with one image on GUI Squoosh, click on >_ button to copy CLI command
   

2. it will give you somethin like npx @squoosh/cli --resize '{"enabled":true,"width":1000,"height":669,"method":"lanczos3","fitMethod":"stretch","premultiply":true,"linearRGB":true}' --oxipng '{"level":2,"interlace":false}' in clip board.

3. you can run this on entire directory of files like @lefti696 suggests, with exact setting you confirmed on test image on GUI.

Let me know if you have any question or issues ! this is a kind of usecase we want to support (tho hard to figure out UI and has been on pause.)

[ryanleichty]

The CLI has unfortunately been deprecated. See note here: #1321

Unfortunately, due to a few people leaving the team, and staffing issues resulting from the current economic climate (ugh), I'm deprecating the CLI and libsquoosh parts of Squoosh. The web app will continue to be supported and improved. I know that sucks, but there simply isn't the time & people to work on this. If anyone from the community wants to fork it, you have my blessing.

[Phroneris]

What sad news, but thank you for the information.

[brunodeangelis]

Is there any chance this could be implemented at some point, or has it already been determined that it won't be?

[Arvin-xc]

try https://bulk-squoosh.vercel.app for bulk compression