Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #14357

    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 = array(‘width’=>36, ‘height’=>36 ); // small preview pics eg sidebar news

    $avia_config = array(‘width’=>630, ‘height’=>999, ‘crop’=>false); // big images for post format image and gallery posts

    $avia_config = array(‘width’=>930, ‘height’=>930, ‘crop’=>false); // big images for lightbox and portfolio single entries

    $avia_config = array(‘width’=>930, ‘height’=>340); // images for fullsize pages and fullsize slider

    $avia_config = array(‘width’=>450, ‘height’=>335); // images for portfolio entries (2,3,4 column)

    //dynamic columns

    $avia_config = array(‘width’=>446, ‘height’=>151); // images for 2/4 (aka 1/2) dynamic portfolio columns when using 3 columns

    $avia_config = array(‘width’=>609, ‘height’=>210); // images for 2/3 dynamic portfolio columns

    $avia_config = array(‘width’=>688, ‘height’=>151); // images for 3/4 dynamic portfolio columns

    #83039

    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');

    #83040

    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

    #83041

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

    #83042

    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.

    #83043

    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

    #83044

    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

    #83045

    Hi Ismael

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

    Kind regards

    Kate

    #83046

    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

    #83047

    Hi Devin

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

    Kind regards

    Kate

    #83048

    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

    #83049

    Any thoughts on this?

    #83050

    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

Viewing 13 posts - 1 through 13 (of 13 total)

The topic ‘Blurry Shop Images’ is closed to new replies.