It is a Series of Small Steps that Lead to Big Performance Gains (POST 02 – IMAGES)

No Comments

IMAGES:
One of the most obvious things that you can do to improve the performance of your website is to optimize the images that it uses. Afterall, the larger an image, the longer it will take to transfer to your browser.
However, to really optimize the images on your site, you need to look at two things:

    1. The file size of the image should be as small as possible without taking away quality
    2. The dimensions of the image should match the dimensions in your html

There are lots of ways to optimize the images on your site. You can purchase or download software that will make an image file smaller. In addition, there are websites that offer this service – some of them are free. You file size change will depend on the mage format and the settings you choose. It is a balancing act between quality and size, and you have to decide where the best balance lies.

An example of a free online image optimizer: http://www.imageoptimizer.net/Pages/Home.aspx

Additionally, there are plugins for many of the major CMS’s (WordPress, for example) that will automatically optimize your images. I personally prefer WP Fastest Cache Pro which does a lot more than just optimize images.

Finally, it is best that the actual image dimensions match the display dimensions on your page. A good example (which I see frequently) is where you search for the perfect photo to add to your site, and find it on one of the stock mage sites. The image you download from them is HUGE because they want to give you the best image and have it sized for even the largest use. So, while your website may only display an 800×600 image that matches the placeholder size, the file you downloaded may have been 3440×1440 and many megabytes in size. The problem is that although only 800×600 is being displayed, web browsers are downloading a 3440×1440 image and resizing it. There is a performance hit transferring the large file, and another resizing it each time. The smart thing to do is resize the image yourself and then optimize that image. This is the image you should upload to your site.

Michael's LinkedIn Profile: Click Here

About us and this blog

We are all about web application performance, and use this blog as a way to disseminate relevant information.

More from our blog

See all posts