Astro Lesson #7 : terrific.tweaks.and.top.tips

Using images on a web page is easy - it's the fine tuning that really causes most of the work - and even more so if they are graphics that you generated yourself - a tweak here and a tweak there til you are all tweaked out!

Here are some more tweaks to keep you busy:

alt.and.be.recognised!

The 'alt' tag should always be used in conjunction with a graphic. This stands for 'alternative' (text, not lifestyle). Some webites prefer to surf with graphics turned off - a very bland approach to life, we feel. However, for these poor dears it is polite to let them know what they are missing. It can also be useful for those times when downloads are slow by teasing your audience with a little taste of what is soon (hopefully) going to appear. Or perhaps it can be used as extra information about the graphic, or the link it may be attached to... when the mouse is held over the graphic the alt text will appear. (Try it now by mousing over the Space Cadet gif at the start of this page) It is also used by search engines - they cannot 'see' the image, but you can provide something that they can 'read'.

<img src="myphoto.jpg" alt="You are missing a photo of ReTroGrrl spacewalking">

* DID YOU KNOW? Visually impaired surfers often use software that converts text to speech - they can't see your pictures but they can 'read' what the picture is about if you include an ALT tag. Awesome!

size.isnt.everything!

Well, actually it is ... always specify the size of a graphic/icon/animation for the following very good reasons:

• Text loads fast, and invariably your audience will start to read while awaiting the accompanying pictures. If a browser does not know the size of the picture it is waiting for it will allocate a tiny little square and then display text wherever it feels like. As it figures out the image size, the text gets shunted out of the way. However, when it knows the height and width of the incoming graphic, it will leave enough room for it and stick the text where it outta go - making for a much more pleasant experience all round.
  
  
• 'Darn it! This gif is just what I need but it's too big'. Never fear, width is here! A great little tweak is to fiddle about with width and height in order to resize an image! Look at this -
  <img src="../pics/atom.gif" width=50 height=35>
  
  <img src="../pics/atom.gif" width=30 height=20>
  
  See how it even works with animations? Just be careful that it doesn't end up distorted. Tweak that thang til it's just right. This is useful if the same graphic is being used in different areas - one may be used as a logo and simply by resizing, it can do double duty as an icon or a button. (measurement is in pixels by the way)
  
  
• The page will appear to be downloading faster because a) the image space is aready laid out before the image gets there, and b) by using resized graphics the browser does not have to wait for another gif or jpeg file, it simply reloads one used elsewhere on the page, but displays it as a different size.
  
  

down.at.the.border

If you use a graphic as a link, you might be wondering why it appears with a hideous border around it - this is a substitute for underlining links and the browser does this without asking (How rude!). To avoid this heinous fashion statement, specify no border (border=0). Otherwise if you really like it and want to make it bigger (Aaargh!) set a size and remember it's measured in pesky pixels

<img src="sun.gif" width="50" height="35" border="3">

arsenic.and.old.interlacing

You know your favorite image is BIG and takes a little more than the usual nanosecond to arrive on the page, but you just can't bear to part with it - how about making the browser load it up in a fuzzy sort of way that gradually becomes clearer and clearer until it is all in place?

Site visitors are therefore not twiddling their thumbs while waiting, AND they get an idea of what is coming and why they should stick around for the real thing

This is specific to the GIF format - although JPEGS have their own version called 'Progressive', which is becoming more common. You will need to use a graphics program like Corel PhotoPaint or the cheaper Paint Shop Pro (which can be downloaded on a free-trial basis from HERE , or is often on PC magazine giveaway CD's) Follow the instructions whichever software you choose to use. It's good to learn to use one anyway - buttons, titles and even animations can then be easily created for a more personal feel.

Interlaced gifs or Progressive jpegs this creates the illusion of a speedier site even though they actually take a tiny bit longer to completely load - it's taht first impression of things happening that we are keen to create!

Now - off you go and play with these new toys. Until next time, when we shall delve deeper into this truly super topic - transparency, lines and tables!

next.pod
copyright.wendy.phillips.1998-2000