How to resize images for your blog to improve page load time

by Heather Cowper on 31, October 2010

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

Image propertiesIf you want to check the size of an image there are a couple of ways;

  • 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.

Flickr

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.

Picnik

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.

Picnik editing software

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;

How to host images of your WordPress Website in a Subdomain
Speed up WordPress – Ultimate guide to making Sites Super Fast
38 Ways to speed up and optimise your WordPress Blog

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.

Other articles in the Image series

1. Why use images on your blog?
2. How to present images effectively on your blog
3. The best slideshows to present images on your blog

This article is originally published at My Blogging Journey
You’ll also find lots of great travel stories, videos and podcasts at our travel blog at Heather on her travels

Subscribe to My Blogging Journey Don’t miss out – subscribe to My Blogging Journey

Related Posts Plugin for WordPress, Blogger...
Save on hotels with HotelsCombined.com

{ 11 comments… read them below or add one }

Happy Hotelier October 31, 2010 at 22:25

Hi Heather,

Kudos for the tremendous lot of work you put into this blog.

May I add a tool that works best to measure page load time, but also to get an insight what happens when a browser load a page, is the firebug addon for Firefox (http://getfirebug.com/)

In addition: It seems that you should never upload bigger photos than you actually are displaying in your blog. Don’t be lazy (I am sometimes) and do shrink the size of your photos to the highes resolution you use. Finally it seems that browsers like it if the size of your photo is indicated in it’s file name.

Reply

Anil November 1, 2010 at 08:40

I agree – never upload larger than you actually need. In addition to page loading, over time those files add up, increasing in size and making your blog back-end heavy. Start small and keep your high-res images elsewhere (e.g. Flickr).

Reply

Mark H November 1, 2010 at 00:43

There are a few free photo resizers around but one reasonably good one is FotoSizer (search for it in Google will find it). You can select new image size by pixels or percentage, direct it to a new folder, give it a name that appends the new size, change its quality down (reduces size more) and change its format (convert between jpg, gif, bmp or whatever). Most importantly you can work on whole folders or sets of folders at one time, so set it to run and leave it convert a whole folder of photos. The interface is a bit clunky and it downloads another toolbar which needs deinstalling but it seems to work as advertised. The paid-for photo editors (like Photoshop etc) also have good batch sizse converters.

Reply

Barbara Weibel November 3, 2010 at 18:11

Heather: For the Photoshop users out there, it’s worth noting that there is a built-in setting that allows users to “Save for Web,” which automatically optimizes the image for quality while making it as small as absolutely possible.

Reply

Happy Hotelier November 14, 2010 at 10:13

Barbara
I use Photoshop. Please note sometimes you get better results with the “save as” function than the “save for web” function.
In addition I would like to point out that while traveling I sometimes use my eee with the Picasa programto crop. Off course when you are a Mac addict you have an easier go.

Reply

admin November 14, 2010 at 10:37

@ Anil, Happy Hotelier, Barbara, Mark
Thanks so much for all your comments and input, there’s lots of good info here, I appreciate it

Reply

Beatrice Banks March 9, 2012 at 18:42

Thanks for this great post full of information! I have linked it in my post today.
Have a nice weekend!

Reply

Heather March 9, 2012 at 22:14

@ Beatrice Thanks so much – appreciate the link back

Reply

Ida March 25, 2013 at 08:03

Please let me know if you’re looking for a author for your weblog. You have some really good posts and I feel I would be a good asset. If you ever want to take some of the load off, I’d really like to write some content
for your blog in exchange for a link back to mine. Please blast me an
e-mail if interested. Thank you!
Ida recently posted..Ida

Reply

Heather Cowper March 25, 2013 at 10:04

@Ida Feel free to e-mail me a proposal if you have a guest post you feel would be relevant to the topic of How to build a better travel blog

Reply

http://www.jolkona.org/ May 18, 2013 at 00:10

Hi there, just wanted to tell you, I loved this blog post.
It was funny. Keep on posting!
http://www.jolkona.org/ recently posted..http://www.jolkona.org/

Reply

Leave a Comment

CommentLuv badge

{ 1 trackback }

Previous post:

Next post: