How come images with image styles are blurry? We have noticed that images that are displayed using Image Styles are blurry. Below are the settings we have enabled. 

The original images look fine and scale accordingly when using those on the pages, but not the Images with Image Styles. How can this be resolved?


GD2 Image Manipulation Toolkit settings: JPEG set to 100%
ImageMagick module but the results are the same. 
We also tried to use JPEG and PNG


View mode (field setting):


formatter = image
Image style: Banner Image


Banner Image Image Style settings:


Scale 1600px (W) by 900px (H)
Allow Upscaling = false


CSS and HTML used:

&lt;div class="banner__image" style="background-image: url('/sites/default/files/styles/banner/filename-banner.jpg')";&gt;

.banner__image {
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
I've delt with this issues on many sites. The cached version from the image style always renders poorly. I'd recommend removing it and using CSS to adjust the sizing. 

In some cases, removing existing upload size limits on the image field has helped resolve this.