Right Way To Use picture On Website

In an ideal world, a web designer could use the highest quality photos and have the webpage download lightening fast. Unfortunately, as we all know, the reality is always far from the desired. The quality of image used on a website are inversely proportionate to the loading speeds. In other words, the better the quality of image you have on the website the slower it will load. Does that mean that you have to compromise on either these two important fronts? Not quite! Using the right balance and putting to use some simple & effective tricks will help you get the best of both worlds. A computer screen is designed to display images at maximum 72dpi (dots per inch). So there is absolutely no point having high DPI images like 300 DPIs (which are meant for print usage). If you have a larger DPI image its logical to reduce the resolution to 72 dpi. Each piece will be a very small file and together will load in a fraction of the time. What you must also know is that an image comes with many attached graphic files that contain information about the color palette of the image. This information is useless for online application so it's better to get rid of it. The way to do it is simple, almost all imaging programs include the option of Save for the web. This option discards all of the unnecessary information in the file without any loss of picture quality and reduces the size and loading time of the image. Another very effective method is to use the images in right format. Instead of simple JPEGs use either the GIF or PNG interlaced or the JPEG progressive property. These properties allow the picture to load gradually. Its kind of a gimmick because this way the picture actually loads a fraction of a second slower than the regular formats do but it appears to load faster to the site visitor as he can see the picture coming from blur to complete. It's a very effective thing to do. Lastly, you must pay attention on the Width and Height IMG Attributes. The HTML tag tells the web browser to create a specific sized box to hold the graphic. That way the browser can continue loading the rest of the web page while the graphic file is downloading. If you don't put the width and height attributes, the web browser must pause until the images is downloaded before it can load the rest of the page. So always pay attention to these attributes to speed us the loading process. Effectively using these techniques will allow you to use more and better pictures on the website along with keeping a check on the loading times. Of course, it goes without saying that you should always use only the needed number of pictures on a website. If you stuff too many pictures none of the above will help.