Logo lower in resolution on Windows Edge

(Alan Tan) #1

Is this happening for anyone else? I just upgraded and this was the first thing I noticed. Looks fine on chrome (windows) for me.

Dimensions for Logo?
(Jeff Atwood) #2

Hmm, they still haven’t fixed that? We noticed in IE11 if you specify a larger logo, it does not get downscaled using bilinear as you’d expect, but something crappy like nearest-neighbor.

Here’s Edge, Chrome, Firefox from left to right.

(Alan Tan) #3

The logo image at the top left of your site, should be a wide rectangle shape. If left blank site title text will be shown.

Perhaps we should specify the recommended size in settings?

(Jeff Atwood) #4

Well, the recommended size for retina would always be 2x the rendered size, which is going to look bad in IE forever apparently :frowning:

(Dean Taylor) #5

Although it might not be worth the effort…

This could be handled with srcset and some server-side resizing or uploading of multiple logo sizes:

<img src="image-src.png" srcset="image-1x.png 1x, image-2x.png 2x,
                                 image-3x.png 3x, image-4x.png 4x">

demo page: Image srcset attribute example

Be aware that the “LG G4” and “LG G3” devices have a 4x pixel ratio, so perhaps the original user uploaded logo should 4x the size.

(Jeff Atwood) #6

What does caniuse.com look like for srcset?

(Dean Taylor) #7


(Jeff Atwood) #8

Not bad, everything except IE, Edge works.

(Martin Duparc) #9

Would serving two images dynamically help? srcset is good but IE11 doesn’t support it.
The only solution I currently see is resizing the logo before uploading it. The result doesn’t look great on a high dpi display though but it’s still a better alternative than dealing with IE’s scaling issue.

(Kris) #10

The good thing about srcset is that it just falls back to the src if it’s unsupported by the browser. So you could have a 1X set to src for fallback and everyone else sees the nice 2-4X images.