Does your webpage take a very long time to show up the first time you open it in your browser? Does it even take more time on slower Internet connections? The problem might be the size of your image files.

Always resize and apply changes to the original image in order to preserve the best possible quality image.

The two biggest causes for large images which cause your website to be slow include:

  • The height and width of the image are too big
  • The quality of the image is too high

I have seen many people upload stock photos or even their own photos at full multi-mega-pixel resolution and then used HTML or the CMS to resize the image. This results in a website that is very slow.

The best solution is to send the visitor exactly what they need and nothing more. Before you upload your file, reduce the dimensions of the file to the height and width which will actually be displayed and reduce the quality of the saved file to a level where it still looks good. These two techniques can dramatically increase the speed of your website because the files sent to visitors will be smaller. How much faster? That depends on your web page but it is not uncommon to see the time it takes to display a web page for the first time drop by 50 to 80% or more.

A couple of tools I have found which produce great results are Photoshop (Save for Web option) or IrfanView. While Photoshop does a great job at reducing the size of your image files, if you don't already have it, it can be expensive to purchase. It is also not very convenient or quick to batch process many images, even if you create automated Action scripts.

A much less expensive alternative for this type of work is Irfanview. When it comes to quality, my comparative research has shown that it is the next best thing to Photoshop for advanced image processing. For example, in the time it might take someone familiar with Photoshop to re-size one image, Irfanview can do 50 or more images with similar high quality results and in some cases, even produces smaller files than Photoshop. While it can't do everything that Photoshop and other image editors do, what it does do, it does very well.

Irfanview lets you work on an individual image or batch process many files at once.

Irfanview is free to download from for personal use. As of today, it is also a bargain at just $12.00 if you will be using it for business. You'll find the link to donate on the What is Irfanview page. And just in case you were wondering, I don't have anything to do with Irfanview or its developer other than being a big fan of this product since many years.

Irfanview: Individual Images

Reducing the Image Size

To reduce the size of an image:

  • Open the file in Irfanview
  • Click  Resize/Resample…
  • Make sure that the Preserve aspect ratio (proportional) box is checked so that your image doesn't get stretched
  • Make sure that Resample (better quality) is selected and make sure it is set to "Lanczos (slowest)". Don't worry, it's still very fast.
  • Optional: I usually like to check the box for Apply sharpen after resample however this depends on the image.
  • Specify the new Width or Height
  • Click OK
  • Save your file with a new file name.

Reducing the Quality of the Image

Open the image in Irfanview if it isn't already and simply save it as a JPG file. As you are doing this, set the Save Quality to about 70-80%. Depending on the file, this will result in a dramatic reduction in the file size without changing the height and width of the image, and the difference will visually hardly be noticeable if you see any difference at all.

Irfanview: Multiple Batch Processing of Files

Irfanview lets you process many files at once which can be a huge time saver. Be sure to ALWAYS review the settings in both the Options button and the Advanced button as their settings are always remembered from the last time you used them and they are both applied anytime you do the batch processing.

  1. Open Irfanview
  2. Click File.
  3. Click Batch Conversion/Rename…
  4. Locate the files you want to process and use the buttons below the list to add these to the Input files list of files to be processed.
  5. Specify where the modified copy of the files are to be saved in the Output directory for results files.
  6. Next complete both the Reducing the Image Size and the reducing the Quality of the Images steps below. If you don't want to re-size your images, uncheck the Use Advanced options (for bulk resize…) box. Otherwise you may find that your files have been inadvertently re-sized.
  7. Click Start Batch

Reducing the Image Size

There are several reasons why you might want to re-size many images when making them available on your website. For example, you may want to create thumbnails of your photos or just reduce the file size of your photos so that they can be seen on the screen. Your website doesn't require the high resolution multi-megapixel size images that most cameras take these days.

  1. Click the Advanced button.
  2. Uncheck all the check boxes.
  3. Make sure that the Preserve aspect ratio (proportional) box is checked so that your image doesn't get stretched.
  4. Make sure that the Resample (better quality) box is checked.
  5. Here you have a choice of either setting the Width, the Height. This will make all your images have the same height or width. Alternatively you can choose to specify the length of the Long Side or the Short Side of the image to make all your images be of the same size. Whichever you choose, the other dimension will automatically be calculated in order to preserve the aspect ratio of the height and width.
  6. Click OK.

Reducing the Quality of the Image

You can change the quality of the images, often without affecting them visually.

  1. Click the Options button
  2. Set the Save Quality option to 70 or 80%.
  3. Unless you have a specific reason to do so, make sure none of the other boxes are checked.
  4. Click OK.

Related Posts: