Internet Tip - IrfanView Tips for Webmasters

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.

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.