Blurry Product Images before a page refresh

  • Resolved orion1212

    (@orion1212)


    1 year, 7 months ago

    Hello,

    I’m reaching out today with a perplexing issue that has been plaguing my WooCommerce website, and despite my best efforts, I’m still struggling to find a solution. I’m hoping that your wisdom might shed some light on this frustrating problem.

    The Bug/Issue:

    On the main product page of my WooCommerce site, I’ve noticed a strange bug or error involving the main product images on single product pages. Specifically, the second image (and occasionally the first) appears blurry when the page initially loads. However, upon refreshing the page, the images immediately become clear and crisp as they should be.

    Troubleshooting Steps Taken So Far:

    • I’ve thoroughly tested this issue on the Twenty Twenty-Three WordPress theme to rule out any potential theme conflicts.
    • I’ve disabled all plugins except for WooCommerce to ensure no plugin interference.
    • Cloudflare has been temporarily disabled to eliminate any CDN-related issues.
    • Multiple browsers and devices have been used for testing to ensure the issue is not browser-specific.
    • I’ve collaborated with my hosting provider (Cloudway) to troubleshoot and we’ve disabled all server caching mechanisms without success.
    • I’ve confirmed that the images display correctly on a different website, leading me to believe this issue is site-specific.

    Similar Error Reported:

    In my quest for a solution, I stumbled upon a thread on the WordPress support forum (link: WordPress Support Thread) that seems to describe a problem similar to the one I’m facing. Unfortunately, the thread doesn’t provide a clear resolution.

    Given the persistence of this issue and the countless hours I’ve spent searching for a solution, I’m kindly reaching out for help. I can provide access to a staging version of my site to take a closer look!

    Thank you in advance for your time and assistance!

    • This topic was modified 1 year, 7 months ago by orion1212.
Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter orion1212

    (@orion1212)

    The topic with a similar error.

    Hi @orion1212 ,

    Thanks for reaching out!

    It seems you’ve done a thorough job troubleshooting the blurry image issue already.

    Anytime a new theme is activated?or?image dimension settings are changed, old thumbnails need to be regenerated. Can you navigate to WooCommerce → Status → Tools and click to Regenerate shop thumbnails.

    Next, please clear your browser cache and then see if the issue is resolved.

    If this makes no difference, there could be an issue with the image sizes or the way your site is handling image compression. WooCommerce has specific image size settings, and if the original images do not match these settings, it could result in blurry images.

    We recommend a minimum size of 800 x 800 pixels, width and height. This renders well for the main/featured image, catalog image and thumbnail image. Images that are larger are even better, especially if you’re selling items with great detail.

    Also, the general rule of thumb is that your image dimensions should match or be higher than those of your theme.

    More information on images can be found here:

    Let us know how this goes!

    Thread Starter orion1212

    (@orion1212)

    Thank you for answering!

    I appreciate your prompt response to this matter. Despite our efforts, the issue persists. Notably, we have regenerated the shop thumbnails multiple times and diligently cleared browser caches across various browsers. Strangely, the product images display perfectly on another installation, even though we have disabled all caching methods on our current setup.

    We uploaded images with dimensions of 1800 x 1800 and thoroughly tested them on different themes, including Twenty Twenty-Two, Twenty Twenty-Three, and the Kadence theme. Right now the main image width in Customising ? WooCommerce ? Product Images is 1200 px and the thumbnail width is 600 px. We tested them at 600 and 300 px too.

    After engaging with the support representative at my hosting provider, it was suggested that the problem could be rooted in the core installation of WooCommerce or WordPress itself. But it was just a suggestion.

    Would you be interested in reviewing a staging version of the site? I can provide you with a “clean version”, devoid of caching and plugins, to facilitate the inspection.

    I admit, I find myself in a perplexing situation, unsure of the best course of action moving forward.

    Hi @orion1212 ,

    Thanks for providing an update on this!

    Would you be interested in reviewing a staging version of the site? I can provide you with a “clean version”, devoid of caching and plugins, to facilitate the inspection.

    Yes, please could you share the site URL (not login credentials) for the staging site, as well as the System Status Report so that we can take a closer look at the sites current environment.

    You can find this via ?WooCommerce?→?Status. Select?Get system report?and then?Copy for support. Once you have this, please share the results with us here.

    Cheers!

    Thread Starter orion1212

    (@orion1212)

    Hi Roxy, @beautyofcode ,

    First of all, I want to express my gratitude for your assistance and support in helping resolve this matter.

    For security reasons, the staging version of the website is normally protected by a password. However, I’ve gone ahead and created a user account for you to access it. If necessary, I can also provide you with WordPress credentials through a private message.

    Staging Website URL: https://rb.gy/sb6o6

