Quick image tips.
As you may know, the most widely supported web image graphic formats are GIF and JPEG. When do you use GIF and when do you use JPEG?
Remember:
- Use GIF format with graphics created on your computer, such as horizontal rules, buttons, or animation.
- Use JPEG format when the images are scanned pictures or photographs.
GIF.
GIF files contain a maximum 256 colors (8 bit) or less. This is good for customizing graphic files. For example, if you create a GIF image of a red arrow, customize the file to have only two colors, red and white.
In this case, the file is very, very, small. Its palette contains only two colors. A GIF file yields higher quality with a smaller size image, compared to JPEG. GIF works best with with computer generated graphics such as icons, logos, buttons, etc.
JPEG.
JPEG was built to be 24-bit (16.7+ million colors). It exists specifically for photographic-style images. JPEG stores image information by keeping track of color changes.
The advantage of JPEG is it has a smaller file size, than GIF, when storing photographs and images. This is with a wide variety of shading. However, it will not yield a smaller file when for low-color level, and details, like computer generated graphics.
GIFs also support special features, such as animation, transparency, and interlacing.
HTML Codes - Sounds.
The <EMBED> tag is used to add sound. An example appears as:
<EMBED
SRC="your-file.mid"
AUTOSTART=true
WIDTH=144
HEIGHT=60
LOOP=1>
HTML Codes - Images.
There are many different image formats. These include GIF, JPEG, PNG, ICON and BMP. Each has its strengths and weaknesses. To use any of these image formats in a web page, requires only one type of tag. This is the <img> tag. It appears as follows:
<img src="http://www.example.com/image.jpg" alt="title or description" />
The URL, "http://www.example.com/image.jpg", is simply a placeholder. Replace it with the actual URL of the image. Replace "title or description" with the title or description of your choice.
Using width and height, you set those image attributes in the web browser. To do this, use the code shown below. Replace "y" with the height of the image, in pixels, from top to bottom. Replace "x" with the width of the image, in pixels. from left to right:
<img src="http://www.example.com/image.jpg" alt="title or description" height="y" width="x" />
User experience.
Be careful with the size of the image being used. It takes time to download some larger images. So, if readers have slow connections, the image places an additional burden on them. When using non-text resources, think of the user, with the slow connection!
HTML Codes - Movies.
To support video playback in all web browsers, use both the <object> and <embed> tags. The standard, minimum code to do this follows:
<object width="240" height="196"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="moviefile.mov">
<param name="controller" value="true">
<param name="autoplay" value="false">
<embed src="moviefile.mov" width="240" height="196"
autoplay="false" controller="true"
pluginspage="http://www.apple.com/quicktime/download/">
</embed>
</object>
Notice the basic directions are repeated in both the <object> tag, and its parameters, and the <embed> tag.
|