12

I've uploaded png images to a website, and they appear perfect in firefox, chrome and safari but they look horrible in ie. I have saved the files from photoshop, and they have a feature under image size that gives you the option to have the image as: bicubic automatic, bicubic sharper, bicubic smoother, bicubic, bilinear and nearest neighbor. Would any of these help?

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         */
}
NoobEditor
  • 15,563
  • 19
  • 81
  • 112
totneschap
  • 382
  • 2
  • 3
  • 14
  • 2
    horrible browser will render things horribly.....you mind sharing your css and html so that we can help!! :) – NoobEditor Jan 14 '14 at 10:20
  • 4
    You should save the images on the server in the dimensions required by the website - e.g. if your header is displayed as 800x100px your image should be exactly 800x100px as well. – Njol Jan 14 '14 at 10:22
  • i have uploaded css and html – totneschap Jan 14 '14 at 10:26
  • You don't need to use `Javascript` to accomplish image rollovers. Instead you should have a look at sprite images, and do it all in the `CSS`. This also cuts down the number of HTTP requests the browser needs to make. http://css-tricks.com/snippets/css/basic-link-rollover-as-css-sprite/ – Nick R Jan 14 '14 at 10:35
  • my images are 150px x 150px and then reduced in size on the web page, would that not give it better resolution @Njol? – totneschap Jan 14 '14 at 10:35
  • Totally not related to question, but hey @NoobEditor, I love that you're using `:)` and other smileys, you're just like me dude! :P – Afzaal Ahmad Zeeshan Jan 14 '14 at 10:36
  • thanks for the roll over link @NickR, but surely the same problem with image resolution happen? – totneschap Jan 14 '14 at 10:39
  • @totneschap Yes it probably would, you could try this fix however: `img { -ms-interpolation-mode: bicubic; }` from http://blog.mirthlab.com/2009/04/22/smooth-image-scaling-in-ie-via-css/ – Nick R Jan 14 '14 at 10:40
  • excellent, that worked @NickR as well as Njol suggestion. Do you want to put this as a question so I can mark it as a correct answer? – totneschap Jan 14 '14 at 10:42
  • why the edit @NoobEditor, was it poorly laid out? – totneschap Jan 14 '14 at 10:50
  • @totneschap : no, because any future visitor to this question might find a better formatted question, a good experience!! :) – NoobEditor Jan 14 '14 at 10:53

1 Answers1

6

The old IE method is:

-ms-interpolation-mode: bicubic;

This is poorly documented.

jhawes
  • 2,354
  • 3
  • 24
  • 34
Barney
  • 16,181
  • 5
  • 62
  • 76