导航|地址|刷新
Optimize mobile viewing

Skip to contentDocumentation Index
Fetch the complete documentation index at: https://developers.cloudflare.com/images/llms.txt
Use this file to discover all available pages before exploring further.

Docs Directory API SDKs Changelog

Search

Log in

Cloudflare Images

/

Overview

Get started

Introduction

Key concepts

Limits and formats

Optimization

Features

Remote images (transformations)

Overview

Define source origins

Create transformation flows

Transform via fetch

Control origin access

Draw overlays and watermarks

Integrate with frameworks

Set up rewrite rules

Preserve Content Credentials

Hosted images

Serve uploaded images

Create predefined variants

Enable flexible variants

Apply blur

Delete variants

Preserve Content Credentials

Browser TTL

Serve images from custom domains

Serve private images

Optimize with Workers

Draw overlays and watermarks

Make responsive images

Storage

Upload images

Methods

Upload via URL

Upload via custom path

Accept user-uploaded images

Upload via batch API

Upload via a Worker

Upload via Sourcing Kit

Overview

Enable Sourcing Kit

Edit sources

Credentials

Configure webhooks

Manage hosted images

Edit images

Export images

Delete images

Manage with Workers

Demos and architectures

Pricing

Cloudflare Polish

Overview

Activate Polish

Polish compression

Cf-Polished statuses

WebP may be skipped

Images API Reference ↗API

Reference

Troubleshooting

Security

Tutorials

Optimize mobile viewing

Transform user-uploaded images before uploading to R2

Examples

Platform

Changelog

Agent resources

Agent setup ↗

Cloudflare Skills ↗

Code Mode MCP Server ↗

Domain-specific MCP Servers ↗MCP

Cloudflare Images llms.txt ↗

Cloudflare Images llms-full.txt ↗

Cloudflare Docs llms.txt ↗

Cloudflare Docs llms-full.txt ↗

Home

/Cloudflare Images

/Tutorials

/Optimize mobile viewing

Optimize mobile viewing

Last updated May 5, 2026|Copy as Markdown|View as Markdown|Agent setup

OverviewModify your loading attribute Lazy loading Eager loading

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 <img> tags: lazy and eager.

Lazy loading

Lazy loading is recommended for most images. With Lazy loading, resources like images are deferred until they reach a certain distance from the viewport. If an image does not reach the threshold, then it does not get loaded.

Example of modifying the loading attribute of your <img> tags to be "lazy":
<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. 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 <img> tags to be "eager":
<img src="example.com/cdn-cgi/width=300/image.png" loading="eager" />

PreviousSecurity NextTransform user-uploaded images before uploading to R2

Was this helpful?

YesNo

Edit page Report issue

On this page

Overview

Modify your loading attribute

Lazy loading

Eager loading

Edit pageReport issue

Getting started
PlansContact salesPartnersFind a partnerStartupsUnder attack?Domain name search

Company
AboutCareersInvestorsPressPress kitGlobal network

Public interest
Project GalileoAthenian ProjectCloudflare for CampaignsProject FairshotImpact/ESG

Compliance
Compliance resourcesTrust HubData ProtectionResponsible AITransparency reportReport abuse

Resources
App innovation reportCloudflare RadarCase studiesStatusSupportEventsBlog

Developers
DocumentationLearning centerCommunity

Solutions
SSE and SASE platformCloudflare AI CloudAI SecurityFrontend Development PlatformMulti-Tenant Platform DevelopmentWeb Security Platform

Start BuildingLog In

© 2026 Cloudflare, Inc.

Privacy policy|Report security issues|Terms of use|Trademark
|
Your privacy choices

Docs

------
导航页打开网址