Por que as bordas claras aparecem em PNGs transparentes on-line?

Question

Sempre que tento usar imagens PNG transparentes em sites, as bordas brancas continuam aparecendo ao redor das imagens, vistas na foto abaixo. Por que isso está acontecendo e como posso impedir que isso aconteça?

(atualmente estou usando o Google Chrome 27.0.1453.116)

    

Answer 1

Isso estava me deixando louco também, eu tive que me inscrever para responder, então ninguém mais sente essa frustração ...

Parece ser a renderização da imagem que o navegador está usando para redimensionar os PNGs transparentes que estão adicionando uma margem leve a ele.

Descobri que adicionar as seguintes propriedades css ao elemento image (ou se for uma imagem de plano de fundo, o próprio elemento) corrige o problema para mim no Chrome e no Firefox:

img, div.with-resized-background {
      image-rendering : -webkit-optimize-contrast
      image-rendering : optimizeQuality
}

Você pode ler mais sobre mais opções aqui: link

    

Answer 2

Resposta tardia, mas isso funciona:

/* applies to GIF and PNG images; avoids blurry edges */
img[src$=".gif"], img[src$=".png"] {
    image-rendering: -moz-crisp-edges;         /* Firefox */
    image-rendering:   -o-crisp-edges;         /* Opera */
    image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
}

link

Aqui está outro link que fala sobre o suporte ao navegador:

link