UI for lossy/aggressive optimizations

[kornelski]

I'd like to hear suggestions how to implement lossy optimizations:

• pngquant can reduce PNG file size by 70%, but sometimes quality degradation is noticeable, and those files expose Photoshop's lousy PNG support (CS5 can't load them, CS6 can't save them).
• Issue SVG support #5 — most SVG optimizations are unsafe if SVG contains scripts or author wants to keep editing the file.
• JPEGs sometimes are stored with unnecessarily high quality, and there are tools like adept and JPEGmini that try to recompress JPEGs at lowest possible quality.
• Converting non-animated GIFs, TIFFs, BMP to PNG or JPEG. What about filename extension?

So the problem is that in 90% of cases those optimizations are awesome, but in some cases they may ruin the file.

ImageOptim's ease of use mainly comes from the fact that it overwrites files in place with no fuss, but that can't be done with dangerous optimizations.

How could these optimizations be done? (all modal dialog boxes such as "Are you sure?" are out of the question :)

[sulkaharo]

Would it make sense to allow users to use different settings for thumbnail size images and larger files? I'm currently optimizing a large batch of jpegs for which it'd make sense to use much more aggressive compression for the files where max(height,width) <= 1024 than the tool currently allows.

[kornelski]

Brainstorming!

I really want to make clear when optimizations are lossy, and that the default is lossless, so that users can trust the application and nobody accidentally ruins their work.

Maybe the main window could somehow be switched into "lossy mode" that has quality slider, destination folder option, etc.

The standard tab control is obviously uuugly…

Maybe the current UI could be kept, but lossy optimizations were run from menu:

or from a button that also serves as a reminder whether lossy/lossless mode is on:

but that makes the UI slightly cluttered. Nicer variant: https://code.google.com/p/imageoptim/issues/detail?id=67

How about "upselling" users on lossy optimization? "You've saved 3KB on this file, you can save another 15KB with lossy option!"

Maybe for every file dropped insert two entries into the table - one for lossless and another for lossy?

I'm looking for other proposals.

[sulkaharo]

I'd avoid UI that exposes all the tools ImageOptim uses under the hood, or requires knowledge about the tools. I have no idea what the strengths of each is despite being a pretty advanced user, and I doubt almost anyone else does either.

Giving an estimate on space saving on lossy vs lossless sounds like a great idea.

Wonder if there's any open source libraries that could be plugged in that'd give an average per pixel delta on the lossy vs lossless, that'd allow detecting the loss level, and catch the scenario where the lossy compressor screwed up?

Wonder if terminology other than Lossy vs Lossless work. As in, the tool allows "safe" lossless compression, but also more "dangerous" / "aggressive" / "strong" compression on the lossless. Using a grading other than simple lossy / lossless would allow for multiple levels of compression where Safe = lossless and the other end of the spectrum being a strong lossy compression with metadata stripping. Make any sense?

[pathawks]

👍
I like "safe" lossless vs. "aggressive" lossy terminology. I also like the clear "Quality: 100%" button pictured in the mockup.

[kornelski]

@sulkaharo There are libraries to estimate loss, I've even written one :) However, estimates are not always accurate, and I don't think they can ever replace human judgement. Sometimes required quality doesn't even depend on content of the image, but context: a screenshot in troubleshooting guide can have rough quality as long as text is readable, but a screenshot of a latest Apple application needs to look shiny and pixel-perfect :)

Different name for lossy optimization may be a good idea. What JPEG does is widely understood, right? How do people call that?

I'd stay away from terms like "dangerous" and "unsafe" as they sound like something to avoid, while lossy optimizations are a great idea.

Maybe some name that alludes to removal of superfluous quality?

[kornelski]

@pathawks would you need combination of lossy and lossless optimizations? When would you change between the two options? If the button wasn't in the main window, where would you expect to find that setting?

[pathawks]

@pornel There are times when I want lossy and there are times when I want lossless.

There have been times in the past when I wanted lossless, and then noticed that I had JPEG quality set to 80% in the preferences. 😧

I like that the same settings are applied to all of the files in the window; per-image lossless vs. lossy options would only clutter things up, I believe.

I like to apply lossless compression to images I'm importing from my camera before I archive them.
I often apply some measure of lossy compression to images that I will use on the web.

While in many (most?) cases it would be overkill, I really like the way ImageAlpha does things:

• You can slide the quality (number of colors) bar down as low as you want
• There are a few reasonable options related to the algorythm presented in an unintimidating way
• You can toggle between the modified and original image to see just how much quality was lost

I'm not sure exactly how that could apply to JPEG lossy compression, and it's likely beyond the scope of ImageOptim, but I have often longed for such a tool when I'm really trying to make web assets as small as possible.

[kornelski]

Maybe a separate window to drop files into for lossy optimization, sort-of like Chrome's Incognito window?

[pathawks]

@pornel That would be a very good visual cue, yes.

