Find the Width of Part of a Web Page

| Web Design

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

tutuploadsmedia_1329392477034.png

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

tutuploadsmedia_1329392661527.png

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.

tutuploadsmedia_1329392525681.png

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.

tutuploadsmedia_1329392599994.png

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

tutuploadsmedia_1329392616537.png
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.

About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.