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

Using image on a web page is ease - it's the find tuning that really cawses 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 busee:
The 'alt' tag should always be used in conjunktion with a graphic. This stands for 'alterntive' (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 teesing your awdience 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? Visyully impared 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!

Well, actually it is ... always specify the size of a graphic/icon/animation for the following very good reasons: Text loads fast, and invareebly your awdience 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 hight 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 plesant 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 resise an image - that's right! Look at this -

< img src="../pics/atom.gif" width=50 height=35 > atom

< img src="../pics/atom.gif" width=30 height=20 > atom

See how it even works with animations? Just be Kareful 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 resising, it can do dubble 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 resised 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.

If you use a graphic as a link, you might be wondering why it appears with a hideous border around it - this is a substitoot for underlining links and the browser does this without asking (How rude!). To avoid this henous 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 > sun

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 kleerer and kleerer until it is all in place? Site visitors are therefore not twiddling their thums 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 easier Paint Shop Pro (which can be downloaded on a free-trial basis from HERE , or is often on PC magasine giveaway CD's) Follow the instructions with 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.

Again, this creates the illushun of a speedier site (although interlased files actually take a little bit longer to load) Now - off you go and play with these new toys. Until next time, when we shall delve deeper into this truly super topic - transparentcy, lines and tables!


(The Retro City neurometer is reading that your brain is now full)
Remember, Space Cadets! This is a basic guide only - go read the manual.

back.to.the lesson of the day
Space Cadets