HTML3
Sections
  Home
    Intro
    History
    FAQ

  Choices
  Side bar

  Styles
  Headers
  Footers
  Effects
  Chars
  Address
  Links
  Images
    Rollovers
  Tables
  Forms
  SSI
  Plugins
Resources
  Colour editing
  Image creation
  JS Tricks
  Servers
  Tokens
  Latin-1
|
|
HTML³: Images |
-
-
|

Images

Images are becoming an ever more important part of web design; where early web pages were more about the quick transmission of information and ideas, these days higher transfer rates and higher expectations mean that images are at least as important, if not more so, than textual content.

The image window is ridiculously easy to use - drop an image on to it, click on OK. Even in WML mode, most of the options will still be available, and those that aren't will be ignored. What could be simpler? So, as well as a brief rundown of the controls, I'll try and impart a few pearls of wisdom with regards to creating and processing images for web usage; please feel free to ignore these at your leisure.

If you want to know more about what formats and software to use when creating images, there's now a separate image creation page.


HTML³ Image formats

As "progress" increases the number of graphics types I've been asked to support in HTML³, many people are unsure as to exactly what formats are supported so perhaps a list is in order:
  • GIF (&695, "GIF")
  • PNG (&B60, "PNG")
  • JPEG (&C85, "JPEG")
  • Sprite (&FF9, "Sprite")
  • BMP (&69C, "BMP")
  • SWF (&188, "Flash")
  • WBMP (&F8F, "WBMP")
(This file will set these up for you without having to make sure your computer has "seen" software that handles them; drop it into Tasks in your !Boot sequence)

GIF is the old warhorse, having been used for Web graphics since the early days; allowing up to 256 colours (any 256) it's good for simple cartoon-like images, and you can create animated GIFs too. However, due to copyright issues in the US of A it's falling rapidly out of favour; PNG seems to be the natural successor.

PNG is a newer format, and supported adequately on most platforms - it's supposed to have 256 levels of transparency, but nobody (even PC browsers) implemented this fully (except in Acorn's Browse). It can handle 24bpp colour though; compression doesn't seem great however, and it hasn't got animation capabilities built in.

JPEG is the de facto standard for photographic-style images, with good (and variable) compression rates. Use this for complex images, but not for simple images with large blocks of the same colour as you'll get distortion patterns appearing.

Sprites should only be used when designing something for RISC OS only, that will never be visited by other OSs - basically, stuff destined for CDs, help documentation and the like. Even then you should really use a "proper" format, not even all RISC OS browsers support Sprites.

Similarly, BMP is a Windows format and should only really be used for PC-only stuff; BMP support is not widespread outside of Windows-land.

SWF is not really an image format, but rather a movie format based (at least initially) on vector components; they tend to be small, but still increase download times substantially when abused. The simple, animated images it produces could get around the fact that PNG can't do animation (unless you use JavaScript image swapping).

The code for showing SWF movies is not the same as for showing images, so you'll get a lot more code including <object>, <embed> and <param> tags. This is perfectly normal. Also, you can only use it in the Images window, not as a background, button etc.

WBMP is a format used in mobile phones, so is only really of use in WML mode.

Help! my SWF file outputs like an image, not an embedded object
To get the image window outputting SWF, some compromises had to be made. HTML³ will only recognise a Flash movie if you've given it the extension .sfw (HTML³ can do this for you automatically if you switch on Modify extensions in the Options window.) It can recognise a SWF file when you drop it onto the Images window directly, but if you drop anything else onto the other windows, or quit the program and restart, this information will be lost. As always it's best to use the proper filenaming convention!


HTML³ Image controls

The first box you'll see is the one marked Image - this is where you can enter the URL of the image file, and is essentially all you need to get started. Of course, one of the reasons for using HTML³ is that all of that nasty typing is such a strain, so to make it easier you can just drop an image file onto this window and the program will fill this box in for you.

Image naming controls

Image naming controls


You may also have noticed that, to the right of the Image box, there's a button which should bring up a drop-down menu; this is your image history, where up to the last 30 images you've used will be available for easy re-use. This isn't just the filename, but the entire profile of sizing, alternative text and so on. If you do re-use the same image (or, to be more correct, an image with the same URL - for instance, two images called "gfx/bar.gif") then the details of the latest version will be stored, and moved up to the top of the list.

Alt. text