What exactly are you trying to achieve by introducing lossy optimizations into ImageOptim? (I say that, not because I think it's a bad idea, but because the why affects the how.)

When I know the changes made to the file don't impact image quality, all I'm concerned about is the Savings column; the higher that number the better! I love when I click the Again button once or twice and see that Savings go up just a little bit higher.
When lossy changes are involved, I'm concerned with more than just file size. Any improvements to the file size would leave me concerned (just in the back of my mind) "I hope that didn't screw up my picture beyond recognition."

I'm certainly not opposed to lossy compression; quite the contrary, it is often necessary when trying to make a website just a touch faster. I just know that my personal workflow for lossy compression is a bit more involved than when I just dump a bunch of PNGs into ImageOptim.

[kornelski]

The ultimate why is that lossy optimizations reduce file sizes much more than lossless ones can, so ImageOptim can do better than it does currently.

Users of ImageAlpha are asking for a batch mode (and users of ImageOptim generally don't know ImageAlpha :))

Interesting case is conversion from GIF (or sometimes even JPEG) to PNG. It won't degrade the quality, but it's still not as safe as other optimizations: if you rename the file it may screw up links in related HTML/CSS/JS (and fixing URLs in them is another can of worms), and if you don't rename the file it may cause weird compatibility problems (e.g. PHP has imagecreatefromgif() that won't read PNG).

So I need a place to ask the user whether GIF should be left alone (maybe they know what they're doing), converted to PNG in place (if they're optimizing a website and don't want hassle of changing all <img>) or converted and renamed (if they don't want misleading filename extensions).

"I hope that didn't screw up my picture beyond recognition."

True, that's a massive concern. With ImageAlpha I went to the extreme where you can carefully inspect every pixel of the image, but some people have 500 images to optimize and ImageAlpha's workflow doesn't scale.

(and btw, technically it's easier for me to add ImageAlpha features to ImageOptim than vice versa :))

[pathawks]

Perhaps it's just me, but I am much less concerned with options that affect the file without affecting the quality of the image than options that might noticeably degrade the quality of the image itself.

For GIFs, maybe an option in Preferences to try creating a PNG image of the same quality. To me, this seems to be in line with preserving EXIF or file permissions as an option I would probably set and forget.

If not in preferences, perhaps adding an optional column in the main window with a button that conveys "Make this non-animated GIF 15% smaller by converting it to a PNG." An extra column in the main window could also work for conversions that would only slightly affect quality, like "Click here to convert this 24-bit RGB PNG to a high quality JPEG."
Perhaps that wouldn't scale very well to 500 images, though.

Options to "Make this image 40% smaller by converting it to a smudgy looking highly compressed JPEG" should be treated with much more caution, I think. Tools like JPEGmini are not bad if you just want to email a few photos to some friends, but users must be made to understand that they shouldn't do this before they send a photo off to their friend who is a whiz with Photoshop, that sort of super-aggressive compression should only be the very last thing you do with a photo before publishing it.
Even resizing an image should be done before rather than after optimizations that work with perceived quality.
It's maddening when users complain about how you can totally spot the quality degradation in JPEGmini optimized images when you blow them up to 6x their original size.

[zakj]

The beauty of ImageOptim is that I can rely on not thinking about it; I just feed it a directory full of images before checking them in, pound "again" a couple of times, and know that I've got significantly-smaller images without any loss of quality.

That said, I sometimes end up with giant images that ImageAlpha could do a much better job of compressing, but I never want that process to be automated. ImageAlpha's UI is fantastic for comparing the visual loss across its compression algorithms. For me, the best of both worlds would be for ImageOptim to do its thing, then update its UI to include a column of checkboxes (one per image). I could check the images for which I was willing to accept lossy compression, then click a new button in the bottom bar to get started. Each checked image would be opened in a new window almost identical to the existing ImageAlpha UI, where I could adjust settings until I was satisfied, or cancel the operation.

ImageOptim might even ease the process by initially checkmarking images above a certain file size threshold.

[pathawks]

@zakj “The beauty of ImageOptim is that I can rely on not thinking about it”
👍

[johngb]

@pornel Thanks a ton for the work you've done on both ImageOptim and ImageAlpha. Both are very useful applications. My expertise is primarily in UX, and so I'll try to give my honest opinion on how it can be improved, specifically for batch conversion.

Part of what you have do decide on is the philosophy that you want to take in terms of trying to prevent users from inadvertently damaging their original files. It comes down to two (sane) choices. The first is to remove the possibility of them altering their lossless files with lossy ones, and the second is to make is clear what is happening, but give users the ability to replace their lossless files if they explicitly choose to.

The only real option for the first approach is to force any batch conversion to create new files in separate folder and/or with modified filenames. In many ways this is the simplest and the safest approach, but it looses some functionality.

The second approach is significantly more complicated as you then need to give users options as to how they would like their converted files to be handled, but it has the advantage of being more flexible in terms of workflow. Pngyu does a fairly good job of solving this particular use case, but it has room for improvement (besides the general look and feel, which I wont go into much if at all).

For reference, this is the UI for Pngyu:

1. The button selector labels for the output option could be improved. While "Overwrite the original" is clear enough, "Custom" is not. Here I would suggest the labels as "Overwrite Original", and "Create copy".
2. As per @pornel 's suggestion, colouring the unsafe option as per warning signs would be another useful cue. I would also suggest including a warning sign icon with the "Overwrite Original" option as a visual indicator.
3. The compress option, selector should be replaced by a dropdown selecting the method of compression with any optional settings shown below that. This would be similar to the "Custom" view for the Compress Option, but without the space taken up by the button selector.

---

Overall, I would suggest going with the second philosophy, as you will never prevent a user from doing something silly. In general I believe it's best to be clear about the result of an action, and let them make their own choices.

If needed for clarity, I can draw some wireframe mockups for what I would suggest for the interface.