Click to go Home
Search / Guestbook / About  

 

 
Home / E-Learning / Internet / Computers / Web Building

 

 

 

 

 

 

 

 

 

Finding Images, Formats and File Sizes


Images such as drawings, logos and photos can make a site look much more interesting. They can also make a site load so slowly that visitors will leave before viewing the page if you don't prepare them properly.


Where to find images

An image can be a photograph, a drawing, or an animated graphic. There are several ways to get an image for your website. These include:

See also:

 

JPEG Vs GIF image formats


Images on a website are usually in one of two main formats: .jpeg (Joint Photographic Experts Group) and .gif (Graphic Interchange Format). If an image has just a few colors in it, such as 2 or 3, it should be in .gif format. Otherwise, it should be in .jpeg. Some images are also in .bmp format. It's best not to use the .bmp format because .bmp images are very large files.


The amount of information in an image is referred to the file size. This is measured in bytes (b), or kilobytes (k). A kilobyte is 1000 bytes.
Here are some examples: In the first table we see that a simple two-color image is much smaller in file size when it is .gif rather than .jpeg:

 

.gif format: ideal for simple colors combined with small file size.

.gif, 1.5k
.jpeg, 12k
.jpeg, 6k
.jpeg, 3k



You can see that the image in the .gif format is better quality while maintaining a smaller file size, less than 1.5 K. Even at 12 K, the .jpeg version is still lower quality.



.jpeg format: best for many colors


.jpeg is best for images with many colors, such as photos. Here is a comparison of a photo in both formats:

.jpeg, 21k
.gif, 21k
.gif, 40k



Here you can see how the .jpeg format is better at showing the complex colors of the food. At the same file size of 21k, the .gif image is low quality. Even at 40k, the .gif image is still not quite as good as the smaller .jpeg version.


Ideal image file sizes


The amount of information in a picture or webpage is called the file size and is measured in bytes (e.g., 3000 bytes or 3k or kilobytes). Keeping the page file size small is an extremely important point that is often overlooked by web builders, many of whom have a high speed Internet connection. If your pages are more than 40 to 60k, they are not optimal in file size. It is usually the images on a webpage that increase the time it takes to view a page. Text takes almost no time to download.


The file size for a small image should be 5 to10k. The file size for a larger picture might be 30k, but should be no bigger for use on a webpage. At 30k, an image will take 7 to 8 seconds to load for someone using a 56K modem Internet connection. If the total size of your webpage is over 40k, a visitor will have to wait 9 or more seconds to view the page. For most people this too long, and they may leave your website and go to another one instead.

Tip: You can check the size of a complete webpage in Internet Explorer by going to File > Save As…. It will save the webpage to your Desktop in two parts: a folder containing the pictures and the html page. Highlight both parts, right-click and choose Properties.


Check the size of images you see on websites. To do so:

1) Find an image you want to check.
2) Right-click on the image.
3) Choose Properties. You can now see the file size of the image, as well as its dimensions.


Exercise

1. Visit www.winzip.com. Estimate the file size of the main image. Then check and see if you were close.
2. Looking at the number of colors and the detail of the image, do you think it should be in .jpeg or .gif format?
3. Check the image information. What is its file size and format?
4. Try this with some other website images, such as those at www.cnn.com/ and www.cnet.com.
5. For an example of what happens when pictures are optimized improperly, visit this page of computer cases: http://www.atic.ca/store/product$/frameset.htm. How long did the page take to load? Check the file sizes and formats of some of the images.
6. On any website, find an image that is less than 10k.
7. Find an image that is more than 70k.
8. Find a .gif and a .jpeg image.
9. Find a webpage that is more than 100k.
10. Find a webpage that is less than 40k.


Review

1. What are the two main types of formats for webpage images?
2. If an image has just a few colors in it, what format should it be?
3. What format should be used for a photo of people?
4. How many k should a small image be?
5. How many k should a one webpage be, in total?
6. How long will it take to download an 80k webpage on a normal 56k modem?


Further resources:

• ”Web Graphics Overview” at Webmonkey.at http://hotwired.lycos.com/webmonkey/01/28/index1a.html?tw=design
• ”GIF vs. JPEG” at Webmonkey at http://hotwired.lycos.com/webmonkey/geektalk/97/30/index3a.html?tw=design

 

 
Home / Top


formerly Purple Sunset Designs

© 2003