Tips for Faster Image Loading

28th

Dec

Tips for Faster Image Loading

Displaying image on a web has become a current needs for almost every websites. Images is often use as a banner, button, picture-related article, advertisement, documentation, tutorial, and many more. But, image can also reduce our internet speed, because of it’s relatively big size while loading. What should we do to make a faster image loading?

Here are some tips to make a faster image loading in your sites :

1. Always use attributes “width” and “height” inside your images tag <img>
exp : <img src=”http://www.yoursite.com/example.jpg” alt=”example” width=”200″ height=”150″ />
With the addition of height and width attribute, the browser directly knows the length and width of the layout to be prepared for the image. Meanwhile, if there is no attribute, the browser must first download the picture, find the height and width, and then prepare a new layout of the picture. These tips only save a little loading time for 1 image, but imagine how much time can be save if you webpage has 10-20 images?

2. Do not use too much animation files
Animation can make your site nicer, but the file size is too large. Be wise in the use of animation. Sites with a standard image and Less or no animation means faster image loading.

3. Use a standard image format
Use the JPG format for images with complex color (photos, color degradation), but if the image as a simple clip-art, button, or charts, use the GIF format. PNG format can also be used, particularly if the image is a transparent image.

4. Use thumbnails
For a very large sized image, it’s better to create it’s thumbnail-sized file linking to the original image.

5. Utilize the browser cache
Utilize the browser cache can be done by put images in the same folder in your hosting.

6. Slice a big dimension image
Big dimension usually related to big size. If you have to display a big dimension image, it’s better to slice it into some small dimension but have a small file size.

7. Ideal image file size
Do not insert a very large size image file. I think, 150 kb is big enough for 1 image. If you have a very large size image, you should try to reduce it by some image editor before.