• Hi,

    I know this’s been between the topics from time to time, but I found no solution.
    On first page load on the landing page the images are blurry. They are clearly being loaded by the lowest resolution link, supplied by the src argument. Then the image class gets the lazy load’s “loaded” tag, but it’s not replaced by a higher resolution image, it’s zoomed by the browser instead.

    If I open a post, then go back, the post’s featured image becomes clear. But then (after re-opening the site) it’s blurry again.

    Tried Retina, Regenerate Thumbnails, and Lazy Load plugin with no avail.
    Didnt work:
    img {
    image-rendering: -webkit-optimize-contrast;
    }

    Nor:

    The page works perfectly on Firefox.

    Thanks
    András

    • This topic was modified 3 years, 4 months ago by semirke.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter semirke

    (@semirke)

    Edit:
    I changed

                        <?php the_post_thumbnail( 'medium', array( 'alt' => the_title_attribute( 'echo=0' ) ) ); ?>
    

    To

                        <?php the_post_thumbnail( 'large', array( 'alt' => the_title_attribute( 'echo=0' ) ) ); ?>
    

    But I dont think this should be the solution.

    • This reply was modified 3 years, 4 months ago by semirke.
    Thread Starter semirke

    (@semirke)

    This is the method I found on srcset.
    The highest resolution image should be added to the src tag, then it works (I see the browser downloading the different size of the image on window resize). (https://learnedia.com/responsive-images-srcset-attribute-picture-element/)
    When the fallback img is a low resolution img, no new image is downloaded on window resize hm.

    However, when I use large, most of the images are the fallback images, but new images are downloaded on window resize.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Low image quality Chromium – lazy load?!’ is closed to new replies.