width=300,height=200,dpr=1
+ width=300,height=200,dpr=2
+ 
```
-In the URL path used in this example, the `src` attribute is for images with the usual "1x" density. `/cdn-cgi/image/` is a special path for resizing images. This is followed by `width=960` which resizes the image to have a width of 960 pixels. `/assets/product.jpg` is a URL to the source image on the server.
+Instead of pre-generating each size, use Images to point every `srcset` entry at the same source image with a different `width` parameter and pixel density descriptor (e.g. `2x`). Once the browser selects the right width for the user's device pixel ratio, Cloudflare dynamically generates the resized version on request:
-The `srcset` attribute adds another, high-DPI image. The browser will automatically select between the images in the `src` and `srcset`. In this case, specifying `width=1920` (two times 960 pixels) and adding `2x` at the end, informs the browser that this is a double-density image. It will be displayed at the same size as a 960 pixel image, but with double the number of pixels which will make it look twice as sharp on high-DPI displays.
+```html
+
+```
-Note that it does not make sense to scale images up for use in `srcset`. That would only increase file sizes without improving visual quality. The source images you should use with `srcset` must be high resolution, so that they are only scaled down for `1x` displays, and displayed as-is or also scaled down for `2x` displays.
+In the example above, the `src` attribute contains the image for 1x displays (e.g. HD/1080p monitors). The `srcset` attribute adds a larger, high-DPI image for 2x displays (e.g. most mobile devices, 4K desktop displays). Use high-resolution source images, as scaling a low-resolution image increases file size without improving quality.
-### `srcset` for responsive images
+### Creating responsive layouts
-When you want to display an image that takes a certain percentage of the window or screen width, the image should have dimensions that are appropriate for a visitor’s screen size. Screen sizes vary a lot, typically from 320 pixels to 3840 pixels, so there is not a single image size that fits all cases. With `
+```
+
+### Eager loading
+
+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.
+
+Example of modifying the `loading` attribute of your `
+```
diff --git a/src/content/docs/images/tutorials/migration/fastly.mdx b/src/content/docs/images/tutorials/migration/fastly.mdx
new file mode 100644
index 00000000000..a888d29ff99
--- /dev/null
+++ b/src/content/docs/images/tutorials/migration/fastly.mdx
@@ -0,0 +1,47 @@
+---
+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
+reviewed: 2025-07-07
+---
+
+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.
+
+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.
+
+Lazy loading is natively supported on all major browsers, including 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
+
+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.
+
+There are two possible `loading` attributes for your `
+```
+
+### Eager loading
+
+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.
+
+Example of modifying the `loading` attribute of your `
+```
diff --git a/src/content/docs/images/tutorials/migration/index.mdx b/src/content/docs/images/tutorials/migration/index.mdx
new file mode 100644
index 00000000000..6678624d537
--- /dev/null
+++ b/src/content/docs/images/tutorials/migration/index.mdx
@@ -0,0 +1,12 @@
+---
+title: Tutorials
+pcx_content_type: navigation
+sidebar:
+ order: 10
+ group:
+ hideIndex: true
+---
+
+import { DirectoryListing } from "~/components";
+
+|
- |