Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update translations #12

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Update translations #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 18 additions & 19 deletions src/content/docs/de/_roundtrip_breakpoints.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,35 +1,34 @@
---
title: Breakpoints & Images
description: Why some (but not all) breakpoints are important for your images
taskInputHash: 57ab72e7e951b197
description: Why some (but not all) breakpoints matter for your images
taskInputHash: a740eb96e1b2103c
lang: en
ignore: '/* cSpell:locale de,en*/'
date_published: '2023-03-26'
date_modified: '2023-03-31'
date_updated: '2023-03-31'
date_published: '2023-04-03'
date_modified: '2023-04-03'
date_updated: '2023-04-03'
---
### Background

Small screens and big monitors require different layouts. For `srcset` and `sizes`, we need to know when the layout changes.
Small screens and large monitors require different layouts. For the purpose of `srcset` and `sizes`, we need to know at what point the layout changes.

Web developers need to decide what should be scaled down, hidden, or moved on smaller screens - or decide what should be expanded, revealed, or added on larger screens. They also have very little information available. Is the user on a tablet or phone in landscape mode or in a small browser window?
Web developers need to decide what to shrink, hide, or reposition on smaller screens - or more commonly, what to expand, reveal, or add on larger screens. However, they have very little information to work with. Is the user on a tablet or a landscape phone - or a small browser window?

