Open vdias38 opened 4 years ago
<img srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w" sizes="(max-width: 600px) 480px, 800px" src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
eagerly load above-the-fold images, and lazy load ONLY the below-the-fold images. loading="eager if index < 4 else lazy"
To guarantee behavior on iOS (do not support img.loading attribute)
Use firebase extension to resize uploaded image
Add resized img on responsive
Eager vs lazy imgs
eagerly load above-the-fold images, and lazy load ONLY the below-the-fold images. loading="eager if index < 4 else lazy"
use vanilla-lazyload
To guarantee behavior on iOS (do not support img.loading attribute)
show a low-resolution preview while your lazy images are loading