0

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?

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

View mode (field setting):

  1. formatter = image
  2. Image style: Banner Image

Banner Image Image Style settings:

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

CSS and HTML used:

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

.banner__image {
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
  • Do you Allow Upscaling if you're using Scale in your Image styles configuration? How are your Image styles configured? If you remove background-size: cover; from your CSS does the situation improve? If the area you want covered is larger than the image size it will look of a lesser quality. – prkos Apr 15 '18 at 16:06
  • @prkos Allow Upscaling = false, removing background-size: cover does not resolve the issue. – usernameabc Apr 16 '18 at 23:13
  • can you share your Image style settings? That's one way to check where the problem may be originating from. If you edit the original in some graphics editor, scale it down and save for web, and if you compare it to image in Drupal of the same size, does the Drupal one really look so much different? Are you using Breakpoint and Picture modules to serve different image styles depending on screen width? – prkos Apr 17 '18 at 18:22
  • @prkos since we are setting the image using inline css background-image, we are not using the Responsive Image module which outputs the <picture> element. Added the image style settings to the question. – usernameabc Apr 17 '18 at 18:42
  • If you are getting 1600x900px images in /sites/default/files/styles/banner/ but their quality is significantly lower than what you get when you edit the original in some graphics editor then you can be sure that it's down to image processing. Can you confirm this? Also is your Status report clean WRT to GD library and Image toolkit? – prkos Apr 17 '18 at 19:24
0

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.

  • I have updated my question with the html and css used for review, but even the CSS solution has given me trouble. – usernameabc Apr 13 '18 at 23:43
  • This seems to be the best response. We removed the image styles on the top banner. – usernameabc Apr 17 '18 at 21:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.