Login: Roxy

Password: 29asd73Roxy

    The staging website has only the WooCommerce plugin activated, and the theme in use is the latest version of Twenty Twenty-Three.

    How to see the issue:

    When you visit the staging website and click on the orange fins under “New Stuff,” you’ll notice that the product image appears blurry, particularly on the second image (please pay attention to the branding and lines on the fins). However, if you refresh the page, the image becomes much sharper. This behavior can be replicated by going back to the previous page and clicking again on the orange fins. While the first image is sometimes clear, the second one consistently remains blurry before a page refresh.

    Here is the system report of this staging version:

    ### WordPress Environment ###

WordPress address (URL): xxx
Site address (URL): xxx
WC Version: 8.0.2
REST API Version: ? 8.0.2
WC Blocks Version: ? 10.6.5
Action Scheduler Version: ? 3.6.1
Log Directory Writable: ?
WP Version: 6.3
WP Multisite: –
WP Memory Limit: 512 MB
WP Debug Mode: –
WP Cron: –
Language: en_US
External object cache: –

### Server Environment ###

Server Info: Apache/2.4.57 (Debian)
PHP Version: 8.0.29
PHP Post Max Size: 100 MB
PHP Time Limit: 600
PHP Max Input Vars: 10000
cURL Version: 7.64.0
OpenSSL/1.1.1n

SUHOSIN Installed: –
MySQL Version: 10.4.20-MariaDB-1:10.4.20+maria~buster-log
Max Upload Size: 100 MB
Default Timezone is UTC: ?
fsockopen/cURL: ?
SoapClient: ?
DOMDocument: ?
GZip: ?
Multibyte String: ?
Remote Post: ?
Remote Get: ?

### Database ###

