Skip to content

Commit 2234fe9

Browse files
committed
Swapped around info based on feedback
1 parent 4244158 commit 2234fe9

File tree

1 file changed

+6
-6
lines changed

1 file changed

+6
-6
lines changed

src/content/docs/images/tutorials/optimize-mobile-viewing.mdx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,12 @@ sidebar:
66
order: 1
77
---
88

9-
You can use lazy loading to optimize the images on your webpages for mobile viewing. Lazy loading works by deferring the loading of resources, like images, on a page until they are actually needed. This helps address common challenges of mobile viewing, like slow network connections or weak processing capabilities.
9+
You can use lazy loading to optimize the images on your webpages for mobile viewing. This helps address common challenges of mobile viewing, like slow network connections or weak processing capabilities.
1010

1111
Lazy loading has two main advantages:
1212
* **Faster page load times** — Images are loaded as the user scrolls down the page, instead of all at once when the page is opened.
1313
* **Lower costs for image delivery** — When using Cloudflare Images, you only pay to load images that the user actually sees. With lazy loading, images that are not scrolled into view do not count toward your billable Images requests.
1414

15-
Without lazy loading, for most browsers, all images are fetched by default, which takes longer. Images are prioritized based on their distance from the viewport, so images in or close to the viewport are loaded first.
16-
1715
Lazy loading is natively supported on all Chromium-based browsers like Chrome, Safari, Firefox, Opera, and Edge.
1816

1917
:::note
@@ -22,11 +20,13 @@ If you use older methods, involving custom Javascript or a Javascript library, l
2220

2321
## Modify your loading attribute
2422

25-
There are two possible `loading` attributes for your `<img>` tags: `lazy` and `eager`.
23+
Without modifying your loading attribute, most browsers will fetch all images on a page, prioritizing the images that are closest to the viewport by default. You can override this by modifying your `loading` attribute.
24+
25+
There are two possible `loading` attributes for your `<img>` tags: `lazy` and `eager`.
2626

2727
### Lazy loading
2828

29-
Lazy loading is recommended for most images.
29+
Lazy loading is recommended for most images. With Lazy loading, resources like images are deferred until it reaches a certain distance from the viewpoint. If an image doesn't reach the threshold, then it does not get loaded.
3030

3131
Example of modifying the `loading` attribute of your `<img>` tags to be `"lazy"`:
3232
````HTML
@@ -35,7 +35,7 @@ Example of modifying the `loading` attribute of your `<img>` tags to be `"lazy"`
3535

3636
### Eager loading
3737

38-
If you have images that are in the viewport, eager loading, instead of lazy loading, is recommended.
38+
If you have images that are in the viewport, eager loading, instead of lazy loading, is recommended. Eager loading loads the asset at the initial page load, regardless of its location on the page.
3939

4040
Example of modifying the `loading` attribute of your `<img>` tags to be `"eager"`:
4141
````HTML

0 commit comments

Comments
 (0)