Taulath
09-09-1999, 10:32
Just a quick guide to using graphics on your site.. Might be of use to someone.. After all.. I'm hoping to become moderator of this forum so I've got to prove my worth, no? http://www.wireplay.co.uk/ubb/teeth.gif
Graphics on Websites
--------------------
The problem with many web sites.. even professional ones, is that they take too long to load. Now this can be mainy due to large graphics in the page.. But there are ways you can make your pages load faster but still have great graphics
Ten tips :-
1. Make sure you really need the graphic.. or that your site would be pants without it. Huge pictures on the front page are no-nos.. just use a standard 468x60 'banner'. This way you can also use this graphic for many other purposes, like submiting to the link exchange if you want.. or offer the graphic to people who want to put a link to you on their website. Spend time making this banner look good.. after all, it's first impressions that count..
2. Make sure your graphic is either a .jpg or a .gif file.. (.bmp are huuuge files!) These are both compressed image formats. Simple computer graphics are best saved as .jpg files, whereas complex pictures like photos and animations should be saved as .gif
3. Further compress your grahics.. There are different ways of doing this.. escpecially with .gif files. Either get an offline optomiser like Advanced Gif Optomizer (http://kotenev.hypermart.net/) or have a look around on the web for an online utility.
4. Use the width and height tags. Make sure you add these, because then visitors browsers will set the space required by the graphic aside, and can then load the text first so that visitors can read and be interested while your flashy graphics are loading http://www.wireplay.co.uk/ubb/smile.gif
5. NEVER resize your graphics with the width and height tags.. Although it can seem tempting to resize a graphic by changing it's width and height tag.. This is a REALLY bad idea. Although, yes, it does work.. Your graphic will be either scrunched up or pixilated by expanding. The real problem with this is that the visitors browser has to try and scale the real size of the graphic to the size you've set it to be with the width and height tags.. which takes time.. making your page load far more slowly than if you had resized the graphic in a paint program and set the width and height tags to the correct size.
6. Don't forget to put an ALT tag in! This will be displayed if the actual graphic cannot. Users may have a text only browser (Unlikely now.. but there are a few out there..) but often users turn off graphics on thier newer browser to make surfing for information much faster. Also take this into consideration when making image maps.. If you have a huge image with loads of links on it, and nothing else.. then all users with graphics turned off will see is a blank page. And that means one less visitor. Make a text alternative to any interactive images you make.
7. Don't use too many colours.. Remember that Netscape can only display 256 colours at once.. so don't bother making a graphic with 1000's of colours.. It will just take longer to load, and could even look worse than a picture made in 256 colours. Basically, be sensible. If you're making complicated graphics, use a 256 colour pallet in Paint Shop or whatever. If you're making a button or something small.. try and make do with 16 colours. It can still look good... and the increase in speed of your site will be worth the effort.
8. Image links. If your image is also a link, then the handy BORDER=0 tag is useful to remove that annoying blue border. Although it is customary for text links to be made clear with underlining, images are usually clicked on by visitors. If you have an image that isn't a link, why not make it one? http://www.wireplay.co.uk/ubb/smile.gif
9. Use a service like Siteowner.com (http://www.siteowner.com) to check your site. Listen to the advise it gives you.. and make your site get at least 4 out of 5 stars!
10. Ok.. not a tip as such.. Just an example Image tag using all the tips here...
<BLOCKQUOTE><font size="1" face="Arial, Helvetica">code:</font><HR><pre> <IMG SRC="example.gif" width="468" height="60" alt="Example Banner"> [/code]
There you go.. Now I want to see your websites zooming down my connection to the net.. http://www.wireplay.co.uk/ubb/teeth.gif
Graphics on Websites
--------------------
The problem with many web sites.. even professional ones, is that they take too long to load. Now this can be mainy due to large graphics in the page.. But there are ways you can make your pages load faster but still have great graphics
Ten tips :-
1. Make sure you really need the graphic.. or that your site would be pants without it. Huge pictures on the front page are no-nos.. just use a standard 468x60 'banner'. This way you can also use this graphic for many other purposes, like submiting to the link exchange if you want.. or offer the graphic to people who want to put a link to you on their website. Spend time making this banner look good.. after all, it's first impressions that count..
2. Make sure your graphic is either a .jpg or a .gif file.. (.bmp are huuuge files!) These are both compressed image formats. Simple computer graphics are best saved as .jpg files, whereas complex pictures like photos and animations should be saved as .gif
3. Further compress your grahics.. There are different ways of doing this.. escpecially with .gif files. Either get an offline optomiser like Advanced Gif Optomizer (http://kotenev.hypermart.net/) or have a look around on the web for an online utility.
4. Use the width and height tags. Make sure you add these, because then visitors browsers will set the space required by the graphic aside, and can then load the text first so that visitors can read and be interested while your flashy graphics are loading http://www.wireplay.co.uk/ubb/smile.gif
5. NEVER resize your graphics with the width and height tags.. Although it can seem tempting to resize a graphic by changing it's width and height tag.. This is a REALLY bad idea. Although, yes, it does work.. Your graphic will be either scrunched up or pixilated by expanding. The real problem with this is that the visitors browser has to try and scale the real size of the graphic to the size you've set it to be with the width and height tags.. which takes time.. making your page load far more slowly than if you had resized the graphic in a paint program and set the width and height tags to the correct size.
6. Don't forget to put an ALT tag in! This will be displayed if the actual graphic cannot. Users may have a text only browser (Unlikely now.. but there are a few out there..) but often users turn off graphics on thier newer browser to make surfing for information much faster. Also take this into consideration when making image maps.. If you have a huge image with loads of links on it, and nothing else.. then all users with graphics turned off will see is a blank page. And that means one less visitor. Make a text alternative to any interactive images you make.
7. Don't use too many colours.. Remember that Netscape can only display 256 colours at once.. so don't bother making a graphic with 1000's of colours.. It will just take longer to load, and could even look worse than a picture made in 256 colours. Basically, be sensible. If you're making complicated graphics, use a 256 colour pallet in Paint Shop or whatever. If you're making a button or something small.. try and make do with 16 colours. It can still look good... and the increase in speed of your site will be worth the effort.
8. Image links. If your image is also a link, then the handy BORDER=0 tag is useful to remove that annoying blue border. Although it is customary for text links to be made clear with underlining, images are usually clicked on by visitors. If you have an image that isn't a link, why not make it one? http://www.wireplay.co.uk/ubb/smile.gif
9. Use a service like Siteowner.com (http://www.siteowner.com) to check your site. Listen to the advise it gives you.. and make your site get at least 4 out of 5 stars!
10. Ok.. not a tip as such.. Just an example Image tag using all the tips here...
<BLOCKQUOTE><font size="1" face="Arial, Helvetica">code:</font><HR><pre> <IMG SRC="example.gif" width="468" height="60" alt="Example Banner"> [/code]
There you go.. Now I want to see your websites zooming down my connection to the net.. http://www.wireplay.co.uk/ubb/teeth.gif