Optimizing images for faster performance:

  1. Don’t scale images in HTML.
    Images should be saved to the exact size you want them to be viewed on the web. Do not resize images using size attributes in your HTML code. Taking a large image and having it display at a smaller size not only slows down loading times but also distorts your image.Don’t use a bigger image than you need just because you can set the width and height in HTML, example:<img width=”100″ height=”100″ src=”yellow-balloon.jpg” alt=”Yellow Balloon” />
  2. Use PNG instead of GIF.
    Convert any GIF image you may be using to PNG format and there should be a saving in the size amount.
  3. Use small favicons
    16*16px, its extremely important because they are requested before any other components of your website by the browser. So guess what happens when you have a big sized favicon or even worse, no favicon? the browser is 404′d. You don’t want to 404 a browser or make it struggle loading your favicon, so it is preferred to have your favicon reduced to a size under 1K.
  4. Minimize HTTP Requests:
    * CSS Sprites, are the preferred method for reducing the number of image requests. Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment, for example look at this image: http://img.b8cdn.com/images/icons/sprite_all.png
    * Image Maps combine multiple images into a single image. The overall size is about the same, but reducing the number of HTTP requests speeds up the page. Image maps only work if the images are contiguous in the page, such as a navigation bar. Defining the coordinates of image maps can be tedious and error prone. Using image maps for navigation is not accessible too, so it’s not recommended.
    * Inline Images use the data: URL scheme to embed the image data in the actual page. This can increase the size of your HTML document. Combining inline images into your (cached) stylesheets is a way to reduce HTTP requests and avoid increasing the size of your pages. Inline images are not yet supported across all major browsers.
  5. Use a Content Delivery Network ( CDN ).
    Deploying your content across multiple, geographically dispersed servers will make your pages load faster from the user’s perspective.
  6. Remove hidden metadata from your images.
    Image also has metadata embedded in it, such as the EXIF data, which describes about the date when the photo was taken, type of camera you used, shutter speed, white balance and more, this meta data has extra size we don’t need it, you can remove it by some of softwares, like : “PNGGauntlet” ( we use it at Bayt designer), “JPEG & PNG Stripper “, smush.it and more, by this tools you can reduce the size of image from 5% to 35%.

Optimizing images for better search engine rankings:

  1. Use proper name to name of image, example:For example, “widescreen-wallpaper.jpg” is better than “image.jpg”.
  2. SEO Friendly Images , write correct ALT and TITLE to tag, those will enhance SEO images to your site.

11 thoughts on “Best Practice For Using Images On Web Pages

  1. Attractive section of content. I just stumbled upon your weblog and in accession capital to assert that I acquire in fact enjoyed account your blog posts. Anyway I’ll be subscribing to your augment and even I achievement you access consistently fast.

  2. Good article. I will be facing a few of these issues as well.

  3. I think this is one of the most important information for me.
    And i’m glad reading your article. But wanna remark on some general things, The web site style is ideal, the articles is really excellent : D. Good job, cheers

  4. I must thank you for the efforts you’ve put in writing this website. I’m hoping to check
    out the same high-grade content by you later on as well.
    In fact, your creative writing abilities has encouraged me
    to get my very own blog now 😉

  5. I visit each day some websites and sites to read posts, except this website provides feature based articles.

  6. Hi, i think that i noticed you visited my website so i got here to
    go back the favor?.I’m trying to find things
    to improve my web site!I guess its ok to use some of your concepts!!

  7. I blog often and I seriously thank you for your information.
    This article has really peaked my interest. I will take a note of your website and keep checking for new information about once
    per week. I subscribed to your Feed too.

  8. Woman of Alien…

    Great work you’ve got completed, this great site is basically neat with amazing details. Time is God’s method of keeping every little thing from occurring without delay….

  9. Great post. I was checking continuously this blog and
    I’m impressed! Extremely useful info particularly the past part 🙂
    I care for such info much. I had been searching for this particular info
    to get a number of years. Thanks a lot and best of
    luck.

  10. Hi there, all the time i used to check blog posts here in the early
    hours in the daylight, as i enjoy to learn more and more.

Leave a Comment