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.
so is the jury still out on Progressive JPGs or should I save out a new Photoshop setting? Anyone else following this?
— Pete Schuster (@pete_schuster) December 29, 2012
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?