WC Database Version: 8.0.2
WC Database Prefix: wp_
Total Database Size: 264.31MB
Database Data Size: 256.39MB
Database Index Size: 7.92MB
wp_woocommerce_sessions: Data: 1.52MB + Index: 0.05MB + Engine InnoDB
wp_woocommerce_api_keys: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_attribute_taxonomies: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_downloadable_product_permissions: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_woocommerce_order_items: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_order_itemmeta: Data: 0.05MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_tax_rates: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_woocommerce_tax_rate_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_shipping_zones: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_woocommerce_shipping_zone_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_shipping_zone_methods: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_woocommerce_payment_tokens: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_payment_tokenmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_log: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_actionscheduler_actions: Data: 0.14MB + Index: 0.14MB + Engine InnoDB
wp_actionscheduler_claims: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_actionscheduler_groups: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_actionscheduler_logs: Data: 0.11MB + Index: 0.09MB + Engine InnoDB
wp_bv_fw_requests: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_bv_ip_store: Data: 0.17MB + Index: 0.17MB + Engine InnoDB
wp_bv_lp_requests: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_bw_pricing_items: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_cli_cookie_scan: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_cli_cookie_scan_categories: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_cli_cookie_scan_cookies: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_cli_cookie_scan_url: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_cli_scripts: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_commentmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_comments: Data: 0.08MB + Index: 0.09MB + Engine InnoDB
wp_gla_attribute_mapping_rules: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_gla_budget_recommendations: Data: 0.22MB + Index: 0.14MB + Engine InnoDB
wp_gla_merchant_issues: Data: 0.06MB + Index: 0.00MB + Engine InnoDB
wp_gla_shipping_rates: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_gla_shipping_times: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_links: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_custom_fields: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_dynamic_segment_filters: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_feature_flags: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_forms: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_mailpoet_log: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_mailpoet_mapping_to_external_entities: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_newsletters: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_mailpoet_newsletter_links: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
wp_mailpoet_newsletter_option: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_newsletter_option_fields: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_newsletter_posts: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_newsletter_segment: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_newsletter_templates: Data: 2.52MB + Index: 0.00MB + Engine InnoDB
wp_mailpoet_scheduled_tasks: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_mailpoet_scheduled_task_subscribers: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_segments: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_mailpoet_sending_queues: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_mailpoet_settings: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_statistics_bounces: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_mailpoet_statistics_clicks: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
wp_mailpoet_statistics_forms: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_statistics_newsletters: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_mailpoet_statistics_opens: Data: 0.02MB + Index: 0.08MB + Engine InnoDB
wp_mailpoet_statistics_unsubscribes: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
wp_mailpoet_statistics_woocommerce_purchases: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_mailpoet_stats_notifications: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_mailpoet_subscribers: Data: 0.02MB + Index: 0.13MB + Engine InnoDB
wp_mailpoet_subscriber_custom_field: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_subscriber_ips: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_subscriber_segment: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_mailpoet_user_agents: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_user_flags: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_nextend2_image_storage: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_nextend2_section_storage: Data: 0.03MB + Index: 0.06MB + Engine InnoDB
wp_nextend2_smartslider3_generators: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_nextend2_smartslider3_sliders: Data: 0.06MB + Index: 0.03MB + Engine InnoDB
wp_nextend2_smartslider3_sliders_xref: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_nextend2_smartslider3_slides: Data: 0.05MB + Index: 0.11MB + Engine InnoDB
wp_options: Data: 5.25MB + Index: 0.19MB + Engine InnoDB
wp_postmeta: Data: 5.52MB + Index: 3.03MB + Engine InnoDB
wp_posts: Data: 238.16MB + Index: 1.00MB + Engine InnoDB
wp_smush_dir_images: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_snippets: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_termmeta: Data: 0.09MB + Index: 0.03MB + Engine InnoDB
wp_terms: Data: 0.11MB + Index: 0.14MB + Engine InnoDB
wp_term_relationships: Data: 0.22MB + Index: 0.17MB + Engine InnoDB
wp_term_taxonomy: Data: 0.16MB + Index: 0.13MB + Engine InnoDB
wp_usermeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_users: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
wp_wc_admin_notes: Data: 0.05MB + Index: 0.00MB + Engine InnoDB
wp_wc_admin_note_actions: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_wc_category_lookup: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_wc_customer_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_download_log: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_orders: Data: 0.02MB + Index: 0.11MB + Engine InnoDB
wp_wc_orders_meta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_order_addresses: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_wc_order_coupon_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_order_operational_data: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_order_product_lookup: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_wc_order_stats: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
wp_wc_order_tax_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_product_attributes_lookup: Data: 0.08MB + Index: 0.06MB + Engine InnoDB
wp_wc_product_download_directories: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_wc_product_meta_lookup: Data: 0.06MB + Index: 0.09MB + Engine InnoDB
wp_wc_rate_limits: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_wc_reserved_stock: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_wc_tax_rate_classes: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_wc_webhooks: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_wpmailsmtp_debug_events: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_wpmailsmtp_tasks_meta: Data: 0.02MB + Index: 0.00MB + Engine InnoDB

### Post Type Counts ###

attachment: 1045
cookielawinfo: 6
custom_css: 2
customize_changeset: 83
mailpoet_page: 1
nav_menu_item: 90
page: 31
polylang_mo: 2
post: 47
product: 172
product_variation: 24
revision: 4045
shop_order: 20
shop_order_refund: 2
wp_block: 91
wp_global_styles: 5
wp_navigation: 1
wp_template: 3
wp_template_part: 1

### Security ###

Secure connection (HTTPS): ?
Hide errors from visitors: ?

### Active Plugins (1) ###

WooCommerce: by Automattic – 8.0.2

### Inactive Plugins (16) ###