Underneath all the image file gubbins is the Alt. text box - this is the text displayed when the image is loading, isn't displayed, or on PCs it gets displayed if you leave the mouse pointer over it. Being as lazy as ever, I've given myself three ways of getting out of having to type something here.
  1. When you drag a file onto the window, as well as the filename being entered automatically you'll also get alternative text based on the filename - any path and extension information is removed and the first letter is capitalised, so a file called gfx/bar.gif would give the alternative text Bar (for an Acorn Sprite file it will be the name of the first sprite in the file though). Of course, this isn't perfect for every image, but it's usually quite handy.

    (It also removes some special cases - a file called sm_photo.gif will have the sm_ removed and be called Photo, which is useful when storing thumbnail images which are then linked to larger versions. The prefixes sm_, lo_, hi_, h_ and s_ are removed, plus suffixes _hi, _lo and _sm; hi and lo are what I use when creating javascript rollovers where images light up when you move over them.)

  2. Alternatively, you can draw from the image history to select a piece of text you've already used; selecting alternative text from the history list only affects the alt text box without changing the filename etc. because I was working on a project with a lot of game screenshots on every page and I got heartily sick of writing in "Surveillance shot" for every image.
  3. Finally, you can pick text up from various other text boxes in other parts of HTML³ using the "grabber" icon - for instance, if you're using the image within a link you might want to use the same text as that entered into the JavaScript link description.

JS name

Next comes the image's name; this is covered in more detail in the section on JavaScript rollovers, but basically the rule of thumb is that if you want to influence the image using JavaScript, then a name is essential - otherwise, it's useless. Again, a name will be chosen based on the name of a file dropped onto the window, and as the same routine also chooses the name of the image to be influenced on the rollover section of the links window, the two should match up and you'll get cool lighty-uppy buttons with ease.

In WML mode, this is used to give the image an id attribute.

Make dragged files relative

At the end of the image naming section you'll see a tickbox bearing the legend Make dragged files relative - this is useful if you keep your images in a separate directory to your other files, as it'll take the path between the image and your HTML file and work out the best route between them. There is of course another requirement for this to work - the program needs to know where your HTML file is! You can edit this in the Options window, or, if you're as lazy as I am, you'll probably prefer to drop your file onto the HTML³ iconbar icon. You can also drop the directory that contains, or will contain, your HTML file onto the icon, and once you've set the location for one file you don't have to change it just because you're working on another file - you only need to change it when you move to working in another directory. Oh, and it's stored when you quit the program, so next time you load up, you can start work again immediately.

Caption

