Support » Theme: Storefront » Problem with blurry catalog images

  • Resolved boppar

    (@boppar)


    I have an issue with blurry images.
    On the link attached there is a catalog page with 6 products. The images looks blurry. They are uploaded to admin in high resolution.

    In admin/appearance/customize/woocommerce/product images I’ve set uncropped.

    In admin/settings/media
    Thumbnail size 150×150
    Medium size 300×300
    Large size 1024×1024

    When I inspect an image in inspector it shows the size 324×216.

    What can I do to solve the problem with these blurry images?

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

Viewing 15 replies - 1 through 15 (of 20 total)
  • Hi, @boppar!

    I just checked the link you provided, and I do see what you mean with the blurry images and how they’re only 324×216.

    We happen to have documentation on fixing blurry images here: Fixing Blurry Product Images. Can you please see if the solutions there help?

    In addition to that, can you also check if you have any plugins on your site that have to do with site speed/optimization or ones that might affect images?

    Thread Starter boppar

    (@boppar)

    @dcka
    Hi Cara.
    I know about this document you recommended. The reason I posted here was because I found no solution in that guide.

    Hey, @boppar!

    I know about this document you recommended. The reason I posted here was because I found no solution in that guide.

    Thanks for clarifying!

    What about your plugins? Do you have any caching/optimization plugins? Any image editing plugins maybe? The reason I ask is that I’ve seen similar issues before and, in one of them, the cause was an image flipper plugin. That was a little unexpected!

    Thread Starter boppar

    (@boppar)

    @dcka
    Hi Cara.

    I have Litespeed cache plugin. No change when disabling that plugin.

    Adam a11n

    (@adamkheckler)

    A couple more things to try here:

    First, could you please send me a copy of your site’s system status report? You can find it under WooCommerce > Status in the dashboard. Click “Get system report” and then the “Copy for support” button. Once you’ve done that, paste it into your reply.

    Second, did you try regenerating your thumbnails? You can use this plugin to do it:

    https://wordpress.org/plugins/regenerate-thumbnails/

    Let us know if that works, thanks! 🙂

    Thread Starter boppar

    (@boppar)

    @adamkheckler
    Hi Adam.
    Below is the status report.
    Bo, I didn’t try to regenerate the thumbnails. I didn’t try the “Regenerate Thumbnails plugin” as I havn’t added new, neither changed the dimensions of an existing thumbnail size or switched theme.

    
    ### WordPress Environment ###
    
    WordPress address (URL): https://hangmattor.se
    Site address (URL): https://hangmattor.se
    WC Version: 5.3.0
    REST API Version: ✔ 5.3.0
    WC Blocks Version: ✔ 4.9.1
    Action Scheduler Version: ✔ 3.1.6
    WC Admin Version: ✔ 2.2.6
    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.3.0
    WC Database Prefix: wpno_
    Total databasstorlek: 47.32MB
    Datastorlek för databas: 44.68MB
    Indexstorlek för databas: 2.64MB
    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.39MB + Index: 0.20MB + 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.47MB + Index: 0.47MB + 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: 8
    nav_menu_item: 23
    page: 27
    post: 1
    product: 35
    revision: 923
    shop_order: 39
    
    ### Security ###
    
    Secure connection (HTTPS): ✔
    Hide errors from visitors: ✔
    
    ### Active Plugins (9) ###
    
    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.5.1
    OMGF: av Daan from FFW.Press – 4.4.2
    PaysonCheckout for WooCommerce: av Krokedil – 3.1.0
    LiteSpeed Cache: av LiteSpeed Technologies – 3.6.4
    WooCommerce: av Automattic – 5.3.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: 2
    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: 76
    Oldest: 2021-05-07 09:22:53 +0000
    Newest: 2021-06-07 05:16:52 +0000
    
    ### Status report information ###
    
    Generated at: 2021-06-07 06:17:13 +00:00
    

    Hi, @boppar!

    I have a couple more suggestions for you to try.

    First, can you see if disabling the OMGF plugin helps? I see it’s for optimizing Google Fonts, but it may be having an effect.

    Second, you mentioned not yet trying the Regenerate Thumbnails plugin. Even if you haven’t added any new images, changed thumbnail sizes, or switched themes, it would still be worth trying. We’ve seen it work for other stores in similar situations before.

    Also, I see you have Code Snippets. Can you please check if you might have any snippets affecting images?

    Thread Starter boppar

    (@boppar)

    @dcka

    Hi Cara.
    Disabling OMGF didn’t change anything.
    I have very few snippets and none affects images.

    OK, I installed Regenerate Thumbnails. I tested with regenerating the thumbnails on the linked page. It made no difference.

    • This reply was modified 5 months, 3 weeks ago by boppar.
    • This reply was modified 5 months, 3 weeks ago by boppar.
    Thread Starter boppar

    (@boppar)

    @dcka and @adamkheckler

    All my product images have the ratio 3:2. The majority are 1200×800 but some are 1024×683. Could this size difference cause the blurry images in the catalogs (category pages)?

    Thread Starter boppar

    (@boppar)

    @dcka and @adamkheckler

    I’ve spent some hours changing my product images to all be 1200×800 pixels. Cleared cache and regenerated thumbnails. Unfortunately this didn’t solve the problem with blurry images.

    Hmmm… I’m wondering if the issue might be specific to your device and we might be seeing different things. To compare, can you share with us a screenshot of what you see? You can use https://snipboard.io/ to share it with us.

    For reference, this is what I see when viewing your site, and not sure if it’s my eyesight, but the images don’t appear blurry to me:


    Link to image: https://d.pr/i/fZW2By


    Link to image: https://d.pr/i/Jvhs3n

    Thread Starter boppar

    (@boppar)

    @dcka
    Hi Cara.
    I’ve tried with several different PCs and different browsers. The same result, blurry images on category pages.

    https://snipboard.io/rgxtWa.jpg

    • This reply was modified 5 months, 3 weeks ago by boppar.
    Thread Starter boppar

    (@boppar)

    @dcka
    I tried adding a code snippet I read about on:
    https://www.cssigniter.com/kb/adding-images-woocommerce/

    add_filter( 'woocommerce_get_image_size_thumbnail', 'ci_theme_override_woocommerce_image_size_thumbnail' );
    function ci_theme_override_woocommerce_image_size_thumbnail( $size ) {
        // Catalog images: specific size
        return array(
            'width'  => 750,
            'height' => 500,
            'crop'   => 1,
        );
    }

    It made a very small improvement, but catalog images continues blurry.
    https://snipboard.io/DwhSIC.jpg

    Hi there @boppar 👋🏽

    Glad to hear you got some improvements. I have checked the original image here and I do see it the same as the thumbnail here

    Do you still see them blurry?

    Cheers!

    Thread Starter boppar

    (@boppar)

    @danielinhou

    Hi Dani.
    I made new product images, little higher resolution, for those displayed on that category page.

    To me it still looks blurry.

    My screen (scale 100%, recommended):
    https://snipboard.io/AcX9Yn.jpg

    My screen (scale 125%):
    https://snipboard.io/XxzV1e.jpg

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