There's nothing worse then having to sit and wait while the images are loading on your wall.
Your visitors expect nothing less when they land on your site. You've only got a couple of seconds before they hit that back button.... and they are gone...
1. Size Your Image Correctly
Lets say you're trying to place an image with a file size of 68kB and height & width attributes of 550 pixels wide by 750 pixels high in a spot on your page that is designed to hold an image sized at 200 pixels wide by 300 pixels high.
To accomplish this you've changed the height & width attributes in your html code to 200 x 300.
You may think that since the image will be displayed at the lower size (200x300), the file size will be smaller and the image will load faster.
Not true. Regardless of what size attributes you use, that file size is still 68kb and it will load at the same speed any other 68kb image does.
Use an image editor to change the size of the image to the correct dimensions first. Then use the correct size attributes in your html. By resizing the image before you plug it into your html code, the file size will be smaller and the browser will load it quicker.
2. Animations
Animations are attention getters, but they quickly become annoying. They also slow down the loading of your page.
Limit the number of animated graphics on your page and set your annimation at a specific number of repetitions rather than allowing them to loop endlessly.
Avoid Text Graphics: some sites may need stylized text to make the page look attractive. However, you must remember that text in the form of an image. It is thus ideal to use the text styles in CSS and keep everything in text format instead.
3. Use the Correct Image Format
If your image is simple with a small number of colors try converting it to a gif format. Good choices for this are clipart, bullets, buttons, charts and such.
A word to the wise. Not all images are suited for the gif format. Complex images, photos or those with enhancements such as reflections and drop shadows don't display well in this format.
The jpg format is suitable for complex images with lots of color variations. A good example of this is a photograph.
The png format can be used for either. The high end png format produces a beautiful transparent image and maintains any enhancements you've included. The file sizes are generally higher so if you're at all concerned about load time, you may not want to consider the png format unless you have the software and skills to slice your images.
4. Limit the Number of Graphics you Place in your wall.
If your pages are loading too slow, consider removing some of the images. Keep only those that absolutely necessary.
5. Use Thumbnails
Instead of using big, bulky images use simple and Thumbnails that add a little color and draw the attention of a visitor. I use this technique when I have a lot of images I want to put on my page, but the image would be too big if I included them all at normal size.
6. Instead of using big, bulky images use simple and small icons that add a little color and draw the attention
Use background images whenever possible. This is usually a very useful tip for. Instead of using an image of width 400 which is a uniform design you can use just a part of that as a background fill. This reduces the size of the page as the image is small.
7.Keep checking your load time
Last but not least, before you decide on the final design of your wall, check if its load on time.
No comments:
Post a Comment