Kiyara Love Handcrafted

Help For Image

When this happens, there is a possibility that your settings may not be adequate (too small) for your theme – this can cause image distortion or blurriness. Check the graphic below for a better explanation.
Ugly Distort
Ugly Distort
Fixing distortion ↑ Back to Top
We’ll fix a hypothetical distortion issue, as a demonstration. Before starting, make sure that the graphics you upload are large enough in size. Anything from 800×800 and higher would work for most themes.
Thumbnail Types ↑ Back to Top
The terms we use are:
Single Product Image: Largest thumbnail on the product details page.
Catalog Images: Medium sized thumbnail used in product loops (e.g., categories, related products, up-sells, cross-sells, etc.).
Product Thumbnails: Smallest thumbnail used in product galleries on the single product pages, the cart and widgets.
Since WC 2.3, these settings are located in Commerce > Settings > Products > Display
From WC 2.3+, these settings are located in Commerce > Settings > Products > Display
Find the size your theme renders thumbnails ↑ Back to Top
The theme you chose delegates how big the pictures will be, so you need the dimensions in which it renders them.
Catalog Thumbnail
Determine where your theme renders catalog thumbnails the largest. In some cases, this is the shop page; in the Twenty Eleven theme, it is in the related products loop.
If you’re using Chrome, you can right click the image and select Inspect Element. The same can be done in Firefox using Firebug. This gives you the image dimensions. Make a note of this.
Commerce Product Image – Thumbnail Size
In Storefront (above), the largest catalog thumbs are rendered at ~213 x 213 pixels.
Single Thumbnail
Repeat the process for the single thumb — large image on product details page.
Commerce Product Image – Product Featured Image
In Storefront, the largest Single Thumbnail is rendered at 298 x 298 pixels.
Product Thumbnail
The smallest is likely the thumbnail in the product gallery. Repeat the inspection process to get the dimensions.
Commerce Product Image – Product Gallery
In Storefront, it renders at 43 x 43 pixels.
Input the data and regenerate the thumbnails ↑ Back to Top
Now that all thumbnail image sizes for our specific theme are known, we can add new dimensions to ensure that future thumbnails will be this size or larger.
In Commerce > Settings > Products > Display, be sure that the maximum image sizes are at least as big as the dimensions your theme is rendering for those thumbnails. Then Save Changes.
Any new product images that are uploaded will now have thumbnails in these settings, and should appear without distortion or blurriness.
Note: Saving changes does not automatically update all previously uploaded product imagery. To update old images, WordPress needs to regenerate the thumbnails. A great plugin that does just that is Regenerate Thumbnails.
Retina Support ↑ Back to Top
HiDPI displays contain twice as many pixels as standard displays. For pixel perfect imagery on retina displays, set your thumbnails to be twice the size rendered by the theme. If a theme renders thumbs at 80×80, you want them to be 160×160.
This can impact performance, as larger images take longer to load. This is a personal preference, and you should consult your analytics before deciding.
Note: If your store images don’t appear to be the same size you defined in  Commerce > Settings > Products, then it’s likely your theme is affecting the sizing of images. You need to add custom CSS to your theme to override this./*!

Leave a Reply