Lazyload does not work well with responsive image CSS code

  • Resolved cjpdesign

    (@cjpdesign)


    3 years, 11 months ago

    Hi,

    I have experience the issue of using responsive image CSS code with SG Optimizer placeholder image:

    This is a preset Tailwind CSS code to handle responsive image.
    max-width: 100%; height: auto;

    The SG Optimizer placeholder image
    data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7 appears in square because the CSS height auto, then return to the original image size after image loaded. It will appear sudden jump from square to horizontal image. This also causes the issue when I use Flickity slider that it won’t calculate the container height correctly.

    Please help me fix this issue. Thanks.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Stoyan Georgiev

    (@stoyangeorgiev)

    Hey there @cjpdesign,

    This is caused because the image is not loaded initially and there is an empty space on the place of the image. When the image is loaded the resizing looks like a layout jump. This can be fixed by either excluding the specific image from being lazy-loaded or adding specific sizes to the element that is containing the image.

    Kind regards,
    Stoyan

    I have the same issue, but the image has width and height defined.
    i.e. width=804, heigth= 1020.
    Chrome shows this before loading as 804x804px, then load and the image is actually 804x1020px. This results in a high Cumulative Layout Shift score especially on slow internet connections and when somebody is scrolling down quickly.
    When I switch lazy loading off in sg-optimizer, this behaviour goes away and the image stays as 804px x 1020px the whole time (even when not in view and way down the website). This happens for all images btw.
    I think this is an issue with SG-Optimizer, and can only be fixed there.
    Thanks

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Lazyload does not work well with responsive image CSS code’ is closed to new replies.