Advanced Database Cleaner: by Younes JFR. – 3.1.2
annasta Woocommerce Product Filters: by annasta.net – 1.6.5
Blocks Animation: CSS Animations for Gutenberg Blocks: by ThemeIsle – 2.3.2
Boxtal Connect: by API Boxtal – 1.2.17
Flying Scripts: by WP Speed Matters – 1.2.3
GTM4WP: by Thomas Geiger – 1.16.2
Kadence Blocks – Gutenberg Blocks for Page Builder Features: by Kadence WP – 3.1.9
Polylang for WooCommerce: by WP SYNTEX – 1.7.2
Polylang Pro: by WP SYNTEX – 3.3.2
Rearrange Woocommerce Products: by Aslam Doctor – 4.1.6
Smush: by WPMU DEV – 3.14.1
The SEO Framework: by The SEO Framework Team – 4.2.8
W3 Total Cache: by BoldGrid – 2.4.1
WooCommerce Payments: by Automattic – 6.2.2 (update to version 6.3.2 is available)
WP Mail SMTP: by WP Mail SMTP – 3.8.2
WP Meteor: by Aleksandr Guidrevitch – 3.3.1

### Settings ###

API Enabled: –
Force SSL: –
Currency: EUR (€)
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: –
Enforce Approved Product Download Directories: –
HPOS feature screen enabled: –
HPOS feature enabled: –
Order datastore: WC_Order_Data_Store_CPT
HPOS data sync enabled: –

### WC Pages ###

Shop base: ? Page not set
Basket: ? Page does not contain the [woocommerce_cart] shortcode or the woocommerce/cart block.
Checkout: #8 - /commande/
My account: #9 - /mon-compte/
Terms and conditions: #1636 - /terms-of-use/

### Theme ###

Name: Twenty Twenty-Three
Version: 1.2
Author URL: https://en-gb.www.remarpro.com
Child Theme: ? – If you are modifying WooCommerce on a parent theme that you did not build
personally we recommend using a child theme. See: How to create a child theme

WooCommerce Support: ?

### Templates ###

Overrides: –

### Admin ###

Enabled Features: activity-panels
analytics
product-block-editor
coupons
core-profiler
customer-effort-score-tracks
import-products-task
experimental-fashion-sample-products
shipping-smart-defaults
shipping-setting-tour
homescreen
marketing
mobile-app-banner
navigation
onboarding
onboarding-tasks
remote-inbox-notifications
remote-free-extensions
payment-gateway-suggestions
shipping-label-banner
subscriptions
store-alerts
transient-notices
woo-mobile-welcome
wc-pay-promotion
wc-pay-welcome-page

Disabled Features: minified-js
new-product-management-experience
product-variation-management
settings
async-product-editor-category-field

Daily Cron: ? Next scheduled: 2023-08-20 13:39:33 +02:00
Options: ?
Notes: 24
Onboarding: completed

### Action Scheduler ###

Complete: 169
Oldest: 2023-07-20 17:48:55 +0200
Newest: 2023-08-19 13:15:01 +0200

Pending: 4
Oldest: 2023-08-20 12:31:39 +0200
Newest: 2023-08-25 17:45:03 +0200

Failed: 149
Oldest: 2022-09-02 10:22:31 +0200
Newest: 2023-08-11 18:58:04 +0200

Canceled: 1
Oldest: 2023-08-17 14:52:45 +0200
Newest: 2023-08-17 14:52:45 +0200


### Status report information ###

Generated at: 2023-08-20 12:51:35 +02:00

    Thank you!

    Hi there @orion1212 ??

    Thank you for reaching back, with further details on this.

    The staging website has only the WooCommerce plugin activated, and the theme in use is the latest version of Twenty Twenty-Three.

    From what I gather, the staging site is an exact copy of the live one, with only the WooCommerce plugin active.

    Nevertheless, in the Inactive plugins list, I noticed the Smush: by WPMU DEV – 3.14.1 plugin. This is an image optimization plugin.

    Meanwhile, this was part of your original message:

    I’ve confirmed that the images display correctly on a different website, leading me to believe this issue is site-specific.

    Therefore, just to clarify, did you already have a chance to try with a totally fresh WordPress installation, with the TT3 theme active and only the WooCommerce plugin installed and activated? How did that go?

    I trust that points you in the right direction, but if you have more questions, let us know.

    We’re happy to help.

    Hi there,

    We haven’t heard back from you in a while, so I’m going to mark this as resolved – we’ll be here if you need any further help with this.

    Cheers!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Blurry Product Images before a page refresh’ is closed to new replies.