Editing Images for the Web with Irfanview

Image editing can be a real bear. For people who aren’t familiar with it, there are a lot of new terms to learn and the software seems complex and expensive. If you’re not a pro at Photoshop and you just need to capture, crop, or resize a few photos for your website, you might fall in love with a quick little program called Irfanview. *This guide is meant for photo editing beginners.

The Lingo

Screenshot: Create an image that captures exactly what is shown on your computer screen at that moment.

Crop: Cut out just the piece of an image you want to use from a larger image.

Resolution: Relates to the amount of detail (in pixels) a photo has. Your digital SLR will take photos that can be 5124 pixels wide and 3456 pixels tall. For web use, even 600 pixels wide can be pretty big.

Resizing: Changing the resolution of the image. Usually, you resize from a large image to a smaller one. If you go from small to big, it won’t look very good.

Aspect Ratio: Image shape, expressed by width X height. Old TVs are 4×3 aspect while new TVs are 16×9 (shorter and longer). Web images often have to have a wide aspect ratio because otherwise they push too much stuff lower down on the page.


IrfanView_LogoIrfanview is completely free and available for download from www.irfanview.com. I think it matches up really well to most of the tasks you need to do when getting images ready for the web including:

  • Taking screenshots
  • Cropping
  • Resizing
  • Very limited image editing
  • Saving in a file format that doesn’t need a lot of space

Download and install Irfanview. Select Download from the left navigation menu. Choose the first download option (from CNET). It gives you a clean straightforward interface with one large green “Download Now” button. Run through the download process as directed. Then open the program and you’re ready to go.

Follow the instructions below to learn the basics or watch this video.

Taking Screenshots

  1. To take a screenshot in Irfanview, press ‘C’ for Capture or go to Options->Capture. This brings up the screen capture dialog.
  2. Most of the initial options are fine, but if you use a dual monitor setup, you may want to have it just capture the active monitor so that the resulting image isn’t so big and unwieldy.
  3. Take note of the hot key in the top right of the capture dialog box (Ctrl+F11). That’s the key combination that you have to hit to get Irfanview to capture your screen. By the way, when you have option #2 below selected (Capture area), and you use the Hot key, Irfanview will capture your entire desktop. If you want just your current open window selected, use option #3. Play with the Capture area options to familiarize yourself with the differences in screen capture.

Capture Setup

Once you hit the hot key (Ctrl + F11 in this case), the screenshot will pop up, ready to be edited.


Cropping helps to better show the parts of the image that you want to show and remove the stuff that’s not important. It can also help you hit a target aspect ratio. Cropping in Irfanview is easy.

  1. With the image open, click and drag your mouse across the image to select the portion of the image you want.
  2. Once you’re happy with your selection, hit ‘CTRL-Y’ or Edit->Crop Selection.
  3. As you select, the new resolution and aspect ratio are shown in the titlebar. This can help you wiggle out that perfect aspect ratio or resolution.



The most common task for preparing images for web use is resizing. Many platforms, like WordPress, will allow for image editing right on the platform, but it’s typically slow. It also doesn’t help when you’re uploading hundreds of 5MB files from your camera. Resizing for the web usually knocks the file size down to something a lot more reasonable.

To resize:

  1. open your image, and then hit ‘CTRL-R’ or Image->Resize/Resample. This opens the resize dialog box.


Importantly, this process maintains aspect ratio by default. Keep this box checked, because it’ll save you from squishing the photo in ways that you probably didn’t intend. When I resize, I usually edit just the Width box. If you don’t know what size to go with, here are some fast and loose rules:

  • Thumbnail size: 100 pixels wide
  • Image in a WordPress post: usually around 600 pixels wide as a maximum, depending on your design
  • Banner image: Check your banner image specs, you want to hit this number exactly if possible.
  • High quality image that people can click on and see a full screen version: anything around 1200 pixels wide is usually good enough.
  • Image to email mom: 800 pixels wide is plenty of detail for mom, but go 1000 if you think she might want to print it and put it on the refrigerator.

2. Once you’ve hit OK, you’ll see that your image has been resized. You now have have 2 options:

  • Save over the original file. I don’t really recommend this, because there’s no way of going back to the original file.
  • Save as a new file. I usually save my images in a new folder and rename them to something descriptive. To save as a new file, hit ‘S’ or go to File->Save As. You only need to set the file location once, Irfanview will remember the folder for the next photo that you edit and save as. I usually choose the “JPG” file format since its so frequently used, and because it makes the file size reasonable and can be opened by most any program. You only need to set the file type once.

save as

Advanced Users – Batch Processing

Is this your first time using Irfanview? Go back and try using it for a while. Batch processing is very powerful, but can be a bit tricky if you haven’t developed best practices and some familiarity with what you want. Personally, I use batch processing to resize and rename large numbers of photos (10+). To batch process some photos, open the folder of photos you want to process and edit one of the images in Irfanview. Press ‘B’ or go to File->Batch Conversion/Rename. This pops up the batch conversion dialog box. Most of these settings stick, so don’t be intimidated by the many steps below. Assuming you want to rename and resize like I do,

  1. Select “Batch Conversion – Rename result files”
  2. Check the “use advanced options” box.
  3. Go into “Advanced”
    • Select “RESIZE”. Here you have an option on how you want to resize your photos. If some have landscape like aspect ratios while others are portrait, you might want to choose the “Set the long side to” resize option so that they’re resized equally. If you’re resizing for web and only care about width, choose the “Set one or both sides to” and set your desired width.
    • Make sure the “Don’t enlarge smaller images” option is selected.
    • Hit “OK” to exit the advanced menu
  4. Set your rename pattern. I often use a descriptive phrase, followed by ### to automatically number the photos.
  5. Select the output folder. Don’t use the same one your original photos are coming from.
  6. Add the photos you want to batch process. I usually hit “add all” at this point, because I want to add all the photos from the directory.
  7. Hit “Start Batch”
  8. Check your results to see if the images came out the way you wanted.

batch conversion



Like writing for the web, image editing is a skill that can be developed. While it may take you more time than you’d like to edit your first few images, you’ll get faster and more accurate as you go along. Memorize the hot keys I’ve mentioned above and your speed of use for Irfanview will skyrocket. Keep in mind that Irfanview is not a replacement for Lightroom or Photoshop, but it is very fast and simple to do basic image editing tasks.