This post is inspired by another listener question (See comments for our previous show). Jeff once again asks us about images for posting to web pages and I presume blog posts, he writes:

“I am looking for a FireFox extension that calculates the image dimensions for a proportionately resized image. I want the extension to allow me to figure out the proportionate size of an image if I resize it. For instance, I have a 800X600 sized image, but I want to create a thumbnail image which will be smaller. Using the extension, I want to be able to type in either the Height dimension or the Width dimension and the opposite value will be calculated for me allowing me to know that the image will be sized proportionately.”

Well to start off Jeff I think you have over complicated your problem. Screenshots and images are a certain size. Regardless of the size sometimes we need to either make the image bigger or smaller. Usually the latter. You do not need to go through the “proportionate sizing” process you are talking about. But lets start at the beginning.

These are the steps that you need to go through to get an image from the web page or wherever to your blog, it can be a photo or a screenshot or a graphic:

• Take a screenshot with the tools that you have (we have covered this in a previous post)
• Figure out what size you need that image to be based on where you are putting it
• Save the image in a scalable compatible format
• Resize your image
• Save the image
• Insert your image to your post or web page

These are the exact steps that we use here on our blog.

Lets assume that you have your image. Now the way that Jeff has asked his question and the issue that confronts most bloggers is that images are too big for your blog. So lets assume that you need to make it smaller. First up though think about this. There is nothing worse than an image that has been resized to the point that it is unreadable. If it is this small then make it a thumbnail - don’t attempt to make it viewable. Always try to avoid the small, thumbnail and resize to the largest that you can but still staying within the confines of your workspace while maintaining a pleasing look. If an image needs to be this small, just link it out with a “href” to show it in full size in a new tab. Lastly once you settle on a convention for your blog, stick to it, don’t swap and change your system.

So first up you need to figure out the space that you need. Also consider using the full width of your blog and don’t try to wrap text around the image. Begin your text again after the image. But avoid making a screenshot larger than 100% as this invites new complexities that I will not cover in this post. Readers would rather be able to see and understand your image than see a scrunched up ugly one. Wrap the text around an image only when you know that you can fit the image and maintain size and your layout is good.

Now figuring out the size. You need some tools. The best tool by far that was recommended to me by Tim is Pixel Ruler. It is a program that floats a ruler over any workspace no matter what the application is. I blogged about this app on Rooster’s Rail, so I am not going to cover it here. If you are wanting to measure images that appear on web pages then this will do that job as well. I would not recommend bogging down Firefox by adding an extension, but if you must. There is an extension called MeasureIt by Kevin A. Freitas that will do exactly the same task, but only within Firefox.

The main measurement that you need to make is the width, don’t worry about the height. The reason for this becomes apparent later. Write that width measurement down.

Now your image that you have. I would recommend that you use a file format that does resizing well and is suitable for the web. I use .png format which is scalable. Not only that it is widely compatible and accepted for use on the web. Of course the rules of resolution apply though. But for our use of resizing to a smaller size resolution is less of an issue.

Now you know what size to make your image, we said we were going to make this image smaller. What you are doing when you are resizing an image is scaling it. Making it smaller without changing the aspect ratio of the image. This is sometimes represented by a padlock in image editing software. Make sure you select to lock the aspect ratio of the image. Which brings me too my next point. You need half decent software to be resizing images. Do not use the “drag to resize option” either. Use measurement! Set your measurement to pixels.

These are the resize settings I use for full page screenshots here on this blog

Now for the resizing value all you need to input is the width that you measured earlier. Reason being is that because you have locked the aspect ratio the height will be taken care of - it is set in stone. Do not change it! If you do your image will break, become unclear and just look armature and weird. The image is smaller but not to scale. Just don’t do it, ok.

Now you should be looking at a very nice scaled down image. Make sure you have a nice boarder like a 1 pixel black one or something.

Save it! Your done, upload to your host or blog and use it.

So Jeff, what you are wanting to do is to scale down an image based on the space available. The magic extension you are wanting does not exist. You don’t need to know the scaling values, or the “proportionate values” - the software will figure that out for you. You just need to know the width. The tools that enable you to do so are freely available. Get the tools and keep in mind the few simple rules I have mentioned and you are on your way to create killer screenshots and images for your blog or web page.

Dave

Please check out the latest show!

This entry was posted on Friday, June 15th, 2007 at 12:41 am and is filed under General. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.