How to optimize images

How long it takes to load a web page will affect its position in the Google search engine results page (SERP).  Moving towards faster page load speeds is all part of web performance optimization and one trick to help this along the way is to optimize images for the web.

In this ‘How-to Guide’ we’ll be walking through the steps to optimize images by compressing their file size while using commonly available design software or online tools.

A word about compression

The reason for compressing images is to reduce the amount of data stored in the file so that it can be transmitted and stored more efficiently.  The sort of compression we’re going for is lossless compression.  It’s hard to get your tongue around that one, but think of it as meaning that “there’s nothing being lost”. An image that has been optimized with lossless data compression will be restored to its original quality from the compressed file.

Image data is stored in pixels, each pixel representing a colour and brightness.  The number of pixels of data stored in the file will need to be reduced to fit the space on the webpage and, if you’re using a CMS like WordPress or Joomla, better to do this away from them, uploading a compressed file rather than relying on the CMS to do the compression for you on the fly.

What are the ideal file sizes?

The smaller the better, without losing any quality or definition.  Check this by viewing the image in the web browser at 100%.  At any time, you can use the Ctrl ++  /  — to size the image up and down to see what it looks like, and you can resize to 100% by pressing Ctrl 0.   And this can be done with any of the tools below.

Using Photoshop Elements

Adobe’s Photoshop Elements is a scaled down version of the design software, costing not so much and is an ideal tool to use to optimize images for web.

Open your image in Photoshop Elements and select ‘File -> Save for Web’

File SaveForWeb

Your image will appear in a dialogue box twice, on the left hand side, at the bottom, you’ll see the original image size, and on the right hand side, the proposed image size when it’s compressed with 60% quality.  Instantly, you can see the difference!

Compare original image size

And this would be before you resize the image.  You can see that the original image size is 1024px by 768px.

Resizing

To fit our webpage, we want to reduce this to 470px in width.  By keeping the link (aspect ratio) between the Width: & Height: boxes, the height will automatically resize without squishing the picture in either direction.

So, a reduction of 45.9% (above), compresses our original image to just 28K, and here it is:

Final Image


Paint.net

This is a free tool which has been around for a few years and is more useful than some standard desktop accessories, while not being as complex as full-brown design software.  It’s great for compressing images down to a size more suitable for a webpage, although sometimes definition is lost on delicately drawn or designed logos.

Open your original image in Paint.net and press Ctrl R to Resize it.  Keep the ‘Maintain Aspect Ratio’ box selected and chose your new width in pixels.

PN_resize

Select ‘File, Save As’ and chose ‘jpg’ file extension and give it a name.  The final shot below shows you that the compressed file is now at 17kb and this is what it looks like, still at 470px wide:

SaveAsFinalScreen

PaintNet_resized


 WP-SmushIT

If you’re a user of WordPress, there’s a useful plugin called WP Smush-it which comes from the house of Yahoo and uses their image optimizing service.  WP Smush-it sits quietly in the background of your WordPress site and picks up any image which is added to your media library, running it through smush.it on the Yahoo servers.


Web page optimization with page speed analysis

Here at Dee Stevens Web Studio, we offer a Page Speed analysis service and one of the items we look at it is the time it takes to load images to the page.  If you’d like to talk more to us about this, feel free to call us on +44 7891 123924

Go on reading: Website Management: taking your business forward