Images in HTML Pages
Adding Images
The img tag is used to add images to a page:
<img src="path/imagename" alt="text">
(See Anchor Tag - Image)
Required attributes are:
src (include path and filename)
alt (brief description of image)
If you want your images to expand and contract with the width of the visiting browser:
Rule #1 Do not add the width and height measurements to your image code.
Rule #2 Include the line:
img {max-width: 100%}
in your style sheet.
Grab a side of this browser window and squeeze it to the right or left until the web page is just a very thin column.
Watch as the images on the page, including the ads, scale down in size to fit the available space.
The pictures on your web pages will do the same if you follow the 2 rules posted above.
Image Types
The most commonly used image formats used in HTML pages are GIF, JPG and PNG.
GIF Files
The GIF (Graphics Interchange Format) format is the most commonly used image file type used on the web. All web browsers can display GIF files. There are variations of the GIF format. GIF87 includes a feature called interlacing. GIF89 format includes interlacing and another feature called transparency.
Interlacing means that the image is displayed gradually and has the appearance of a blurry picture coming into focus.
Transparency means that the background color of the image is transparent and allows the background color of the web page to show through.
8 bit coded GIF images can include up to 256 colors.
JPG Files
JPEG (Joint Photographic Experts Group) or JPG file format is used mostly for photographic image display. Colors are encoded with 24 bits per pixel, allowing more than 16 million colors to be rendered.
Interlacing and transparency are not available with JPG format.
When displaying larger images JPG format will often produce smaller file sizes than the GIF format. Smaller images are better suited to GIF format for producing smaller file sizes.
PNG Files
PNG (Portable Network Graphics) format is the late comer of image formats, but is now supported by the majority of browser types. PNG offers both interlacing and transparency, and also offers more colors than the GIF format. (48 bits per pixel) PNG usually produces smaller file sizes than GIF or JPG.
PNG also offers several error checking facilities.
Optimizing Images
Optimizing is the process of reducing an image to the least number of bits per pixel and colors without sacrificing the quality of the displayed image. Large images and slow modems are a major cause of irritation for web surfers. Many good graphic creation programs include features for optimization.
Always check your images when HTML pages are uploaded to your web space. Many images will display quite differently over your web hosts server, than they do when viewed on your PC.
Monitor Resolution and Images
If building fixed width web pages, consider the resolution setting of your visitor's monitor when placing images. Not all surfers have their monitor resolution set to a 1200+ width.
Many still use an 1024 pixel resolution setting. That means if you place images on your pages in excess of 1024px in width, that viewers with 1024 res. settings will need to scroll to the right on your pages.
*Build liquid web pages and you won't need to worry about image sizes.
Note: For adding images to your web pages see Paragraphs and Images.