In this fourth article in my series about how to use images effectively I’m covering how to resize your photos correctly to include in your blog post. If you use a lot of high resolution photos in each blog post, you will quickly find that your blog pages become slow to load. You need to ensure fast page load times to avoid readers clicking away from the page as they get bored waiting, and you may also get downgraded by search engines if your website is too slow to load.
How to measure the size of your images
The images you use on your blog are measured in various ways, such as;
- Dimensions in Pixels (width and height) – this is the size of the image as it appears on the page. For instance the width of my main blog area is around 580 pixels wide so I often resize photos to be 580 pixels wide too.
- Resolution in Dots per inch or dpi – indicates the printed density of the image as it appears on the page. The higher dpi will give a clearer and crisper image but it may also indicate a larger file size. The trick is to go for the lowest dpi that will also give a clear image on the blog which is normally around 72 dpi
- File size – measured in KB or MB indicates the amount of storage space that the image will take up on your computer or blog server. The larger the file size, the longer the photo will take to load on the webpage.
How to check the size of your images
- If stored on your computer hover over the image icon and you will see the Dimensions e.g 1200 x 900 and the size e.g. 64KB.
- Alternatively right click on the image icon and go to Properties at the bottom of the Menu. On the General tab you will find the Size in KB and on the Details tab you will find the Dimensions in pixels and Resolution in dpi
- If you find an image on a website and rightclick you can View image info to give you the Size in KB and Dimensions in Pixels
What file type to use for your images
Another thing that will impact the size of your photos is the file type you use for your photos. I’m quoting below from the WordPress Codex on images as to which images are best for web use – generally JPEGs are preferrable for photos on your blog;
- jpg (JPEG) is good for photographs. Saving a photo as jpg removes detail from the photo. Good photo editors let you control how much detail is removed (the “compression”). Different photos need different compression; doing this carefully and viewing the result can give you a usable photo with a small file size.
- gif can be poor for photographs. It’s better for line art, like logos, with solid areas of the same color.
- png is for both photographs and line art. It compresses photos without losing detail, but usually makes larger photo files than JPEGs. Some older browsers don’t completely support png, though.
What size do your images need to be?
- Resolution dpi - The dots per inch should be as low as possible while still maintaining a good quality of image for the viewer. Your view of the quality of image may vary depending on your purpose, for instance if you a a professional photographer you may be more particular about the quality of your images. However, in general 72dpi is the resolution to aim for.
- File size KB – The advice on the WordPress Codex is that larger images should have a file size of 60-100KB and smaller images around 30KB. This will keep an acceptable quality of image while optimising page load time. I do sometimes use larger images that are up to 200KB but you probably shouldn’t go much over that.
- Size Pixels – the size of image will be determined by how large you want it to appear on the page. I often use images that are 580 px wide to fit the full width of my blog page or 2 images side by side that are 290px wide. You can easily adjust the size of the image once on the page by following the instructions in my article on How to present images effectively on your blog
How do I make my images the correct size?
I always have my camera set to take photos in the highest resolution which allows more flexibility when it comes to enlarging or to cropping to feature a small element of the image, without losing quality. However, this means that a typical photo would be around 3000 pixels x 2000 pixels which would be far too large to use unedited on my blog. There are a number of ways that you can easily resize your photos without cost using free software.
When I have uploaded photos to my Flickr account at the original resolution I am able to download it again in a choice of different sizes by clicking on the individual photo, then Actions/View All sizes (above the photo). You can try this on any photo in Flickr even if it is not your own. Next click on the size you want – I typically use Medium (500 x 333) or Small (240 x 160). You should choose the size that is nearest to the size you wish the image to appear on your blog and then adjust it once in the blog post. When you have selected the size Right click and Save Image As to your computer, from where you can upload to your blog.
If you want to do further cropping or editing in Flickr, you can use the Actions/Edit photo in Picnik. The Picnik editing software is available to use separately from Flickr and is free for the basic functionality, so is an ideal choice for you to resize your photos.
Although I personally use Flickr for my photo hosting, similar services are available from Picasa, Smugmug and Photobucket and although I haven’t tried them, I expect that they have a similar editing functionality available.
I also use Picnik to do basic photo editing and it is ideal to reduce the size of a photo. to make it more managegable for your blog to digest. Picnik is free for a certain amount of uploads but if you use it a lot you may need to upgrade to their premium service.
Once you have uploaded a photo you can use the Edit tab to Resize or Crop. When you resize, you can keep the Keep Proportions box checked and then when you change one of the dimensions, the other will remain in proportion. For instance I might resize an original photo of 2640 x 1980 pixels with a file size of 2.6 MB and change it to a 580 x 435 pixel version which will reduce the file size to 89KB or a 290 x 218 pixel size with a file size of 41KB. I could also crop the photo to take just a small part of the photo which would also have the effect of reducing the file size.
On the Save & Share tab I can make further adjustments to the size by altering the dimensions again, or by reducing the JPEG compression Quality on the Slider. You should also take the opportunity to change the file name from a number to a relevant title.
Other Photo editing tools
There are a couple of other free photo editing tools that you can download but have not tried myself – take a look at Ifanview at Gimp if you’re interested. If you have your own favourite photo editing tool, especially if it’s free, do let me know your recommendations.
Other ways to reduce your page load time
If you are routinely resizing your photos before loading them on your blog you’re already taking steps to keep you page load time under control. However after you’ve been blogging a while and added all manner of badges and widgets to your site, things may start to slow down.
Thanks to Guido at Happy Hotelier for pointing out to me some ways that you can address this problem. He pointed me to these useful articles on how to reduce your page load time;
The lesson I took from these articles is;
- There are tools that can help you check your page load time, but you should test at different times to get an average reading. Examples of such tools are iwebtool’s speed test, Pingdom not to mention Google Webmaster tools (look in the Labs/site performance section) and Google’s Page Speed Tool, once you have registered your website with Google.
- If your images are hosted in a separate subdomain to your main domain, the images will be loading in parallel to the rest of your site, thus cutting down on the overall load time. Setting this up is probably not for the beginner bloggers out there but if you are reasonably tech savvy or have someone who can help you on this, then it’s a good thing to do, especially if you have a well established blog or are starting a second blog that you have high hopes for and is likely to use lots of images.
- There are other technical ways to improve your page load time, but personally I’d need to get someone with some web development experience to help me on these.