Image Loading Optimizations

Image Loading

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:

• JS Lazy Loading: lazy loading uses JavaScript to detect elements in the viewport and lazy load them. You can manually specify the threshold using the "Distance To Viewport To Start Loading" option
• 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).

Image Thumbnails

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