Support » Plugin: WooCommerce » Problem with blurry category images. I’ve tried many tricks but nothing worked.

  • Resolved boppar

    (@boppar)


    I have a problem with blurry catalog images in category pages.
    I’ve spent the last days reading the forum trying out all kind of recommended tricks to solve problems with blurry images, but no success.

    Anybody can give any advice?

    * The uploaded products images are in high resolution, and all are in the same size.
    * In admin/appearance/customize/woocommerce/product images I’ve set uncropped.
    * In admin/settings/media
    Thumbnail size 150×150
    Medium size 400×400
    Large size 1024×1024
    * I’ve regenerated thumbnails using the plugin Regenerate Thumbnails.
    * I’ve tried the suggested solutions in:
    https://docs.woocommerce.com/document/fixing-blurry-product-images/
    * The only cache plugin I use is LightSpeed cache. No difference when disabling the plugin.
    * Disabling OMGF plugin doesn’t help.
    * I use no code snippets that affects images.

    Status report:

    
    ### WordPress Environment ###
    
    WordPress address (URL): https://hangmattor.se
    Site address (URL): https://hangmattor.se
    WC Version: 5.4.0
    REST API Version: ✔ 5.4.0
    WC Blocks Version: ✔ 5.1.0
    Action Scheduler Version: ✔ 3.1.6
    WC Admin Version: ✔ 2.3.1
    Log Directory Writable: ✔
    WP Version: 5.7.2
    WP Multisite: –
    WP Memory Limit: 256 MB
    WP Debug Mode: –
    WP Cron: ✔
    Language: sv_SE
    External object cache: –
    
    ### Server Environment ###
    
    Server Info: LiteSpeed
    PHP Version: 7.4.16
    PHP Post Max Size: 50 MB
    PHP Time Limit: 90
    PHP Max Input Vars: 3000
    cURL Version: 7.71.0
    OpenSSL/1.1.1d
    
    SUHOSIN Installed: –
    MySQL Version: 5.5.5-10.3.29-MariaDB-cll-lve
    Max Upload Size: 50 MB
    Default Timezone is UTC: ✔
    fsockopen/cURL: ✔
    SoapClient: ✔
    DOMDocument: ✔
    GZip: ✔
    Multibyte String: ✔
    Remote Post: ✔
    Remote Get: ✔
    
    ### Database ###
    
    WC Database Version: 5.4.0
    WC Database Prefix: wpno_
    Total databasstorlek: 47.48MB
    Datastorlek för databas: 44.67MB
    Indexstorlek för databas: 2.81MB
    wpno_woocommerce_sessions: Data: 2.02MB + Index: 0.02MB + Motor InnoDB
    wpno_woocommerce_api_keys: Data: 0.02MB + Index: 0.03MB + Motor InnoDB
    wpno_woocommerce_attribute_taxonomies: Data: 0.02MB + Index: 0.02MB + Motor InnoDB
    wpno_woocommerce_downloadable_product_permissions: Data: 0.02MB + Index: 0.06MB + Motor InnoDB
    wpno_woocommerce_order_items: Data: 0.02MB + Index: 0.02MB + Motor InnoDB
    wpno_woocommerce_order_itemmeta: Data: 0.19MB + Index: 0.09MB + Motor InnoDB
    wpno_woocommerce_tax_rates: Data: 0.02MB + Index: 0.06MB + Motor InnoDB
    wpno_woocommerce_tax_rate_locations: Data: 0.02MB + Index: 0.03MB + Motor InnoDB
    wpno_woocommerce_shipping_zones: Data: 0.02MB + Index: 0.00MB + Motor InnoDB
    wpno_woocommerce_shipping_zone_locations: Data: 0.02MB + Index: 0.03MB + Motor InnoDB
    wpno_woocommerce_shipping_zone_methods: Data: 0.02MB + Index: 0.00MB + Motor InnoDB
    wpno_woocommerce_payment_tokens: Data: 0.02MB + Index: 0.02MB + Motor InnoDB
    wpno_woocommerce_payment_tokenmeta: Data: 0.02MB + Index: 0.03MB + Motor InnoDB
    wpno_woocommerce_log: Data: 0.02MB + Index: 0.02MB + Motor InnoDB
    wpno_actionscheduler_actions: Data: 0.05MB + Index: 0.11MB + Motor InnoDB
    wpno_actionscheduler_claims: Data: 0.02MB + Index: 0.02MB + Motor InnoDB
    wpno_actionscheduler_groups: Data: 0.02MB + Index: 0.02MB + Motor InnoDB
    wpno_actionscheduler_logs: Data: 0.02MB + Index: 0.03MB + Motor InnoDB
    wpno_commentmeta: Data: 0.02MB + Index: 0.03MB + Motor InnoDB
    wpno_comments: Data: 0.05MB + Index: 0.09MB + Motor InnoDB
    wpno_fbv: Data: 0.02MB + Index: 0.02MB + Motor InnoDB
    wpno_fbv_attachment_folder: Data: 0.02MB + Index: 0.00MB + Motor InnoDB
    wpno_links: Data: 0.02MB + Index: 0.02MB + Motor InnoDB
    wpno_litespeed_cssjs: Data: 0.02MB + Index: 0.03MB + Motor InnoDB
    wpno_litespeed_img_optm: Data: 0.44MB + Index: 0.23MB + Motor InnoDB
    wpno_litespeed_img_optming: Data: 0.02MB + Index: 0.05MB + Motor InnoDB
    wpno_ms_snippets: Data: 0.02MB + Index: 0.00MB + Motor InnoDB
    wpno_options: Data: 2.09MB + Index: 0.08MB + Motor InnoDB
    wpno_postmeta: Data: 2.41MB + Index: 0.61MB + Motor InnoDB
    wpno_posts: Data: 36.45MB + Index: 0.33MB + Motor InnoDB
    wpno_snippets: Data: 0.02MB + Index: 0.00MB + Motor InnoDB
    wpno_termmeta: Data: 0.02MB + Index: 0.03MB + Motor InnoDB
    wpno_terms: Data: 0.02MB + Index: 0.03MB + Motor InnoDB
    wpno_term_relationships: Data: 0.05MB + Index: 0.02MB + Motor InnoDB
    wpno_term_taxonomy: Data: 0.06MB + Index: 0.03MB + Motor InnoDB
    wpno_usermeta: Data: 0.02MB + Index: 0.03MB + Motor InnoDB
    wpno_users: Data: 0.02MB + Index: 0.05MB + Motor InnoDB
    wpno_wc_admin_notes: Data: 0.02MB + Index: 0.00MB + Motor InnoDB
    wpno_wc_admin_note_actions: Data: 0.02MB + Index: 0.02MB + Motor InnoDB
    wpno_wc_category_lookup: Data: 0.02MB + Index: 0.00MB + Motor InnoDB
    wpno_wc_customer_lookup: Data: 0.02MB + Index: 0.03MB + Motor InnoDB
    wpno_wc_download_log: Data: 0.02MB + Index: 0.03MB + Motor InnoDB
    wpno_wc_order_coupon_lookup: Data: 0.02MB + Index: 0.03MB + Motor InnoDB
    wpno_wc_order_product_lookup: Data: 0.02MB + Index: 0.06MB + Motor InnoDB
    wpno_wc_order_stats: Data: 0.02MB + Index: 0.05MB + Motor InnoDB
    wpno_wc_order_tax_lookup: Data: 0.02MB + Index: 0.03MB + Motor InnoDB
    wpno_wc_product_meta_lookup: Data: 0.02MB + Index: 0.09MB + Motor InnoDB
    wpno_wc_reserved_stock: Data: 0.02MB + Index: 0.00MB + Motor InnoDB
    wpno_wc_tax_rate_classes: Data: 0.02MB + Index: 0.02MB + Motor InnoDB
    wpno_wc_webhooks: Data: 0.02MB + Index: 0.02MB + Motor InnoDB
    wpno_wdp_orders: Data: 0.02MB + Index: 0.05MB + Motor InnoDB
    wpno_wdp_order_items: Data: 0.02MB + Index: 0.06MB + Motor InnoDB
    wpno_wdp_rules: Data: 0.02MB + Index: 0.03MB + Motor InnoDB
    
    ### Post Type Counts ###
    
    attachment: 531
    custom_css: 1
    customize_changeset: 12
    nav_menu_item: 23
    page: 27
    post: 1
    product: 35
    revision: 924
    shop_order: 42
    
    ### Security ###
    
    Secure connection (HTTPS): ✔
    Hide errors from visitors: ✔
    
    ### Active Plugins (10) ###
    
    Advanced Dynamic Pricing för WooCommerce: av AlgolPlus – 3.2.4
    The SEO Framework: av The SEO Framework Team – 4.1.3
    Code Snippets: av Code Snippets Pro – 2.14.1
    FileBird (filbird): av Ninja Team – 4.7.3
    Flexible Shipping: av WP Desk – 4.6.0
    OMGF: av Daan from FFW.Press – 4.4.3
    PaysonCheckout for WooCommerce: av Krokedil – 3.1.0
    LiteSpeed Cache: av LiteSpeed Technologies – 3.6.4
    Regenerate Thumbnails: av Alex Mills (Viper007Bond) – 3.1.5
    WooCommerce: av Automattic – 5.4.0
    
    ### Inactive Plugins (1) ###
    
    Storefront Top Bar: av Wooassist – 1.1.1
    
    ### Settings ###
    
    API Enabled: –
    Force SSL: –
    Currency: SEK (kr)
    Currency Position: right_space
    Thousand Separator: 
    Decimal Separator: ,
    Number of Decimals: 0
    Taxonomies: Product Types: external (external)
    grouped (grouped)
    simple (simple)
    variable (variable)
    
    Taxonomies: Product Visibility: exclude-from-catalog (exclude-from-catalog)
    exclude-from-search (exclude-from-search)
    featured (featured)
    outofstock (outofstock)
    rated-1 (rated-1)
    rated-2 (rated-2)
    rated-3 (rated-3)
    rated-4 (rated-4)
    rated-5 (rated-5)
    
    Connected to WooCommerce.com: –
    
    ### WC Pages ###
    
    Butikbas: #519 - /butik/
    Varukorg: #520 - /varukorg/
    Kassan: #521 - /kassan/
    Mitt konto: #522 - /mitt-konto/
    Allmänna villkor: #660 - /praktisk-information/kopvillkor/
    
    ### Theme ###
    
    Name: Storefront
    Version: 3.7.0
    Author URL: https://woocommerce.com/
    Child Theme: ❌ – Om du modifierar WooCommerce på ett modertema som du själv inte byggt
    så rekommenderar vi att du använder ett barntema istället. Läs: Hur du skapar ett barntema
    
    WooCommerce Support: ✔
    
    ### Templates ###
    
    Overrides: –
    
    ### Action Scheduler ###
    
    Färdigbehandlad: 79
    Oldest: 2021-05-09 15:19:05 +0000
    Newest: 2021-06-09 06:01:48 +0000
    
    ### Status report information ###
    
    Generated at: 2021-06-09 14:20:54 +00:00
    

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Support maykato

    (@maykato)

    Hello,

    * The uploaded products images are in high resolution, and all are in the same size.

    Please make sure to save your image in a higher resolution. Checking original images such as https://hangmattor.se/wp-content/uploads/2021/02/hangstol-lagoa-narbild-1.jpg, image size is large enough, but looks pixelated. The images may look OK at full size, but when resized for category pages, they may not work as well.

    Thread Starter boppar

    (@boppar)

    Hi @maykato
    Maybe I’m missing something.

    That image is 1200x800px. Optimized in photoshop to 168 kb. If I would use product images with higher resolution the images would be larger and slow down the site. Isn’t that right?

    An image that looks OK at full size, why should it not work when resized for category pages?

    Plugin Support Con a11n

    (@conschneider)

    Automattic Happiness Engineer

    Hi there,

    Maybe try this image management plugin to fine-tune the display: https://wordpress.org/plugins/wp-retina-2x/

    Please note that we provide no warranty or support for custom code or 3rd party plugins (meaning we cannot not help you further with this code snippet or WordPress.org / GitHub plugins). Use them at your own risk.

    **Also: Before you do that, please do make a full backup!**

    Kind regards,

    Thread Starter boppar

    (@boppar)

    @conschneider

    I doubt the problem is my images and rather not install plugins that might not be necessary. I prefer finding a solution to my problem.

    Thread Starter boppar

    (@boppar)

    @maykato

    About your recommendation of using images with higher resolution. I’ve tried that but nothing really changed.

    My guess is that the problem is that large detailed images becomes blurry when reducing their size.

    All my product images are 1200×800. They are set to show uncropped.
    On this category page the images looks OK, not blurry:
    https://hangmattor.se/produkt-kategori/hangmattor/

    The problem with blurry images is on this category page:
    https://hangmattor.se/produkt-kategori/hangstolar/
    The hangstolar should be better displayed in a standing picture, instead of a lying picture.

    Do you have any suggestions?

    Plugin Support maykato

    (@maykato)

    Hi @boppar

    I’m not sure what has caused the image quality for one category only. But I’d try to go back to the original images, resize/resave for web in Photoshop and upload them to your store again.

    You can check out this tutorial that talks about how to save images for Web in Photoshop: https://www.lifewire.com/photoshop-save-for-web-tool-tutorial-1697537

    Thread Starter boppar

    (@boppar)

    @maykato

    As said, I’ve done that already. Resized and saved for web. Thanks, but I’m well aware od how to save for web.

    Thread Starter boppar

    (@boppar)

    I found a way to solve my problem.

Viewing 8 replies - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.