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

    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


    Try to add following code to functions.php (at the very bottom) and regenerate the thumbnails with:

    function jpeg_quality_callback($arg)
    return (int)100;

    add_filter('jpeg_quality', 'jpeg_quality_callback');


    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



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


    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.


    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




    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.




    Hi Ismael

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

    Kind regards



    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.




    Hi Devin

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

    Kind regards



    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



    Any thoughts on this?


    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;



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

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