[FIXED] How do you resize icon images without losing transparency?

Issue

I used icon directly in html as below:

<div class="tabbertab" title='<img height="20" width="20" src="<%=contextPath%>/images/icons/bicycle.png">&nbsp;Bicycle</img>'>

So the icon image got placed besides Bicycle text.

The text is a part of Tab. Which on selection changes color (white to light blue and vice versa).

The background of the icon also reflects this as icon is having a transparent background. And as you can see, I resized the image according to the place where it is going to be displayed.

However, now I got the requirement to use the icon inside javascript code as below:

iconFile = siteroot + '/images/icons/bicycle.png';   
anchor.style.backgroundImage = 'url(' + iconFile + ')';  
anchor.style.backgroundRepeat = 'no-repeat';         
anchor.style.backgroundPosition = '1px 2px';    

where siteroot is the path to the root of the application.

Since here I am directly using the icon file in the size it is available. I resized the icon image using mspaint to 20 by 20 pixel.

However, now the icon image seems to be in a white box (and not transparent) of 20 by 20 and so the icon background color is not changing as per the background of the tab it is in.

Are there any good open source tools to resize icon images without losing transparency. I am not having access to photoshop.

Solution

The reason you can see the background in the original one is because the icon file has a transparent background.

You say you resized the icon to 20x20 - I am guessing whatever program you used to do this lost the png transparency that was on the original .png file, and turned the background white.

Try using the non-resized image instead (even if it looks wrong) to verify this is correct, then use a css resizing solution or a better program to resize the icon that won't lose the transparency information.

Answered By - NibblyPig

Answer Checked By - Timothy Miller (PHPFixing Admin)