Fixing Low-Quality Category Thumbnails in PrestaShop 8.2.2

Improving Category Thumbnail Quality in PrestaShop 8.2.2

A PrestaShop merchant, lilouetpuce, using PrestaShop 8.2.2 and the Anvanto Lédonia theme, reported an issue with low-quality thumbnails displayed for subcategories. The thumbnails appeared blurry and pixelated when navigating to category pages from the main menu. The user had already attempted to adjust image compression settings without success.

The initial request included a screenshot to clarify the location of the problematic thumbnails. juanrojas requested this screenshot to ensure a clear understanding of the issue.

Solution: CSS Adjustment and Thumbnail Regeneration

Mediacom87 identified the root cause: the category images were being displayed at 90x120 pixels as configured in PrestaShop's image settings for categories. However, a CSS rule within the theme was causing these small images to be scaled up, resulting in the perceived loss of quality.

Two potential solutions were proposed:

• CSS Override: Add the following CSS rule to the theme's custom.css file to prevent the image scaling:

#subcategories ul li img { width: initial; }

• Modify Image Dimensions: Alter the dimensions associated with the small_default image type for categories in the PrestaShop back office. However, a warning was given that this image format might be used in other areas of the shop, potentially affecting other elements.

The user implemented the CSS fix and confirmed that it significantly improved the appearance of the thumbnails. However, they noted that the thumbnails were still limited to 90x120 pixels, even after increasing the size of the small_default image type in the back office.

Mediacom87 then pointed out that after changing image dimensions in the PrestaShop back office, it is crucial to regenerate the thumbnails. This ensures that the new dimensions are applied to the existing images.

Key Takeaways for PrestaShop Users

• CSS Can Affect Image Rendering: Theme CSS can significantly impact how images are displayed, potentially overriding default image settings.
• Thumbnail Regeneration is Essential: After modifying image type dimensions in the PrestaShop back office, always regenerate thumbnails to apply the changes.
• Consider Image Type Usage: Be mindful of where specific image types (e.g., small_default) are used throughout your store before modifying their dimensions, as changes can have unintended consequences.