22

Ask DN: How are you saving for web?

over 5 years ago from , Art Director

There are a lot of opinions out there. How do you save images for the web in 2016?

  • Using picture?
  • Using scrset?
  • What sizes are you saving?

I'm more interested in pictures than graphics. So JPEGs more than PNG/SVG.

EDIT: the question is aimed more at static sites. Not CMS.

14 comments

  • Benjamin Mikiten, over 5 years ago (edited over 5 years ago )

    Most of the time:

    JPEGS: Save for Web qual 100 > JPEG Mini > ImageOptim

    PNGS: Save for Web > Image Alpha > ImageOptim

    On the stuff that I really need to squeeze every last byte out of, I save PNGs so I have a lossless file to fall back to, then use ImageMagick to compress to taste:

    convert -strip -interlace Plane -sampling-factor 4:2:0 -define jpeg:dct-method=float -quality 85% source.png result.jpg

    I just tweak that quality number until it looks as crappy as I can deal with.

    Notably, I change the sampling factor to dump the chroma resolution, which is harder to notice. Saves loads of space and is very hard to notice with retina assets. I also use a more power-intensive calculation method that usually looks a little better, lose the -define jpeg:dct-method=float bit for more speed.

    6 points
    • Vlad Danilov, over 5 years ago

      Just in case, ImageOptim has a lossy option now. Also, you can squeeze more bytes and keep more quality by using cjpeg from mozjpeg library thanks to trellis optimizations, sophisticated DCT tables and built-in jpegrescan.

      1 point
  • Todd Padwick, over 5 years ago

    Hi Michael, I still use PS save for web, but I also run jpgs through https://imageoptim.com/mac

    and my PNGs i run through https://tinypng.com/

    Even after save for web, tiny png especially reduces images by a further 50% or so.

    3 points
  • Dirk HCM van BoxtelDirk HCM van Boxtel, over 5 years ago

    Manually. My Photoshop keyboard short-cut game is on point.

    1 point
  • Vlad Danilov, over 5 years ago

    I normally export images at maximum quality at 1x and 2x in Photoshop with a plugin I created (freely available here), optimize them in visually lossless mode with an image optimizer I'm currently working on, and use the srcset method with a simple JS fallback I wrote a while back.

    1 point
  • Magnus SkareMagnus Skare, over 5 years ago

    It depends on the setup. Are you building a static site or using a CMS?

    A CMS can often dictate this, and with WordPress for example, srcset coupled with a resize/compression function becomes the default option. It works well, and can handle almost anything a client throws at it.

    1 point
  • Carlos BruscoliCarlos Bruscoli, over 5 years ago

    PS Save for Web 90% > ImageOptim.

    https://imageoptim.com/mac

    0 points
  • John KarlssonJohn Karlsson, over 5 years ago

    PS Save for web. When I read the title the first time I thought it had something to do with this wonderful blog: http://saveforwebclaws.tumblr.com/

    0 points
  • Gareth LewisGareth Lewis, over 5 years ago

    For pictures/photos, I resize the images for 2x and use Pixelmator on the Mac and export for web. I usually set my JPEGs at 60%-80% quality. For a 1600x1000 image, it ends up being around 100KB (sometimes less). I just do this by eye, and as soon as I see a degradation in quality I stop. For thumbnails, I tend to go slightly lower quality. I find that 40% is still more than usable. I then use JPEGmini, just to squeeze any more optimization from the image as I can. For me, I want my pages to load as quickly as possible while still ensuring that the images look good.

    0 points
  • Joshua TurnerJoshua Turner, over 5 years ago

    I don't use many photos, but all my image assets get ran through Kraken for compression.

    I haven't found anything better for lossless size reduction.

    0 points
  • Zach Cole, over 5 years ago

    Hey Michael - still mostly saving as jpgs (save for web from photoshop) and then compressed with a tool such as tinypng or something similar. Usually gets the image size into the low kbs and retains enough quality.

    0 points