Photo optimization is important so as to allow web pages to load as fast as possible. Many web designers would want to use high quality photos and still have pages that download very fast. Fast loading requires that pictures have a small size. However, picture quality varies depending on file size. The following are some tips which can be useful for photo optimization.
Resolution
The first step in photo optimization is reducing your image resolution to 72dpi. If you want to use a large picture, you can divide it into smaller ones, and then put them back together on the page. The individual pieces will load much faster than the single image would load.
Another way of speeding up the time of loading is to use the JPEG progressive property, or the PNG or GIF interlaced. These properties allow images to load slowly, first as a hazy image which becomes clearer and sharper.
Height and width IMG attributes
The HTML <IMG> tag instructs the browser to create a box of a specific size to hold the graphic. If you fail to put the height and width attributes, the browser must wait for the images to load first before loading the rest of the web page.
Number of images
Some web designers put images everywhere. Though this might look good, it will slow down the loading speed of your page. Images constitute up to 50% of the loading time. Using images conservatively will ensure faster download time and will prevent visitors leaving your site due to impatience.
Photo quality
Photo quality is shown by the color purity, detail and clarity of a photo. You can use a graphic editor to eliminate noise and any other unnecessary features. Many editors will allow you to improve clarity by sharpening edges and correcting red-eye.
Professional editors such as Photoshop and Fireworks will allow you to adjust color levels, change the background, and make many other changes to a photo.
Photo optimization guidelines
The following are suggestions which will enable you to optimize your images and achieve fast download times without compromising picture quality.
- Change the image resolution to 72dpi
- Change graphic text to stylized text
- Crop images to the size required
- Minimize color depth if it will not affect quality
- Specify the actual height and width of your images
- Use thumbnails when necessary
Conclusion
The role of graphics is to enhance web page content, except in rare cases when the images are actually the content. In both cases, it is important to optimize images and graphic files so as to allow faster downloading of the web pages.
About Guest Author:
ZK is the co-founder of Web Marketing Blog where accomplished writers and bloggers share their tips, strategies and stories. Follow him on Twitter at @webtrafficroi
Was looking for this type of post.
Thanks, Thanks a lot.
Nice article. Thanks for posting this article. I like that, the way of you explained about the tips of photo or image optimization. Keep posting articles like this.
Thanks for posting this article, I had learned new information regarding the photo or image information due to your article.
It is not directly related to optimizing images themselves but as far as improving load time of the pages it helps to push all the media files to a CDN (content distribution network) so they load from the server closest to a visitor location. Buying CDN can be somewhat expensive but I recently moved some of my sites to CloudFlare CDN it is free and definitely helps.
very useful tips. Thanks for the reminder.
Thanks for publishing my guest post on your blog :)