Graphic Formats

Next

Adding graphics to web pages makes them much more interesting. You need to understand some of the basic facts about digital pictures in order to make your pictures look good and not take a long time to download. When a web page loads on your computer, the text of the web page downloads and also all the pictures on the page. If the pictures are "large" (large file size), then the web page can load slowly.

What is a digital graphic or picture? Let's look at a simple one to see how it works. Below is a name typed out at normal size, then the same name zoomed in so you can see the individual squares that make up the picture. The squares are called "pixels". This comes from the two words "picture" and "element". Each pixel can be one of millions of colors. A digital picture is just a bunch of pixels of different colors. Try this: stand up and move back from your computer about 6 to 10 feet. The large "pixilated" name will look sharp and normal. You won't see the jagged squares.

Here is another example. The Mariners' star, Ichiro is here: This picture is 50 pixels wide and 60 pixels high. That makes 50 x 60 = 3000 pixels in all. Then each pixel has color information attached to it. The file size for this picture is 3,430 bytes (3.43 KB). Here is the same picture up a little closer:

You can begin to see the individual pixels in this picture. Now, here is the same picture even larger:

At this size, the picture almost becomes unrecognizable. It's amazing how the squares somehow convey the details of Ichiro's face. Try the same experiment of standing up and moving back 6 to 10 feet. Ichiro's face will look sharp and clear.

Next