Introduction To HTML & CSS: Learn To Code Websites Like A Pro by Danny Ajini

Author:Danny Ajini [Ajini, Danny]
Language: eng
Format: epub
Publisher: Climb New Heights LLC.
Published: 2015-07-08T22:00:00+00:00

.PNG's And .GIF's

.PNG's and .GIF's are best used when the image in question is based on areas of solid color rather than thousands of pixels of various color.

Figure 11.3 – Since the image below is based off blocks of solid color a .png or .gif file extension would work best.

The picture above would be better suited to be saved as either a .gif or a .png. If the image were to be animated it would most certainly be saved as a .gif because .gif's support animation.

Both .gif and .png support transparent objects, however .png is much better at transparency.

You probably can't tell by looking at the above picture however it has a transparent background. When you try to save an object with a transparent background as a .jpg the transparent part will be turned white.

Let's do the same experiment as we did with the dog pictures.

As you can see, when trying to save the above image as a .jpg at 100% image quality the image will take more than twice the amount of time it would have taken the .gif and .png to load. Not to mention the fact that the .gif and the .png will have transparency.

Also not to mention the fact that if if you did try to save the above image as a .jpg and you tried to lower the quality in order to save load time, this would happen.

Figure 11.4 – When attempting to save this image as a .jpg some mild “compression artifacts” beings to appear.

As you can see, I lowered the quality of the image down to 31%. At 31% quality the image takes 4 seconds to load. And as you can see, lowering the quality of the image has caused the image to suffer greatly.

If you'll look at the areas on the image that I have circled you can see subtle variances in the color of the individual pixels causing an extremely ugly effect to take place.

This is known as a .jpg “artifact”.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.