Design Paper 5
Image sizes and web pages
This web page looks at the implementation aspects of using images in web pages. It considers how maintaining proportionality (relative sizes of images and text) can be achieved.
A new image does not always need to be created if the requirement is to display the image as a different size. This can be achieved using HTML alone or combinations of HTML and CSS.
A single red square image 
was defined with a width of 10 pixels and a height of 10 pixels. This single image of 41 bytes is used throughout this page.
The VisibleGif XML used to generate this image is as follows.
<?xml version="1.0"?>
<gif>
<header>
<signature>GIF</signature>
<version>89a</version>
<screen-width>10</screen-width>
<screen-height>10</screen-height>
<global-color-present>true</global-color-present>
<color-resolution>1</color-resolution>
<colors-sorted-by-importance>false</colors-sorted-by-importance>
<global-color-size>2</global-color-size>
<background-color-index>0</background-color-index>
<pixel-aspect-ratio>0</pixel-aspect-ratio>
</header>
<global-color-table>
<index>0</index> <red>00</red> <green>00</green> <blue>00</blue>
<index>1</index> <red>FF</red> <green>00</green> <blue>00</blue>
</global-color-table>
<image>
<left>0</left>
<top>0</top>
<width>10</width>
<height>10</height>
<local-color-present>false</local-color-present>
<interlaced>false</interlaced>
<colors-sorted-by-importance>false</colors-sorted-by-importance>
<local-color-size>0</local-color-size>
<lzw-minimum-code-size>2</lzw-minimum-code-size>
<data-rows>
<row count="0" >""""""""""</row>
<row count="1" >""""""""""</row>
<row count="2" >""""""""""</row>
<row count="3" >""""""""""</row>
<row count="4" >""""""""""</row>
<row count="5" >""""""""""</row>
<row count="6" >""""""""""</row>
<row count="7" >""""""""""</row>
<row count="8" >""""""""""</row>
<row count="9" >""""""""""</row>
</data-rows>
</image>
</gif>
Changing display size using HTML IMG and attributes
This approach uses HTML alone. The approach is inflexible and inefficient.
The basic HTML construct to display the image is as follows.
<IMG src="red1010.gif" alt="small red square" width="10" height="10">
The image characteristics are hard coded into the web page. To maintain proportions the browser type, screen width and screen height have to be detected. Depending on these display characteristics an appropriate <IMG> statement has to be generated.
In the following table only the HTML width and height attributes have been changed.
|
|
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||
This seems to be the only reliable method that works in the Netscape range of browsers.
Changing display size using HTML IMG and CSS
This approach uses HTML and CSS. The approach allows the image and its alternative text to be visible to "text-only" browsers. It hides the image characteristics in the CSS.
It is easier and cleaner to generate the link statement to a CSS appropriate for a particular browser and display than it is to generate individual HTML statements. A range of CSS can maintain proportions across a range of display sizes.
The basic CSS construct to define a particular class associated with an image is as follows.
<STYLE type="text/css">
IMG.a0505 { width:5px; height:5px; }
IMG.a1010 { width:10px; height:10px; }
IMG.a2020 { width:20px; height:20px; }
IMG.a4040 { width:40px; height:40px; }
IMG.a0505 { width:5px; height:5px; }
IMG.a0510 { width:5px; height:10px; }
IMG.a0520 { width:5px; height:20px; }
IMG.a0540 { width:5px; height:40px; }
IMG.a0505 { width:5px; height:5px; }
IMG.a1005 { width:10px; height:5px; }
IMG.a2005 { width:20px; height:5px; }
IMG.a4005 { width:40px; height:5px; }
</STYLE>
The basic HTML construct to display the image using the above CSS class is as follows.
<IMG src="red1010.gif" alt="small red square" class="a4040">
In the following table a CSS class has been set up for each display. This sets the width and height.
|
|
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||
This method has not been implemented in Netscape Navigator version 4 range of browsers but works in the two earliest pre-release version 6. This browser displays all images as the original 10 by 10. The class definitions of width and height appear to be ignored. For Netscape a range of images can be produced to maintain the desired proportions.
Changing display size using fixed sized HTML SPAN and CSS
This approach uses HTML and CSS. It is an ideal approach for images which are icons or visual place markers. It is flexible and efficient.
The approach hides the image from the ability to be directly downloaded and saved as an image. It hides the image from "text-only" browsers. The "title" attribute can be used to provide alternative text for the image.
It is easier and cleaner to generate the link statement to a CSS appropriate for a particular browser and display than it is to generate individual HTML statements. A range of CSS can maintain proportions across a range of display sizes.
The basic CSS construct to define a particular class associated with an image is as follows.
<STYLE type="text/css">
SPAN.a0505 { background-image: url(red1010.gif); background-repeat:no-repeat;
width:5px; height:5px; }
SPAN.a1010 { background-image: url(red1010.gif); background-repeat:no-repeat;
width:10px; height:10px; }
SPAN.a2020 { background-image: url(red1010.gif); background-repeat:repeat;
width:20px; height:20px; }
SPAN.a4040 { background-image: url(red1010.gif); background-repeat:repeat;
width:40px; height:40px; }
SPAN.a0510 { background-image: url(red1010.gif); background-repeat:no-repeat;
width:5px; height:10px; }
SPAN.a0520 { background-image: url(red1010.gif); background-repeat:repeat-y;
width:5px; height:20px; }
SPAN.a0540 { background-image: url(red1010.gif); background-repeat:repeat-y;
width:5px; height:40px; }
SPAN.a1005 { background-image: url(red1010.gif); background-repeat:no-repeat;
width:10px; height:5px; }
SPAN.a2005 { background-image: url(red1010.gif); background-repeat:repeat-x;
width:20px; height:5px; }
SPAN.a4005 { background-image: url(red1010.gif); background-repeat:repeat-x;
width:40px; height:5px; }
</STYLE>
The basic HTML construct to display the image using the above CSS class is as follows.
<SPAN class="a4040" title="small red square"></SPAN>
In the following table a CSS class has been set up for each display size. This sets the background-image, background-repeat, width and height.
|
|
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||
This method has not been implemented in Netscape Navigator version 4.x or the pre-release version 6. This browser does not display the background-image.
Changing display size using proportional sized HTML SPAN and CSS
This approach uses proportional HTML and CSS. Here the sizes are related to the "em" size quantity. The number and complexity of the CSS can be reduced. Some browser versions do not display a reduced sized image if the desired size is smaller than the original size.
The basic CSS construct to define a particular class associated with an image is as follows.
<STYLE type="text/css">
SPAN.p0505 { background-image: url(red1010.gif); background-repeat:no-repeat;
width:0.5em; height:0.5em; }
SPAN.p1010 { background-image: url(red1010.gif); background-repeat:no-repeat;
width:1em; height:1em; }
SPAN.p2020 { background-image: url(red1010.gif); background-repeat:repeat;
width:2em; height:2em; }
SPAN.p4040 { background-image: url(red1010.gif); background-repeat:repeat;
width:4em; height:4em; }
SPAN.p0510 { background-image: url(red1010.gif); background-repeat:no-repeat;
width:0.5em; height:1em; }
SPAN.p0520 { background-image: url(red1010.gif); background-repeat:repeat-y;
width:0.5em; height:2em; }
SPAN.p0540 { background-image: url(red1010.gif); background-repeat:repeat-y;
width:0.5em; height:4em; }
SPAN.p1005 { background-image: url(red1010.gif); background-repeat:no-repeat;
width:1em; height:0.5em; }
SPAN.p2005 { background-image: url(red1010.gif); background-repeat:repeat-x;
width:2em; height:0.5em; }
SPAN.p4005 { background-image: url(red1010.gif); background-repeat:repeat-x;
width:4em; height:0.5em; }
</STYLE>
The basic HTML construct to display the image using the above CSS class is as follows.
<SPAN class="p4040" title="small red square"></SPAN>
In the following table a CSS class has been set up for each display size. This sets the background-image, background-repeat, width and height.
|
|
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||
This method has not been implemented in Netscape Navigator version 4.x or pre-release version 6. This browser does not display the background-image.