Updates based on content feedback

Author: ToriLindsay

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

@@ -0,0 +1,43 @@
+---
+pcx_content_type: tutorial
+title: Optimize mobile viewing
+description: Lazy loading is an easy way to optimize the images on your webpages for mobile devices, with faster page load times and lower costs.
+sidebar:
+  order: 1
+---
+
+Lazy loading is an easy way 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.
+
+Lazy loading has two main advantages:
+* **Faster page load times** — Images are loaded as the user scrolls down the page, instead of all at once when the page is opened.
+* **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.
+
+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.
+
+Lazy loading is natively supported on all Chromium-based browsers like Chrome, Safari, Firefox, Opera, and Edge.
+
+:::note
+If you use older methods, involving custom Javascript or a Javascript library, lazy loading may increase the initial load time of the page since the browser needs to download, parse, and execute Javascript.
+:::
+
+## Modify your loading attribute
+
+There are two possible `loading` attributes for your `<img>` tags: `lazy` and `eager`.
+
+### Lazy loading
+
+Lazy loading is recommended for most images.
+
+Example of modifying the `loading` attribute of your `<img>` tags to be `"lazy"`:
+````HTML
+<img src="example.com/cdn-cgi/width=300/image.png" loading="lazy">
+````
+
+### Eager loading
+
+If you have images that are in the viewport, eager loading, instead of lazy loading, is recommended.
+
+Example of modifying the `loading` attribute of your `<img>` tags to be `"eager"`:
+````HTML
+<img src="example.com/cdn-cgi/width=300/image.png" loading="lazy">
+````