A web page with images is almost always more attractive that one with just words. People just love pictures!
Web pages use images in a number of ways:
However, there is a trade-off. The more images on the page and the larger the images are, the longer it will take the browser to show the whole page.
There is a limit to how long people will wait. 30 seconds is an eternity when you are staring at a blank page!!
As a web page author, you must carefully consider the number of images to include, how large they should be, and what image file format to use.
Project 2: HTML Basics
There are two file formats in general use for images on web pages: GIF and JPEG. All browsers can display these two formats. Both compress the file, making the file smaller and thus faster to download.
Other web image formats:
BMP: Old, bulky bitmap format.
PNG = Portable Network Graphic
SVG = Scalable Vector Graphics. This is the cutting edge of web graphics!
Most images on the web are in color. If you are an artist, you may be disappointed with how your work displays on other computers. The colors will not be quite the same, at best.
Factors affecting color:
Your wonderful graphics, text colors, and background colors will not look exactly the same on different computers. They may not look much like what you intended at all!
Many hand-held or palm-size computers show only gray scale (256 shades from black to white). Other computers show just 256 colors. Sometimes it is just that the owner does not know that the color depth can be changed!
When a browser has to display an image that has more colors than the system can display, it has two choices.
(This won't quite work if your monitor is using less than True Color.)
Compare the photos below. 256 colors (on the right) just isn't enough to do the job for a photo!
The Color dialogs below show how individual colors fare in TrueColor and at only 256 colors. Notice especially the Color/Solid box under the rainbow box. In 256 colors the selected color must be dithered, as the Color/Solid box shows. Not too pretty!
Windows and Mac both have settings for 256 colors. To complicate things, they are not the same 256 colors. The colors that Windows and Mac do share are sometimes called the browser safe colors. Drawings and clipart that use just those colors will look very much the same on different computers. (Artists may not agree, but the rest of us would not notice much difference.)
Photos, however, simply will not display correctly in only 256 colors. They often look like some kind of modern art instead of a photo of reality.
What Do You Need?
To insert an existing image into a web page:
To create or change an image, or to change the file format of the image:
If you work with web pages a lot, you will want to get a graphics program so you can make changes in your images or even create your own. No matter how many images you have to choose from, none ever seem to be exactly what you had in mind!
A good graphics program will be able to open and save in many image formats, has tools that save you time, and can create advanced effects.
Popular Graphics Programs:
version of MS Paint that comes with Windows 95/98 can save an image only as
a bmp file. BMP files are entirely too large for
use on the web.
If all you need to do is change the file format, you can use a graphics conversion program. There are many shareware and freeware programs for this. Some of these programs even let you make certain changes like adding text or changing colors. You will not be able to make as many changes as you can with a regular graphics program.
FrontPage and FrontPage
Express can insert images in a number of file formats. They will
convert the images to either gif or
jpg format. Images with only 256 colors will
be converted to gif format. The rest will be
converted to jpg format.
While FrontPage Express does not list png in its
drop list of file types, it actually can open this type of image.
Basic IMG Tag
The HTML tag for an image is not paired with a closing tag. It has several attributes that are required and others that are optional. The tag below shows the attributes that should always appear:
This tag illustrates several of the punctuation rules for all tags.
Punctuation in tags:
Leaving out punctuation, like a " or < or >, can make part or all of your page disappear from the browser!
Required Parts of an IMG Tag:
~~ 1 Cor. 10:31 ...whatever you do, do it all for the glory of God. ~~