1. File Size and File Formats

2. Digital cameras often save images in one of several formats: JPGBMPTIFFRAWOthers Most of these are unsuitable for use on the web, and even JPGs (which are suitable) can be much too large or can have other issues that should be dealt with before putting them on the web. But, most image types that are unsuitable can be made suitable, using appropriate free software (available here in the lab and at home). There are also other sources for images, like the web itself, but just because it came from the web doesn’t mean it’s right for what you want to do. Be careful. So what’s a suitable image type? Glad you asked....

3. Most of the images you want to use in your web pages will be in either JPG (pronounced jay-peg) or in GIF (usually pronounced giff) formats. There is also PNG, but this is less common. If you’re looking at any other image type, you should consider converting it before you do anything else with it. In general, JPGs are suitable for photos and other complex images with lots of different colors, while GIFs are suitable for simple images with few colors, large areas of single colors, or with transparent areas, or with animations. JPG images cannot have transparent areas or animations. JPGs for photos, GIFs for everything else. JPG – Photo, many complex colors GIF – Only a few solid colors

4. Smaller File = Better File Size and File Formats Smaller File = Quicker Download JPG GIF

5. Smaller File = Better File Size and File Formats Smaller File = Quicker Download 256 KB3 KB 85  JPG BMP 12 1 12 1

6. Bits and Bytes A bit is the smallest unit of data a computer can work with, a 1 or a 0. A byte is eight bits. File sizes are measured in bytes, because it’s important to know how big they are – how much room they’ll take up, how long they’ll take to download, how well they’ll print, etc. A smaller file size is better than a larger file size, but this usually means the quality of the image suffers. In general, the larger the image, the higher the quality – but the slower the download time, etc. A kilobyte is 1000 bytes (1 KB), and is usually fairly small by web standards. Most images for the web fall into the range of about 10 KB (kilobytes) to 80 KB -- total -- for the page. Anything larger than about 100 KB -- total – for the images on a page, and you should ask yourself if there’s a better way. There usually is. An image that needs 100 KB on disk, or 200 KB on disk, or even 1400 KB on disk, needs to be reduced (optimized) before use on a web page.

7. File Size and File Formats 96 KB 8 KB 12  45 KB4 KB 11  240 KB 20 KB 12  JPGBMP JPG GIFBMP

8. File Size and File Formats 616 KB 63 KB 99 JPG

9. File Size and File Formats 54 KB 11 JPG

10. File Size and File Formats 28 KB 237 KB 88 JPG

11. File Size and File Formats DO USE JPG (photos)* GIF (solid colors, or if transparency or animation is required) PNG (any) *JPGs can still contain large amounts of information if not properly optimized DON’T USE BMP, WMF, TIF Other formats CONVERT AS NEEDED