0

All my 'small images' in catalog view appear blurry/poor quality. I've tried various methods like 'setQuality' but nothing ever changes. I feel like I've ran into a brick wall with this.

When clicking into the product however the image is crisp and fine so I'm assuming it's a resize issue for small images/thumbnails and not an overall compression issue?.

For testing purposes to find a solution I'm working on a fresh/new install of Magento 1.9.4.2 with just 1 product using a default theme.

0

The image quality looks fine to me.

The thumbnail is being rasterized (resampled) down to 170px by 170px, and the browser is rendering the image at that same size on my screen (width=170px as well as computed width all match).

The preview is actually displaying the full size 3024 x 3024, but is scaled down in the browser to 302px by 302px. As you play with the zoom and focus in on the text you can see that it remains sharp all the way.

You can adjust the theme to display different size thumbnails. It is the theme that defines this although some themes have their settings available in system config so as to not require code changes. By modifying the theme, you could display the thumbnail at 340px by 340px and scale it down 50% so that it looks sharp on retina monitors and devices such as the iphone... but this would still not look much different on regular (not Hi-DPI) devices.

What you might be looking for is a sharpening effect in the downsampler that generates the thumbnail image. That would appear to make the text more crisp because it enhances the contrast between color edges. As far as I know this is not a possible setting in the Magento image class, although it IS an option in the GD library that Magento is using.

(If you are a developer you can look at the code for image resampling in the "lib" folder under the class Varien_Image, as well as the Mage_Catalog_Helper_Image in "core" that generates the preview and thumbnail images from the theme. Sharpening an image requires https://www.php.net/manual/en/function.imageconvolution.php).

| improve this answer | |
  • when you say it looks fine are you talking about the image in catalog view? the image when you click into the product is fine. but catalog view is awful, I'm surprised you can't tell by the blurry text. It makes no difference what size I have it set to. Even if I upload the same image at 170x170 and set it as the 'small image' it's still blurry on the front end.This happens on my development site, and main site. So that's 3 different installs. – tomski Aug 5 '19 at 19:03
  • @tomski Yes, I am talking about the thumbnail in the catalog view. Imagine a page in a paperback book scaled down to 170px by 170px. Do you expect to be able to read it? The purpose of a thumbnail is not to be able to read the smaller text, but instead to be able to quickly identify the product visually compared with other products. If you want to improve this, then you can make larger thumbnails, but ultimately there is still going to be a loss in quality because of the size of the image. Thumbnails are intended to be scanned quickly. – Phil M Aug 5 '19 at 19:13

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.