Internet Tip - IrfanView Tips for Webmasters

Created: October 25, 2006
Last Edited: November 17, 2008
Subscribe to Internet Tips and Tools Feed

Here I will be discussing IrfanView version 3.98 which is free and can be downloaded here: http://www.irfanview.com/ or here: download.com. (Note: Be careful, during installation it tries to install Google Toolbar for Internet Explorer and Google Desktop Search. Be sure to uncheck these during installation).

IrfanView is a powerful program for viewing and slightly editing some graphic images.

Pros:
  • Small in size. Only 884kb.
  • Screen Capture with mouse cursor in the capture area
  • Many graphic formats supported including transparent background for GIF and PNG.
  • Saves to GIF and PNG without degrading the colors unlike MS Paint.
  • Crop, resize, rotate, and zoom functions.
  • Add background transparency to GIFs and PNGs.
  • Has JPG optimization features when saving.
Cons
  • Tries to install Google Toolbar and Google Desktop Search during installation.
  • No painting tools such as line drawing, paint fill, etc.
  • Does not have preview for JPG optimization.

Our aim here is to take an icon from a webpage on the web and turn it into a GIF or PNG image with a transparent background so we can use it as a button on our website. To do this we will need to 1. right-click on the icon and click on "Save Picture As" or take a picture of the website (screen capture) 2. crop the image to the size of the icon 3. make sure the background is all one color 4. save the image with the background color set as transparent.

1. As an example we will use the Windows Live.com icon from http://www.live.com/. At live.com right-clicking on the image does not give us an option for "Save Picture As..." so we will simply capture the screen by using the key on our keyboard labeled Print Screen.

2. Now we will open up IrfanView and paste the screen capture into the program (Edit -> Paste).

To crop the image simply click at one corner of the icon and drag to another corner of the icon drawing a box around the icon. Don't worry if your box isn't even around the icon. You can resize the box by clicking on an edge and dragging it.

Now click on Edit -> Crop selection.

3.The dark blue background is where we want it to be transparent in our saved image. So lets do a test and save it and see if that blue background is all one color. Click on File -> Save As.... Select GIF in Save as type:. Over on the right you will see some options. Under GIF: check Save transparent color and then check Choose transparent color during saving. Type in a file name such as liveicon and click on Save. Now it will show us a zoomed in image of the icon and we can click anywhere on the blue background to set the transparent color. You will notice however that the background is not just one solid color. Go ahead and click on the blue color that you see the most.

So now if we use our image in our web page it looks like this:

That won't do at all. So we will have to make the background all one color. There are three ways to do this, a slow way and a fast way and a way with PNG. The two first ways use free programs, but one program you already have included in windows (Ms Paint) and the other you have to download (Ultimate Paint).

Click on the plus to see the slow way to make the background of the image all one color using MS Paint.

Click on the plus to see the fast way to make the background all one color using Ultimate Paint.

[+]

Or click on the plus to see the way to make the background all one color using IrfanView and saving as PNG.

[+]

Now we want to take our image and resize it to a proper smaller icon size. This is easy in IrfanView. Click on Image -> Resize/Resample.... Make sure Preserve aspect ratio is checked. Under Set new size: make sure Pixels is selected and change the width to 25. The height will be changed automatically. Now click on OK.

Now if we save the image and display it in a web page it looks like this: Oops. We forgot to decrease the color depth to 256 colors and it is still too big. So now I will shrink it to a width of 22 and decrease the color depth to 256 colors:

The nice feature about capturing a screen shot with IrfanView is that you can take the shot with the mouse cursor in the picture. That way you can use the image for tutorials or other purposes.

To do a screen capture with IrfanView click on Options -> Capture/Screenshot. There you can select whether or not you want to Include mouse cursor. The default hotkey to take the screen capture is Ctrl + F11.

Click on Start and then go to any webpage or even your desktop or another program and make sure you actually click somewhere in the window of that program or IrfanView may not take the screen capture correctly, then press Ctrl + F11. IrfanView will pop up and you can then crop the picture to your liking and save it.

Back to www.seabreezecomputers.com
Subscribe to Internet Tips and Tools Feed

User Comments

There are 9 comments.

Displaying first 25 comments.

1. Posted By: marilyn - - January 20, 2008, 10:16 am
Thanks, this was a great help!

2. Posted By: jan - - March 3, 2008, 6:27 am
This was pretty helpful. Needed to edit an icon without fancy tools. Nice. Note that you no longer need MS Paint, because Irfanview 4.1 includes the its functions (Edit - Show Paint dialog; or press F12).

3. Posted By: rhodri - - May 8, 2009, 11:01 am
Yeh it helped but i wanted to save it as a PNG so i cud use it as a logo on windows movie maker.

good job tho cheers!

4. Posted By: bob - - August 12, 2009, 10:49 am
This was very good, I couldn't figure out how to make the background transparent and I couldn't find the information in the instructions. Irfanview now offers editting tools so all the steps can be performed in Irfanview. Thank.

5. Posted By: Lisa - - April 10, 2010, 2:56 pm
Thanks very much, that was very helpful. Just what I needed!

6. Posted By: Mike - - April 10, 2010, 3:43 pm
Now that I have the transparency, how do I paste it over another image in one of my files? Thank you.

7. Posted By: Arie - - July 4, 2010, 4:16 pm
Excellent! Thanks a lot.

8. Posted By: chan - - January 10, 2011, 1:32 am
That's a great tutorial. Thanks.

9. Posted By: dotch - - January 12, 2013, 4:56 pm
There's a good, fast and easy way if the background of the image is already transparant, but in the wrong color.

1: Determine what color you need as background to make the image look transparant on your website. If you use Firefox, you can use the extension "ColourZilla" for this.
2: Open Irfanview. Options, Properties/Settings..., Viewing, Main window color.
3: Choose the color from step 1 (e.g. 252,251,251)
4: Open the image. Save the image as GIF.
5: JPEG/GIF save options: GIF, save transparent color, check: use main window color for transparency