This is part two of a three-part series on the different types of images used on the web, what types are best for which situations, and how to prepare your photos and graphics before uploading them to your website. This topic can get pretty technically complex, and to make things even more confusing, terms like pixels and resolution can mean different things depending on the context. For the purposes of this blog, I’ll keep it as simple and easy to understand as possible. In this post, we’ll cover how to measure what size your photo should be before you upload it.

What size photo should you use on the web

First, it’s helpful to be able to measure the sizes of things already on your website. That way, you’ll know the picture will fit in the column instead of just trying different sizes to see what works! I like to use a little tool called MeasureIt. You can install it easily in your Chrome, Firefox, or Safari browser. It creates a tiny little icon on your toolbar (pointed out by the red arrow in the picture at left), so it won’t take up a lot of space in your browser window. To use it, just click on the icon and then click and drag with your mouse to measure anything on the page. When you’re done, click the icon again to turn MeasureIt off. The links below go directly to the download pages for each browser.

Chrome: https://chrome.google.com/webstore/detail/aonjhmdcgbgikgjapjckfkefpphjpgma

FireFox: https://addons.mozilla.org/en-US/firefox/addon/measureit/

Safari: http://www.pimpmysafari.com/items/MeasureIt-Safari-Extension/

You could use this to measure how big you want a photo you’re adding to your blog, or anything else you need to measure. Once you know the size your photo needs to be, try using Picnik to resize your photos! Then when you upload them to your blog, you won’t have to mess with them any more, because they’ll be just the right size. If you decide to try MeasureIt, let me know what you think in the comments!