Week 1- Understanding Web Graphics


Palette Tutorial


 

The apple shown below was originally an image at 16 million colors and was reduced to 256 colors with very little difference in either graphic quality or size!



apple image with color compression and converted to a transparent gif.



Here is the same apple, only this time I reduced it to 16 colors. You can definitely see the difference in the image quality. You can see the color changes especially in the darker areas of the apple. Even though the size of the file was reduced, it is certainly not worth giving up the image quality.



apple image reduced to only 16 colors




Transparent .gif File Exercise


The .gif images below were made using the ellipse shape, flood fill, a texture and an inner bevel and then the background was made transparent, originally it was sky blue!



Transparent gem gifs



Here are the same gem gif's, only these were saved using the FILE, EXPORT, TRANSPARENT GIF method. Tolerance, opacity, and colors were manipulated to ensure that the sky blue pixels were invisible.



same gem gifs, only exported differently




.jpg File Format Tutorial


Below are 6 images of a clown, all were compressed at different levels.


clown, original image at 40,171 bytesThis is the original image with no compression and the file size is 40,171 bytes. This is much too large a size for a web page.


clown, compressed by 10, image is 17,926 bytesThis image was compressed by 10 and the file size is now reduced to 17, 926 bytes. While the image quality is excellent the file size is still too large for a web page.



clown, compressed by 40, file size is 8,738 bytesThis image was compressed by 40 and is now reduced to 8,738 bytes. While the image quality is still excellent the file size is still a bit large for a webpage.


clown, compressed by 60, files size is 6,745 bytesThis image was compressed by 60 and is reduced to 6,745 bytes. The quality of the image is maintianed and is good and the file size is optimal for a web page.THIS IS MY CHOICE!



clown, compressed by 80, file size is 4,438 bytesHere I have compressed the image by 80 and there is definitely loss of image quality, the file size is down to 4,438 bytes, however because of the loss of quality I would not use this image on a web page.


clown, compressed by 99, file size is 1.280 bytesThis image was compressed by 99 and the file size is a very minimal 1,280 bytes. There is so much quality lost in this image that it should not even be considered for use on a webpage.





.jpg versus .gif Formats in Saving Solid Color Block Images


Below are 2 images, both the same, however the first was saved as a gif and the second as a jpg at 40 compression. You can easily see the running of the solid colors in the .jpg image. With this type of image saving in .gif format is optimal for quality images.



saved as .gifThis is the .gif image!



saved as .jpgThis is the .jpg image, see the difference!!





PSP 2, Lesson 2

PSP 2, Lesson 3

PSP 2, Lesson 4

PSP 2, Lesson 5

PSP 2, Lesson 6     HOME~~~~~~~EMail me!