Saving JPEGs for the Web: Setting Photoshop Up for Progressive JPEGs

Progressive JPEGs aren’t anything new, they’ve been around for quite some time. It wasn’t until last week when I saw this article by Ann Robson pop up on Hacker News, that I gave them a second thought. My curiosity was peaked again when I saw Paul Irish tweet around about it, so I decided to ask the Twitter world what’s up.

I didn’t get any response, so I decided to wait around for new developments. Then today, Chris Coyier, over at CSS Tricks, posted the link to the article as well, which gave the whole thing a pretty solid foot hole to go ahead and add it to my workflow.

Setting Up Photoshop

If you’re not already familiar with Photoshop’s Save For Web feature, you should probably get on the bandwagon because it’s a great way to reduce image sizes for the web. In addition to cutting down sizes, it also makes sure that your images are set to RGB color scheme. Leaving images set to CMYK can cause display issues in some browsers. Below is a screenshot of what the Save for Web dialogue looks like for saving out a regular baseline JPEG on the “high” preset.

In order to save this image as a progressive JPEG, you need to check the box right below the drop down of presets. Once you do this, you might want to save it as a preset, that way you can use it in the future.

Now just click save and you’re all done! You now have a progressive JPEG ready for the web.

Be honest, were you using progressive JPEGs before? Are you going to start? What are your thoughts on the issue?

posted in: Best Practices, Front End Development
tagged: , ,

1 Comment
  1. Fran├žois

    I have always “saved for web” my picture with the optimized box checked as it allows, in my case, to save few kb per picture.
    That was before testing my website with webpagetest, with “optimized” and “progressive” JPEGs. A co-worker specialized in webperf advised me to use “progressive” JPEGs, it still has a little extra kb but the webpagetest note is far better!