Friday, April 20, 2012

Web application Performance Optimization Part 3: Optimizing Images

Optimize Images

Normally development team gets all the images and design artifacts from creative team and it’s pretty normal creative team already optimized them as much as they could. But still there are some techniques that can be used on those articles:

  • Optimizer Tools – There are many image optimizer tools available that we can use to optimize images provided by creative team. Here is a list for those:
  • Converting from one image format type to another – Sometimes converting images from one format to another may also reduce the file size. Like in most of the cases conversion from GIF to PNG save some bytes. PNGOut (http://www.advsys.net/ken/util/pngout.htm) is a very useful tool for this type of work.

CSS Sprite

Fewer HTTP request is the key to improve the page load time for any application. This technique reduces HTTP request each time a page is load by combining several images together on a single image file and control its output with CSS background-position attribute. Here is an example image:

Avoid Image Scaling in HTML

Always try to use images with appropriate scale (width x height). Let’s say, if we’ve 50x30 image placeholder on our page. But we’ve used 320x150 image and scale it through HTML img tag. We should scale them appropriately through some proper tool like Adobe Photoshop, Microsoft Expression Design, etc… It will reduce the file size of the image. Also it might lose its resolution and clarity.

1 comment:

  1. Thanks for this helpful Blog.
    I used a WordPress plugin that I found interesting. So I would like to recommend it.
    The plugin helps me quickly create and customize images before inserting them in my blog post.
    Check at: https://getpikiz.com/wordpress-plugin/
    It’s free.

    ReplyDelete