There is nothing worse then having to sit and wait while the images are loading on your webpages. Your visitors expect nothing less when they land on your site. You have only got a couple of seconds before they hit that back button and they are gone. A faster site that will give them the information they want instantly.
Here are 10 quick tips for decreasing the load time on your graphics.
1. Use Height and Width (Size) Attributes.
Example: width="144" height="259"
Every time a browser loads a webpage it looks for the the height and width attributes (size) of each image in your html code so it knows how to lay out the text and the graphics on that page. This all takes place instantly behind the scenes. When the proper attributes are used, the browser loads the text before the graphics. This is good and it is faster this way. If you do not use the attributes, it causes a delay waiting for the browser to download the images first and then lay out the text. The browser has to play catch-up. It ca not load text onto the screen until it has figured out the exact size of the graphics. Make sure to use attributes on all your graphics, even those little tiny ones, like buttons and bullets.
2. Size Your Image Correctly
Lets say you are trying to place an image with a file size of 30k and height & width attributes of 300 pixels wide by 400 pixels high in a spot on your webpage that is designed to hold an image sized at 200 pixels wide by 300 pixels high. To accomplish this you have 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 30k and it will load at the same speed any other 30k 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.
3. 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 animation at a specific number of repetitions rather than allowing them to loop endlessly.
4. 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 do not 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 (png-24) produces a beautiful transparent image and maintains any enhancements you have included. The file sizes are generally higher so if you are 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. (See Tip #5)
5. Slice Those Images
Image slicing is a technique used to breakdown a large image into smaller pieces to make it load faster. I use the image slice feature in Photoshop but there are also many options available to do this if you do not use Photoshop.
Search for "Image Splitter" - without quotes in your favorite search engine for list of resources for slicing images.
To be continued..
No comments:
Post a Comment