Web graphics are great to have on your web pages. Unfortunately, web graphics are rather bulky when it comes to file size. They can easily increase the loading time of your web pages.
Here are some web graphics tips to help you make the most of your web graphics.
- Optimize your imagesMake sure you use the right image types for your images. A flat colored image should be saved as a GIF and an image with tones, such as a photograph should be saved as a JPEG.If you save an image file as a GIF, try to use as little color as possible. If you’re not sure how to optimize your images, there are many services on the net that will help optimize your images for you, such as NetMechanics’ GIFBot.
- Image width and heightWhen you include an image, make sure you specify it’s width and height. Since images take longer to download, the browser will start to download the text first.With the image width and height information, your browser can start to lay out your web page, reserving the exact amount of space needed for your image. Your image can then just take its time to download into this area. This will help speed up loading time.Without this information, your browser is unable to estimate how much space is needed by your image. This will force it to display your web page twice. Once without the image and the second time, with it.
- Use small imagesWhenever possible, stick to small images. You can always create a link to a bigger image. This is important especially if you are going to create an image gallery. Create a web page with image thumbnails. That way, your visitors can quickly view all your images and choose which one they would like to view fully.
- Reuse imagesTry and use the same image wherever you can. Once your browser has downloaded an image, it will be stored in your computer temporarily. If you have the same image somewhere else in the same web page, your browser will simply use the stored image. The image will not be downloaded again, causing your web page to download faster.
- Use ‘ALT’ tagsYou may notice that sometimes when you are at a web page, before an image starts to download, there are words in place of that image. This shows that the web master has used ‘ALT’ tags for his images. An ‘ALT’ tag is extremely useful especially when your visitor chooses to switch off his browser’s graphic features. This tag becomes more important if you use images as your navigation system. Without the ALT tags, your visitors will not be able to navigate around your web site.
These web graphics tips will give you an extra edge when designing your web sites.