GIF & JPEG

We had already looked at image file formats in class, including GIF (Graphics Interchange Format) which uses 8 bits per pixel. It has at most 256 colors and its compression is lossless and is ideal or logos and graphics. We also looked at run length encoding which replaces multiple occurences of an item by stating the number of times that item appears. Run length Encoding needs long runs of the same color to be successful. Turning an image on its side 90 degrees can either make run length encoding more or less usable therefore changing the file size of the image drastically. Dithering can break up expanses of the same color which makes Run Length Encoding difficult.

 Progressive downloading  gives the user a blurred preview image of the image they were downloading. This is not of much use anymore as everyone has high speed broadband and instantaneous downloads and could only come in handy on a mobile website.

JPEG (Joint Photographs Experts Group) was created to make a standardized digital file format in which the degree of compression can be adjusted. It is the most common image file format on the web and is ideal for landscape images or any that don't use run length encoding. Luminence and Chromanence are the brightness and color information in an image. Humans aren't great detecting changes in Chromanence so files can be compressed by throwing away lots of the Chromanence information whereas Luminence information is very noticeable to the human eye and can't be compressed too much without degrading the quality of the picture to anyone viewing it.

              PNG

 

 

PS1 is 600 KB (615,246 bytes) as a PNG.

 

Below you can see in the line chart representing the size of the image as the number of colors are reduced by saving the image as a GIF  on  Photoshop.  In my opinion 64 colors provides the best value as the file size is dramatically reduced while still providing a good quality image. 32 colors would be the lowest acceptable number of colors as it still is quite good.
Adjusting the color palette scheme to perceptual or adaptive does not affect the file size to any significant degree.

 

 

                                             JPEG Quality Levels

 

PS1 compressed to a JPEG at quality level 8 becomes 141 KB (145,043 bytes).

PS1 compressed to a JPEG at quality level 6 becomes 117 KB (120,826 bytes).

PS1 compressed to a JPEG at quality level 4 becomes 94.8 KB (97,134 bytes).

PS1 compressed to a JPEG at quality level 2 becomes 67.6 KB (69,302 bytes).

PS1 compressed to a JPEG at quality level 1 becomes 60.0 KB (61,440 bytes).

Bit depth for all of the above JPEGs is 24.

 

Below you can see in the line chart representing the size of the image as the number of colors are reduced by saving the image as a GIF  on  Photoshop. .  In my opinion 64 colors provides the best value as the file size is dramatically reduced while still providing a good quality image. 32 colors would be the lowest acceptable number of colors as it still is quite good.
Adjusting the color palette scheme to perceptual or adaptive does not affect the file size to any significant degree.

 

 The second image PS2  shown below has a size of 472 KB (483,530 bytes).

    PNG

JPEG Quality Levels

PS2 compressed to a JPEG at quality level 8 becomes 100 KB (102,716 bytes).

PS2 compressed to a JPEG at quality level 6 becomes 82.3 KB (84,364 bytes).

PS2 compressed to a JPEG at quality level 4 becomes 64.0 KB (65,575 bytes).

PS2 compressed to a JPEG at quality level 2 becomes 53.7 KB (55,089 bytes).

PS2 compressed to a JPEG at quality level 1 becomes 42.3 KB (43,355 bytes).

 

                                                        

The third image PS3 shown below has a size of 436 KB (447,070 bytes).

When this becomes compressed as a GIF it now has a size of 138 KB (141,774 bytes).

 

 JPEG Quality Levels

PS3 compressed to a JPEG at quality level 8 becomes 88.0 KB (90,167 bytes).

PS3 compressed to a JPEG at quality level 6 becomes 72.2 KB (74,029 bytes).

PS3 compressed to a JPEG at quality level 4 becomes 56.1 KB (57,531 bytes).

PS3 compressed to a JPEG at quality level 2 becomes 43.4 KB (44,459 bytes).

PS3 compressed to a JPEG at quality level 1 becomes 38.6 KB (39,570 bytes).

 

Below you can see in the line chart representing the size of the image as the number of colors are reduced by saving the image as a GIF  on  Photoshop. .  In my opinion 64 colors provides the best value as the file size is dramatically reduced while still providing a good quality image. 32 colors would be the lowest acceptable number of colors as it still is quite good.
Adjusting the color palette scheme to perceptual or adaptive does not affect the file size to any significant degree.

 

COST/QUALITY TRADE OFF

When deciding what quality level of JPEG to use graphs such as the one above can be very useful in visualizing the trade off. Personally I think anything at Level 6 or higher for a JPEG will still result in a very high quality image at a fraction of the cost/file size. So for me a Level 6 quality JPEG is the best value quality setting. The lowest acceptable quality setting would be Level 2 but the quality while still acceptable in certain cases shouldn’t be used to much.

While researching this quality trade off I came across the following information:

What many people don’t know is that there is a quirk in the way that Photoshop defines its quality range. [...] Quality level 6 is the last point in which Chroma Subsampling (Chroma subsampling is the practice of encoding images by implementing less resolution for chroma information than for luma information, taking advantage of the human visual system's lower acuity for color differences than for luminance)  is used. At Quality level 7 and higher, no chroma subsampling is used at all. With the amount of color information encoded now doubled, the file size would have naturally increased significantly at this level versus the previous level.

However, it is likely that Adobe decided to allocate the various quality levels with some relationship to the final compressed file size. Therefore, Adobe chose a poorer luminance and chrominance compression quality (i.e. higher level of compression) in Quality level 7 than Quality level 6! What this means is that the image quality of Quality level 7 is actually lower than Quality level 6.

Read more at http://petapixel.com/2011/08/26/a-higher-quality-setting-in-photoshop-sometimes-reduces-jpeg-quality/#ZDvGuydzJ2C2Hjh7.99

Guidelines For Web Developers.

The web is also full of different kinds of image media. You can have photographs, icons, buttons, badges, and tons of other graphics.  Comparing quality between a button and a photograph just doesn’t make sense. Take notice of the many different graphics you have throughout a website and consider optimization techniques for each one individually.