Blurry Shop Images

13 posts from 4 voices

• Started 10 months ago by cutecreations
• Latest reply from Devin
• This topic is not resolved

Tags:

No tags yet.

1. 

   cutecreations
   Member

   http://cutecreations.co.uk/wp/shop/kigurumi-kitty-t-shirt

   The images on my product pages look slightly blurred. I uploaded a larger version in the same proportion as I like the fact users can view a larger image, but it must be losing quality when scaled down (if you compare the quality of the larger file, you will see what I mean). I have regenerated thumbnails and the settings in woocommerce are:

   Catalog Images Width 450px Height 355px
   Single Product Image Width 450px Height 355px
   Product Thumbnails Width 90px Height 90px

   Or do I need to change settings in the functions.php file?

   $avia_config['imgSize']['widget'] = array('width'=>36, 'height'=>36 ); // small preview pics eg sidebar news
   $avia_config['imgSize']['post-format-image'] = array('width'=>630, 'height'=>999, 'crop'=>false); // big images for post format image and gallery posts
   $avia_config['imgSize']['fullsize'] = array('width'=>930, 'height'=>930, 'crop'=>false); // big images for lightbox and portfolio single entries
   $avia_config['imgSize']['featured'] = array('width'=>930, 'height'=>340); // images for fullsize pages and fullsize slider
   $avia_config['imgSize']['portfolio'] = array('width'=>450, 'height'=>335); // images for portfolio entries (2,3,4 column)

   //dynamic columns
   $avia_config['imgSize']['dynamic_1'] = array('width'=>446, 'height'=>151); // images for 2/4 (aka 1/2) dynamic portfolio columns when using 3 columns
   $avia_config['imgSize']['dynamic_2'] = array('width'=>609, 'height'=>210); // images for 2/3 dynamic portfolio columns
   $avia_config['imgSize']['dynamic_3'] = array('width'=>688, 'height'=>151); // images for 3/4 dynamic portfolio columns

   Posted 10 months ago #
2. 

   Dude
   Dude

   Try to add following code to functions.php (at the very bottom) and regenerate the thumbnails with: http://wordpress.org/extend/plugins/regenerate-thumbnails/
   

   function jpeg_quality_callback($arg)
   {
   return (int)100;
   }
   
   add_filter('jpeg_quality', 'jpeg_quality_callback');

   Posted 10 months ago #
3. 

   cutecreations
   Member

   Hey Dude :)

   Thank you, that definitely helped a lot. Would you also suggest I upload an even bigger image or will I not make any difference?

   Kind regards

   Kate

   Posted 10 months ago #
4. 

   cutecreations
   Member

   Also the code has worked for safari but not for firefox it seems.

   Posted 10 months ago #
5. 

   Dude
   Dude

   1) Maybe the old (low quality) images are still in the browser cache?

   2) You can try to upload bigger image but I'm not sure if this will improve the quality. In most cases WP uses the resized thumbnails and in this case the higher resolution of the source images won't change anything as long as they're bigger than the thumbnails.

   Posted 10 months ago #
6. 

   cutecreations
   Member

   Have cleared the cache in both safari and firefox but it's only having an affect in safari. Could it be to do with the settings in the functions.php file or the wordpress image size options (I've put the current settings in my first post on this thread)?

   Kind regards

   Kate

   Posted 10 months ago #
7. 

   Ismael
   Moderator

   Hello,

   You can find the woocommerce image sizes on config-woocommerce > config.php.

   //product thumbnails
   $avia_config['imgSize']['shop_thumbnail'] 	= array('width'=>80, 'height'=>80);
   $avia_config['imgSize']['shop_catalog'] 	= array('width'=>450, 'height'=>355);
   $avia_config['imgSize']['shop_single'] 		= array('width'=>450, 'height'=>355);

   Maybe you can adjust the size there then regenerate the thumbnails again.

   Regards,
   Ismael

   Posted 10 months ago #
8. 

   cutecreations
   Member

   Hi Ismael

   Unfortunately it's not had any effect I'm afraid.

   Kind regards

   Kate

   Posted 10 months ago #
9. 

   Devin
   Moderator

   Hi Kate,

   Unfortunately there isn't anything else I can think of that would effect safari only. As far as I know safari doesn't mess with the photo settings or display at all.

   Regards,

   Devin

   Posted 10 months ago #
10. 

    cutecreations
    Member

    Hi Devin

    Safari isn't being a problem, its not had any effect in firefox though.

    Kind regards

    Kate

    Posted 10 months ago #
11. 

    cutecreations
    Member

    Hi Devin

    Just an idea which would solve the blurry image problem as I could just upload at their size that is show on the website.

    I've been playing around with the web inspector in Firefox and I changed the settings of div.eight.units to 500px and .container .four.units to 400px. This will get the pictures up to a good size. Is there a way I can change the size of them without it affecting other pages, for example could I put something like:

    .container .four.unit .product_summary{
    width: 400px;
    float: left;
    }

    and same for the eight.units?

    Would that work?

    Kind regards

    Kate

    http://i906.photobucket.com/albums/ac263/cutecreations/ScreenShot2012-07-18at140324.png

    http://i906.photobucket.com/albums/ac263/cutecreations/ScreenShot2012-07-18at140301.png

    Posted 10 months ago #
12. 

    cutecreations
    Member

    Any thoughts on this?

    Posted 10 months ago #
13. 

    Devin
    Moderator

    If you wanted to change the grid for just that page or page type you could target it like:

    #top.single-product .container .four.units{
    width: 400px;
    }

    then the same for the eight units holding the other content:
    

    #top.single-product .container .eight.units{
    width: ###px;
    }

    Regards,

    Devin

    Posted 9 months ago #

RSS feed for this topic

Reply

You must log in to post.