Scale images & Lazy loading
| Enable the Feature
|| User Site and Image Impact
| Related Settings
|| Use Cases
| Benefits and Trade-offs
| Useful Resources
🔌 Enable the Feature
To enable this feature, navigate to WP Dashboard > Optimole.
Open the Settings tab.
Click on the General panel from the left sidebar.
Use the toggle to enable Scale images & Lazy loading feature.
🚀 User Site and Image Impact
Typically, when you visit a webpage, all the images load simultaneously, consuming time and data. However, with the "lazyload" feature, images are loaded only as you scroll down to the specific section where they are located on the page.
This Optimole's feature serves a dual purpose: it implements "lazy loading", rendering images to load only when they are visible, and it resizes these images to fit your screen optimally. In practical terms, suppose an image in your content is originally 1900x2000 pixels but appears on a browser at a smaller size, say 190x200 pixels. You can check the example below.
🔄 Benefits and Trade-offs
- Search Engine Optimization (SEO) Benefits - Google considers website speed as a ranking factor. With Optimole, your website's improved loading speed can positively impact your SEO rankings.
- Bandwidth Savings - Optimole saves your bandwidth. It optimizes images as they're sent, using less data from your server to your visitors. This not only speeds up your site but also cuts hosting costs, especially if you pay for data usage.
- Oversized Images - with this scaling turned off that 2000x3000 pixels image will appear much larger than the 200x300 pixels display box. This could lead to a messy layout and require users to scroll to see the entire image.
- Increased Data and Bandwidth Use - when images load at their full size, they consume more data, which might be an issue for users on limited data plans.
- Slower Page Load - larger images take longer to load, especially on slower connections or older devices, which could impact user experience.
🧩 Use Cases
⚙️ Related Settings
You may find useful these guides:
- What is the Difference Between Lazy Loading vs Eager Loading?
- Lazy Loading Images: Complete Guide Plus 3 Ways to Implement It
- How to Add Lazy Loading Animations For Images?
Still looking for an answer? Contact us!