An Easy Way to Resize Images

A handy guide to resizing images without using additional software that will create great results.

3D Box Shot Pro: Vista Style Box 3D Box Shot Pro: DVD With Disc On Right 3D Box Shot Pro: Software Box with Flap 3D Box Shot Pro: DVD with Disc on Floor 3D Box Shot Pro: Software Box with Disc on Right 3D Box Shot Pro: DVD with Disc on Left 3D Box Shot Pro: Software Box with Disc on Left 3D Box Shot Pro: DVD with Disc on Floor Flat 3D Box Shot Pro: Software Box with no Disc 3D Box Shot Pro: DVD Case Open with Disc 3D Box Shot Pro: Thin Software Box 3D Box Shot Pro: DVD Case Open with Disc 3D Box Shot Pro: Software Box Bundle 3D Box Shot Pro: DVD Case Closed Flat 3D Box Shot Pro: Software Bundle with CD 3D Box Shot Pro: DVD Case Wide Open 3D Box Shot Pro: Hardback Book Closed 3D Box Shot Pro: Hardback Book Closed 3D Box Shot Pro: Hardback Book Stack 1 3D Box Shot Pro: Hardback Book Stack 2 3D Box Shot Pro: Wide Screen Monitor

Resize images for the web without additional software and get great results

  • How to Resize Images for the Web without using expensive software and still get 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:

  • Screenshot aliased

  • 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:

  • Screenshot Aliased

    As you can see, because the image has been resized without being re sampled, 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 necessarily 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 re sampling, 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: 
  • Screenshot antialiasing

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

  • Print Screen Key Images

    Ok, so you resized the Windows Picture and Fax Viewer. It's time to use an old favorite 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.

  • Website Example

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

  • Screenshot

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

    Screenshot