Navigation

Topic: File Types and Image Files

Goals

Understand that files are used for different types of data. Focus on text and graphics in particular.

Notes

The Web is based on the exchange of messages and files. A file is a lump of data with a name and a type. The last part of the name is often used to indicate the type of data in the file. For example, a file called "shopping_list.txt" is probably a text file. A file called "solitaire.rb" might be a program in the Ruby programming language. You don't have to follow these conventions. You could put a sound in a file called "memo.txt" if you wanted to, but your computer might get confused when it tries to open the file.

Text Files

The most common types of files on the Web are text files. They contain letters, digits, and special characters, like @ and $. You can create them with any editor, but some editors are better for Web work than others. See the tools page for more information.

Text files are used for all sorts of things. Examples:

intro.html - Files with HTML or HTM extensions contain HTML code, giving the content for a page. Sample
modern.css - Cascading style sheet, defining how pages will look. Sample. Sample in use.
menu.js - A file with JavaScript code. Sample. Sample in use.
sample.php - A file with a PHP program in it. Sample. Sample in use.

HTML files often contain references to other files. For example, an HTML file might refer to the file dog.jpg. The browser will then download that file.

Image Files

There are lots of different graphics file formats. Examples:

dog.jpg - A JPEG file. The JPEG format is good for photographs, which have lots of colors. It does not support transparency or translucency. JPEG files lose information when they are compressed.
banner.gif - A GIF file, good when there are few colors. Supports transparency but not translucency. Supports animation.
title.png - A PNG file. Has all the features of the others, plus variable translucency.

I tend to use PNG files, although browsers like IE 6.0 have trouble with translucency.

Here is a JPEG file (about 16Kb):

Balaji

There are hundreds of colors in the image. Here is the same image, compressed too much (about 7 Kb):

Balaji

Here is a GIF file:

Cow

Notice that there aren't very many colors.

Here's the same image against a colored background:

Like all images, the image is rectangular, as the black border around it shows. The area around the cow was set to transparent. When the browser renders the image, it doesn't write to the transparent pixels, so the color in the background shows through.

Here is an animated GIF:

Dog

It's made of a stack of different frames shown one after the other. Here are some of the individual frames:

Frame 1

Frame 2

Frame 3

Frame 4

A PNG can do all of the above, plus translucency. Transparency is either on or off for a pixel. When it is on, the background color shows. When it is off, the pixel's color shows. Translucency is different. A translucent pixel has two values: its color, and a translucency value. The background color and the pixel's color are blended. Opacity is the inverse of translucency. A pixel with a translucency of 60% will have an opacity of 40%.

Flamingo Translucent circle

In the example above, the edges of the blue splotch are translucent. Notice how they blend with the flamingo's color. You can see the edges of the flamingo with the splotch pixels are translucent enough.

There are other ways to make pictures, like SVG. I won't cover them here.

Getting and Making Images

Let's break the discussion into two parts: photos, and drawings

Photos

You can download many public domain or otherwise free photos, or take your own. To take your own, use a digital camera, like the one in your cell phone, or scan a printed photo.

There are various ways of getting photos from cell phones or digital cameras. My cell phone has a slot for a microSD chip.

I tell the camera to store photos to it, rather than to internal memory. To move photos to my computer, I take the chip out, and put it in an adapter that plugs into my computer. The chip then acts like a drive (G:, H:, whatever). I can copy files from the chip onto my PC.

Downloading

Another way to get an image is to find one on the Web. You can use just about any image from any site for a class assignment - that counts as educational fair use. However, for any real sites, you must use a public domain (PD) image, or buy the rights to use an image. You can get rights from about $0.50 per image. There are some useful links at the bottom of this page.

Suppose I wanted an image of a cow. I might go to http://www.usa.gov/Topics/Graphics.shtml, which gives me links to collections on PD images on federal sites. I find a page that looks like this:

Cow

Aha! A cow picture. I'll use the one on the right. It looks the most depressed.

I click on the image to see a larger version:

That's the one I want. I right-click on the image, and select Save Image As...

Cow

(This screenshot is for Firefox, as always.)

The browser asks me where to save the file:

I select the directory I want to save the image in. Notice that the browser has suggested the file name k8448-1i.jpg. This is the name given to the file on the server. That is, the person who copied the photo onto the server's disk drive called the file k8448-1i.jpg. Why? Just because, that's all.

If I don't like the name, I can change the name now or later. I'll change the name to my_best_cow_friend.jpg.

Notice that I kept the file extension the same! This is important. There are many types of image files, and browsers use extensions to tell them apart. If you change the extension, your browser might not be able to show the image correctly.

Now I have the image:

Editing Photos

You can look at the file and do simple edits with Irfanview (free), my fave viewer. It's good at cropping and resizing, for example.

Make sure you size photos correctly for the Web. Here's a picture of Renata, one of my dogs. The picture is exactly as it came from my phone:

The phone saved the image as a JPEG. The size of the file on disk is about 70K (K = 1,024 bytes). The dimensions of the image on the screen are 640px by 480px.

I wanted the photo to focus just on the dog, and to be small. First, I used Irfanview to crop the original image to get just the piece I wanted. This is what I got:

This file is 18K, and 221px by 334 px.

Then I used Irfanview to shrink the image to this:

This JPEG is 9K, and 100px by 151px. Less screen space than the original, and the file is smaller, and therefore faster to download.

To do things like adding text, lots of people like Paint.NET (free) or the GIMP (also free).

I used Photoshop Elements (about $100) to add some styled text. The image has the same dimensions, and ended up being only 4K after PE exported it.

Hint: if you're going to use one of these tools, make sure you learn how layers work.

Drawings

Photos are, well, photos. A drawing is a collection of lines, circles, shapes, and other objects that you add to a canvas. You can set color, shading, overlay, effects, and all sort of things. You can add bitmaps (like photos) as objects as well.

Flash is good for this, and for animations, of course. OpenOffice (free) has a drawing tool (along with a word processor, spreadsheet, etc.), and there is Inkscape (free) as well. For simple lines-and-boxes work, the drawing tools in Microsoft Office are quite good.

Below, I used the free program Inkscape. I imported the cow, then added four objects: the text, the line, a rectangle, and a gradient on top of the rectangle. Then I exported the result as a PNG.

Hint: YouTube has lots o' neat tutorials on using graphics software.

Sounds

The MP3 format makes the most sense to use these days. I use Audacity (free) for most of my audio work.

You can do some fun things with audio, like this, this, and this.

Other File Types

You can put any file type on the Web, like:

Your computer needs the software to open a file. Browsers already know how to display PNGs and such. However, they don't know how to open an OpenOffice document. They pass the document to OpenOffice, if you have it installed. If not, you can't do much with the file.

Exercises

Download all of the images from this page. Save them in a directory on your computer.

Look at the source code for this page. Find references to the sound file.

Take some photos with your cell phone camera. Move them to your PC. Crop them. Add text. Save them as JPEG and PNG. Size them for use on a typical Web page. Try sizes from 50px to 500 px.

Record some audio. You might do it with your cell phone, then move it to a PC. Make it sound like a chipmunk.

Kieran's Web Web