イメージはピクセル化されています

Question

私はウェブサイトにpng画像をアップロードしました。それらはファイアフォックス、クロム、サファリで完璧に見えますが、それらは恐ろしいです。私はPhotoshopからファイルを保存しました。イメージサイズは、バイキュービック、バイキュービックシャープ、バイキュービックスムーザー、バイキュービック、バイリニア、および最寄りのネイバーのようなイメージを持つオプションがあります。これらのどれが助けになるだろうか？

HTML：

<ul class="social"> 
    <li><a target="_blank" href="https://plus.google.com/+ToadhallcottagesCoUk/posts"><img onmouseout=this.src='/images/googleplusgrey-flat.png' onmouseover=this.src='/images/googleplus-flat.png' src="/images/googleplusgrey-flat.png" width="38" height="38" alt="Toad Hall Cottages Google Plus Page"</a></li> 
    <li><a target="_blank" href="http://www.twitter.com/thcottages"><img onmouseout=this.src='/images/twittergrey-flat.png' onmouseover=this.src='/images/twitter-flat.png' src="/images/twittergrey-flat.png" width="38" height="38" alt="Toad Hall Cottages on Twitter" /></a></li> 
    <li><a target="_blank" href="http://www.facebook.com/holidaycottages"><img <img onmouseout=this.src='/images/facebookgrey-flat.png' onmouseover=this.src='/images/facebook-flat.png' src="/images/facebookgrey-flat.png" width="38" height="38" alt="Toad Hall Cottages Facebook page"/></a></li> 
    <li><a target="_blank" href="http://www.pinterest.com/thcottages/"><img <img onmouseout=this.src='/images/pinterestgrey-flat.png' onmouseover=this.src='/images/pinterest-flat.png' src="/images/pinterestgrey-flat.png" width="38" height="38" alt="Toad Hall Cottages Facebook page" /></a></li> 
</ul> 

CSS：

img.icon { 
    vertical-align: middle; 
    margin-right: 8px; 
    margin-left: 2px; 
    image-rendering:optimizeSpeed;    /* Legal fallback */ 
    image-rendering:-moz-crisp-edges;   /* Firefox  */ 
    image-rendering:-o-crisp-edges;   /* Opera   */ 
    image-rendering:-webkit-optimize-contrast; /* Safari   */ 
} 

Answer 1

古いIEの方法がある：これは悪い文書化されて

-ms-interpolation-mode: bicubic; 

。