Image Optimization

  • Use your own images and words to describe the differences between jpeg image quality settings and file-size/download time. Include png and gif formats.
    • Using the same base image create copies in other major formats.
    • Compare file size, dithering, and clarity.
    • Suggest an optimal format for the web and explain your choice.
    • Indicate a connection speed for your results, i.e. (256 Kbps Cable/DSL)
    • Indicate the download time
  • Create a link in your navigation to this page.
  • Show examples of the following including data and a comment about the image quality.
    • JPEG Quality 100, 80, 60, 40
    • GIF Colors 256, 64, 16, 8
    • PNG 24

JPEG 100

Highest JPEG Quality 17.95K 4 seconds download at 56.6 Kbps connection. Visitors with the highest quality internet speed would be looking at this sort of image but not recommeneded for everyone else. This is the most detailed of the images the more you zoom in.


JPEG 80

Very high JPEG Quality 9.302K 3 seconds download at 56.6 Kbps. This is for the average user with average internet speed. The image barely looks any different than when on the highest quality except when you zoom in to the extreme and start to see a little grinny dots.


JPEG 60

High JPEG Quality 5.921K 2 seconds download at 56.6 Kbps. This is also for the average user with slightly lower internet speed but the image quality isn't that good here. If the image size is too big, the lower quality is more obvious.


JPEG 40

Medium JPEG Quality 3.72K 2 seconds download at 56.6 Kbps. This is for visitors with slow internet speed. The image looks very grinny when you compare it to the best quality and even with the image the same size, the image doesn't look that nice. The image quality feels like it punishes those with slow internet.


GIF 256

Highest GIF Quality 26.42K 6 seconds download at 56.6 Kbps. This photo is closest to the original in terms of appearance having the sharpest appearance. If you use the dropper item and were to look at the colors, the picture would have many to choose from and is widely considered the most accurate in terms of what color matches to what. This is the only image that has dithering at 100% (the rest of the GIF images have 0).


GIF 64

Very high GIF Quality 17.04K 4 seconds download at 56.6 Kbps. There isn't that much of a difference despite the drop in how many colors are used in the picture. This might be because the image still has many colors to choose from to still look identical. Only when you zoom in can you start to see a little bit of graniness. Overall probably the picture you want for the average user.


GIF 16

High GIF Quality 10.49K 3 seconds download at 56.6 Kbps.This is where you start to see the image blurring with fewer colors to choose from. The most noticable portions that are blurred is the bottom of the pineapple that takes away most of the colors just to make it mostly orange and the leaves that don't look as realistic and looks like it came out of a water color design.


GIF 8

Medium GIF Quality 8.026 2 seconds download at 56.6 Kbps. This image is the most grinny of the most (or most cartoony). The less color there is, the more the image smudges so when you use the eyedrop, it only picks the most common colors. The image as shown above doesn't look like a photograph anymore and more of a blurred digital photo and/or artwork.


GIF with Transparency

The highest quality GIF at 256 color, 51.92K 10 second download at 56.6 Kbps. Transparent pictures at the highest quality take less time to download in contrast to the visible background image and when you crop the image, sometimes the picture enlarges to fit the screen. While the image is the same width and height, the pineapple itself is larger.


PNG 24 With Transparency

Images taken from Adobe Illustrator, PNG images are generally easier to make transparent without the use of needing multiple layers like Photoshop. The original image takes 4.135K and the modifited one with the star takes 19.14K. Both take 56.6 Kbps. As shown, the speed of a png file is normally fast unless you decide to add modifications, then it takes as much time as a JPEG file to show up. The PNG files lack the download time on the save web section.


PNG 24 Without Transparency

A non-transparent file takes 4.903K which is slightly more time than a transparent PNG. This is because the file includes the background (as blank as it is) and that takes up more space then say getting rid of the background being left with just the circle. No transparency also shows how well you cropped the image and the more precise you are with the cropping, the less time it takes. The PNG file lacks the download time.