Lazy Loading Issue in ShortPixel Adaptive Images Plugin

  • I hope this message finds you well. I’m writing to bring to your attention an issue I’ve encountered with the ShortPixel Adaptive Images plugin regarding lazy loading functionality.

    After thorough testing and analysis, I’ve identified the following problem:

    Issue Description: When the ShortPixel AI Settings > Behavior > Replace method is set to BOTH, lazy loading does not work as expected. However, if the Replace method is set to SRC, lazy loading functions properly. Unfortunately, when the Replace method is set to SRC, the srcset attribute for images does not get printed.

    Expected Behavior: Ideally, lazy loading should work regardless of the Replace method setting, and the srcset attribute for images should be printed correctly when lazy loading is enabled.

    Steps to Reproduce:

    1. Set the Replace method in ShortPixel AI Settings > Behavior to BOTH.
    2. Enable lazy loading for images on the website.
    3. Observe that lazy loading does not function correctly.
    4. Set the Replace method to SRC and observe that lazy loading works, but the srcset attribute is missing.

    Additional Information:

    • WordPress Version: [Your WordPress Version]
    • Plugin Version: [ShortPixel Adaptive Images Version]
    • Theme: [Your Theme Name and Version]
    • Any Relevant Browser or Environment Information

    Request: I kindly request your assistance in investigating and resolving this issue. It would greatly benefit users of the ShortPixel Adaptive Images plugin to have lazy loading functionality working seamlessly with all Replace method settings and ensuring that the srcset attribute is correctly printed.

    Thank you for your attention to this matter. I look forward to hearing back from you and any updates on resolving this issue.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Pedro

    (@petredobrescu)

    Hello @testcs1041,

    Thanks for bringing this to our attention. I’m afraid I don’t understand fully the issue and I have an important question related to Step 2:

    Enable lazy loading for images on the website.

    What kind of lazy-loading have you tried to enable here? Our plugin already has its own lazy-loading mechanism and if you’re trying to enable another lazy-loading functionality, from another plugin or theme, then most likely that will result in a clash with all sorts of issues appearing.

    What would help a lot is to reproduce the issue you’re describing above on a dev/staging site and give us the link, so we can have a closer look and understand the whole situation. Together with that, please also add screenshots with the plugin settings.

    Thank you!

    Thread Starter testcs1041

    (@testcs1041)

    When we kept the Replace method => SRC then the website will load all images in Lazy load state i.e when user will came in certain viewport the images will be loaded not full images will loaded at start.
    Image tag will look like below in view source.

    <img width="1920" height="1080" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOTIwIDEwODAiIHdpZHRoPSIxOTIwIiBoZWlnaHQ9IjEwODAiIGRhdGEtdT0iaHR0cHMlM0ElMkYlMkZ3b3JrLmxpZmUlMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMjMlMkYwOSUyRldvcmstTGlmZS1Ib21lLW1pbi5qcGciIGRhdGEtdz0iMTkyMCIgZGF0YS1oPSIxMDgwIiBkYXRhLWJpcD0iIj48L3N2Zz4=" data-spai="1" alt="" decoding="async" fetchpriority="high"  />    </div>

    But you can view the srcset is not generated.
    For this we need to set to Replace method => BOTH
    When we kept this setting the lazy load images loading in viewport will not work and also in view source fill cdn path is generated to src and srcset.

    Is the same case in your development version or we have missed any kind of settings in this case?

    Plugin Support Gerard Blanco

    (@sixaxis)

    Hi testcs1041,

    If you choose the SRC replace method, there is no need to have the srcset attribute. This attribute allows the browser to choose the most appropriate image source based on factors such as screen resolution and viewport size. Since ShortPixel Adaptive Images already resizes the image in the src attribute on-the-fly, the srcset attribute is removed.

    However, in some cases our customers need the srcset attribute to be present, and in this case you can select BOTH. But even in this case, lazy loading should work.

    To help you troubleshoot, it would be helpful if you could provide us with some additional information:

    • Screenshots or a screen recording showing the lazy loading issue in action.
    • A link where we can take a look at the problem ourselves.
    • Your site information. Please navigate to Tools > Site Health > Info, click on the “Copy site info to clipboard” button and paste the information in your reply.
    • Screenshots of your ShortPixel plugin settings (ShortPixel Image Optimizer, ShortPixel Adaptive Images and/or Autoptimize).
    • What setting did you enable when you said “Enable lazy loading for images on the website” on the reproduction steps?
    • Finally, is the issue occurring in more than one web browser (Chrome, Firefox, Edge, Safari, etc.)?

    Thank you!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Lazy Loading Issue in ShortPixel Adaptive Images Plugin’ is closed to new replies.