We have to choose an arbitrary 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 commonly used breakpoints.
We have to choose an arbitrary viewport width at which the layout changes. This is called a **breakpoint**. This is an arbitrary amount of CSS pixels ([not device pixels](/en/pixels-vs-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.

Some images (like logos, icons, or buttons) can be immune to the layout shifts caused by these breakpoints (and are okay with [srcset density descriptors](/en/density-descriptors)).
Some images (like logos or icons or buttons) may be immune to the layout shifts caused by these breakpoints (and are fine with [srcset density descriptors](/en/density-descriptors)).

Main content images are limited by the size of their container. Typically, the main area of a page layout is constrained to a specific width, a `max-width`, on the largest screens, but on small screens the main content area fills the entire viewport.
Main content images are limited by the size of their container. Typically, the main content area of a page is restricted to a certain width, a `max-width`, on the largest screens, but on small screens, the main content area fills the entire viewport.

When you have more than one column at some breakpoints, it becomes difficult to compute the effective size rules because the percentage of viewport width taken up by the image changes.
If you have multiple columns at some breakpoints, it becomes harder to calculate the effective size rules since the percentage of viewport width that the image occupies will change.

### The easy way
### The Simple Method

That doesn't mean you should smash your head against the wall. You will likely get very far with the following approach:
That doesn't mean you have to sweat it though. You'll likely do just fine with the following approach:

1. At what size does the main column (or the container of the image) stop growing? Until that viewport width, we can use `100vw` for the `sizes` attribute of the image to indicate that the image takes up 100% of the viewport width.
2. What is the maximum width the container will ever be? We can set that as a fixed `width` for everything else.
1. At what size does the main column (or the image's container) stop growing? Up until that viewport width, we can use `100vw` on the `sizes` attribute of the image to indicate that the image should take up 100% of the viewport width.
2. What is the maximum width that container has ever reached? We can set that as a fixed `width` for anything else.

If your answer to 1 is 700px and your answer to 2 is 800px, you can use the following `sizes` attribute:
If your answer to question 1 is 700px and your answer to question 2 is 800px, you can use the following `sizes` attribute:

```html
<!-- These are CSS pixels, not device pixels or image pixels. -->
Expand All @@ -38,7 +37,7 @@ If your answer to 1 is 700px and your answer to 2 is 800px, you can use the foll



> You would think that the browser could kindly 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, that's their problem.
> You'd think the browser could perform all these calculations decently for us based on the CSS. Unfortunately, browsers are aggressively keen on selecting an image URL *before* downloading the stylesheets. So we have to perform the calculations ourselves, and if it's not perfect, it's their own fault.
=====================

Content prompt used:
Expand All @@ -52,7 +51,7 @@ Also carefully translate the title and description for the article; do not use &
2. Why some (but not all) breakpoints matter for your images

Metadata returned1. Breakpoints & Bilder
2. Warum manche (aber nicht alle) Breakpoints wichtig für Ihre Bilder sind
2. Warum einige (aber nicht alle) Breakpoints für Ihre Bilder wichtig sind


Roundtrip (isolated) prompt used:
Expand Down
56 changes: 26 additions & 30 deletions src/content/docs/de/_roundtrip_browser-picks-srcset.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,66 +1,62 @@
---
title: How the Browser selects
description: How the browser selects between images listed in the "srcset" attribute
taskInputHash: 21fa78dd27583003
title: How the Browser Chooses
description: >-
How the browser chooses between images listed in the srcset property
taskInputHash: 09ab2b098b259019
lang: en
date_published: '2023-04-03'
date_modified: '2023-04-03'
date_updated: '2023-04-03'
---
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.
How does the browser decide between the images listed in the `srcset` property? Here is a step-by-step guide with examples for both width and density specifications and how the browser decides based on device and viewport.

- 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.
- When `srcset` property is used in HTML, the browser uses a set of rules to select the most appropriate image from a list of provided sources. These rules depend on both the display properties of the device (resolution, pixel density) and the size of the viewport. The `srcset` property allows you to provide different images based on width (using the `w` descriptor) or pixel density (using the `x` descriptor). Let's go through each case with examples.

1. Width descriptor ("w"):
1\. Width Descriptor (`w`):

Assuming we have the following "srcset" attribute:
Assuming we have the following `srcset` property:

```html

<img src="example-small.jpg" srcset="example-small.jpg 400w, example-medium.jpg 800w, example-large.jpg 1600w" alt="Example image">

<img src="example-small.jpg" srcset="example-small.jpg 400w, example-medium.jpg 800w, example-large.jpg 1600w" alt="example image">
```

The browser will perform the following steps:
The browser will perform these steps:

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.
a. Determine 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 higher.

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:
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:

- example-small.jpg: 400 * 1 = 400px

- example-medium.jpg: 800 * 1 = 800px

- example-large.jpg: 1600 * 1 = 1600px

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.
c. Compare the effective widths with the viewport width. Assuming the viewport width is 420px. The browser selects the smallest image with an effective width greater than or equal to the viewport width. In this case, `example-medium.jpg` is chosen.

2. Density descriptor ("x"):
2\. Density Descriptor (`x`):

Assuming we have the following "srcset" attribute:
Assuming we have the following `srcset` property:

```html

<img src="example-1x.jpg" srcset="example-1x.jpg 1x, example-2x.jpg 2x, example-3x.jpg 3x" alt="Example image">

<img src="example-1x.jpg" srcset="example-1x.jpg 1x, example-2x.jpg 2x, example-3x.jpg 3x" alt="example image">
```

The browser will perform the following steps:
The browser will perform these steps:

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.
a. Determine 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 higher.

b. Compare the device's DPR with the "x" descriptors in the "srcset". In this case, we have three images with the following descriptors:
b. Compare the DPR of the device with the `x` descriptors in the `srcset`. In this case, we have three images with these descriptors:

- example-1x.jpg: 1x

- example-2x.jpg: 2x

- example-3x.jpg: 3x

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.
c. Choose the image with the `x` descriptor closest to the DPR of the device. For a device with a DPR of 1, the browser will choose `example-1x.jpg`. For a device with a DPR of 2, it will choose `example-2x.jpg`, and so on.

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:
It is important to note that you can also use the `sizes` property in conjunction with the `srcset` property to get more information on how the image will be displayed at different viewport widths. This is especially useful when using the width descriptor (`w`). Here is an example:

```html

<img src="example-small.jpg" srcset="example-small.jpg 400w, example-medium.jpg 800w, example-large.jpg 1600w" sizes="(max-width: 480px) 100vw, (max-width: 960px) 50vw,
```

=====================

Expand All @@ -75,7 +71,7 @@ Also carefully translate the title and description for the article; do not use &
2. How the browser chooses between images listed in the srcset attribute

Metadata returned1. Wie der Browser auswählt
2. Wie der Browser zwischen Bildern im "srcset"-Attribut auswählt
2. Wie der Browser zwischen Bildern wählt, die in der srcset-Eigenschaft aufgeführt sind


Roundtrip (isolated) prompt used:
Expand Down
47 changes: 23 additions & 24 deletions src/content/docs/de/_roundtrip_density-descriptors.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,35 +1,34 @@
---
title: Density descriptors and srcset
title: Density Descriptors & Srcset
description: Examples of using density descriptors in `srcset`
taskInputHash: 0a85d4f28fee785a
taskInputHash: bb5fed05291ed4a0
lang: en
ignore: '/* cSpell:locale de,en*/'
date_published: '2023-03-26'
date_modified: '2023-03-31'
date_updated: '2023-03-31'
date_published: '2023-04-03'
date_modified: '2023-04-03'
date_updated: '2023-04-03'
---
Srcset with density descriptors provides a simple and effective method for delivering 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.
Srcset with density descriptors provides a simple and effective way to serve the most appropriate image for each user's device, thereby improving performance and user experience. This guide will take you through the essentials of srcset with density descriptors and provide markup examples for your convenience.

## What is srcset with density descriptors?
## What is Srcset with Density Descriptors?

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 at different resolutions based on the pixel density of the user's display.
Srcset is an HTML attribute that allows you to specify multiple image sources for a single `<img>` element. Density descriptors (`x`) are used with srcset to provide images of different resolutions based on the pixel density of the user's display.

## When to use srcset with density descriptors?
## When to Use Srcset with Density Descriptors?

Using srcset with density descriptors is especially useful when you:
1. Want to provide high resolution images for high DPI displays (e.g. Retina displays) while using lower resolutions for standard displays.
2. Want to improve page rendering by providing the most appropriate image size for each user's device.
Srcset with density descriptors is particularly useful when you want to:
1. Display high-resolution images on high DPI screens (e.g. Retina displays) while serving low-resolution images on standard displays.
2. Improve page performance by serving the most appropriate image size for each user's device.

## Implementing srcset with density descriptors
## Implementing Srcset with Density Descriptors

To use srcset with density descriptors, follow these steps:
1. Prepare your images in different resolutions.
1. Prepare your images at different resolutions.
2. Add the `srcset` attribute to the `<img>` element, including the image sources and corresponding density descriptors.
3. Optionally, add the `sizes` attribute to set the size of the image on the screen.
3. Add the `sizes` attribute (optional) to specify the size of the image on the screen.

### Markup example
### Markup Example

Here is an example of how to implement srcset with density descriptors in your markup:
Here's an example of how you can implement srcset with density descriptors in your markup:

```html
<img src="example-image-1x.jpg"
Expand All @@ -38,11 +37,11 @@ Here is an example of how to implement srcset with density descriptors in your m
```

This markup example includes:
- **src**: The default image source to be displayed when the browser does not support srcset.
- **srcset**: The list of image sources and their density descriptors (1x, 2x, 3x). The browser chooses the most appropriate image based on the user's display.
- **alt**: A description of the image for accessibility purposes.
- **src** : The default image source that will be displayed if the browser doesn't support srcset.
- **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.
- **alt** : A description of the image for accessibility purposes.

And that's it! You have successfully implemented srcset with density descriptors, improving the performance and user experience of your website.
And that's it! You have successfully implemented srcset with density descriptors and improved the performance and user experience of your website.
=====================

Content prompt used:
Expand All @@ -55,8 +54,8 @@ Also carefully translate the title and description for the article; do not use &
1. Density descriptors & srcset
2. Examples of using density descriptors in `srcset`

Metadata returned1. Density-Descriptoren und Srcset
2. Beispiele für die Verwendung von Density-Descriptoren in `srcset`
Metadata returned1. Density-Deskriptoren & Srcset
2. Beispiele zur Verwendung von Density-Deskriptoren in `srcset`


Roundtrip (isolated) prompt used:
Expand Down
Loading