JPEG Formats: Do You Know Why You Choose The Ones You Do?

Insights & Thoughts February 16th 2014 1:37 PM 3 Comments

I have a friend in Toronto who routinely looks to me as some sort of photography oracle, ready to provide her with photo news that hasn’t happened yet, and to provide wise counsel on any photographic procedure. Little does she know how misplaced her direction is. However, from time to time, I’m able to be of some modicum of use.

A few weeks back we posted about a new JPEG update which garnered a lot of attention (read: debate) including hers. She pointed out that she, and others she knew, continuously worked in Adobe Photoshop and saved either their PSD or RAW photo files into JPEG formats, but they were somewhat unsure of what they each were. I realize this is a common occurrence, and I, myself, didn’t understand this until a few years ago. If you’ve worked in Photoshop and hit SAVE AS to JPEG, you’ve seen the options and many may have dismissed them. Here is a short breakdown.
[REWIND: JPEG Gets A Major Update – Now A Rival For RAW & TIFF?]

Getting There

Once you’ve worked on the file and it is ready to be saved, File>Save As
JPEg-filetypes-photoshop-1

Select JPEG in the Format drop down menu then hit Save
JPEg-filetypes-photoshop-2

The following menu will be shown with the JPEG saving options.
JPEg-filetypes-photoshop-3

What Do They Mean?

Most everyone will deduce what the Quality Slider does and how it will affect a photo file, as for the explanation of formats, Adobe’s Acrobat Standard site breaks them down as the following:

Format
Determines how the file is displayed. Available only for JPEG format.
Baseline (Standard)
Displays the image when it has fully downloaded. This JPEG format is recognizable to most web browsers.
Baseline (Optimized)
Optimizes color quality of the image and produces smaller file sizes, but is not supported by all web browsers.
Progressive (3 scans-5 scans)
Downloads the image, first as a low-resolution image, with incremental quality improvements as downloading continues.

What Does that Mean in Practice?

A lot of this will teeter on the line of what the particular file will be used for. In this day of blogging and fleeting attention spans, fast loading web pages are often a major consideration. In fact, slow loading web pages is a primary reason users will abandon their current site. Other than video, photos and imagery are probably the largest consideration regarding improving a page’s data transfer demands. So, to increase turnover and return ‘clients’ to your site, you want it running smoothly.

JPEGs are brilliant because they are highly compressed, yet maintain very good quality, and without them the Internet would be a different, and slower place. In case you were unaware, JPEGs essentially are read in a number of scans. With progressive JPEGs, they will store the scans (usually 3 to 5) and each scan increases in quality when being displayed. Some browsers will display them as such, progressively, so when a page is loading the user will see something, even while there is more to load.

[REWIND: Lightroom Workshop Collection v5]

Baseline is going to preserve more, as it’s a full resolution top-to-bottom scan of the image. Therefore, when it’s loading, it’s loading the full resolution in more dense blocks. The standard is going to be just that, and Optimized will be somewhat more compressed, smaller file version of that.

Really the choice of what to use comes down to preference. Most often I find people use Baseline Optimized because it’s a mix of both worlds, but personally I would go with progressive even though they make up something around 10% of all JPEGs online.

Advertisement

About

Kishore is a photographer and writer based in Miami, though he can often be found at dog parks, and airports in London and Toronto. With a passion for beauty and aviation photography his work is all at once focused and eclectic. He is also a tremendous fan of flossing and the happiest guy around when the company’s good.

3 Comments

  1. Bub the Burger Destroyer

    THANK YOU!!! Been wunderin!

    4
  2. Adrian

    Progressive JPEGs are only good when you have a big background image and loading takes too much. As a web developer I never used progressive JPEGs (I can’t remember if I ever used one), but this is probably because I don’t edit content. And still most user images get scaled by the CMS, and I’m not sure if web servers have any functions of scaling images and keep them progressive. I highly doubt that 10% of JPEGs are progressive.

    I use “Save for Web & Devices” with “Optimized” JPEGs for images and PNG for other resources, and I always convert to sRGB and remove any Metadata.

    My advice to any content editor is to make a decent web size file with sRGB and don’t worry to much about compression. There is a very good chance that the CMS will convert your image and the original image will never be shown.

    4
    • piXelRider

      But if you know your CMS won’t mess your files, you should stick to progressive JPEGs – bigger files are usually smaller than their baseline versions: http://www.bookofspeed.com/chapter5.html

      5

Leave a reply

Advertisement