9

Ask DN: What tools do you use to save images for web?

over 7 years ago from , 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?

21 comments

  • Dennis Kramer, over 7 years ago

    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.

    http://imageoptim.com

    11 points
  • Joe BarberJoe Barber, over 7 years ago

    1.Slicy 2.ImageOptim 3.Profit

    3 points
  • Zander MartineauZander Martineau, over 7 years ago

    http://tinypng.org is great. It is consistently able to compress images more than image optim or others that I have tried.

    1 point
  • Andrew K., over 7 years ago

    http://getenigma64.com/

    0 points
  • Jessica PaoliJessica Paoli, over 7 years ago

    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.

    0 points
  • Marc EdwardsMarc Edwards, over 7 years ago

    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.

    0 points
  • EJ FoxEJ Fox, over 7 years ago

    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.

    0 points
    • Julian MaunderJulian Maunder, over 7 years ago

      Sketch has that feature.

      0 points
    • Marc EdwardsMarc Edwards, over 7 years ago

      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).

      0 points
  • Dominik SchmidtDominik Schmidt, over 7 years ago
    1. Sketch - Save to web
    2. CodeKit - Image Compression
    0 points
  • Kurt Varner, over 7 years ago

    CodeKit has awesome image compression. This is what Chris Coyier recommends. http://incident57.com/codekit/

    0 points
    • Account deleted over 7 years ago

      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).

      0 points
  • Foobar YeahFoobar Yeah, over 7 years ago

    Smusher, of course

    https://github.com/grosser/smusher

    0 points
  • Larry HynesLarry Hynes, over 7 years ago

    Imageoptim ftw. There's also an OSX service so you can right click and optimise individual files from the Finder.

    0 points