Of course you don't want your website to show those nasty broken image pictures. Not only are they ugly but some visitors will assume the site isn't "finished" yet and go away. Broken images are a lot more noticeable than broken links, because you don't have to click on them first.
You can use NetMechanic as mentioned in the Links tip page to check your website for broken images. It is best to have all images actually on your website - they load about two seconds faster, and you avoid problems caused by the off-site image suddenly disappearing.
AOL users: The AOL browser has a setting called "graphics compression". If this is turned on when you download an image that you then put on your website, then only AOL browsers will be able to view that image. So even if all your AOL friends can see the image just fine it doesn't mean that everybody else can.
BMP files: Most browsers are not set up to view bitmap [BMP] files. They also take up a lot more filespace than GIF and JPG files do. Most graphics programs will convert these files into GIF format for you.
Images that take too long to load will drive visitors away. You can use NetMechanic as mentioned in the Load Time tip page to help you with this area.
It is important that your images fit on the screen and within frames, no matter what the visitor's resolution is. So test your pages at 640x480 resolution. You can do this by either changing your video driver settings, or by resizing your browser to 640x480. Yes, most people with new computers use resolutions of 800x600 or higher, but some people have poor eyesight or 14" monitors, and lots of people use laptops that have very tiny screens.
We strongly recommend using the WIDTH=, HEIGHT=, and ALT= parts of each IMG tag. The width and height will help the image load a bit faster, and the ALT tag will give visitors with non-graphical browsers an idea of what they are missing. For example:
You can specify either pixels or percentages. To find an image's pixel size, you can load it directly into your browser - the size will appear in the title bar, width first.
For more information see the HTML Goodies Tutorials on Aligning Text with Images and Height, Width, and Alt.
Next tip |
Previous tip |
Index of tips |