Images are a critical element in your website, yet they can also slow down your website if your images and not optimized and properly sized. Image processing is critical – we have three recommendations for image sizing and optimization:

1. Size your images to the exact size they will be displayed on your website. If your image size is going to be 300 pixels wide and 500 pixels high, make it exactly that size before you upload it. If you want the image to open up a larger image when it is clicked, we recommend that you make two images of the sizes you will use – the displayed size and the larger size that will load when the image is clicked. Yes, html can resize images for us, but it slows down the page and loading an image larger than necessary also slows down the page – especially if the images are very large. We use PhotoFiltre for resizing. It’s a free utility that is very powerful and easy to use. You can not only resize but also crop and edit your images. You will notice that clicking on the word Photofiltre will take you to a Snapfiles.com page. I recommend that you use Snapfiles.com and only Snapfiles.com to download freeware and shareware. All the downloads are certified virus-free, it warns you if the download is going to try to load extra programs as well, and the reviews are great.
2. Optimize your images. Images contain a lot of extra stuff that just takes up space. Use RIOT (Radical Image Optimization Tool) to remove the junk. It will dramatically reduce the file sizes, especially with jpg files. RIOT is also a free program. Fantastic program.
3. If you want your pages to load quickly, all your images and files such as pdf files should be stored on a Content Delivery Network (CDN). Using a CDN can be quite expensive, but Amazon provides an excellent CDN free, provided you don’t use more than 5GB of storage. The free guarantee is only for a year, but I have been using mine for over a year and haven’t had to pay anything yet. If they do start charging, the rates are exteremely low. The biggest challenge with using Cloudfront is that it is a bit tedious. First you create an Amazon Web Services account, then you create an Amazon S3 ‘bucket’ where you store your files. Your bucket should have sub-directories. You then establish an Amazon Cloudfront distribution from your files in Amazon S3. The Cloudfront distribution will have its own url which you use on your webpage. With WordPress, you use that full url including the file name instead of uploading the files to the WordPress account. But the pages load much faster – it’s definitely worth the tedium involved.

The image in this post was resized by PhotoFiltre – if you click on the image you will see the original size image. RIOT reduced the size of the larger image from nearly 60kb to 18kb. The smaller image was reduced by similar proportions. I uploaded them to my S3 bucket and then used them in the post. The link to the larger image had to be hand-coded.

Utilize these three recommendations and your web pages will load very quickly, as far as your image management is concerned. There are several other issues to address to optimize your web page loading speed, but those will be topics for other posts.