CNN Images look blurry

[TheVisitor]

CNN or Firefox issue ? Images on CNN look blurry. I've compared with IE11 and latest Chrome dev and both a clear and sharp compared with Firefox.

CNN seems to be delivering a rather small image 256px × 144px (scaled to 750px × 422px) Oklahoma bombing image.

I guess I'm dumb, but I can't figure a way to compare image size against Chrome and IE as I don't find an easy way to locate and examine the image properties. So I don't know if Firefox is not up-scaling well, or its just the result of CNN delivering a small image and up-scaling it post delivery.

A quick test of older builds are showing same blurriness.

EDIT: IE is showing image size of 750x422 no idea though if that's the scaled size or delivered size. Delivered size of those dimensions would probably not look blurry, and they don't.

[BenYeeHua]

Just tested and checked the code, it is image responsive(srcset), so it will loading image based on the windows size(and also DPI).

It look like this if you check the code.

Code: Select all

<img data-eq-state="medium" class="media__image media__image--responsive" 
alt="An Italian coast guard looks at people disembarking from the tanker Maria Bottiglieri, during the landing operations of more than 110 Central African migrants, men and women, on April 15, 2015 in the port of Corigliano Calabro." 
data-src-mini="http://i2.cdn.turner.com/cnnnext/dam/assets/150416174218-italy-migrants-file-small-169.jpg" 
data-src-xsmall="http://i2.cdn.turner.com/cnnnext/dam/assets/150416174218-italy-migrants-file-medium-plus-169.jpg" 
data-src-small="http://i2.cdn.turner.com/cnnnext/dam/assets/150416174218-italy-migrants-file-large-169.jpg" 
data-src-medium="http://i2.cdn.turner.com/cnnnext/dam/assets/150416174218-italy-migrants-file-exlarge-169.jpg" 
data-src-large="http://i2.cdn.turner.com/cnnnext/dam/assets/150416174218-italy-migrants-file-super-169.jpg" 
data-src-full16x9="http://i2.cdn.turner.com/cnnnext/dam/assets/150416174218-italy-migrants-file-full-169.jpg" 
data-src-small1x1="http://i2.cdn.turner.com/cnnnext/dam/assets/150416174218-italy-migrants-file-small-11.jpg"
data-demand-load="loaded" data-eq-pts="mini: 0,  xsmall: 221,  small: 308,  medium: 461,  large:  781" 
src="http://i2.cdn.turner.com/cnnnext/dam/assets/150416174218-italy-migrants-file-exlarge-169.jpg">

If I am right, you can disable this by setting dom.image.srcset.enabled to false.
https://bugzilla.mozilla.org/show_bug.cgi?id=1018389

[NVD]

Poorly written website?

http://i2.cdn.turner.com/cnnnext/dam/as ... allery.jpg Image shown in Chrome/IE, but if you open that in Firefox it looks just like Chrome/IE.

http://i2.cdn.turner.com/cnnnext/dam/as ... -video.jpg Image shown in Firefox

[Virtual_ManPL]

The images look awful, because browser need to upscale them, as original resolution is much smaller.
In simplest way, bad site coding...

[BenYeeHua]

Just tested awhile on Chrome Canary, and there are difference between them.

While Chrome choose the image size based on the Screen size, Firefox choose the image size based on the Windows or Page size.
So if you has a bit smaller windows for Firefox, then it may fall back to loading a too small image size for current windows size, and causing blur...

[Alice0775]

[*]#1155792 [Core:Security]-cnn.com home page shows low-resolution placeholder image until window is resized [All]

[streetwolf]

I don't have this problem. Is it a HiDPI sort of problem?

[TheVisitor]

I don't have this problem. Is it a HiDPI sort of problem?

I don't have a HiDPI monitor or graphics.

[TheVisitor]

[*]#1155792 [Core:Security]-cnn.com home page shows low-resolution placeholder image until window is resized [All]

Thanks Alice...

[patrickjdempsey]

Welcome to "the future". This practice is getting more and more common as part of the "responsive web" craze. Which is just stupid to begin with... a properly designed website will work just fine on mobile without all of this nonsense.

[TheVisitor]

If I am right, you can disable this by setting dom.image.srcset.enabled to false.
https://bugzilla.mozilla.org/show_bug.cgi?id=1018389

Flipping this pref does not clear up image, still have to re-size the browser to get a decent image.

[BenYeeHua]

Hmm, I guess I am wrong, it look like it is a old responsive image processed by JS before srcset is supported.
I am not sure which one you should report to, Mozilla or....

http://www.w3.org/community/respimg/wiki/Main_Page
http://nicolasgallagher.com/responsive- ... sing-css3/

[TheVisitor]

Hmm, I guess I am wrong, it look like it is a old responsive image processed by JS before srcset is supported.
I am not sure which one you should report to, Mozilla or....

http://www.w3.org/community/respimg/wiki/Main_Page
http://nicolasgallagher.com/responsive- ... sing-css3/

See Alice's post: viewtopic.php?p=14125109#p14125109 and the bug filed. Has been bisected to another patch that is causing the issue.

[TheVisitor]

Hmm, I guess I am wrong, it look like it is a old responsive image processed by JS before srcset is supported.
I am not sure which one you should report to, Mozilla or....

http://www.w3.org/community/respimg/wiki/Main_Page
http://nicolasgallagher.com/responsive- ... sing-css3/

Flipping pref: security.csp.enable fixes the issue until they work out the problems in bug :
https://bugzilla.mozilla.org/show_bug.cgi?id=1155792 <- cnn.com home page shows low-resolution placeholder image until window is resized