search

woocommerce / storefront

Official theme for WooCommerce
https://wordpress.org/themes/storefront/
959 stars 472 forks source link

Full-sized product images fetched when loading a product page #1427

Open arunsathiya opened 3 years ago

arunsathiya commented 3 years ago

Describe the bug

When opening a product page, the associated images are fetched in full size and they are resized before displaying on the frontend.

Is it expected that versions that weigh lesser are fetched instead?

Isolating the problem (mark completed items with an [x]):

To Reproduce

Screenshots

If applicable, add screenshots to help explain your problem.

Expected behavior

A clear and concise description of what you expected to happen.

Browser Environment

Notes

Related threads:

Example

Can see that behaviour on this product - https://themes.woocommerce.com/storefront/product/ship-your-idea/

WordPress Environment

Please provide relevant details of your WordPress setup and server environment.

``` ` ### WordPress Environment ### WordPress address (URL): https://ephemeral-arunsathiyawp-20200512.atomicsites.blog Site address (URL): https://ephemeral-arunsathiyawp-20200512.atomicsites.blog WC Version: 4.3.0 REST API Version: ✔ 1.0.10 WC Blocks Version: ✔ 2.7.1 Action Scheduler Version: ✔ 3.1.6 WC Admin Version: ✔ 1.3.0 Log Directory Writable: ✔ WP Version: ❌ 5.4.1 - There is a newer version of WordPress available (5.4.2) WP Multisite: – WP Memory Limit: 256 MB WP Debug Mode: ✔ WP Cron: ✔ Language: en_US External object cache: ✔ ### Server Environment ### Server Info: nginx PHP Version: 7.3.20 PHP Post Max Size: 2 GB PHP Time Limit: 1200 PHP Max Input Vars: 6144 cURL Version: 7.71.1 OpenSSL/1.1.1d SUHOSIN Installed: – MySQL Version: 5.5.5-10.3.23-MariaDB-log Max Upload Size: 2 GB Default Timezone is UTC: ✔ fsockopen/cURL: ✔ SoapClient: ✔ DOMDocument: ✔ GZip: ✔ Multibyte String: ✔ Remote Post: ✔ Remote Get: ✔ ### Database ### WC Database Version: 4.3.0 WC Database Prefix: wp_ Total Database Size: 2.66MB Database Data Size: 1.19MB Database Index Size: 1.47MB wp_woocommerce_sessions: Data: 0.02MB + Index: 0.02MB + 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.02MB + 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.02MB + Index: 0.11MB + 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.02MB + Index: 0.03MB + Engine InnoDB wp_commentmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_comments: Data: 0.02MB + Index: 0.09MB + Engine InnoDB wp_links: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_ms_snippets: Data: 0.02MB + Index: 0.00MB + Engine InnoDB wp_options: Data: 0.16MB + Index: 0.06MB + Engine InnoDB wp_postmeta: Data: 0.13MB + Index: 0.09MB + Engine InnoDB wp_posts: Data: 0.06MB + Index: 0.06MB + Engine InnoDB wp_snippets: Data: 0.02MB + Index: 0.00MB + Engine InnoDB wp_termmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_terms: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_term_relationships: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_term_taxonomy: Data: 0.02MB + Index: 0.03MB + 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.02MB + 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_order_coupon_lookup: 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_meta_lookup: Data: 0.02MB + Index: 0.09MB + 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 ### Post Type Counts ### attachment: 24 customize_changeset: 3 custom_css: 1 page: 6 post: 3 product: 21 product_variation: 11 revision: 4 shop_order: 2 ### Security ### Secure connection (HTTPS): ✔ Hide errors from visitors: ✔ ### Active Plugins (9) ### Quick Buy Now Button for WooCommerce: by Addify – 1.3.2 (update to version 1.3.3 is available) – Installed version not tested with active version of WooCommerce 4.3.0 Code Snippets: by Code Snippets Pro – 2.14.0 Jetpack by WordPress.com: by Automattic – 8.7.1 Reset Database: by MalteseSolutions – 1.1.3 WooCommerce All Products For Subscriptions: by SomewhereWarm – 3.1.15 WooCommerce Brands: by WooCommerce – 1.6.15 (update to version 1.6.18 is available) – Installed version not tested with active version of WooCommerce 4.3.0 WooCommerce Stripe Gateway: by WooCommerce – 4.5.0 – Installed version not tested with active version of WooCommerce 4.3.0 WooCommerce Subscriptions: by WooCommerce – 3.0.5 – Installed version not tested with active version of WooCommerce 4.3.0 WooCommerce: by Automattic – 4.3.0 ### Inactive Plugins (0) ### ### Dropin Plugins (2) ### advanced-cache.php: advanced-cache.php object-cache.php: Memcached ### Must Use Plugins (1) ### WP.com Site Helper: by – ### Settings ### API Enabled: – Force SSL: – Currency: GBP (£) Currency Position: left Thousand Separator: , Decimal Separator: . Number of Decimals: 2 Taxonomies: Product Types: external (external) grouped (grouped) simple (simple) subscription (subscription) variable (variable) variable subscription (variable-subscription) 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 ### Shop base: #11 - /shop/ Cart: #12 - /cart/ Checkout: #13 - /checkout/ My account: #14 - /my-account/ Terms and conditions: ❌ Page not set ### Theme ### Name: Twenty Twenty Version: 1.4 Author URL: https://wordpress.org/ 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: – ### Subscriptions ### WCS_DEBUG: ✔ No Subscriptions Mode: ✔ Live Subscriptions Live URL: https://ephemeral-arunsathiyawp-20200512.atomicsites.blog Subscription Statuses: – WooCommerce Account Connected: ✔ Yes Active Product Key: ❌ No Report Cache Enabled: ✔ Yes Cache Update Failures: ✔ 0 failure ### Store Setup ### Country / State: United Kingdom (UK) ### Payment Gateway Support ### Direct bank transfer: products ### All Products for WooCommerce Subscriptions ### Template Overrides: – ### Action Scheduler ### Complete: 15 Oldest: 2020-07-12 04:49:22 +0000 Newest: 2020-07-16 12:51:03 +0000 Pending: 1 Oldest: 2020-07-17 06:17:33 +0000 Newest: 2020-07-17 06:17:33 +0000 ` ```
nielslange commented 3 years ago

@arunsathiya I looked up this case and as the full-size images are used for the Lightbox feature, reducing their size would lead to smaller Lightbox images.

In your description above you mentioned "Notice that the gallery images are fetched in full sizes". This is correct as these images server as Lightbox images as well. Using the correct image-size for the gallery images, the product image and the Lightbox would mean that every image is loaded in three different sizes instead of in full-size. This would increase the page size and slow down the performance of the product page.

cc: @nerrad & @senadir as you've been involved in the Slack conversation on p1594905953497000-slack-team-rubik.