over 10 years ago from Dennis Kramer, Designer
For a while now I've heard that Photoshop's "Save For Web" is far from optimal for compressing file sizes while maintaining quality, but I haven't come across anything substantially better. What do you guys use?
Just got tipped off to this, which seems pretty nice and seamless with drag + drop functionality and instantaneous compression of existing images; no saving and re-saving.
That's my proccess everytime.
+1 Here
+1 for me as well
Yep been using this one to clean up PNGs for some time. Actually it dramatically helps with reverse compatibility on transparent PNGs on IE.
1.Slicy 2.ImageOptim 3.Profit
+1 Slicy!
http://tinypng.org is great. It is consistently able to compress images more than image optim or others that I have tried.
It seems like that creates PNG8 images with 8bit alpha? Worth noting that it's a lossy technique that will look worse for many images (large, subtle gradients etc). Can be a great way to go, but be careful!
ImageAlpha can create PNG8 with 8bit alpha images: http://pngmini.com/
ImageAlpha http://pngmini.com for transparent pngs. Once optimized there's a checkbox to automatically run it through ImageOptim. The loss of file size + retention of quality is incredible.
Photoshop's Save For Web. If the images in question are big, and PNGs, and going on the web (not in an app), then I use ImageOptim. There's a good chance I'll use CodeKit 2 in the future as well.
Related question: Anyone have any apps / workflow for automatically generating retina images? Ideally I'd export my x2 image, and the app would make an optimized version of the x2 and create a half-sized version.
Sketch has that feature.
The best quality way to build the 1× or 2× images needed for Retina assets is by the design app re-rendering at the size required. Tools that bitmap scale 2× images down to 1× tend to look terrible for most things. (Some info and examples of how the different scaling methods look: http://bjango.com/articles/designingforretina2/ )
My solution: I set up a slice sheet for exporting — a document that has all the components laid out flat, using Photoshop's slices for exporting, so the filenames are all contained within the document. If you've build you document well, you should be able to freely scale up and down between the 1× and 2× sizes.
To export, I run an Action that exports all the 1× to a known location, then scales the document up, then exports all the 2× images to a different known location. Hazel (a great Mac app) then takes over, automatically renaming all the 2× images to have @2x in their filename and organizes them all into a single folder.
I highly recommend this method — even if it sounds convoluted — for several reasons: - It's fast, once set up. - It's repeatable, so you can make as many changes as you'd like and re-export your assets at any time in the project (even 5 minutes before submitting the app!). - It's rendered in Photoshop. This means you can use all Photoshop's features without a fear that things will look different. - If your document is set up correctly, it doesn't use bitmap scaling (which looks terrible).
CodeKit has awesome image compression. This is what Chris Coyier recommends. http://incident57.com/codekit/
CodeKit’s image optimizer went wrong for me many times, inflating file sizes in some cases. I raised the issue with Bryan who acknowledged the bug, and said an overhaul of the optim algorithms was coming in CK 2.0.
While I wait for that I’m using ImageOptim (and still running CodeKit for everything else, because it’s awesome).
Smusher, of course
Imageoptim ftw. There's also an OSX service so you can right click and optimise individual files from the Finder.
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now