title: jQuery/CSS Image resolution issue in Firefox and IE
body: <p><strong>I GOT THE SOLUTION:</strong> Using a div with background instead of the img tag works like a charm.(But it would be nice to know why did this happen, so if you have an idea feel free to comment.)</p>
  
  <p>I have a kinda strange problem. I have a png image on my site, resize from 280x280 px to 40x40px (in the CSS it's 40 x auto). The problem is that the image appears pixelated on the edges, but when I change it to an other picture with a jQuery click event (same size, just colored) it appears nicely width sharp edges. If I change the order and display the colored version first, and then change it, the colored one appears pixelated. So somehow the changing affects the image I guess, but when I click on it again to change it back it's pixelated again. I tried to add the img with jQuery, no effect. Has anybody seen something like this before? Any ideas? This happens in Firefox. In IE, the pic is pixelated in both states. In chrome it works fine.</p>
  
  <p>UPDATE: </p>
  
  <p>This is how it looks before click: </p>
  
  <p><img src="https://i.stack.imgur.com/RqMmT.png" alt=""></p>
  
  <p>After click:</p>
  
  <p><img src="https://i.stack.imgur.com/AfZuJ.png" alt=""></p>
  
  <p>UPDATE 2: </p>
  
  <p>I thought I found a workaround, but I just found half a workaround... So I made a gif image of the first png. I display that first, then on the click event, I switch between the two png-s, and they look good. But of course, the gif on the first load has the same issue. If I change it on document.ready the png becomes pixelated... </p>