[WWAnalyseParticipant]

Hello,

Im currently working on my site: http://www.wwanalyse.nl

And im coming across the problem that my logo is blurry/not smooth on Internet Explorer.

But it is razor-sharp on every other browser. I use the retina 2x plugin but that doesn’t solve the problem.

Example blurry logo: http://s29.postimg.org/woi0ile9j/image001.png

Kind Regards,

[Paul RModerator]

Hi,

Your logo is too big(2947 x 1114)

There seems to be a problem with PNG on IE when the image it too large as your image dimension is almost 3000 pixel

Try to reduce your logo to 600px width.

Hope that helps.

[WWAnalyseParticipant]

I need to make the image this big because I make it “retina” using WP Retina.

[JadeModerator]

Hi there,

Can you try adding this code:

@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, .my_elements_with_border_radius { border-radius: 0 } 
}

Let us know how it goes.

[WWAnalyseParticipant]

Hello,

Still not working 🙁

[FriechModerator]

Hi There,

You can add this under Custom > CSS in the Customizer.

.x-brand img {
	-ms-interpolation-mode: bicubic;
}

Hope it helps, Cheers!

[WWAnalyseParticipant]

Thanks! Ill report back to you wether it works or not.

[Prasant RaiModerator]

Let us know how it goes.

[WWAnalyseParticipant]

Still blurry as sh*t.

[RadModerator]

Hi there,

The reason it’s too much blurry is it’s too big. And IE is trying to fill the a small dimension that causes pixelation and blurry effect.

Retina optimized images are not necessarily big, the requirement is simply double the size of your target rendering size.

http://www.kylejlarson.com/blog/2012/creating-retina-images-for-your-website/

For example, if your image is currently displayed as 300×300 on your site’s navbar, then simply create an image that has 600×600. If your image is a background, and the container is displayed as 1200×400 then the retina version will be 2400×800.

But, if you don’t wish to chnage your image sizes, then create fall back image just for IE.

Add this code at your child theme’s functions.php

add_action( 'wp_head', 'ie_logo', 999 );

function ie_logo() { ?>
<!--[if IE]>
	<style type="text/css">
	#widget_sp_image-2 img{
		content: url(http://wwanalyse.nl/wp-content/uploads/2015/10/logo926-300x150.png);
	}
	</style>
<![endif]-->
<?php }

Just replace the url of your logo that has 300×150

Cheers!

[WWAnalyseParticipant]

I downsized the logo drastically, It’s still blurry..

[ChristopherModerator]

Hi there,

Please remove width and height attributes from your code :

<img width="779" height="374" alt="Logo-WWAnalyse" class="attachment-full aligncenter" style="max-width: 100%;" src="http://wwanalyse.nl/wp-content/uploads/2015/11/logonew.png">

Hope it helps.

[WWAnalyseParticipant]

How can I remove this? As this is inline code.

[ZeshanMember]

Hi there,

I’m seeing you’re adding that image using a widget, I’m not sure if that widget gives an option to remove the width and height attribute from it, but you may check it in its settings. Otherwise, you can use image HTML tag in a text widget instead:

<img alt="Logo-WWAnalyse" class="attachment-full aligncenter" src="http://wwanalyse.nl/wp-content/uploads/2015/11/logonew.png">

Thank you!

[WWAnalyseParticipant]

Ill report back to my client with this solution. Thank you!

[Author]

Posts