Lazy Loading Retina Images

1 reply·opened Feb 18, 2021
A
amadeus77Feb 18, 2021

Is it possible to use the lazy loading method with a "srcset" for also supporting retina images:

<img loading="lazy" class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 3'%3E%3C/svg%3E" width="800" height="600" data-src="image.jpg" alt="Image">

Could I also add: srcset="high-res.jpg 2x" in the example above?

S
SemiColonWebSTAFFFeb 18, 2021

Hello,

You can definitely use srcset for Lazy Loading:

<img class="lazy" data-src="image.jpg" data-srcset="image_400.jpg 400w, image_800.jpg 800w" data-sizes="100w" alt="Image">

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard
Lazy Loading Retina Images · Canvas Template Support