Find the Width of Part of a Web Page

February 06, 2012 | Webdesign | Written by Steve Burge

One of our students wanted to upload full-size photos into a post on his WordPress site. The theme was Canvas from WooThemes.

So, the question became ... what is the smallest photo size that I can upload while still having full-size photos in a post?

Our answer was ... let's find out. We can do that by measuring the width of the posts in Canvas.

Here's the Canvas theme as seen at http://demo.woothemes.com/canvas/.

To measure the width of posts, we're going to use the Web Developer addon from Firefox.

First, make sure that you have the Firefox browser installed from http://www.mozilla.org/en-US/firefox/new/.

Then go and install the Web Developer addon from https://addons.mozilla.org/en-US/firefox/addon/web-developer/.

When it's installed, you'll see an extra bar across the top of your browser. To measure the width of any part of a page, click Miscellaneous and then Display Ruler.

A grid will then appear on the page. You can drag that grid across the page to measure the area you are interested in. In this case, were measuring the teaser area for the blog.

The end result? The teaser are is about 600px wide and 200px high:

So the best choice for uploading full-size photos will be 600px wide. Any smaller and the photos won't take up the full width of the post. Any larger and the site will load more slowly because the photos are larger than they need to be.