Image Sizes in Product Grids / Carousels

TheGem Thumbnails

By default, TheGem comes with its own built-in thumbnail generator for creating product thumbnails in product grids and carousels. Unlike the standard WordPress thumbnail generator, which generates all default WordPress and WooCommerce thumbnails immediately after uploading the original image to the media library, TheGem's thumbnail generator works on demand. This means that the respective thumbnail is generated only when it is requested on the frontend for the very first time. After that, this thumbnail is saved and cached to accelerate its display on the frontend.

This method offers two main advantages:

  1. The /uploads/ folder of your WordPress installation remains uncluttered with unnecessary thumbnails.
  2. The loading speed of your product catalog is enhanced as cached product thumbnails load faster.

To use TheGem thumbnails as image sizes for product grids and carousels, simply choose the "As in Grid Layout (TheGem Thumbnails)" option in the "Image Size" field. Additionally, you can customize the image aspect ratio for TheGem product thumbnails using the "Image Aspect Ratio" setting:

(In Theme Options):

(in Elementor):

(in WPBakery):

WooCommerce & WordPress Thumbnails

For creating product thumbnails, TheGem relies on popular PHP libraries: GD or ImageMagick (if GD is not available). In most cases, major hosting companies include these libraries with high processing speeds. However, certain hosting companies may restrict resources for specific hosting plans, potentially causing delays in processing times for generating new thumbnails with GD / ImageMagick libraries. This can result in lower performance and slower loading speeds for product grids during the initial loading session when thumbnails haven't been generated yet. This situation can be particularly challenging for online shops with numerous products and various filters. If a product thumbnail hasn't been requested before and is missing from the cache, it needs to be generated first. In simple terms, to achieve the best performance on such restricted hosting plans, all necessary product thumbnails should be generated and cached first.

In order to improve this situation for such restricted hosting plans, TheGem includes additional "standard" thumbnail sizes to be used in product grids and carousels:

  • WooCommerce Thumbnail: 300x300 px, cropped
  • WooCommerce Single: 600 px width, uncropped
  • WordPress Thumbnail: 150x150 px, cropped
  • WordPress Medium: 300x300 px
  • WordPress Large: 1024x1024 px

When using these "standard" thumbnail sizes, all thumbnails are pre-generated and stored in the /uploads/ folder. There's no need for additional generation. Essentially, this means TheGem's thumbnail generator is bypassed, and the thumbnails load immediately upon request. This results in faster loading of product catalogs during the first loading session on restricted hosting plans.

If you are on such a hosting plan and encounter loading performance issues with your product grid, carousel, or product filters on initial page loading session, we recommend switching the image size for product thumbnails from "As in Grid Layout (TheGem Thumbnails)" to any of the "standard" WooCommerce or WordPress thumbnail sizes in the "Image Size" field of the Products Grid / Carousel / Shop Grid (see screenshots above).

How to Change Default Sizes of WooCommerce & WordPress "Standard" Thumbnails?

You can easily customize the default sizes of the listed "standard" thumbnails in your WordPress installation.

WooCommerce Thumbnail, WooCommerce Single:

  1. Navigate to Appearance > Customize > WooCommerce > Product Image.
  2. Look for the image size options:
    • Main image width: This is the "WooCommerce Single" image size, used for the native WooCommerce gallery on the product page. These images remain uncropped.
    • Thumbnail width: This is the "WooCommerce Thumbnail" image size. Here, you have additional thumbnail cropping options:
      • 1:1 – Images will be cropped into a square, corresponding to the "Square" image aspect ratio in TheGem thumbnails.
      • Custom – Images will be cropped to a custom aspect ratio. For example, 4:5 corresponds to the "Portrait" image aspect ratio in TheGem thumbnails.
      • Uncropped – Images will display using the aspect ratio in which they were uploaded.
  3. After adjusting your settings, click on "Publish". This triggers the thumbnail regeneration process in the background. It might take some time before all product images are processed, and new thumbnails are generated.

Note: Changes to the WooCommerce Thumbnail sizes in the Customizer won't immediately apply to the product catalog in the Customizer preview. Some images may change, while others may stay unchanged. This is normal behavior. To apply the changes to all product thumbnails, you need to click on "Publish" to initiate the thumbnail regeneration.

Note: If the WooCommerce Thumbnail settings weren't applied even after publishing in the Customizer and the thumbnail generation process has finished, please check if you have enabled the "Custom Image Sizes" setting in Theme Options - WooCommerce - Extra Options. If enabled, this setting will override the Customizer settings.

In case you've activated the "Custom Image Sizes" setting, you can specify your custom WooCommerce Thumbnail image size using the "Thumbnails Image Size" setting instead of the Customizer settings.

WordPress Image Sizes

To modify the dimensions of the "standard" WordPress thumbnails, go to "Settings > Media." Here, you can adjust the default thumbnail settings to meet your requirements.

Note: After changing these sizes and saving your changes, you need to regenerate thumbnails in your media library. To do this, we recommend using the "Regenerate Thumbnails" plugin.

Recommended Image Sizes

There's no specific image size requirement for a product or other purposes. The image should be sufficiently large to provide a pleasant view. For your information, we offer the image sizes used in our demos:

  • Product main image (WooCommerce Single): Width: 800px; Height: 1000px.
  • Products grid thumbnail (WooCommerce Thumbnail): Width: 300px.