Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • June 11, 2024 at 10:11 am #1448880
    wedesignshanghai

    Hi,

    We have a portfolio grid on our home page. The thumbnails display great on Safari, but really bad on Brave and Chrome browsers.
    Not sure if it is related to which image the browsers are loading, but there is a massive difference in terms of quality. I am adding 3 screenshots from Safari, Brave and Chrome so you can see the difference.

    Can you please have a look and see if there’s an easy fix to this?

    Thanks a lot!

    June 12, 2024 at 7:50 am #1448963
    Ismael

    Hey nasi,

    Thank you for the inquiry.

    Looks like Chrome is loading a smaller version of the thumbnail. Did you install any image compression plugins? Please try to temporarily disable the Responsive Images option in the Enfold > Performance > Responsive Images and Lazy Loading section. Let us know if this changes anything.

    Best regards,
    Ismael

    June 12, 2024 at 2:19 pm #1449055
    wedesignshanghai

    Hey Ismael,

    Thanks for your quick reply.
    We used WP-Optimize plugin to compress the images and Regenerate Thumbnails Advanced to regenerate image sizes.
    I just disabled Responsive images and Lazy Loading. That did improve A LOT the quality of the Thumbnails on Brave browser, but still look really bad on Chrome :(
    Any other suggestions?

    How does Lazy loading and Responsive images affect the overall performance of the site?
    Shall I leave these options off?

    Thanks again for your help, much appreciated

    June 14, 2024 at 2:57 am #1450041
    Ismael

    Hi,

    Thank you for the info.

    The correct size of the image doesn’t display because of the sizes attribute.

    sizes="(max-width: 139px) 100vw, 139px"

    Did you add any modifications for this? Please try to disable the image compression plugin and temporarily remove any modifications related to images.

    Best regards,
    Ismael

    June 17, 2024 at 11:57 am #1451622
    wedesignshanghai

    hi Ismael,

    Thanks for your message and sorry for the late reply.

    After deactivating WP-Optimize and disabling Lazy Loading and Responsive images in the theme’s PERFORMANCE area, thumbs look great across all browsers :)

    Leaving the settings like this will have any effect in the site’s overall performance?

    Thanks!

    Nasi

    June 18, 2024 at 5:09 am #1451841
    Ismael

    Hi,

    Thank you for the update.

    Leaving the settings like this will have any effect in the site’s overall performance?

    Yes, disabling lazy load and responsive images will affect the performance. Please re-enable the responsive images option, then add this code in the functions.php file:

    
function av_wp_calculate_image_srcset($sources, $size_array, $image_src, $image_meta, $attachment_id) {
    if (empty($sources)) {
        return $sources;
    }

    $largest = null;
    foreach ($sources as $source) {
        if (!$largest || $source['width'] > $largest['width']) {
            $largest = $source;
        }
    }

    foreach ($sources as $key => $source) {
        $sources[$key]['sizes'] = '(min-width: 990px) 100vw';
    }

    return $sources;
}
add_filter('wp_calculate_image_srcset', 'av_wp_calculate_image_srcset', 10, 5);

function av_custom_image_sizes_attr($sizes, $size) {
    $sizes = '(max-width: 989px) 100vw, (min-width: 990px) 100vw';
    return $sizes;
}
add_filter('wp_calculate_image_sizes', 'av_custom_image_sizes_attr', 10, 2);

    Please make sure to purge the cache before checking. Let us know of the result.

    Best regards,
    Ismael

    June 18, 2024 at 1:29 pm #1451862
    wedesignshanghai

    Hi Ismael,

    I activated responsive images, lazy loading and WP Optimise, added your code to the theme functions and thumbs look fine now in all browsers.

    Thanks for this!

    June 18, 2024 at 5:10 pm #1451888
    Mike

    Hi,
    Glad Ismael could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Portfolio grid image quality issue on Chrome and Brave browsers’ is closed to new replies.