Not an image option as such, but another of those "good ideas" that I occasionally have. It's a convention in regular publishing that you always put a caption under an image so that you know what it is; seeing as you're already putting a description of the image in the Alt text (aren't you?) it's a simple matter for me to add this underneath the image.

One slight problem with captioning is when text is allowed to flow around the image - to get around this I have to put an aligned table around the image and caption and hope your browser supports aligned tables. If it doesn't, it's likely not to support aligned images anyway, so no loss; you'll just get a captioned image, and then your text. If you're a little dubious about that last statement, switch off the caption option for left- and right-aligned images.

In WML mode most caption options are retained, although left and right are in tables without text flowing around them (HTML mode uses tables to allow captions and text flow-arounds to co-exist).

If, using the Links window, you've put a link around the image, there's an option on that window you might be interested to know about. The 'More' caption link option will give you an extra line of text ("Click for more...") around which is an exact copy of the link around the image. This is great if like me you prefer your linked images without a border it's a visual cue that there's more to be had by clicking on a link.


Align:

Winning the award for the most gratuitous use of graphics in this program is the section covering image alignment, although the girly pictures do serve some purpose - there's a green line showing which bit of a text line is aligned with. Other than that, well, Netscape uses images and I wanted to do better, plus the girl sticking her tongue out in Argo's old browser was made redundant when they switched to using Fresco, so I gave her a new job; and yes, her eyes do move when you click on the icons.

Default won't use any special image alignment attributes; the other options on the top row will align images with lines of text (or other images) as shown by my beautiful assistant. These are by no means the only image alignment tags in use, bu they're fairly common ones; as with other areas of HTML³ I've had to make a best guess as to which ones will be of use in the real world, where there are so many "standards" to choose from.

The second line of alignment options are different; the first two, left and right, allow you to place an image and have text flowing around it, perhaps because you want to have a large, ornate, drop capital at the start of a paragraph, or simply because having text flowing around a photograph or screenshot looks quite cool.

This won't work on older browsers - Acorn's !Browse counts as old in this case, although Fresco, Oregano and Webster XL can handle it without problems. A couple of things to bear in mind though; the text may look uncomfortably close to the image, so you might want to consider using the spacing options to give the image a little breathing space; and because HTML is not a precise layout language you can't guarantee how wide someone's browser window is, so the text might stop flowing in the way you thought it would; it's best to put in some form of clearing break after the paragraph you wanted to flow
<br clear="right">,
<br clear="left">,
or the catch-all of
<br clear="all">
to clear both sides (and which is available from the Styles window).

Finally, centered is not an image alignment attribute at all, rather it uses the standard <center>...</center> tags to centre an image on the page - it's included here because I'm forever using an image centred in a page with a caption underneath, and this program is all about making life easier.


Sizing and Spacing

Size:

Next come the sizing options - this is also automatic when an image is dropped onto a window. Using image sizes is not compulsory in HTML, but it does help; when a browser first downloads a page it helps if it is told how big an image is so that the right amount of space can be reserved at the start, then the page doesn't flicker as it's constantly reformatting when the images are eventually downloaded.

You can, however, specify sizes other than an image's real size, and a decent browser should be able to stretch the image to fit the size you've specified; although this usually ends up looking a bit naff, if you use it carefully it can be quite fun, so I've included a few controls to scale the image to twice the size (x2) or scale it down - and of course you can use them multiple times to scale x4, x8, x16 and so on (within reason). There's a reset button just in case you get a bit lost, which will reset the numbers back to the original values when the image was dropped onto the window.

And finally for this section there's a tick box next to the x (width) box because most decent browsers will allow you to specify an image's width as a percentage of the available space, an option used to good effect by Acorn Arcade who design their horizontal rules to scale to whatever window width the viewer is using.

Help! The Sprite sizes aren't the same as !Paint says they are!
Don't worry if sizes seem to be bigger by two or four times - this is not a bug. HTML³ may report sizes that are double or even quadruple the amount displayed in !Paint, but there is a reason.

Browsers assume that all images are high resolution, with 90 dots per inch in both the horizontal and vertical axis, and for the most part this is correct - when we're dealing with modern GIFs and JPEGs. However, when Acorn first started making RISC OS computers it was not possible for reasons of hardware design and memory to use such "high resolution" images. Low resolutions such as 45x45 are still (just about) in use today for games (MODE 9 or 13), and for desktops a semi-high resolution was used - 90x45, where the pixels were stretched so only half the vertical pixels were needed, giving a very good display on old CGA monitors (MODEs 12 and 15, later 35 and 36).

However, the browser will still assume that any image is 90x90 dpi, so images created in these older MODEs will appear to be squashed to half height, and some squashed to half width too; what HTML³ is doing is instructing your browser to stretch the image so that it looks the correct size. High resolution images grabbed on a Risc PC, especially "new format" ones (images in 32 thousand and 16 million colours) will report exactly the same numbers as !Paint. As for stretching things by a factor of 4, well, for completeness even old MODE 2 and 5 images are catered for, even though these died out with the BBC Micro and aren't valid desktop MODEs.

Obviously you should not use Sprites for anything but RISC OS only applications; however, when you convert Sprites to GIFS (or JPEGs) the converting software will not take into account the different dpi, so you will again see images that are half height and maybe half width too. You can deal with this by first using !ChangeFSI to convert your images to MODE 28, or by dropping the images into !Paint and using the Scale Y (and Scale X) options from the Edit part of the menu.

ChangeFSI   !Paint x2

Acorn sprite file format

Spacing

The spacing options come next, and as already explained in the alignment section they allow you to set a certain amount of padding around a graphic so that text and other images don't come too close. x (horizontal) spacing adds the specified number of pixels to both the left and right edges of the image - which, over-used, may make the image look even more out of place than not using spacing at all - and of course similar rules apply to the y (vertical) spacing. These options may not work on all browsers, but then of course neither will text flowing around images in the first place.

bdr, short for border, on the other hand, is a much older attribute which, if the image is linked, puts a border of the specified width in the current link colour around all four sides of the image's bounding rectangle (ignoring the fact that the image may well have a mask to make it appear non-rectangular). in days gone by this was useful to show that the image was a link (in the same way that linked text was always underlined), but in these days of changing mouse pointers, status bars, JavaScript descriptions and rollovers, and better use of graphics, it's not really necessary to use it - a pity then that Netscape ignores a border=0 when you link an image to an imagemap...


Imagemaps

...Speaking of imagemaps, the last section allows you to link the image to both types of imagemap - server and client side. With a server side image map, a file is uploaded to the web server (along with your HTML file) which stores a list of coordinates and URLs to link to if the user clicks within those coordinates. The image has to have a link around it pointing to that file, and to tell the browser that the link is to an imagemap and so it shouldn't download the file when the image is clicked on, the attribute ismap is added to the image tag. However, this old style of imagemap is slow - the browser has to tell the web server where the user clicked, the server then looks at the imagemap file, works out the link these coordinates correspond to, and then the browser has to get this information back from the server, all of which can take a few seconds.

Much better is the new client side mapping, which has the list of coordinates and URLs built into the web page itself, and so can be accessed almost instantly by the browser. All that has to be added to the image tag is usemap="#mapname" and the browser will look for a map called mapname in the current file. For backwards compatibility though you should really use both styles of map. Creating these maps could be a tricky and complicated process, unless you take the easy route and download something like !Imagemap (currently up to version 2, although !Imagemap 1 was pretty good too), or !Imagen will do. You can then draw shapes over your image, assign URLs to these shapes, and then save out both server side and client side definitions. Bah, kids today have it easy - when I first started creating imagemaps, we had to do it by hand. In binary. And they hadn't even invented the zeroes! :-)

Obviously, this option is not available in WML mode.


HTML³: © Richard Goodwin 1997-2002

|