Back to Lesson 4 Main Page Lesson 4, Task 2

JPG Files

JPG is the image format of choice for photographic images used on the web.

For this task, create a new practice page in your web and name it practice4-2.htm.  The JPG editing example uses Microsoft Photo Editor, but the principles will be the same for all image editors.  If you don't have a photo editor at all, you can try an online version for this task.  Sites to try:  GIFworks.com  MyImager.com (has popunders - close or click 'No')

More About JPGs

JPG format has the ability to have a variable quality while keeping the viewing size of the image the same. 

To visualize how this can work, think about seeing a large billboard along a rural highway and imagine it being a JPG image.  When the billboard is new, you can make out the image clearly.  But then unscrupulous hunters fire shotguns at the billboard.  After a few blasts, the overall size has not changed, and despite the holes made, you can still see the images on the billboard almost as clearly as you could before.   But as time goes by, more and more holes are made in the billboard, and the image, though still visible and still the same overall size, becomes more difficult to see.  As each hole is made the billboard gets lighter - which is comparable to a JPG's file size getting smaller.

Image editor software will let you adjust the quality of an image while keeping its viewing size the same.  Reducing the file size by lowering the quality is called 'compression'.  But with JPG files, compressing a file also means reducing the quality.  Some file formats (for example, TIF) will compress a file size without a loss of quality, but the reduction in file size is much less.

It is important to note that once a JPG file is compressed, attempting to uncompress it will NOT bring the quality back up to where it was.  So if a JPG file is important to you, consider keeping an unaltered copy of the original image as an archive copy.
 

Example Image - Full Quality, No Compression, File Size:   150KB
Notice that the sky below and the the right of the flower looks smooth.

:
 

Example Image - Reduced Quality, 50% Compression, File Size:  16KB
Notice that the sky below and the the right of the flower is a bit patchy.

:
 

Example Image - Reduced Quality, 97% Compression, File Size:  4KB
Notice how bad this version really is!  The loss of quality from 150KB to 16KB is much more difficult to notice.

Task 4-2

Get 4 JPG public domain images off of the Internet (or provide your own photos).  Make a new practice4-2.htm web page.  Put 4 versions of each image on the page: 

• The original
• A cropped version of the original (you select which portions are cropped), no quality reduction.
• A reduced size version of the cropped version, no quality reduction, and
• A reduced quality version of the reduced size version.

See this example web page.  Use the image editor you used in Task 4-1.  Your assignment will have a total of 16 images.

Discussion Board Task 4-2:  Post a Link to Your Practice Page

When your are done with the JPG image editing page, SAVE IT, then publish it as practice4-2.htm to your web site and post a link to it in the Discussion Board.  Discuss the difficulties you had, or tricks you learned and want to share.