Reasons to keep our image sizes small:

The images on our site are the primary reason for slow-loading pages. That’s because images take up a lot more kilobytes than text,  and every time I find a page that is particularly slow-loading, it is because it contains one or more images that are not optimized. We should generally try to keep images below 20 kb, but images with a lot of detail may go just over 20 kb to appear acceptable. So please check the kb size of the image you are planning to use.

Two ways to reduce the size of images:

1. Make the image smaller. 
2. Compression:
    Many graphics programs allow you to “save for web” or something similar, and this will compress images. The old 32-bit version of  Irfanview has a “Save for web” option that compresses images while preserving quality. It is seldom necessary to ask for quality over 75%.

How to size the image correctly:

Largest dimension should usually be no greater than 300px, but there may be exceptions, as noted above. (If you think you need a larger image, please ask your editor.)

• You can resize the image  on your computer using a graphics program. If you don’t have one, we recommend Irfanview (see below).
• You can resize and optimize your image online using Smushit.
• You can resize and optimize your image online using Web Resizer.

Optimizing images on your computer using Irfanview

1. If you are not familiar with the program download it for free from the Download link at Irfanview.ca. Also download all the plugins in one bundle, to make sure you get the right ones. Install the program and the plugins. (Please familiarize yourself with Irfanview before trying anything else. A more expensive program does not necessarily do a better job. Check Youtube for instructions, if necessary.)
2. Open the image in Irfanview and resize it using the best quality compression method. (Option Resize/Resample under “Image.”)

• Rectangular landscape-view images should usually be reduced to 300 px wide unless they are shaped more like a banner, in which case they may be wider.
• Resize a portrait-view image similarly to 300px tall. There may be exceptions where greater detail is important. In that case keep in  mind that our theme width is 980 pixels, minus margins. Most posts appear with side bars, which narrows the usable width down to 720 px or so.
• Use “Save for web” to save the image (in a different folder) for uploading to the site. Most images are fine at 70%, and some can be made even smaller. A few images need to be saved at higher quality — such as cartoons with text. You will see the difference in quality in the right pane for comparison. Use your judgment to determine how small you can make the image. The kb size shows up over the right window.

Print/PDF/Email