Blurry images in RWD mode on desktop (IE 11)

Some photos may appear blurry on a large-screen computer when viewed in reduced size using RWD mode.

Published March 14, 2018

The Issue

Rarely an image will appear to be blurred, on a large-screen computer, when using RWD mode to view the page as a small-screeen device. The image is displayed in low resolution due to a compromise in the image rendering/sizing code.

This condition only happens with ALL of the following circumstances combined together:

  • Only happens in IE, which does not support the <picture> tag. Microsoft recommends using Edge (which will handle this better, like Chrome, Firefox and Safari) instead of IE, and IE usage is low and declining.
  • Only happens with a narrow window (<720px wide, triggering RWD mode) on a desktop device (there are no IE-based mobile browsers).
  • Only happens for images that are stretched, that is, to images that are small on desktop and get significantly larger in RWD mode (so not the wide top image on that page, just the lower down one that is small and floated right).

Even in this situation, the image is still the right size, crop, etc. on the page, just with lower than usual resolution.

Workaround

There is no workaround.

This is normal behavior for the UBCMS. The infrequent combination of all those circumstances combined with this reasonable fallback did not seem to warrant the extra code and complexity necessary to improve the result.