How to Resize Images for the Web without using expensive software and still get first class results.

We've all seen it in the past. A website with screen shots or images that just look horrible. Here's a quick example:

Depending on which browser you are using you might not be able to read the text on the above image. If you can, then take a look at how IE7 displays the image:

As you can see, because the image has been resized without being resampled, it's very difficult to read the text.

The first image is a full size screenshot that has been resized into a smaller space. If you right click on the image, save it, then open it, you'll see it's actually much bigger than it appears on the page.  The thing is, different web browsers handle image resizing in different ways. IE7 for example makes resized images look awful. Google Chrome re-samples images when it resizes them and makes them look good. I'm not sure which I prefer. Image size used to be a major consideration since big images required more bandwidth to download. Back when we were all using dial up modems it was a crime against humanity not to resize images correctly. Chrome removes the incentive to resize images which means laziness is no longer punished with ugly images that drive visitors away. This isn't a neccessarily a good thing, as it allows unnecessary bloat on a site that adds nothing to the user experience. 

 

Nowadays broadband internet access has tendency to make us all lazy. However, the rise in mobile internet devices means there is still a good reason to resize your screen shots correctly.  You don't need to use expensive software to resize screenshots. Photoshop will do a great job with Bicubic or Bilinear resampling, but Windows Picture and Fax Viewer will do pretty much the same thing if you view the original image, then resize the window to make the image smaller. 

 

Widows Picture and Fax Viewer is the full name of the little photo viewer application that Microsoft included in Windows XP. It’s the application that fires up by default when you open an image. In case you’re still not sure what I’m talking about, here’s a screen shot: 

Chances are you’ve taken this little application for granted and never even considered what it’s doing in the background. It resamples your image as you resize the Window. Basically, it's doing for free what applications like Photoshop do when you resize images.

Ok, so you resized the Windows Picture and Fax Viewer. It's time to use an old favourite of graphics designers. The Print Screen Key. What this does is copy every pixel currently visible on screen to the Windows Clipboard. You can then paste from the clipboard into any image editing application, including Windows Paint. All you need to do is crop your screen shot out of the image. This will give you clean screenshots for zero cost.

 

It's also worth noting you can hold "Alt" and press the Print Screen Key. This will copy all of visible pixels from the currently selected window to the clip board.

If you start to think of the Picture and Fax Viewer as a resizing tool, you can resize the window while it is on top of your website. This allows you to create images that are exactly the right size for your site. The same principle can be used to resize image for all sorts of uses.

The key advantage that this has over using a product like photoshop is that you can use the Picture and Fax Viewer window as a precise measuring device that lets you select the exact horizontal size of your image for a website. Here’s the image that we created using the Windows Photo and Fax Viewer.  

Here’s the same image that was resized in Adobe Photoshop using Bicubic re-sampling. Can you tell the difference? Your wallet certainly can!

 

While you're here don't forget to checkout 3D Box Shot V3!

Don't want to pay?
Click here to find out how you can get it for free!

Fast Download, Digitally Signed for added security.