Use Inline Aspect Ratio for Lazy-Loaded Images
When lazy loading is enabled, images are not loaded immediately. This can cause layout shifts if space is not reserved in advance.
The inline aspect ratio setting solves this by defining the image’s proportions before it loads.
What inline aspect ratio does
Inline aspect ratio ensures that the browser knows the size of the image before it is loaded.
- reserves the correct space in the layout
- prevents content from jumping when images load
- improves visual stability
This is especially important for performance metrics like Core Web Vitals.
How it works
LessFlux adds size information directly into the image markup. This allows the browser to calculate the layout before the image is downloaded.
- width and height ratios are applied inline
- space is reserved automatically
- images load smoothly without shifting content
This works together with lazy loading to improve both speed and stability.
Where to find this setting
- Go to LessFlux settings
- Find the “Inline aspect ratio” option
- Enable or disable the feature
Recommended setup
For most websites, this setting should be enabled.
- prevents layout shifts
- improves user experience
- supports better performance scores
It is particularly useful on pages with multiple images loading at different times.
When to disable it
You may want to disable this feature in specific cases:
- your theme already handles image dimensions correctly
- you have custom layout logic that conflicts with inline sizing
If everything is working correctly, there is usually no need to turn it off.
Common issues
If you notice layout or display problems, check the following:
- conflicts with theme or page builder styling
- custom CSS overriding image dimensions
- incorrect aspect ratios due to modified images
Disabling the setting temporarily can help confirm if it is causing the issue.
Best practices
- keep inline aspect ratio enabled when using lazy loading
- test pages with complex layouts after enabling it
- avoid overriding image dimensions with custom CSS unless necessary
Inline aspect ratio is a small setting with a big impact on how stable your pages feel while loading.