The BEST of Athens

      Website Design Tips

      Images

      Why this is Important

      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.

      How to Fix It

      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:

      Best of Athens

      • HEIGHT and WIDTH: These tags tell browser programs how big the image is. This allows the browser to flow text around where the image will be. Without these tags, a loading page will only load fully AFTER the browser has scanned all the images and discovered their size. The effect of this is a blank page while loading, and then everything appearing at once. This can be frustrating for users, and many of them may leave if they don't have anything to read right away.

        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.

      • ALT: This tag is even more important than HEIGHT and WIDTH. The ALT tag supplies alternate text to be displayed if the image is not. This is especially important for images that are links. This is a courtesy to people who browse with images off. That way, they can still navigate your site without seeing the images.

      • BORDER: This tells a browser program not to draw a border around an image that is a link. In other words, your images won't have bright blue borders around them if it is set to 0. You can also make borders large if you want to. The default is 1 (pixel) for images that are links, and 0 for images that are not links.

      • ALIGN: This tells a browser program how to align the image with the text around it. If LEFT or RIGHT [Netscape], the image is aligned to the left or right column, and all following text flows beside that image [to the right or left respectively]. All other values such as TOP, MIDDLE, BOTTOM determine the vertical alignment of this image with other items in the same line. The default is BOTTOM.

      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

      Home                     Geocities