Below is my second assignment for web publishing. I was given 3 images to convert JPEG and GIF. The main part of this assignment was to change the image quality in the JPEG images and the amount of colours in the GIF images and discuss the changes in file size and perceived quality as a result.
Image 1:
100%
I converted the first image to JPEG and left the quality at 100% and the image size is 283KB. I then reduced the quality of the image by 20% and repeated this process and graphed my results which you can see below.
40%
The graph above shows the size of the image in relation to the quality being lowered. As shown in the graph when the quality of the image decreases, the file size of the image also decreases. Changing the image quality from 100% to 80% saved 150KB and the image looks the same to the human eye.
40%
The second image is 40% quality and the image file size is 47KB. At first glance the quality looks to be okay. The benefit of having a lowered file size is that the images will load faster on your website or blog but you do not want to compromise on quality. If I was to use this image I would use the 60% quality as it is low in file size and is virtually the same as the 100% quality.
Image 2.
100%
Once again, I converted the image to JPEG and kept the quality at 100% quality. The image has a file size of 390KB. I reduced the quality by 20% and recorded the resulting file size change below.
The graph above shows the relationship between the image size and the percentage quality of the image. As you can see the image size drops dramatically with only a 20% drop in quality. It reduced file size by 192KB.
40%
100%
As always the first image was converted to JPEG and is 100% quality and has a file size of 267KB. This might not seem much but if a website has a lot of images, lowering the file size would save money and make the images load faster due to lower bandwidth. I reduced the image quality and graphed the results below once again.
40%
Once again I have a 40% quality image with a file size of only 42KB. I don't think this would be suitable as some of detail is becoming faded and pixelated. If I was to use this image I would use the 80% quality. It has a low file size of 118KB and is virtually the same as the 100% quality.
GIF Images:
For the next part of the assignment we had to convert the JPEG images to GIF format and graph the file size of the image against the amount of colours used. I used 256,128,64,32 and 16 colours. I also had to do the same with the images but this time without dithering and graph the results.
Image 1.
256 colours
The image above is 256 colours and the file size is 198KB. That is just over half the file size of the 100% quality JPEG image and is virtually the same to the human eye. I reduced the colours gradually and graphed the changes in file size below.
The graph above shows the relationship between the file size and the amount of colours for image 1. As you can there isn't much of a decrease in file size but there is a decrease of quality as the amount of colours is lowered.
128 colours
The image above is 128 colours and looks the same in my opinion as the 256 colour image. The detail in the image still seems to be perfect. The file size also drops to 161KB.
64 colours
When the image goes to 64 colours there is a noticeable difference in the detail of the photo and the file size also drops to 123KB. Although the file size is greatly reduced from the original image the compromise in quality is not worth the reduction of file size. If I was to use this image in GIF format, I would use the 128 colour as it is virtually the same as the original image.
I removed the dither in the image and below you will see a graph showing the relationship between the amount of colours and the size of the image file.
Turning dither off reduces the file size but not by much. The file will also become smaller as the amount of colours is reduced which is expected. The images below are examples of images with no dither.
256 colours
32 colours
If I was to use this image for my blog or website I would chose the dithered 128 colour image. I would chose this version as it had a reduced file size and has the same image quality as the original to the human eye.
Image 2:
Once again, I converted the images to the GIF format with dither and began reducing the amount of colours in the image and graphed the resulting change in file size below.
The graph I have displayed above shows the exact image size when the colours are reduced from 256 all the way to 16 each time being divided by two. There is a big reduction in file size from the JPEG version. By simply converting the image to GIF, I saved 133KB. I have placed two images below with reduced colours.
256 colours
64 colours
The two images above are examples of GIF images. The 256 colour image has a file size of 257KB and 64 colour image has a file size of 167KB. I can see a difference in quality between the two images. The 64 colour image seems to be more dull than the 256 colour image. If I was to use this image I would use the 256 colour image as it has the best visual quality.
No Dithering:
I will give two examples of GIF images with no dithering and a graph showing the size of the image in relation to the amount of colours.
256 colours
64 colours
Similarly to the images with dither, the image with 64 colours seems to be dull once again. This is as expected due to the reduction in colours. I reduced the colours by half and graphed the results below.
Once again the graph displayed shows the file size and the amount of colours in the image. There seems to be very little decrease in file size and quality of the image when you turn the dither off. If i was using this image I would use the 256 colour image as it has a low file size and has the best quality.
Image 3:
Below is another two examples of GIF images with dithering. One with 256 colours and a file size of 164KB. and the other with 64 colours and a file size of 108KB. As you can see there is a slight difference.
256 colours
64 colours
If I was to use this image I would use the 128 colour image as the image has a smaller file size and is virtually the same to the human eye once again. I reduced the colours by half and graphed my results below.
The graph above is as expected. The file size decreases when you convert the image to the GIF format and the file size also decreases as the colours are halved.
No Dithering:
Similar to the previous images, there is no great save in file size when you remove the dither. Below are two examples of the third image without dither while the colours are being reduced.
256 colours
64 colours
You can visually see the image quality decrease. in the 64 colour image the detail becomes blurred and not as defined as it is in the 256 colour image.I reduced the amount of colours in the image and recorded my results below in a graph format.
The graph above shows that when the amount of colours drop to 16, the file size it only a third of the size when the image has 256 colours but this does not come without compromise. The image quality is greatly reduced. If I was to use this image I would use the 128 colour image once again as it has great quality and a small file size.
Conclusion:
JPEG: From my assignment, I have learned that using the JPEG format creates a large file size. By simply reducing the image quality 20% from 100%, it creates a huge save in file size as the graphs above show. As the quality gets lower so does the amount memory you save. If I was to use a JPEG image on my blog or website I would reduce the quality of the image to 80%. I would do this as it would load faster without compromising on the visual quality,
GIF: I was amazed by the results the GIF format showed me. The GIF format reduces files size drastically when you convert it to JPEG as the graphs show. After you convert it, the visual quality of the image is the same also. Once you reduce the amount of colour to 64, the image becomes of a poor quality. In my opinion, Changing the dither setting didnt do much for the images. It reduced the file size but not by much. If i was to use GIF images on my blog I would use 128 colours with dither as it is a low file size and brilliant quality.
Trade off: From what I have learned, the GIF format only uses 256 colours while the JPEG format uses millions of colours. I also learned that using the JPEG format is better for actual photos while the GIF format is better for flat photos, For example,text images or logos. If I to use only one for the rest of my life, I would chose GIF. I have chosen GIF as it has a smaller file size and is virtaully the same quality to the human eye at 256 colours.