Best Practices: Saving Images for Web

Best Practices: Saving Images for Web
on
in: Design , in: Best Practices

From the multiple backgrounds of parallax beauties to glorious full screen galleries, image heavy sites are all the rage these days. You know what’s not all the rage? Wasting precious legal-phone-viewing seconds1 at the stoplight waiting for said images to load.

I’m a creature of habit and have been using Photoshop’s ‘Save For Web’ feature @ 80% for as long as I can remember. Why? No clue, all I know is I’m a perfectionist and can barely stomach reducing quality by even that mere 20%.

And then a project I was working on called for one of those glorious full screen galleries to display 100+ images, and it was imperative they be sharp as a knife regardless of device (retina desktops included). Needless to say 5000px images saved at 80% wasn’t going to cut it2; it was time to change my ways.

I was quickly overwhelmed by options. Save As? Save For Web? One of the approximately 9,7383 online image compression tools? Given web optimization isn’t the intended purpose of regular old Save/Save As, I kicked that out of the running. On to Save For Web and its dreaded quality slider.


Photoshop: Save For Web

I summoned my courage and went for it, testing at a variety of points from 100% all the way down to (gasp) 30% with 3 different images.

  • A giant photo (of my dog’s adorable face) to represent those times extra large graphics are necessary, such as for slideshows
    • Visual difference was negligible
    • Decrease in file weight was staggering
    • winner: 30%
  • A headshot (of one of my favorite hockey players4) to represent photos of a more realistic size
    • Visual differences more obvious
    • Decreased file weight not worth deteriorated image
    • winner: 80%
  • A flat colored graphic (of our logo) to represent, well, flat colored graphics5
    • Visual differences more obvious
    • Decreased file weight not worth deteriorated image
    • winner: 80%

Online Image Compression Services

I’m lazy efficient. Using an online compression tool requires uploading and then re-downloading every necessary image, and these additional steps had yet to find their way into my workflow. But if there’s anything that will change my ways its good old fashioned proof, so I gave the three most doted on by industry peers (kraken.io, compressor.io and tinyJPG) a shot.

  • Winner: tinyJPG
    • visual difference negligible so went with lowest weight
  • Winner: tinyJPG
    • 15kb heavier than kraken, worth it for cleaner image
  • Winner: tinyJPG
    • 13kb heavier than compressor, worth it for cleaner image

The Results

 

 


The Conclusion

Its safe to say the universal-saving-formula I was hoping for doesn’t exist. This experiment wasn’t a total bust though, performance trumps my pride extra work flow steps so I’ve settled on tinyJPG as my online compressor of choice and will be utilizing that service after my typical Save For Web @ 80% from here on out6.

footnotes
  • Hooray for safety and the recently passed hands-free law
  • Sharpness pun intended
  • Possibly an exaggeration
  • Yah he sold out, lame, still brilliant to watch
  • That need to be JPGs vs. PNGs or SVGs
  • At least until I have more time to explore grunt.js
Facebook icon
Twitter icon
Share on Google+
LinkedIn icon
Pinterest icon