Jump to content

Low resolution product image and thumbnail

Recommended Posts


Hi there


I'm having a real problem with the resolution of product thumbnails and product images. I've tried using Jigo Shop (for pagelines) and Woocommerce (for pagelines) and have come across the same problem. Basically I upload an image to wordpress (with good resolution and reasonable size), I then create a product and attach the image to the product through the featured image button. When I then look at the site the thumbnail image for this product is really bad resolution compared to the original and the product image on the product page is barely any better. When I enlarge the image it is good resolution but when I then close it you can visibly see the resolution getting worse. 


I'm creating a site for someone that is used to the thumbnail quality on etsy (which is amazing) so this is a real problem.


The site is www.mabetty.com and if you click on the clothes category you can see the product. I haven't done any work on the site yet until I've resolved this - hence it's pretty basic. As a comparison if you go to http://www.etsy.com/uk/shop/Alicecarolinesupply?section_id=6373289 and scroll down you can see the same product and the quality of the thumbnail.


I've searched in vain for solutions and am getting to the point of using a different platform like Shopify but really want to avoid the cost and transaction fees. 


Can anyone help me with this?



Share this post

Link to post
Share on other sites
James B

Hi there,


When uploading an image to wordpress it does compress the image, also scaling the image can cause the thumbnails to become less crisp. There are some options available on the Wordpress support forums, using hooks/filters to stop the compression. However, a lot of the posts state the best results come from uploading the thumbnail image at the exact size.


Check out this post which has some links to the support threads  - http://www.pagelines.com/forum/topic/24013-how-do-you-create-sharp-thumbnails/


Also http://thomasgriffinmedia.com/blog/2012/12/how-to-change-the-quality-of-wordpress-thumbnails/ and

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post

Link to post
Share on other sites

Thanks for your reply. I did try the Thomas Griffin fix but wasn't really sure where to insert it into the wp_image_editor class file code? Can you help me with that?

Thanks again.

Share this post

Link to post
Share on other sites

Add the following code to your custom CSS, this should resolve the issue.


#site ul.products li a img {
max-width: 99%;

It would appear that there is a conflict with our CSS from what I can tell, I have reported this as a possible bug.

Please search our forums, before posting!

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • bnapoli
      By bnapoli+
      I have Quickshop installed on my WooCommerce section of this website: http://a04.125.myftpupload.com/
      Main Shop: http://a04.125.myftpupload.com/?page_id=1198
      I've having what appears to be CSS issues on the individual product pages. After cleaning up any code accessible from the wp-admin, the page still appears broken. I never tried to customize it, it just came broken like this right out of the box.
      You can see examples of it broken on every single product page, see here:
      Can somebody help?
    • King Creative Design
      By King Creative Design+
      I am setting up a Woocommerce site using PL Framework and Platform 5. I added a hook so the category description appears under the category page titles (on archive pages). However, it also appears under the title on the main "shop" page (which I have renamed "Catelog" page). There is a default description here and I can't figure out for the life of me where it is being generated from so I can change it. Any ideas how to change it or delete it on the main shop page ONLY? The staging site is here - http://16e.117.myftpupload.com/ and the page in question is http://16e.117.myftpupload.com/catalog/
      I have hit up Woocommerce support and they weren't familiar with Platform 5 and recommended I contact you.
      Your help would be appreciated, thanks!

    • DonRicardoRVM
      By DonRicardoRVM+
      First of all, sorry for my bad english.
      I have a shop with Woocommerce, platform-5 and PL Quicshop, and it´s all OK, but there is a prloblem: in the category page product I don´t get dosplay the bubble "price" when the product is in sale. 
      This is my product category page, without the bubble: https://globosdemar.com/categoria-producto/collares/
      And this is othrer shop with the bubble: https://www.usaprocom.com/product-category/fireplace-systems/
      Somebody knows how solve this?
    • hibbsy78
      By hibbsy78+
      Anyone having issues with Apple Pay & woocommerce? Before I start with trying to disable plugins one by one I thought I'd check here first!
      I'm having issues with the payment processing part which just times out?
    • Paul
      By Paul+
      I have woocommerce store, product shows title and price fine until reduce screen with on a tablet/mobile phone the price and title gets removed?  Any ideas? 
      Here's an example page: https://thelaptopfixers.com/product/operating-system-re-install/
      Try it on both desktop PC browser then resize to mobile/cell phone size!