From 9dd0ada9d4c5a7a09667e6efd77b2983a7f91854 Mon Sep 17 00:00:00 2001 From: Denise Pena Date: Thu, 7 Nov 2024 12:47:44 -0600 Subject: [PATCH 1/5] Update title --- src/content/docs/images/upload-images/direct-creator-upload.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/images/upload-images/direct-creator-upload.mdx b/src/content/docs/images/upload-images/direct-creator-upload.mdx index 4f271a7995fb191..3005566b83dbbbe 100644 --- a/src/content/docs/images/upload-images/direct-creator-upload.mdx +++ b/src/content/docs/images/upload-images/direct-creator-upload.mdx @@ -1,6 +1,6 @@ --- pcx_content_type: how-to -title: Direct creator uploads +title: Accept user-user uploaded images sidebar: order: 5 From 17aee880a32e5b1d8f55b7396982f81d2bdd86f8 Mon Sep 17 00:00:00 2001 From: Denise Pena Date: Thu, 7 Nov 2024 13:46:28 -0600 Subject: [PATCH 2/5] Added info about width parameter --- .../make-responsive-images.mdx | 53 +++++++++++++++++-- src/content/partials/images/width.mdx | 14 ++++- 2 files changed, 61 insertions(+), 6 deletions(-) diff --git a/src/content/docs/images/transform-images/make-responsive-images.mdx b/src/content/docs/images/transform-images/make-responsive-images.mdx index 6f63a0205cff625..73b894cbe27488d 100644 --- a/src/content/docs/images/transform-images/make-responsive-images.mdx +++ b/src/content/docs/images/transform-images/make-responsive-images.mdx @@ -6,6 +6,12 @@ sidebar: --- +You can serve responsive images in two different ways: +- Use the HTML `srcset` feature to allow browsers to choose the most optimal image. This is the most reliable solution to serve responsive images. +- Use the `width=auto` option to serve the most optimal image based on the available browser and device information. This is a server-side solution that is supported only by Chromium-based browsers. + +## Transform with HTML `srcset` + The `srcset` [feature of HTML](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) allows browsers to automatically choose an image that is best suited for user’s screen resolution. `srcset` requires providing multiple resized versions of every image, and with Cloudflare’s image transformations this is an easy task to accomplish. @@ -15,7 +21,7 @@ There are two different scenarios where it is useful to use `srcset`: * Images with a fixed size in terms of CSS pixels, but adapting to high-DPI screens (also known as Retina displays). These images take the same amount of space on the page regardless of screen size, but are sharper on high-resolution displays. This is appropriate for icons, thumbnails, and most images on pages with fixed-width layouts. * Responsive images that stretch to fill a certain percentage of the screen (usually full width). This is best for hero images and pages with fluid layouts, including pages using media queries to adapt to various screen sizes. -## `srcset` for high-DPI displays +### `srcset` for high-DPI displays For high-DPI display you need two versions of every image. One for `1x` density, suitable for typical desktop displays (such as HD/1080p monitors or low-end laptops), and one for `2x` high-density displays used by almost all mobile phones, high-end laptops, and 4K desktop displays. Some mobile phones have very high-DPI displays and could use even a `3x` resolution. However, while the jump from `1x` to `2x` is a clear improvement, there are diminishing returns from increasing the resolution further. The difference between `2x` and `3x` is visually insignificant, but `3x` files are two times larger than `2x` files. @@ -34,7 +40,7 @@ The `srcset` attribute adds another, high-DPI image. The browser will automatica 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. -## `srcset` for responsive images +### `srcset` for responsive images 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 `` you can offer the browser several possible sizes and let it choose the most appropriate size automatically. @@ -61,7 +67,7 @@ If the image is not displayed at full width of the screen (or browser window), y * If the image is displayed at full width of a fixed-width column, use the first technique that uses one specific image size. * If it takes a specific percentage of the screen, or stretches to full width only sometimes (using CSS media queries), then add the `sizes` attribute as described below. -### The `sizes` attribute +#### The `sizes` attribute If the image takes 50% of the screen (or window) width: @@ -86,7 +92,7 @@ The `vw` unit is a percentage of the viewport (screen or window) width. If the i In this example, `sizes` says that for screens smaller than 640 pixels the image is displayed at full viewport width; on all larger screens the image stays at 640px. Note that one of the options in `srcset` is 1280 pixels, because an image displayed at 640 CSS pixels may need twice as many image pixels on a high-dpi (`2x`) display. -## What about other formats? +## WebP images `srcset` is useful for pixel-based formats such as PNG, JPEG, and WebP. It is unnecessary for vector-based SVG images. @@ -96,3 +102,42 @@ If you want to use WebP images, but do not need resizing, you have two options: * You can enable the automatic [WebP conversion in Polish](/images/polish/activate-polish/). This will convert all images on the site. * Alternatively, you can change specific image paths on the site to start with `/cdn-cgi/image/format=auto/`. For example, change `https://example.com/assets/hero.jpg` to `https://example.com/cdn-cgi/image/format=auto/assets/hero.jpg`. + +## Transform with `width` parameter + +When setting up a [transformation URL](/images/transform-images/transform-via-url/#width), you can apply the width=auto option to serve the most optimal image based on the available information about the user's browser and device. + +This method can serve multiple sizes from a single URL. Currently, images will be served in one of four sizes: + +- 1200 (large desktop/monitor) +- 960 (desktop) +- 768 (tablet) +- 320 (mobile) + +Each width is counted as a separate transformation. For example, if you use `width=auto` and the image is delivered with a width of 320px to one user and 960px to another user, then this counts as two unique transformations. + +By default, this feature uses information from the user agent, which detects the platform type (e.g. iOS, Android) and browser. + +### Client hints + +For more accurate results, you can use client hints to send the user's browser information as request headers. + +This method currently works only on Chromium-based browsers such as Chrome, Edge, and Opera. + +You can enable client hints via HTML by adding the following tag in the `` tag of your page before any other elements: + +```txt + +``` + +Replace `https://example.com` with your Cloudflare zone where transformations are enabled. + +Alternatively, you can enable client hints via HTTP by adding the following headers to your HTML page's response: + +``txt +critical-ch: sec-ch-viewport-width, sec-ch-dpr + +permissions-policy: ch-dpr=("https://example.com"), ch-viewport-width=("https://example.com") +``` + +Replace `https://example.com` with your Cloudflare zone where transformations are enabled. \ No newline at end of file diff --git a/src/content/partials/images/width.mdx b/src/content/partials/images/width.mdx index 0984c20977a201d..0a42afb8c44b9a6 100644 --- a/src/content/partials/images/width.mdx +++ b/src/content/partials/images/width.mdx @@ -3,7 +3,9 @@ --- import { Tabs, TabItem } from "~/components" -Specifies maximum width of the image in pixels. Exact behavior depends on the `fit` mode (described below). +Specifies maximum width of the image. Exact behavior depends on the `fit` mode; use the `fit=scale-down` option to ensure that the image will not be enlarged unnecessarily. + +Available options are a specified width in pixels or `auto`. @@ -21,4 +23,12 @@ Specifies maximum width of the image in pixels. Exact behavior depends on the `f cf: {image: {width: 250}} ``` - \ No newline at end of file + + +Ideally, image sizes should match exactly the size they are displayed on the page. If the page contains thumbnails with markup such as ``, then you can resize the image by applying `width=200`. + +[To serve responsive images](/images/transform-images/make-responsive-images/#transform-with-html-srcset), you can use the HTML srcset element and apply width parameters. + +`auto` + +Automatically serves the image in the most optimal width based on available information about the browser and device. This method is supported only by Chromium browsers. For more information about this works, refer to [Transform width parameter](/images/transform-images/make-responsive-images/#transform-with-width-parameter). From f3f071bcd0ea37a90a70e920e060c28762141351 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Denise=20Pe=C3=B1a?= <75506267+dcpena@users.noreply.github.com> Date: Fri, 8 Nov 2024 09:34:28 -0600 Subject: [PATCH 3/5] Update src/content/docs/images/transform-images/make-responsive-images.mdx Co-authored-by: hyperlint-ai[bot] <154288675+hyperlint-ai[bot]@users.noreply.github.com> --- .../docs/images/transform-images/make-responsive-images.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/images/transform-images/make-responsive-images.mdx b/src/content/docs/images/transform-images/make-responsive-images.mdx index 73b894cbe27488d..e2c6bcca374757f 100644 --- a/src/content/docs/images/transform-images/make-responsive-images.mdx +++ b/src/content/docs/images/transform-images/make-responsive-images.mdx @@ -116,7 +116,7 @@ This method can serve multiple sizes from a single URL. Currently, images will b Each width is counted as a separate transformation. For example, if you use `width=auto` and the image is delivered with a width of 320px to one user and 960px to another user, then this counts as two unique transformations. -By default, this feature uses information from the user agent, which detects the platform type (e.g. iOS, Android) and browser. +By default, this feature uses information from the user agent, which detects the platform type (for example, iOS or Android) and browser. ### Client hints From 38c99f5932aeed0883569e60e85414ed3d2a622d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Denise=20Pe=C3=B1a?= <75506267+dcpena@users.noreply.github.com> Date: Fri, 8 Nov 2024 10:25:29 -0600 Subject: [PATCH 4/5] Apply suggestions from code review Co-authored-by: Jun Lee --- .../docs/images/transform-images/make-responsive-images.mdx | 2 +- src/content/partials/images/width.mdx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/docs/images/transform-images/make-responsive-images.mdx b/src/content/docs/images/transform-images/make-responsive-images.mdx index e2c6bcca374757f..ea748c963eedb7b 100644 --- a/src/content/docs/images/transform-images/make-responsive-images.mdx +++ b/src/content/docs/images/transform-images/make-responsive-images.mdx @@ -105,7 +105,7 @@ If you want to use WebP images, but do not need resizing, you have two options: ## Transform with `width` parameter -When setting up a [transformation URL](/images/transform-images/transform-via-url/#width), you can apply the width=auto option to serve the most optimal image based on the available information about the user's browser and device. +When setting up a [transformation URL](/images/transform-images/transform-via-url/#width), you can apply the `width=auto` option to serve the most optimal image based on the available information about the user's browser and device. This method can serve multiple sizes from a single URL. Currently, images will be served in one of four sizes: diff --git a/src/content/partials/images/width.mdx b/src/content/partials/images/width.mdx index 0a42afb8c44b9a6..686fa0016fc4210 100644 --- a/src/content/partials/images/width.mdx +++ b/src/content/partials/images/width.mdx @@ -25,7 +25,7 @@ Available options are a specified width in pixels or `auto`. -Ideally, image sizes should match exactly the size they are displayed on the page. If the page contains thumbnails with markup such as ``, then you can resize the image by applying `width=200`. +Ideally, image sizes should match the exact dimensions at which they are displayed on the page. If the page contains thumbnails with markup such as ``, then you can resize the image by applying `width=200`. [To serve responsive images](/images/transform-images/make-responsive-images/#transform-with-html-srcset), you can use the HTML srcset element and apply width parameters. From 92a1063a39a243d1bbcda1412b56e45d34836667 Mon Sep 17 00:00:00 2001 From: Denise Pena Date: Fri, 8 Nov 2024 13:28:28 -0600 Subject: [PATCH 5/5] Minor edits --- src/content/partials/images/width.mdx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/content/partials/images/width.mdx b/src/content/partials/images/width.mdx index 686fa0016fc4210..6ac95f4de60b8d7 100644 --- a/src/content/partials/images/width.mdx +++ b/src/content/partials/images/width.mdx @@ -27,8 +27,6 @@ Available options are a specified width in pixels or `auto`. Ideally, image sizes should match the exact dimensions at which they are displayed on the page. If the page contains thumbnails with markup such as ``, then you can resize the image by applying `width=200`. -[To serve responsive images](/images/transform-images/make-responsive-images/#transform-with-html-srcset), you can use the HTML srcset element and apply width parameters. +[To serve responsive images](/images/transform-images/make-responsive-images/#transform-with-html-srcset), you can use the HTML `srcset` element and apply width parameters. -`auto` - -Automatically serves the image in the most optimal width based on available information about the browser and device. This method is supported only by Chromium browsers. For more information about this works, refer to [Transform width parameter](/images/transform-images/make-responsive-images/#transform-with-width-parameter). +`auto` - Automatically serves the image in the most optimal width based on available information about the browser and device. This method is supported only by Chromium browsers. For more information about this works, refer to [Transform width parameter](/images/transform-images/make-responsive-images/#transform-with-width-parameter).