Images
What fun would the Web be without images? They have so many uses in web pages: illustration, navigation, backgrounds, image maps. Let's go over some of what they can do, and while we'll cover more on cascading styles later, we will touch on a little of those now so we can explore image options.
Image Element
The inline <img /> element is one of the few self-closing tags in HTML, and can only be used in the body section of web pages. This is because the image tag does not wrap around anything like text, but is itself the element that visitors see. Notice that images are not technically inserted into an HTML page, but rather are linked to HTML pages. The <img> tag creates a holding space for the referenced image that appears to be embedded in the page.
<img />
The image tag has important attribute/value pairs that make it actually display on the web page:
Source Attribute
The src attribute is required in order for the browser to know where to find the image to be embedded. The value of this is the image file's actual location, relative to the location of the page the image will be embedded on.
<img src=”imagename.ext” />
Alt Text
The alr attribute is meant to be used as an alternative text if the image is not available, not as a mouse-over text. To show a mouse-over text on images or image-maps, use the title attribute. The alt attribute is required for validation and for web page accessibility. If a visitor cannot see the image, because it is slow to load or it is missing, the alt value – the info you give about the image – in place of the image on the web page. However, it does Explorer.
<img src=”whitecat.jpg” alt=”White Cat” />
Title Text
The title attribute is used for web page accessibility, like the alt attribute. It also appears on the web page as a tool tip when the cursor hovers over the image, but is only seen in this way in the Firefox browser.
<img src=”whitecat.jpg” alt=”White Cat” title=”White Cat” />
Style Attribute
The style attribute allows you to use inline cascading style rules to style how the image will appear – specific width, height, alignment, with a border, etc.
<img src=”whitecat.jpg” alt=”White Cat” title=”White Cat”
style=”width:200px; float:left; border:1px solid black;” />
Body Section Image Use
Block-Level Graphics
Images are by nature inline elements, which means that they do not specifically push the code after it to start on a new line (though they can make text around them look messy). However, many images that the visitor sees on a web page, like a product picture or an image of a person in a staff bio, look like block-level graphics. This is achieved by placing the image tag inside a heading, paragraph, table, or other block-level element.
<p><img src=”whitecat.jpg” alt=”White Cat” title=”White Cat” /></p>
Block-Level Navigation Links
Images used as a link can appear either inline or at a block-level if coded within a block- level element. For instance, when creating vertical navigation links, such as down the left side of the page, you might want to use images for visitors to click, instead of just words. Keep in mind that these will look most effective when they are consistent in style and size.
You would place the linking image inside of a table cell, a paragraph, or some other block-level element so that the images for each link appear to be on one line after the next in a vertical menu.
<p><a href=”whitecat.html”><img src=”whitecat.jpg” alt=”White Cat”
title=”White Cat” /></a></p>
<p><a href=”blackcat.html”><img src=”blackcat.jpg” alt=”Black Cat”
title=”Black Cat” /></a></p>
Inline Graphics
You can place images inside of block-level elements in a way that makes them look like they are on the same line as the rest of, say, the paragraph text, or in columns of a table. This is also a technique used to place navigation linking images side by side is a horizontal menu.
<p>
<a href=”whitecat.html”><img src=”whitecat.jpg” alt=”White Cat”
title=”White Cat” />
<a href=”blackcat.html”><img src=”blackcat.jpg” alt=”Black Cat”
title=”Black Cat” /></a>
</p>
Background Graphics
Images can be used as background in a table, table row, table cell, the body of a whole web page, as a <div> background, etc. We'll cover more about how this works when we talk about styling.
<body style=”background-image:url(path/img.ext); “> The rest of the body coding</body>
Favicons
Have you seen a website where there is a tiny image to the left of the URL in the browser address bar? Check out Starbucks and Adobe for examples. A favicon is a graphic image (icon) associated with a particular web page and/or website. Many recent user agents (such as graphical browsers and newsreaders) display them as a visual reminder of the website identity in the address bar or in tabs.
To add a favicon to your website, you'll need both an image and a method for specifying that the image is to be used as a favicon. However, the format for the image you have chosen must be 16x16 pixels or 32x32 pixels, using either 8-bit or 24-bit colors. The for– mat of the image must be one of .png, .gif, or .ico. This image should be stored in either the directory your actual HTML pages are in, or in your images folder.
<link rel=”icon” type=”image/png” href=”images/myicon.png” />
Image Qualities
When you include images in your web project, you need to be sure you prepare them for accessible, lightweight, and effective use.
Importing Images
When you bring an image into your web page, your link to where the image file resides tells the browser which image to load when the page is visited. The physical size of an image is based on the file size – the number of bytes, based on the PPI (pixels per inch) that make up the image. The standard for fast and efficient web image upload is 72ppi.
There are four image types which are consistently used for web pages:
• JPG: This format stores a single raster image in 24-bit color in a platform-in- dependent format that supports the highest levels of compression; however, this compression is lossy. The level of file compression can be increased or decreased, but image quality is sacrificed for file size. When you edit and resave .jpg files, you compound the degradation of the original picture data, and this degradation is cumulative.
• GIF: This format stores single raster image data or multiple raster image data in 8-bits, or 256 colors, and support transparency, compression, interlacing, and multiple-image pictures. This compression is LZW compression, at a roughly 3:1 ratio, and supports lossless compression.
• PNG: This format stores a single raster image at any color depth, and is a plat- form-independent format that supports high-level lossless compression and alpha channel transparency. Older browsers and programs may not support .png files.
• ICO: This is a format used only for favicons, as described above.
Each format has its use, and .png images are truly cool because they can have a transparent background, which eliminates the white box background that other images load with. Whichever image format you choose, your images should be absolutely no larger than 100kb in file size, and ideally should be well under 50kb.
Visual Sizing
The size your image appears in the web page is only partly dependent on the image's ppi and file size. If you link the image at its native file size, it can be very large or very small, depending on the ppi and file size. However, you can visual size changes in your code when absolutely necessary. The rule of thumb, however, is to closely estimate the size the image needs to be in your web page, and use an image editor to save a web-ready copy at the ppi that shows that visual size. 72 ppi/dpi is the web standard.
• Width: You can use inline cascading styles to change the visual image width.
<img style=”width:150px;” /> When you do this without changing the height, the
image will resize proportionally.
• Height: You can use inline cascading styles to change the visual image height.
<img style=”height:150px;” /> When you do this without changing the width, the
image will resize proportionally.
Here are a few common image dimension sizes:
• Wide skyscraper: 160 x web page width
• Skyscraper: 120 x web page width
• Half-page ad: 300 x web page width
• Full banner: 468 x 60
• Half banner : 234 x 60
• Micro bar: 88 x 31
• Button 1: 120 x 90
• Button 2: 120 x 60
• Vertical banner : 120 x 240
• Square button: 125 x 125
• Leaderboard: 728 x 90
• Medium rectangle: 300 x 250
• Square pop-up: 250 x 250
• Vertical rectangle: 240 x 400
• Large rectangle: 336 x 280
• Rectangle: 180 x 150
• Thumbnail: 100x100
• Small Thumbnail: 50 x 50
Image Placement
Where you place images, in relation to your page and text, has a lot to do with how clean and viewable your web page will look. You can control image placement is these ways:
• Alignment: An image can be aligned, either alone or in context of the text it is placed within, by styling its alignment. You will use inline cascading styles to float the image, either to the left, center, or right. Left is the default, but when placing an image in text, specifying left will standardize your image alignment for any browser that needs explicit directions. Example: <img style=”float:left;”>
• Tables: You can create a tabular table, and use table cells to align images by placing the image link inside the cell. This method has some limitations, especially if your images have different dimensions from each other. However, this method also has the positive effect of letting you style the table cell padding and margin to clarify some image placement.
• Divs: Division tags are currently the ultimate layout styling tool in cascading styles, and will be covered in Section 3. However, web authors who move away from use of tables in their code will graduate to using div and span elements for laying out all parts of their web pages, including the image placement. Later, folks.
• Background repeats: Images that you use in the background of table, table row, table cell, and div elements have their own special cascading style attributes depending on how you want them to appear. You can have an image repeat itself to the right, to the bottom, both directions, or not repeat at all. In other words, you can use a small image as a background, like a paw print, and have it repeat so that it looks like wallpaper. Or, you can have a large background image not repeat at all, so that it shows only once.
• Note: The original image attributes of align=, vertical align=, and <center></ center> are no longer allowed in validating XHTML code. More web author head shaking here.
Image Maps
An image-map is an image with clickable areas. Web authors sometimes use this to create a splash page image, or to make more than one part of a specific image, like an advertisement, clickable for different results.
The <map> tag is used to define a client-side image-map. The name attribute is required in the map element. This attribute is associated with the <img>'s usemap attribute and creates a relationship between the image and the map. The map element contains a num– ber of area elements, that defines the clickable areas in the image map.
<area>..</area>
Specifies a focusable area in a map.
<map>…</map>
Specifies a client-side image map.
Methods to Use
As an image with clickable pieces. You might do this if you make one long navigation menu bar with the page identifier words built into the image. Your visitor needs to click on those words, but can't get sent to the linked page because the words are part of the im- age.
<body>
<img src=”menu.gif” width=”400” height=”80” alt=”Main Menu” title=”Main
Menu” usemap=”#menumap” />
<map name=”menumap”>
<area shape=”rect” coords=”20,5,40,30” href=”about.html” alt=”About Us”
/>
<area shape=”rect” coords=”60,5,80,30” href=”products.html” alt=”Coffee
Products” />
</map>
<body>
As a large image loaded in small parts. You can have a large image, say for an enlargement of a gallery thumbnail, that will load slowly at full page size. You can instead load this image in pieces by ‘gridding' it, which is to slice it into several equally sized pieces and loading each one as a separate image.
You would use an image editing program to slice a copy of the large image into pieces, say 2x2 inch pieces, and then load those images into a borderless table in your web page. In the example below, one of the loaded images has been brought in as a link, which means that this part of the image only will be clickable.
<table cellspacing=”0” cellpadding=”0” style=”border:0;” > <!-- These are not deprecated -->
<tr>
<td><img src=”images/mochasl_01.gif” alt=”m01” /></td>
<td><img src=”images/mochasl_02.gif” alt=”m02” /></td>
</tr>
<tr>
<td><a href=”http://www.starbucks.com” target=”_blank”><img src=”images/mochasl_03.gif” alt=”m03” style=”border:0;” /></a></td>
<td><img src=”images/mochasl_04.gif” alt=”m04” /></td>
</tr>
<tr>
<td><img src=”images/mochasl_05.gif” alt=”m05” /></td>
<td><img src=”images/mochasl_06.jpg” alt=”m06” /></td>
</tr>
</table>
Objects
HTML's multimedia features allow authors to include images, applets (programs that are automatically downloaded and run on the user's machine), video clips, and other HTML documents in their pages.
Previous versions of HTML allowed authors to include images (via <img>) and applets (via <applet>), but these methods had limits and are now deprecated for object use. In- stead, the object element offers an all-purpose solution to generic object inclusion.
<object>…</object>
Includes an object in the page of the type specified by the type attribute. This may be in any MIME-type the visitor agent understands, such as an embedded HTML page, a file to be handled by a plug-in such as Flash, a Java applet, a sound file, etc.
<body>
<p>Here’s a close-up of my Starbucks mocha:
<object data=”mocha.png” type=”image/png”>
This is a <em>close-up</em> of my Starbucks mocha.
</object>
</body>