Image Loading Optimizations
By enabling "Image Loading Optimizations" option, all images on a webpage will start loading only by nearing the desktop device viewport (lazy loading). In this way, by loading your webpage, all images below the fold (which are not immediately displayed for user) are physically not loaded. The images below the fold start loading by scrolling down the page.
TheGem has two options for lazy loading of media resources:
- Native Lazy Loading: lazy loading uses browser to detect elements in the viewport and lazy load them. Browser intelligently calculates the threshold. You can exclude certain images from being lazy loaded and specify how many images on page should be excluded from lazy loading (starting with the first loaded image).
By default, the image thumbnails used in grids, lists, and carousels (such as product grids, portfolio carousels, etc.) maintain consistent sizes and quality across desktops and mobile devices, as well as non-retina and retina screens. This enhances image loading performance.
However, if you wish to enable different sizes and improved thumbnail quality for retina screens and mobile devices, you can utilize the following settings under Theme Options - Performance:
- Use retina-optimized thumbnails: activate for enhanced thumbnail quality on retina screens
- Use mobile-optimized thumbnails: activate for improved thumbnail quality on mobile devices