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.
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.
