You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: src/content/docs/de/_roundtrip_breakpoints.txt
+19-17
Original file line number
Diff line number
Diff line change
@@ -1,40 +1,42 @@
1
1
---
2
2
title: Breakpoints & Images
3
-
description: Why some (but not all) breakpoints matter for your images
4
-
taskInputHash: 6532c039ed74cf5c
3
+
description: Why some (but not all) breakpoints might be important for your images
4
+
taskInputHash: 3efafdc54b2265d8
5
5
lang: en
6
+
date_published: '2023-03-26'
7
+
date_modified: '2023-03-30'
6
8
---
7
9
### Background
8
10
9
-
Small screens and large monitors require different layouts. For `srcset` and `sizes`, we need to know when the layout changes.
11
+
Small and large screens require different layouts. For `srcset` and `sizes`, we need to know at which screen size the layout changes.
10
12
11
-
Web developers need to make decisions about what should be reduced, hidden, or moved on smaller screens or what should be expanded, revealed, or added on larger ones. They also have very little information available. Is the user on a tablet or phone in landscape mode or in a small browser window?
13
+
Web developers have to decide what to shrink, hide or move on smaller screens - or what to expand, show or add on larger screens. They also have very little information available. Is the user on a tablet or phone in landscape mode - or a small browser window?
12
14
13
-
We need to choose any viewport width at which the layout changes. This is called a **breakpoint**. It can be any number of CSS pixels ([not device pixels](/en/pixels-not-pixels)). Polypane has a [great article](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023) on common breakpoints.
15
+
We have to choose an arbitrary viewport width at which the layout changes. This is called a **breakpoint**. It's an arbitrary number of CSS pixels ([not device pixels](/en/pixels-not-pixels)). Polypane has a [great article](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023) on commonly used breakpoints.
14
16
15
-
Some images (such as logos, icons, or buttons) can be immune to the layout shifts caused by these breakpoints (and are fine with [srcset Density Descriptors](/en/density-descriptors)).
17
+
Some images (like logos, icons or buttons) can be immune to the layout shifts caused by these breakpoints (and be fine with [srcset density descriptors](/en/density-descriptors)).
16
18
17
-
Main content images are limited by the size of their container. Typically, the main area of a page layout is limited to a certain width (`max-width`) on the largest screens, but on small screens, the main content area fills the entire viewport.
19
+
Main content images are limited by the size of their container. Typically, the main content area of a page is limited to a specific width, a maximum width ("`max-width`"), on the largest screens, but on smaller screens, the main content area fills the entire viewport.
18
20
19
-
If you have more than one column at some breakpoints, it becomes harder to calculate effective size rules because the percentage of the viewport width that the image occupies changes.
21
+
If you have more than one column at some breakpoints, it gets harder to calculate effective sizing rules, as the percentage of viewport width that the image takes up changes.
20
22
21
-
### The Simple Method
23
+
### The simple method
22
24
23
-
That doesn't mean you should fret over it. You’ll probably get by just fine using the following approach:
25
+
That being said, don't overthink it. You'll likely do very well with the following approach:
24
26
25
-
1. At what size does the main column (or image container) stop growing? Up to that viewport width, we can use `100vw` for the `sizes` attribute to indicate that the image takes up 100% of the viewport width.
26
-
2. What is the maximum width the container will ever be? We can set that as a fixed `width` for everything else.
27
+
1. At what size does the main column (or the image's container) stop growing? Until that viewport width, we can use `100vw` for the `sizes` attribute of the image to say that the image takes up 100% of the viewport width.
28
+
2. What is the maximum width the container will ever reach? We can set that as a fixed `width` for everything else.
27
29
28
-
If your answer to 1 is 700px and your answer to 2 is 800px, you can use the following `sizes` attribute:
30
+
If your answer to 1 was "700px" and your answer to 2 was "800px", you can use the following `sizes` attribute:
29
31
30
32
```html
31
-
<!-- These are CSS pixels, not device pixels or image pixels. -->
> One might think that the browser could be so nice as to do all these calculations for us based on the CSS. Unfortunately, browsers are aggressively trying to choose an image URL *before* downloading stylesheets. So we have to do the calculations ourselves. And if we’re not perfect, it's their problem.
39
+
> One would think that the browser could do all these calculations for us based on the CSS. Unfortunately, browsers are aggressive about choosing an image URL *before* downloading stylesheets. That's why we have to do the calculations ourselves, and they're okay with us not being perfect.
38
40
=====================
39
41
40
42
Content prompt used:
@@ -48,7 +50,7 @@ Also carefully translate the title and description for the article; do not use &
48
50
2. Why some (but not all) breakpoints matter for your images
49
51
50
52
Metadata returned1. Breakpoints & Bilder
51
-
2. Warum manche (aber nicht alle) Breakpoints wichtig für Ihre Bilder sind
53
+
2. Warum einige (aber nicht alle) Breakpoints für Ihre Bilder wichtig sein können
Copy file name to clipboardexpand all lines: src/content/docs/de/_roundtrip_browser-picks-srcset.txt
+31-27
Original file line number
Diff line number
Diff line change
@@ -1,67 +1,71 @@
1
1
---
2
-
title: How the Browser selects
3
-
description: How the browser selects between images listed in the "srcset" attribute
4
-
taskInputHash: 21fa78dd27583003
2
+
title: How the browser selects
3
+
description: >-
4
+
How the browser chooses between images listed in the srcset attribute
5
+
taskInputHash: 8637a872959a6651
5
6
lang: en
7
+
date_published: '2023-03-24'
8
+
date_modified: '2023-03-26'
6
9
---
7
-
How does the browser select between images listed in the "srcset" attribute? Here is a step-by-step guide with examples for both width and density descriptors and how the browser decides based on the device and viewport.
10
+
How does the browser choose between images listed in the *srcset* attribute? Here are step-by-step instructions with examples for both width and density specifications and how the browser decides based on device and viewport.
8
11
9
-
- When using the "srcset" attribute in HTML, the browser uses a set of rules to select the most suitable image from a list of provided sources. These rules depend on both the display characteristics of the device (resolution, pixel density) and the size of the viewport. The "srcset" attribute allows you to specify different images based on width (using the "w" descriptor) or pixel density (using the "x" descriptor). Let's go through examples for both cases.
12
+
- When the `srcset` attribute is used in HTML, the browser uses rules to choose the most suitable image from a list of sources. These rules depend on both the display properties (resolution, pixel density) of the device and the size of the viewport. The `srcset` attribute allows you to specify different images based on width (using the `w` descriptor) or pixel density (using the `x` descriptor). Let's go through each case and give examples.
10
13
11
-
1. Width descriptor ("w"):
14
+
1. Width descriptor (`w`):
12
15
13
-
Assuming we have the following "srcset" attribute:
a. Determine the DPR (Device Pixel Ratio) of the device. For instance, a standard display has a DPR of 1, while a high-resolution (Retina) display has a DPR of 2 or higher.
26
+
a. Determining the DPR (Device Pixel Ratio) of the device. For example, a standard display has a DPR of 1, while a high-resolution (Retina) display has a DPR of 2 or more.
24
27
25
-
b. Calculate the effective width for each image in the "srcset". Multiply the width descriptor by the DPR. For a device with a DPR of 1:
28
+
b. Calculating the effective width for each image in the `srcset`. Multiply the width descriptor by the DPR. For a device with a DPR of 1:
26
29
27
-
- example-small.jpg: 400 * 1 = 400px
30
+
- Example-small.jpg: 400 * 1 = 400px
28
31
29
-
- example-medium.jpg: 800 * 1 = 800px
32
+
- Example-medium.jpg: 800 * 1 = 800px
30
33
31
-
- example-large.jpg: 1600 * 1 = 1600px
34
+
- Example-large.jpg: 1600 * 1 = 1600px
32
35
33
-
c. Compare the effective widths to the viewport width. Assuming the viewport width is 420px, the browser selects the smallest image whose effective width is greater than or equal to the viewport width. In this case, "example-medium.jpg" is selected.
36
+
c. Compare the effective widths with the viewport width. Assuming the viewport width is 420px, the browser will choose the smallest image with an effective width greater than or equal to the viewport width. In this case, it will choose `example-medium.jpg`.
34
37
35
-
2. Density descriptor ("x"):
38
+
2. Pixel density descriptor (`x`):
36
39
37
-
Assuming we have the following "srcset" attribute:
a. Determine the DPR (Device Pixel Ratio) of the device. For instance, a standard display has a DPR of 1, while a high-resolution (Retina) display has a DPR of 2 or higher.
50
+
a. Determining the DPR (Device Pixel Ratio) of the device. For example, a standard display has a DPR of 1, while a high-resolution (Retina) display has a DPR of 2 or more.
48
51
49
-
b. Compare the device's DPR with the "x" descriptors in the "srcset". In this case, we have three images with the following descriptors:
52
+
b. Compare the device's DPR with the `x` descriptors in the `srcset`. In this case, we have three images with the following descriptors:
50
53
51
-
- example-1x.jpg: 1x
54
+
- Example-1x.jpg: 1x
52
55
53
-
- example-2x.jpg: 2x
56
+
- Example-2x.jpg: 2x
54
57
55
-
- example-3x.jpg: 3x
58
+
- Example-3x.jpg: 3x
56
59
57
-
c. Select the image with the "x" descriptor closest to the device's DPR. For a device with a DPR of 1, the browser selects "example-1x.jpg". For a device with a DPR of 2, it selects "example-2x.jpg", and so on.
60
+
c. Choose the image with the `x` descriptor that is closest to the device's DPR. For a device with a DPR of 1, the browser chooses `example-1x.jpg`. For a device with a DPR of 2, the browser chooses `example-2x.jpg`, and so on.
58
61
59
-
It is important to note that you can also use the "sizes" attribute in combination with the "srcset" attribute to provide further information on how the image should display at different viewport widths. This is particularly useful when using the width descriptor ("w"). Here is an example:
62
+
It's important to note that you can also use the `sizes` attribute in combination with the `srcset` attribute to provide more information on how the image will be displayed at different viewport widths. This is particularly useful when using the width descriptor (`w`). Here's an example:
Copy file name to clipboardexpand all lines: src/content/docs/de/_roundtrip_density-descriptors.txt
+20-22
Original file line number
Diff line number
Diff line change
@@ -1,31 +1,29 @@
1
1
---
2
-
title: Density descriptors and srcset
2
+
title: Density Descriptors & srcset
3
3
description: Examples of using density descriptors in `srcset`
4
-
taskInputHash: db34acb106c5a3dd
4
+
taskInputHash: 07203f73f132ea25
5
5
lang: en
6
+
date_published: '2023-03-26'
7
+
date_modified: '2023-03-26'
6
8
---
7
-
Srcset with density descriptors provides a simple and effective way to deliver the most appropriate image for each user's device, improving performance and user experience. This guide will take you through the basics of using srcset with density descriptors and provide markup examples for your convenience.
9
+
Srcset with density descriptors offers a simple and effective way to provide the most appropriate image for each user's device, improving performance and user experience. This guide will walk you through the basics of using srcset with density descriptors and provide markup examples to simplify the process.
10
+
## What is Srcset with Density Descriptors?
8
11
9
-
## What is srcset with density descriptors?
12
+
Srcset is an HTML attribute that allows you to specify multiple image sources for a single `<img>` element. Density descriptors (`x`) are used in conjunction with srcset to provide images of varying resolution based on the pixel density of the user's display.
13
+
## When to Use Srcset with Density Descriptors
10
14
11
-
Srcset is an HTML attribute which allows specifying multiple image sources for a single `<img>` element. Density descriptors (`x`) are used in conjunction with srcset to provide images at different resolutions based on the pixel density of the user's display.
12
-
13
-
## When to use srcset with density descriptors?
14
-
15
-
Using srcset with density descriptors is particularly useful when you want to:
16
-
1. Provide high-resolution images for high-DPI displays (e.g. Retina displays) while using lower resolutions for standard displays.
17
-
2. Improve page rendering by providing the most suitable image size for each user's device.
18
-
19
-
## Implementing srcset with density descriptors
15
+
Using srcset with density descriptors is particularly useful when:
16
+
1. You want to provide high-resolution images on high-DPI displays (e.g. Retina displays) while also providing lower resolution images on standard displays.
17
+
2. You want to improve page performance by providing each device with the most appropriate image format.
18
+
## Implementing Srcset with Density Descriptors
20
19
21
20
To use srcset with density descriptors, follow these steps:
22
21
1. Prepare your images in different resolutions.
23
-
2. Add the `srcset` attribute to the `<img>` element, including the image sources and corresponding density descriptors.
24
-
3. Optionally add the `sizes` attribute to specify the size of the image on the screen.
25
-
26
-
### Markup example
22
+
2. Add the `srcset` attribute to the `<img>` element, including the image sources and their corresponding density descriptors.
23
+
3. (Optional) Add the `sizes` attribute to specify the size of the image on the screen.
24
+
### Markup Example
27
25
28
-
Here's an example of how to implement srcset with density descriptors in your markup:
26
+
Here is an example of how you can implement srcset with density descriptors in your markup:
29
27
30
28
```html
31
29
<img src="example-image-1x.jpg"
@@ -34,11 +32,11 @@ Here's an example of how to implement srcset with density descriptors in your ma
34
32
```
35
33
36
34
This markup example includes:
37
-
- **src**: The default image source to be displayed when the browser does not support srcset.
38
-
- **srcset**: The list of image sources and their density descriptors (1x, 2x, 3x). The browser selects the most suitable image based on the user's display.
35
+
- **src**: The default image source that will be displayed if the browser doesn't support srcset.
36
+
- **srcset**: The list of image sources and their density descriptors (1x, 2x, 3x). The browser will choose the most appropriate image based on the user's display.
39
37
- **alt**: A description of the image for accessibility purposes.
40
38
41
-
And that's it! You have successfully implemented srcset with density descriptors, improving the performance and user experience of your website.
39
+
And that's it! You have successfully implemented srcset with density descriptors and improved the performance and user experience of your website.
42
40
=====================
43
41
44
42
Content prompt used:
@@ -51,7 +49,7 @@ Also carefully translate the title and description for the article; do not use &
51
49
1. Density descriptors & srcset
52
50
2. Examples of using density descriptors in `srcset`
53
51
54
-
Metadata returned1. Density-Descriptoren und Srcset
52
+
Metadata returned1. Density-Descriptoren & srcset
55
53
2. Beispiele für die Verwendung von Density-Descriptoren in `srcset`
0 commit comments