3

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;
}
Improve this question
6
  • 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
    Commented Apr 15, 2018 at 16:06
  • @prkos Allow Upscaling = false, removing background-size: cover does not resolve the issue.
    – usernameabc
    Commented Apr 16, 2018 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
    Commented Apr 17, 2018 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
    Commented Apr 17, 2018 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
    Commented Apr 17, 2018 at 19:24

2 Answers 2

Reset to default
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.

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

Yes. Better to increase the image styles in Drupal UI (/admin/config/media/image-styles) For Example: (340×340) means just increase the 2x size in your image styles config like (640x640)

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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