Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #1448880


    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!


    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,


    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



    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,


    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?





    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,


    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!


    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,

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.