From 759d59914e2e7b3efc1005583bf6ec9a971602ea Mon Sep 17 00:00:00 2001 From: lilith Date: Mon, 3 Apr 2023 00:55:35 +0000 Subject: [PATCH] Update translations --- .../docs/de/_roundtrip_breakpoints.txt | 37 ++- .../de/_roundtrip_browser-picks-srcset.txt | 49 ++-- .../de/_roundtrip_density-descriptors.txt | 51 ++-- .../docs/de/_roundtrip_introduction.txt | 48 ++-- ..._roundtrip_lighthouse-performance-test.txt | 33 ++- .../docs/de/_roundtrip_picture-examples.txt | 34 ++- .../docs/de/_roundtrip_pixels-not-pixels.txt | 26 +- .../de/_roundtrip_specify-width-height.txt | 16 +- .../de/_roundtrip_when-to-use-picture.txt | 27 +- .../docs/de/_roundtrip_width-density.txt | 43 ++- src/content/docs/de/breakpoints.md | 35 ++- src/content/docs/de/browser-picks-srcset.md | 132 ++++----- src/content/docs/de/density-descriptors.md | 51 ++-- src/content/docs/de/introduction.md | 36 +-- .../docs/de/lighthouse-performance-test.md | 27 +- src/content/docs/de/picture-examples.md | 27 +- src/content/docs/de/pixels-not-pixels.md | 21 +- src/content/docs/de/specify-width-height.md | 19 +- src/content/docs/de/when-to-use-picture.md | 25 +- src/content/docs/de/width-density.md | 37 +-- src/content/docs/en/breakpoints.md | 4 +- src/content/docs/en/browser-picks-srcset.md | 4 +- src/content/docs/en/density-descriptors.md | 4 +- src/content/docs/en/introduction.md | 4 +- .../docs/en/lighthouse-performance-test.md | 4 +- src/content/docs/en/picture-examples.md | 4 +- src/content/docs/en/pixels-not-pixels.md | 4 +- src/content/docs/en/specify-width-height.md | 4 +- src/content/docs/en/when-to-use-picture.md | 4 +- src/content/docs/en/width-density.md | 4 +- .../docs/es/_roundtrip_breakpoints.txt | 38 ++- .../es/_roundtrip_browser-picks-srcset.txt | 51 ++-- .../es/_roundtrip_density-descriptors.txt | 43 ++- .../docs/es/_roundtrip_introduction.txt | 44 ++- ..._roundtrip_lighthouse-performance-test.txt | 39 ++- .../docs/es/_roundtrip_picture-examples.txt | 39 +-- .../docs/es/_roundtrip_pixels-not-pixels.txt | 21 +- .../es/_roundtrip_specify-width-height.txt | 27 +- .../es/_roundtrip_when-to-use-picture.txt | 22 +- .../docs/es/_roundtrip_width-density.txt | 29 +- src/content/docs/es/breakpoints.md | 37 ++- src/content/docs/es/browser-picks-srcset.md | 53 ++-- src/content/docs/es/density-descriptors.md | 57 ++-- src/content/docs/es/introduction.md | 31 +- .../docs/es/lighthouse-performance-test.md | 37 ++- src/content/docs/es/picture-examples.md | 43 ++- src/content/docs/es/pixels-not-pixels.md | 21 +- src/content/docs/es/specify-width-height.md | 21 +- src/content/docs/es/when-to-use-picture.md | 26 +- src/content/docs/es/width-density.md | 31 +- .../docs/fr/_roundtrip_breakpoints.txt | 43 +-- .../fr/_roundtrip_browser-picks-srcset.txt | 62 ++-- .../fr/_roundtrip_density-descriptors.txt | 43 ++- .../docs/fr/_roundtrip_introduction.txt | 45 +-- ..._roundtrip_lighthouse-performance-test.txt | 43 ++- .../docs/fr/_roundtrip_picture-examples.txt | 30 +- .../docs/fr/_roundtrip_pixels-not-pixels.txt | 24 +- .../fr/_roundtrip_specify-width-height.txt | 17 +- .../fr/_roundtrip_when-to-use-picture.txt | 23 +- .../docs/fr/_roundtrip_width-density.txt | 23 +- src/content/docs/fr/breakpoints.md | 39 ++- src/content/docs/fr/browser-picks-srcset.md | 33 ++- src/content/docs/fr/density-descriptors.md | 38 ++- src/content/docs/fr/introduction.md | 31 +- .../docs/fr/lighthouse-performance-test.md | 39 ++- src/content/docs/fr/picture-examples.md | 108 +++---- src/content/docs/fr/pixels-not-pixels.md | 23 +- src/content/docs/fr/specify-width-height.md | 17 +- src/content/docs/fr/when-to-use-picture.md | 23 +- src/content/docs/fr/width-density.md | 28 +- .../docs/it/_roundtrip_breakpoints.txt | 44 +-- .../it/_roundtrip_browser-picks-srcset.txt | 37 +-- .../it/_roundtrip_density-descriptors.txt | 44 ++- .../docs/it/_roundtrip_introduction.txt | 42 ++- ..._roundtrip_lighthouse-performance-test.txt | 32 +-- .../docs/it/_roundtrip_picture-examples.txt | 22 +- .../docs/it/_roundtrip_pixels-not-pixels.txt | 27 +- .../it/_roundtrip_specify-width-height.txt | 19 +- .../it/_roundtrip_when-to-use-picture.txt | 31 +- .../docs/it/_roundtrip_width-density.txt | 25 +- src/content/docs/it/breakpoints.md | 39 +-- src/content/docs/it/browser-picks-srcset.md | 29 +- src/content/docs/it/density-descriptors.md | 58 ++-- src/content/docs/it/introduction.md | 39 ++- .../docs/it/lighthouse-performance-test.md | 21 +- src/content/docs/it/picture-examples.md | 37 ++- src/content/docs/it/pixels-not-pixels.md | 21 +- src/content/docs/it/specify-width-height.md | 17 +- src/content/docs/it/when-to-use-picture.md | 23 +- src/content/docs/it/width-density.md | 29 +- .../docs/ja/_roundtrip_breakpoints.txt | 39 ++- .../ja/_roundtrip_browser-picks-srcset.txt | 42 +-- .../ja/_roundtrip_density-descriptors.txt | 63 ++--- .../docs/ja/_roundtrip_introduction.txt | 58 ++-- ..._roundtrip_lighthouse-performance-test.txt | 31 +- .../docs/ja/_roundtrip_picture-examples.txt | 34 ++- .../docs/ja/_roundtrip_pixels-not-pixels.txt | 23 +- .../ja/_roundtrip_specify-width-height.txt | 23 +- .../ja/_roundtrip_when-to-use-picture.txt | 31 +- .../docs/ja/_roundtrip_width-density.txt | 41 ++- src/content/docs/ja/breakpoints.md | 37 ++- src/content/docs/ja/browser-picks-srcset.md | 126 ++++----- src/content/docs/ja/density-descriptors.md | 59 ++-- src/content/docs/ja/introduction.md | 32 +-- .../docs/ja/lighthouse-performance-test.md | 27 +- src/content/docs/ja/picture-examples.md | 102 +++---- src/content/docs/ja/pixels-not-pixels.md | 21 +- src/content/docs/ja/specify-width-height.md | 21 +- src/content/docs/ja/when-to-use-picture.md | 28 +- src/content/docs/ja/width-density.md | 37 ++- .../docs/sv/_roundtrip_breakpoints.txt | 43 +-- .../sv/_roundtrip_browser-picks-srcset.txt | 33 ++- .../sv/_roundtrip_density-descriptors.txt | 51 ++-- .../docs/sv/_roundtrip_introduction.txt | 37 ++- ..._roundtrip_lighthouse-performance-test.txt | 32 +-- .../docs/sv/_roundtrip_picture-examples.txt | 114 ++++---- .../docs/sv/_roundtrip_pixels-not-pixels.txt | 23 +- .../sv/_roundtrip_specify-width-height.txt | 25 +- .../sv/_roundtrip_when-to-use-picture.txt | 32 +-- .../docs/sv/_roundtrip_width-density.txt | 41 ++- src/content/docs/sv/breakpoints.md | 41 +-- src/content/docs/sv/browser-picks-srcset.md | 127 +++++---- src/content/docs/sv/density-descriptors.md | 56 ++-- src/content/docs/sv/introduction.md | 32 +-- .../docs/sv/lighthouse-performance-test.md | 25 +- src/content/docs/sv/picture-examples.md | 29 +- src/content/docs/sv/pixels-not-pixels.md | 21 +- src/content/docs/sv/specify-width-height.md | 19 +- src/content/docs/sv/when-to-use-picture.md | 28 +- src/content/docs/sv/width-density.md | 35 ++- .../docs/zh/_roundtrip_breakpoints.txt | 37 ++- .../zh/_roundtrip_browser-picks-srcset.txt | 39 +-- .../zh/_roundtrip_density-descriptors.txt | 42 ++- .../docs/zh/_roundtrip_introduction.txt | 69 +++-- ..._roundtrip_lighthouse-performance-test.txt | 27 +- .../docs/zh/_roundtrip_picture-examples.txt | 36 ++- .../docs/zh/_roundtrip_pixels-not-pixels.txt | 25 +- .../zh/_roundtrip_specify-width-height.txt | 27 +- .../zh/_roundtrip_when-to-use-picture.txt | 31 +- .../docs/zh/_roundtrip_width-density.txt | 42 ++- src/content/docs/zh/breakpoints.md | 41 ++- src/content/docs/zh/browser-picks-srcset.md | 33 ++- src/content/docs/zh/density-descriptors.md | 51 ++-- src/content/docs/zh/introduction.md | 26 +- .../docs/zh/lighthouse-performance-test.md | 27 +- src/content/docs/zh/picture-examples.md | 104 +++---- src/content/docs/zh/pixels-not-pixels.md | 21 +- src/content/docs/zh/specify-width-height.md | 21 +- src/content/docs/zh/when-to-use-picture.md | 27 +- src/content/docs/zh/width-density.md | 35 +-- .../de/_roundtrip_create-a-carousel.txt | 32 +-- .../de/_roundtrip_create-a-gallery.txt | 33 ++- .../de/_roundtrip_css-effects-and-borders.txt | 22 +- src/content/imgstyle/de/_roundtrip_faq.txt | 77 +++-- .../de/_roundtrip_full-css-reference.txt | 33 +-- .../imgstyle/de/_roundtrip_introduction.txt | 145 ++-------- .../imgstyle/de/_roundtrip_pad-an-image.txt | 44 +-- .../de/_roundtrip_tailwindCSS-img-helpers.txt | 37 +-- .../de/_roundtrip_view-full-screen-image.txt | 37 ++- src/content/imgstyle/de/create-a-carousel.md | 34 ++- src/content/imgstyle/de/create-a-gallery.md | 29 +- .../imgstyle/de/css-effects-and-borders.md | 43 ++- src/content/imgstyle/de/faq.md | 148 +++++----- src/content/imgstyle/de/full-css-reference.md | 35 ++- src/content/imgstyle/de/introduction.md | 15 +- src/content/imgstyle/de/pad-an-image.md | 45 +-- .../imgstyle/de/tailwindCSS-img-helpers.md | 35 ++- .../imgstyle/de/view-full-screen-image.md | 45 ++- src/content/imgstyle/en/create-a-carousel.md | 4 +- src/content/imgstyle/en/create-a-gallery.md | 4 +- .../imgstyle/en/css-effects-and-borders.md | 4 +- src/content/imgstyle/en/faq.md | 4 +- src/content/imgstyle/en/full-css-reference.md | 4 +- src/content/imgstyle/en/introduction.md | 4 +- src/content/imgstyle/en/pad-an-image.md | 4 +- .../imgstyle/en/tailwindCSS-img-helpers.md | 4 +- .../imgstyle/en/view-full-screen-image.md | 4 +- .../es/_roundtrip_create-a-carousel.txt | 31 +- .../es/_roundtrip_create-a-gallery.txt | 29 +- .../es/_roundtrip_css-effects-and-borders.txt | 24 +- src/content/imgstyle/es/_roundtrip_faq.txt | 33 ++- .../es/_roundtrip_full-css-reference.txt | 39 +-- .../imgstyle/es/_roundtrip_introduction.txt | 122 +++++--- .../imgstyle/es/_roundtrip_pad-an-image.txt | 36 +-- .../es/_roundtrip_tailwindCSS-img-helpers.txt | 30 +- .../es/_roundtrip_view-full-screen-image.txt | 177 ++++++------ src/content/imgstyle/es/create-a-carousel.md | 29 +- src/content/imgstyle/es/create-a-gallery.md | 40 +-- .../imgstyle/es/css-effects-and-borders.md | 42 ++- src/content/imgstyle/es/faq.md | 69 ++--- src/content/imgstyle/es/full-css-reference.md | 71 ++--- src/content/imgstyle/es/introduction.md | 17 +- src/content/imgstyle/es/pad-an-image.md | 38 +-- .../imgstyle/es/tailwindCSS-img-helpers.md | 25 +- .../imgstyle/es/view-full-screen-image.md | 45 +-- .../fr/_roundtrip_create-a-carousel.txt | 23 +- .../fr/_roundtrip_create-a-gallery.txt | 21 +- .../fr/_roundtrip_css-effects-and-borders.txt | 23 +- src/content/imgstyle/fr/_roundtrip_faq.txt | 59 ++-- .../fr/_roundtrip_full-css-reference.txt | 51 ++-- .../imgstyle/fr/_roundtrip_introduction.txt | 85 +----- .../imgstyle/fr/_roundtrip_pad-an-image.txt | 43 ++- .../fr/_roundtrip_tailwindCSS-img-helpers.txt | 26 +- .../fr/_roundtrip_view-full-screen-image.txt | 45 ++- src/content/imgstyle/fr/create-a-carousel.md | 25 +- src/content/imgstyle/fr/create-a-gallery.md | 23 +- .../imgstyle/fr/css-effects-and-borders.md | 41 +-- src/content/imgstyle/fr/faq.md | 73 ++--- src/content/imgstyle/fr/full-css-reference.md | 49 ++-- src/content/imgstyle/fr/introduction.md | 17 +- src/content/imgstyle/fr/pad-an-image.md | 39 ++- .../imgstyle/fr/tailwindCSS-img-helpers.md | 32 +-- .../imgstyle/fr/view-full-screen-image.md | 35 ++- .../it/_roundtrip_create-a-carousel.txt | 34 +-- .../it/_roundtrip_create-a-gallery.txt | 27 +- .../it/_roundtrip_css-effects-and-borders.txt | 33 +-- src/content/imgstyle/it/_roundtrip_faq.txt | 81 +++--- .../it/_roundtrip_full-css-reference.txt | 24 +- .../imgstyle/it/_roundtrip_introduction.txt | 128 +++++++-- .../imgstyle/it/_roundtrip_pad-an-image.txt | 35 +-- .../it/_roundtrip_tailwindCSS-img-helpers.txt | 40 ++- .../it/_roundtrip_view-full-screen-image.txt | 38 +-- src/content/imgstyle/it/create-a-carousel.md | 31 +- src/content/imgstyle/it/create-a-gallery.md | 25 +- .../imgstyle/it/css-effects-and-borders.md | 34 +-- src/content/imgstyle/it/faq.md | 50 ++-- src/content/imgstyle/it/full-css-reference.md | 28 +- src/content/imgstyle/it/introduction.md | 19 +- src/content/imgstyle/it/pad-an-image.md | 37 ++- .../imgstyle/it/tailwindCSS-img-helpers.md | 37 ++- .../imgstyle/it/view-full-screen-image.md | 43 +-- .../ja/_roundtrip_create-a-carousel.txt | 41 +-- .../ja/_roundtrip_create-a-gallery.txt | 27 +- .../ja/_roundtrip_css-effects-and-borders.txt | 71 +++-- src/content/imgstyle/ja/_roundtrip_faq.txt | 77 +++-- .../ja/_roundtrip_full-css-reference.txt | 52 ++-- .../imgstyle/ja/_roundtrip_introduction.txt | 50 ++-- .../imgstyle/ja/_roundtrip_pad-an-image.txt | 42 ++- .../ja/_roundtrip_tailwindCSS-img-helpers.txt | 40 ++- .../ja/_roundtrip_view-full-screen-image.txt | 44 +-- src/content/imgstyle/ja/create-a-carousel.md | 32 +-- src/content/imgstyle/ja/create-a-gallery.md | 42 +-- .../imgstyle/ja/css-effects-and-borders.md | 71 +++-- src/content/imgstyle/ja/faq.md | 70 ++--- src/content/imgstyle/ja/full-css-reference.md | 19 +- src/content/imgstyle/ja/introduction.md | 17 +- src/content/imgstyle/ja/pad-an-image.md | 37 ++- .../imgstyle/ja/tailwindCSS-img-helpers.md | 36 ++- .../imgstyle/ja/view-full-screen-image.md | 49 ++-- .../sv/_roundtrip_create-a-carousel.txt | 32 +-- .../sv/_roundtrip_create-a-gallery.txt | 24 +- .../sv/_roundtrip_css-effects-and-borders.txt | 24 +- src/content/imgstyle/sv/_roundtrip_faq.txt | 56 ++-- .../sv/_roundtrip_full-css-reference.txt | 193 +++++++------ .../imgstyle/sv/_roundtrip_introduction.txt | 134 ++------- .../imgstyle/sv/_roundtrip_pad-an-image.txt | 42 +-- .../sv/_roundtrip_tailwindCSS-img-helpers.txt | 33 +-- .../sv/_roundtrip_view-full-screen-image.txt | 50 ++-- src/content/imgstyle/sv/create-a-carousel.md | 27 +- src/content/imgstyle/sv/create-a-gallery.md | 29 +- .../imgstyle/sv/css-effects-and-borders.md | 32 +-- src/content/imgstyle/sv/faq.md | 67 ++--- src/content/imgstyle/sv/full-css-reference.md | 267 +++++++++--------- src/content/imgstyle/sv/introduction.md | 17 +- src/content/imgstyle/sv/pad-an-image.md | 42 +-- .../imgstyle/sv/tailwindCSS-img-helpers.md | 35 ++- .../imgstyle/sv/view-full-screen-image.md | 84 +++--- .../zh/_roundtrip_create-a-carousel.txt | 33 ++- .../zh/_roundtrip_create-a-gallery.txt | 33 +-- .../zh/_roundtrip_css-effects-and-borders.txt | 25 +- src/content/imgstyle/zh/_roundtrip_faq.txt | 83 +++--- .../zh/_roundtrip_full-css-reference.txt | 50 ++-- .../imgstyle/zh/_roundtrip_introduction.txt | 92 +----- .../imgstyle/zh/_roundtrip_pad-an-image.txt | 35 ++- .../zh/_roundtrip_tailwindCSS-img-helpers.txt | 40 +-- .../zh/_roundtrip_view-full-screen-image.txt | 36 +-- src/content/imgstyle/zh/create-a-carousel.md | 42 ++- src/content/imgstyle/zh/create-a-gallery.md | 41 ++- .../imgstyle/zh/css-effects-and-borders.md | 29 +- src/content/imgstyle/zh/faq.md | 66 ++--- src/content/imgstyle/zh/full-css-reference.md | 74 ++--- src/content/imgstyle/zh/introduction.md | 19 +- src/content/imgstyle/zh/pad-an-image.md | 39 ++- .../imgstyle/zh/tailwindCSS-img-helpers.md | 35 ++- .../imgstyle/zh/view-full-screen-image.md | 44 ++- 285 files changed, 5534 insertions(+), 5935 deletions(-) diff --git a/src/content/docs/de/_roundtrip_breakpoints.txt b/src/content/docs/de/_roundtrip_breakpoints.txt index d2d48bc..2cd4880 100644 --- a/src/content/docs/de/_roundtrip_breakpoints.txt +++ b/src/content/docs/de/_roundtrip_breakpoints.txt @@ -1,44 +1,41 @@ --- title: Breakpoints & Images description: Why some (but not all) breakpoints are important for your images -taskInputHash: 57ab72e7e951b197 +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. To use `srcset` and `sizes`, we need to know at what screen size 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 have to decide what should be resized, hidden, or shifted on smaller screens – or 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? -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 need to set an arbitrary screen width at which the layout changes. This is called a **breakpoint**. It's an arbitrary number 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 common 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 be okay 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 constrained 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 screen. -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 more than one column at some breakpoints, it becomes harder to calculate the effective sizing rules, as the percentage of screen width that the image takes up changes. -### 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 being said, don't overthink this. You're likely to do very well with the following approximation: -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 to this screen size, we can use `100vw` for the image's `sizes` attribute, meaning the image takes up 100% of the screen width. +2. What is the maximum width the container will ever reach? We can set that as a fixed `width` for everything else. -If your answer to 1 is 700px and your answer to 2 is 800px, you can use the following `sizes` attribute: +If your answers were 700px for 1 and 800px for 2, you can use the following `sizes` attribute: ```html ``` - - -> 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. +> One might think that the browser could handle all these calculations nicely for us based on the CSS. Unfortunately, browsers are aggressively looking to select an image URL *before* downloading stylesheets. So, we have to do the calculations ourselves, and they're fine with us not doing it perfectly. ===================== Content prompt used: @@ -52,7 +49,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: diff --git a/src/content/docs/de/_roundtrip_browser-picks-srcset.txt b/src/content/docs/de/_roundtrip_browser-picks-srcset.txt index f129def..9e37f45 100644 --- a/src/content/docs/de/_roundtrip_browser-picks-srcset.txt +++ b/src/content/docs/de/_roundtrip_browser-picks-srcset.txt @@ -1,28 +1,30 @@ --- -title: How the Browser selects -description: How the browser selects between images listed in the "srcset" attribute -taskInputHash: 21fa78dd27583003 +title: How the browser selects +description: >- + How the browser chooses between images listed in the srcset attribute +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 select between images listed in the srcset attribute? Here are the steps with examples for both width and density specifications and how the browser decides based on the 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 the `srcset` attribute is used in HTML, the browser uses a set of rules to select the most suitable image from a list of sources. These rules depend on the display properties of the device (resolution, pixel density) and viewport size. 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 with examples. -1. Width descriptor ("w"): +1\. Width descriptor (`w`): -Assuming we have the following "srcset" attribute: +Assuming we have the following `srcset` attribute: ```html - -Example image - +Example Image ``` The browser will perform the following 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 @@ -30,23 +32,21 @@ b. Calculate the effective width for each image in the "srcset". Multiply the wi - 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. Assume the viewport width is 420px. The browser selects the smallest image with an effective width that is greater than or equal to the viewport width. In this case, it will choose `example-medium.jpg`. -2. Density descriptor ("x"): +2\. Pixel density descriptor (`x`): -Assuming we have the following "srcset" attribute: +Assuming we have the following `srcset` attribute: ```html - -Example image - +Example Image ``` The browser will perform the following 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 device's DPR with the `x` descriptors in the `srcset`. In this case, we have three images with the following descriptors: - example-1x.jpg: 1x @@ -54,14 +54,13 @@ b. Compare the device's DPR with the "x" descriptors in the "srcset". In this ca - 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. Select the image with the `x` descriptor that is 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. -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` attribute in combination with the `srcset` attribute to provide additional information on how the image should be displayed at different viewport widths. This is particularly useful when using the width descriptor (`w`). Here is an example: ```html - ` 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 specifying multiple image sources for a single `` element. Density descriptors (`x`) are used in conjunction with Srcset to provide images with 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. +Using Srcset with density descriptors is particularly useful when you want to: +1. Deliver high-resolution images to high-resolution displays (e.g., Retina Displays), while providing lower resolutions for standard displays. +2. Improve page performance by providing the best-suited image size for each device. -## Implementing srcset with density descriptors +## Implementation of Srcset with Density Descriptors -To use srcset with density descriptors, follow these steps: +Here's how to use Srcset with density descriptors: 1. Prepare your images in different resolutions. -2. Add the `srcset` attribute to the `` 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. +2. Add the `srcset` attribute to the `` element, including the image sources and their corresponding density descriptors. +3. Optionally, add the `sizes` attribute to specify the image size to be displayed on the screen. -### Markup example +### Example Markup -Here is an example of how to implement srcset with density descriptors in your markup: +Here's an example showing how to implement Srcset with density descriptors in the markup: ```html sizes -description: An efficient and definitive guide to responsive images until 2023 -taskInputHash: f8e7c31ccf577572 +title: '`srcset` & `` sizes' +description: >- + An efficient and confident guide to responsive images until 2023 +taskInputHash: dc8c8594bdd45d91 lang: en -ignore: '/* cSpell:locale de,en*/' sidebar_sort_priority: 1000 -date_published: '2023-03-23' -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' --- -**An efficient and definitive guide to images until 2023** +**An efficient and confident guide to images until 2023** -See the sidebar for the detailed analysis. This is the quick reference for updating these `` tags to support modern devices of all sizes and pixel densities. You should [know that pixel ≠ pixel](/en/pixel-not-a-pixel) and `devicePixelRatio` is more likely to be 3.875 than 1:1. Modern phones pretend to be 320-428px wide to improve legibility (in CSS pixels), but have many device pixels per CSS pixel. +Check the sidebar for depth. This is a quick reference for upgrading these `` tags to handle modern devices in all their various sizes and pixel densities. You should [know that pixels != pixels](/en/pixels-not-pixels) and `devicePixelRatio` is more likely to be 3.875 than 1:1. Modern phones pretend to be 320-428px wide to increase readability (in CSS pixels), but have many device pixels per CSS pixel. -> If your image size never changes no matter how narrow you make the browser window, consider using a [density descriptor](/en/density-descriptors) instead. This is often suitable for logos, icons, and buttons. +> If your image never changes size regardless of browser window width, you should use a [density descriptor](/en/density-descriptors) instead. This is often appropriate for logos, icons, and buttons. -Do you know what your [breakpoints](/en/breakpoints) are? You’ll need those numbers to fine-tune the solution below – and at least the viewport breakpoint where the main content area stops growing. +Do you know what your [breakpoints](/en/breakpoints) are? You need those numbers to fine-tune the solution below - and at least to know the viewport width breakpoint where the main content stops growing. ### The easy method ```html dog riding on a bike + sizes="(max-width: 700px) 100vw, 800px" + alt="Dog riding bike" /> + And that below that viewport width, this image takes up 100% of the width, but + above that viewport width, the image is limited to 800 CSS pixels wide. --> - + ``` + +{{Note that the original text referred to a specific date in the future, but it makes more sense to translate it to a more general statement.}} ===================== Content prompt used: @@ -48,8 +50,8 @@ Also carefully translate the title and description for the article; do not use & 1. srcset & sizes 2. An Efficient and Opinionated Guide to Responsive Images for 2023 -Metadata returned1. srcset und sizes - 2. Ein effizienter und dezidierter Leitfaden für responsive Bilder bis 2023 +Metadata returned1. `srcset` & ``-Größen +2. Ein effizienter und entschlossener Leitfaden für reaktionsschnelle Bilder bis 2023 Roundtrip (isolated) prompt used: diff --git a/src/content/docs/de/_roundtrip_lighthouse-performance-test.txt b/src/content/docs/de/_roundtrip_lighthouse-performance-test.txt index de4e2f1..95c1e36 100644 --- a/src/content/docs/de/_roundtrip_lighthouse-performance-test.txt +++ b/src/content/docs/de/_roundtrip_lighthouse-performance-test.txt @@ -1,28 +1,27 @@ --- -title: Testing Performance with Lighthouse -description: Steps for testing a website's performance using Lighthouse -taskInputHash: ec9606eee206cc98 +title: Test performance with Lighthouse +description: Steps to check a website's performance using Lighthouse +taskInputHash: 26eb06d37d959148 lang: en -ignore: '/* cSpell:locale de,en*/' -date_published: '2023-03-24' -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' --- -How do you test your website's performance using Lighthouse? +How to test your website's performance with Lighthouse? -> Lighthouse is a tool that allows for the measurement of a website's performance, accessibility, and other aspects. To test your website's performance using Lighthouse, follow these steps: +> Lighthouse is a tool that can be used to measure a website's performance, accessibility, and other aspects. Follow these steps to test your website's performance using Lighthouse: > -> 1. Open the Google Chrome web browser and navigate to the page you wish to test. +> 1. Open the Google Chrome web browser and navigate to the page you want to test. > -> 2. Click on the three dots in the upper right corner of the browser window, then select "More Tools" and then "Developer Tools," or simply use the keyboard shortcut "Ctrl+Shift+I" (Windows, Linux) or "Command+Option+I" (macOS). +> 2. Click on the three dots in the top right corner of the browser window and then select "More Tools" and then "Developer Tools" or simply use the keyboard shortcut "Ctrl+Shift+I" (Windows, Linux) or "Command+Option+I" (macOS). > -> 3. In the Developer Tools window, click on the Lighthouse icon on the left side of the window, or press "Ctrl+Shift+P" (Windows, Linux) or "Command+Shift+P" (macOS) to open the Command Menu. Type "Lighthouse" and select "Generate report." +> 3. In the Developer Tools panel, click on the Lighthouse icon on the left panel or press "Ctrl+Shift+P" (Windows, Linux) or "Command+Shift+P" (macOS) to open the command menu. Then type "Lighthouse" and select "Generate Report". > -> 4. In the Lighthouse dialog box, select the performance and other relevant options you wish to test, then click "Generate report." +> 4. In the Lighthouse dialog box, select the performance and other relevant options you want to test, and then click "Generate Report". > -> 5. Once Lighthouse completes its analysis, you will see a report with scores and recommendations for improving your website's performance, accessibility, and other areas. +> 5. After Lighthouse completes the analysis, a report will be displayed with scores and recommendations for improving your website's performance, accessibility, and other areas. > -> By following these steps, you can use Lighthouse to test and optimize your website's performance, which can improve user experience and search engine rankings. +> By following these steps, you can use Lighthouse to test and optimize your website's performance, which can help improve user experience and search engine rankings. ===================== Content prompt used: @@ -35,8 +34,8 @@ Also carefully translate the title and description for the article; do not use & 1. Test performance with Lighthouse 2. Steps on how to test a website's performance using Lighthouse -Metadata returned1. Testen der Leistung mit Lighthouse -2. Schritte zum Testen der Leistung einer Website mit Lighthouse +Metadata returned1. Testen Sie die Leistung mit Lighthouse +2. Schritte zur Überprüfung der Leistung einer Website mithilfe von Lighthouse Roundtrip (isolated) prompt used: diff --git a/src/content/docs/de/_roundtrip_picture-examples.txt b/src/content/docs/de/_roundtrip_picture-examples.txt index b3a5396..05d1aff 100644 --- a/src/content/docs/de/_roundtrip_picture-examples.txt +++ b/src/content/docs/de/_roundtrip_picture-examples.txt @@ -1,13 +1,16 @@ --- -title: Examples for usage of element +title: Examples of using the element description: >- - Provides examples for the usage of the element for responsive images, art direction, and various image formats. -taskInputHash: aace1b3e0a9751e5 + Examples of using the element for responsive images, art direction, and different image formats +taskInputHash: b441f3138e70c382 lang: en +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Here are a few examples for the usage of the `` element and their explanations: +Here are a few examples of using the `` element and their explanations: -1. Example for responsive images: +1. Example of responsive images: ```html @@ -17,38 +20,41 @@ Here are a few examples for the usage of the `` element and their expla ``` -Explanation: In this example, the `` element is used to provide different image sources for different screen sizes. The `` elements specify the different image sources using the `srcset` attribute and the `media` attribute to define the conditions under which each source should be used. The `` element is used as fallback for older browsers or if the conditions specified in the `` elements are not met. +Explanation: In this example, the `` element is used to provide different image sources for different screen sizes. The `` elements specify the different image sources using the "srcset" attribute and the "media" attribute to define the conditions under which each source should be used. The `` element is used as a fallback for older browsers or when the conditions in the `` elements are not met. -2. Example for Art Direction: +2. Example of art direction: ```html + An image ``` -Explanation: In this example, the `` element is used to provide different image sources based on the orientation of the device. The `` element with the `media` attribute set to `(orientation: landscape)` specifies an image source for wide screens while the `` element specifies an image source for portrait screens. +Explanation: In this example, the `` element is used to provide different image sources depending on the orientation of the device. The `` element with the "media" attribute set to "(orientation: landscape)" specifies an image source for wide screens, while the `` element specifies an image source for portrait screens. -3. Example for various image formats: +3. Example of different image formats: ```html + + An image ``` -Explanation: In this example, the `` element is used to provide different image sources for various image formats. The `` elements specify different image sources using the `srcset` attribute and the `type` attribute to define the image format. The `` element is used as fallback for older browsers that do not support the `` element. +Explanation: In this example, the `` element is used to provide different image sources for different image formats. The `` elements specify different image sources using the "srcset" attribute and the "type" attribute to specify the image format. The `` element is used as a fallback for older browsers that do not support the `` element. ## Breakpoints -In responsive design, breakpoints are used to define when the layout of a website or application should change based on the size of the viewport. Breakpoints are typically defined with media queries in CSS that apply different styles depending on the screen width. These breakpoints can be used in conjunction with the `` element to provide different image sources for different screen sizes. +In responsive design, breakpoints are used to define when the layout of a website or application should change based on the size of the viewport. Breakpoints are typically defined using media queries in CSS that apply different styles depending on the screen width. These breakpoints can be used in conjunction with the `` element to provide different image sources for different screen sizes. -In the first example above, we used the `media` attribute to specify the screen width at which each source should be used. If the screen width is greater than or equal to 768 pixels, the `image-large.jpg` source will be used. If the screen width is greater than or equal to 480 pixels but less than 768 pixels, `image-medium.jpg` source will be used. If the screen width is less than 480 pixels, the `image-small.jpg` source will be used. This allows appropriately sized images to be provided for each device, reducing page load times and improving the user experience. +For example, in the first example above, we used the `media` attribute to set the screen width under which each source should be used. If the screen width is greater than or equal to 768 pixels, the `image-large.jpg` source will be used. If the screen width is greater than or equal to 480 pixels but less than 768 pixels, the `image-medium.jpg` source will be used, and if the screen width is less than 480 pixels, the `image-small.jpg` source will be used. This allows us to use appropriate image sizes for each device, which reduces page load times and improves the user experience. -Breakpoints can be defined for any screen size, and multiple breakpoints can be used to create layouts that respond to a wide range of devices. By combining breakpoints with the `` element, flexible and responsive designs can be created that look great on any device. +Breakpoints can be defined at any screen size, and multiple breakpoints can be used to create layouts that respond to a wide range of devices. By combining breakpoints with the `` element, flexible and responsive designs can be created that look great on any device. ===================== Content prompt used: @@ -62,7 +68,7 @@ Also carefully translate the title and description for the article; do not use & 2. Provides examples using the element, for responsive images, art direction and different image formats Metadata returned1. Beispiele für die Verwendung des -Elements -2. Bietet Beispiele für die Verwendung des -Elements für responsive Bilder, Art Direction und verschiedene Bildformate. +2. Beispiele zur Verwendung des -Elements für responsive Bilder, Art Direction und unterschiedliche Bildformate Roundtrip (isolated) prompt used: diff --git a/src/content/docs/de/_roundtrip_pixels-not-pixels.txt b/src/content/docs/de/_roundtrip_pixels-not-pixels.txt index 0055c57..0f511c6 100644 --- a/src/content/docs/de/_roundtrip_pixels-not-pixels.txt +++ b/src/content/docs/de/_roundtrip_pixels-not-pixels.txt @@ -1,23 +1,25 @@ --- title: px ≠ Pixel -description: Device Pixels ≠ Browser Pixels ≠ Image Pixels -taskInputHash: 6bf2840ae3339b2e +description: Device pixel ≠ browser pixels ≠ image pixels +taskInputHash: b857216a5693bfeb lang: en -ignore: '/* cSpell:locale de,en*/' sidebar_sort_priority: 900 -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' --- -### Device Pixels ≠ Browser Pixels ≠ Image Pixels +### Device pixel ≠ Browser px ≠ Image pixel -Thanks to Apple, CSS and HTML pixels (`px`) almost never correspond to a single device/printer pixel. The `devicePixelRatio` on my phone is 3.875; [how high is yours?](https://www.mydevice.io/) +Thanks to Apple, CSS and HTML pixels (`px`) almost always correspond to several device/printer pixels. The `devicePixelRatio` on my phone is 3.875; [what's yours?](https://www.mydevice.io/) -My desktop `devicePixelRatio` changes as I zoom in on the browser, but it is typically 1.5 (my `System > Display > Scale` is set to 150%, after all). +On my desktop computer, the `devicePixelRatio` changes when zooming, but by default it's 1.5 (my `System > Display > Scale` is 150%). -Image files (except for SVG) decode to a grid of pixels. **Unfortunately, it is difficult to display image pixels perfectly at a 1:1 ratio with device pixels -- but with `srcset`, you can get *close enough*, and some JavaScript can adjust the size of the HTML element after it loads if you have a really compelling reason for perfect parity, though such black arts will not be revealed here.** +Image files (except SVG) decode to a grid of pixels. **It's frustratingly difficult to have image pixels be represented at a 1:1 ratio with device pixels - but with `srcset`, you can get *close enough***. A bit of JavaScript can adjust the size of the HTML element after it loads, if you have really good reasons for such a perfect match. But such forbidden arts won't be revealed here. -> Other absolute [units (in, pc, pt, mm, cm, Q)](https://developer.mozilla.org/en-US/docs/Web/CSS/length) are defined in terms of the number of CSS pixels they represent, pretending that everything is 96dpi. Developers should generally avoid absolute units, opting for units that derive from font size or viewport/container dimensions. Mismatched units can break a layout when the user adjusts the `Accessibility > Text Size` multiplier, when the browser zooms, or when the device is rotated. Of course, you should test all of these things before publishing your site. +> Other absolute [units (in, pc, pt, mm, cm, Q)](https://developer.mozilla.org/en-US/docs/Web/CSS/length) are defined as if everything were 96dpi. Developers avoid absolute units because it's usually better to use units derived from font size or viewport/container dimensions. Inappropriate units can break a layout when the user changes their `Accessibility > Text Size` multiplier, the browser zooms, or the device rotates. You should test all of this before publishing your site - that goes without saying. + +{{Note that the term used here is not the technical term...}} +There you have it! ===================== Content prompt used: @@ -31,7 +33,7 @@ Also carefully translate the title and description for the article; do not use & 2. Device px ≠ browser px ≠ image px Metadata returned1. px ≠ Pixel -2. Geräte-Pixel ≠ Browser-Pixel ≠ Bild-Pixel +2. Gerätepx ≠ Browser-Pixel ≠ Bild-Pixel Roundtrip (isolated) prompt used: diff --git a/src/content/docs/de/_roundtrip_specify-width-height.txt b/src/content/docs/de/_roundtrip_specify-width-height.txt index 1e1616b..317c7bd 100644 --- a/src/content/docs/de/_roundtrip_specify-width-height.txt +++ b/src/content/docs/de/_roundtrip_specify-width-height.txt @@ -1,10 +1,10 @@ -Why should you include width and height in HTML? - -> It is recommended to include width and height attributes in the HTML code for images, as they help the web browser to know the size of the image before it is fully loaded. This allows the browser to reserve the appropriate space on the webpage for the image, which prevents content from jumping when the image is loaded. -> -> Additionally, specifying width and height attributes for images can help improve the overall performance of the webpage. If a browser knows the size of an image in advance, it can more accurately calculate how much space is needed to display the image and avoid unnecessary reflows or repaints of the content during loading. -> -> Overall, the use of width and height attributes in HTML code for images can improve the user experience by loading content faster and reducing visual errors. +Why should you set width and height in HTML? + +> It is recommended to specify width and height attributes in HTML code for images, as this helps the web browser know the size of the image before it is fully loaded. This allows the browser to reserve the right amount of space on the webpage for the image, preventing content from jumping around while the image is loading. +> +> Additionally, specifying the width and height attributes for images can also contribute to improving the performance of the webpage overall. When a browser knows the size of an image in advance, it can more accurately calculate how much space is needed to display the image, and avoid unnecessary reflows or repaints of content during loading. +> +> Overall, using width and height attributes in HTML code for images can improve the user experience by loading content faster and reducing visual disruptions. ===================== Content prompt used: @@ -18,7 +18,7 @@ Also carefully translate the title and description for the article; do not use & 2. Benefits of using width and height attributes in HTML code Metadata returned1. Verwendung von Breite und Höhe -2. Vorteile der Verwendung von Breite und Höhe Attributen im HTML-Code + 2. Vorteile der Verwendung von Breite- und Höhe-Attributen im HTML-Code Roundtrip (isolated) prompt used: diff --git a/src/content/docs/de/_roundtrip_when-to-use-picture.txt b/src/content/docs/de/_roundtrip_when-to-use-picture.txt index 508508a..9e7aa81 100644 --- a/src/content/docs/de/_roundtrip_when-to-use-picture.txt +++ b/src/content/docs/de/_roundtrip_when-to-use-picture.txt @@ -1,26 +1,25 @@ --- -title: When to Use the Element -description: 'Explains in which situations to use the element.' -taskInputHash: 0d098655c456a3e4 +title: When to use the element +description: Explains in which situations to use the element +taskInputHash: 73c0c55c4704b344 lang: en -ignore: '/* cSpell:locale de,en*/' -date_published: '2023-03-27' -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' --- -The `picture` element is used to provide multiple versions of an image and choose which version of the image to display based on certain conditions. It is especially useful for optimizing images for different screen sizes and resolutions and is commonly used in responsive web design. +The `picture` element is used to provide multiple versions of an image and decide which version of the image to display based on certain conditions. It is particularly useful for optimizing images for different screen sizes and resolutions and is frequently used in responsive web design. Here are some specific scenarios in which you would want to use the `picture` element: -* **Retina displays:** High-resolution screens such as Apple's Retina displays have a higher pixel density, which means that images can look blurry or pixelated if they are not optimized for high resolutions. With the `picture` element, you can provide a version of the image that has twice as many pixels as the normal version, so it looks sharp and clear on Retina displays. +- **Retina displays:** Displays with high density such as Apple's Retina displays have a higher pixel density, which means that images can look blurry or pixelated if they are not optimized for high resolutions. With the `picture` element, you can provide a version of the image that has twice as many pixels as the normal version, making it appear crisp on Retina displays. -* **Different aspect ratios:** If you are designing a website that needs to display images with different aspect ratios (e.g. landscape vs. portrait), you can use the `picture` element to provide different versions of the image that are optimized for each aspect ratio. +- **Different aspect ratios:** When designing a website that needs to display images with different aspect ratios (such as landscape vs. portrait), you can use the `picture` element to provide different versions of the image that are optimized for each aspect ratio. -* **Bandwidth limitations:** Images can be large files that require a lot of bandwidth, especially on mobile devices. With the `picture` element, you can provide smaller versions of the image for devices with smaller screens or slower internet connections, to reduce website load times. +- **Bandwidth restrictions:** Images can be large files that consume a lot of bandwidth, especially on mobile devices. With the `picture` element, you can provide smaller versions of the image for devices with smaller screens or slower internet connections, which can help reduce page load times. -* **Art-directed layouts:** Sometimes you want to present an image in a certain way depending on the layout of the rest of the page. For example, you might want to show a close-up of a person's face on mobile devices, but a wider view on desktop devices. The `picture` element allows you to provide different versions of the image that are optimized for different layouts. +- **Art-directed layouts:** Sometimes you want to present an image in a specific way depending on the layout of the rest of the page. For example, you may want to display a close-up of a face on mobile devices, but a wider shot on desktop devices. The `picture` element allows you to provide different versions of the image that are optimized for different layouts. -Overall, the `picture` element is a powerful tool that allows you to optimize your images for a variety of use cases and ensure they look great regardless of the device or screen size. +Overall, the `picture` element is a powerful tool that allows you to optimize your images for a variety of use cases and ensure that they look great regardless of device or screen size. ===================== Content prompt used: @@ -34,7 +33,7 @@ Also carefully translate the title and description for the article; do not use & 2. Explains in which situations you should use the element Metadata returned1. Wann man das -Element verwenden sollte -2. Erklärt, in welchen Situationen das -Element verwendet werden sollte. +2. Erklärt in welchen Situationen man das -Element verwenden sollte Roundtrip (isolated) prompt used: diff --git a/src/content/docs/de/_roundtrip_width-density.txt b/src/content/docs/de/_roundtrip_width-density.txt index 892da3c..26fc864 100644 --- a/src/content/docs/de/_roundtrip_width-density.txt +++ b/src/content/docs/de/_roundtrip_width-density.txt @@ -1,50 +1,49 @@ --- -title: Width and Density Adapters -description: Examples of using width and density adapters in `srcset` -taskInputHash: 2171ff4767b5d45d +title: Width and density descriptors +description: Examples of using width and density descriptors in `srcset` +taskInputHash: ecf3cb15eb544dea lang: en -ignore: '/* cSpell:locale de,en*/' -date_published: '2023-03-24' -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' --- -Understanding width (`w`) and density (`x`) adapters in `srcset`. Use examples and markdown. +Understanding the width (`w`) and density (`x`) descriptors in `srcset`. Use examples and Markdown. -> `srcset` is an HTML attribute that allows developers to provide multiple image sources with different resolutions or pixel densities and let the browser choose the appropriate image based on the display properties of the device. The `srcset` attribute uses a combination of `URL` and `w-` or `x-` adapters to specify the images. +> `srcset` is an HTML attribute that allows developers to provide multiple image sources with differing resolutions or pixel densities, and allow the browser to select the appropriate image based on the device's display properties. The `srcset` attribute uses a combination of `url` and the `w` or `x` descriptors to specify the images. -## Width (`w`) Adapter +## Width (`w`) Descriptor -> The `w-` adapter is used to indicate the width of an image in pixels. It is used when we want to provide image dimensions to the browser so that it can choose the appropriate image for the available screen space. +> The width descriptor (`w`) is used to specify the width of an image in pixels. It is used when we want to provide the browser with the dimensions of an image so that it can choose the appropriate image for the available screen area. -> The syntax for using the `w-` adapter in `srcset` looks like this: +> The syntax for using the `w` descriptor in `srcset` is as follows: ```html Example Image + alt="Example image"> ``` -> In the above example, we have provided the browser with three images and their corresponding widths in pixels. The browser selects the image with the closest width to the available screen space. +> In the above example, we have provided the browser with three images and their corresponding widths in pixels. The browser will select the image with the closest width to the available screen area. -## Density (`x`) Adapter +## Density (`x`) Descriptor -> The `x-` adapter is used to indicate the pixel density of an image, which is the ratio of physical pixels to CSS pixels. It is used when we want to provide the browser with different versions of the same image with different pixel densities. +> The density descriptor (`x`) is used to specify the pixel density of an image, which is the ratio of physical pixels to CSS pixels. It is used when we want to provide the browser with different versions of the same image with varying pixel densities. -> The syntax for using the `x-` adapter in `srcset` looks like this: +> The syntax for using the `x` descriptor in `srcset` is as follows: ```html Example Image + alt="Example image"> ``` -> In the above example, we have provided the browser with three images and their corresponding pixel densities. The browser selects the image with the closest pixel density to the device screen. +> In the above example, we have provided the browser with three images and their corresponding pixel densities. The browser will select the image with the closest pixel density to the device's screen. -> Note that the `w-` and `x-` adapters can be used in the same `srcset` attribute to provide the browser with more options to choose from. +> Note that the `w` and `x` descriptors can be used together in the same `srcset` attribute to provide the browser with more options to choose from. ===================== Content prompt used: @@ -57,8 +56,8 @@ Also carefully translate the title and description for the article; do not use & 1. Width and density descriptors 2. Examples of using width and density descriptors in `srcset` -Metadata returned1. Breiten- und Dichteadapter -2. Beispiele für die Verwendung von Breiten- und Dichteadaptern in `srcset` +Metadata returned1. Breiten- und Dichtedescriptoren +2. Beispiele zur Verwendung von Breiten- und Dichtedescriptoren in `srcset` Roundtrip (isolated) prompt used: diff --git a/src/content/docs/de/breakpoints.md b/src/content/docs/de/breakpoints.md index 98ebd65..2423d8f 100644 --- a/src/content/docs/de/breakpoints.md +++ b/src/content/docs/de/breakpoints.md @@ -1,41 +1,38 @@ --- title: Breakpoints & Bilder -description: Warum manche (aber nicht alle) Breakpoints wichtig für Ihre Bilder sind -taskInputHash: 57ab72e7e951b197 +description: Warum einige (aber nicht alle) Breakpoints für Ihre Bilder wichtig sind +taskInputHash: a740eb96e1b2103c lang: de -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' --- ### Hintergrund -Kleine Bildschirme und große Monitore benötigen unterschiedliche Layouts. Für `srcset` und `sizes` müssen wir wissen, wann das Layout geändert wird. +Kleine Bildschirme und große Monitore erfordern unterschiedliche Layouts. Um `srcset` und `sizes` zu nutzen, müssen wir wissen, bei welcher Bildschirmgröße sich das Layout ändert. -Webentwickler müssen entscheiden, was auf kleineren Bildschirmen verkleinert, ausgeblendet oder verschoben werden soll - oder sie müssen entscheiden, was auf größeren Bildschirmen erweitert, aufgedeckt oder hinzugefügt werden soll. Sie haben auch sehr wenig Informationen zur Verfügung. Befindet sich der Benutzer auf einem Tablet oder Telefon im Landscape-Modus oder in einem kleinen Browserfenster? +Webentwickler müssen sich entscheiden, was auf kleineren Bildschirmen verkleinert, verborgen oder verschoben werden soll - oder was auf größeren Bildschirmen erweitert, freigelegt oder hinzugefügt werden soll. Sie haben auch sehr wenige Informationen zur Verfügung. Befindet sich der Benutzer auf einem Tablet oder einem Telefon im Querformat - oder in einem kleinen Browserfenster? -Wir müssen eine beliebige Viewport-Breite wählen, an der das Layout geändert wird. Dies wird als **Breakpoint** bezeichnet. Es handelt sich um eine beliebige Anzahl von CSS-Pixeln ([nicht Gerätepixeln](/de/pixels-not-pixels)). Polypane hat einen [großartigen Artikel](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023) über gebräuchliche Breakpoints. +Wir müssen eine willkürliche Bildschirmbreite festlegen, bei der sich das Layout ändert. Dies wird als **Breakpoint** bezeichnet. Es handelt sich um eine willkürliche Anzahl von CSS-Pixeln ([nicht Gerätepixeln](/de/pixel-nicht-pixel)). Polypane hat einen [großartigen Artikel](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023) über gängige Breakpoints. -Einige Bilder (wie Logos, Icons oder Buttons) können immun gegenüber den Layoutverschiebungen sein, die durch diese Breakpoints verursacht werden (und sind in Ordnung mit [srcset Density Descriptors](/de/density-descriptors)). +Einige Bilder (wie Logos oder Icons oder Schaltflächen) können immun gegen die Layoutverschiebungen sein, die durch diese Breakpoints verursacht werden (und mit [srcset-Dichtebeschreibungen](/de/density-descriptors) in Ordnung sein). -Hauptinhaltbilder werden durch die Größe ihres Containers begrenzt. Typischerweise ist der Hauptbereich eines Seitenlayouts auf den größten Bildschirmen auf eine bestimmte Breite begrenzt, eine `max-width`, aber auf kleinen Bildschirmen füllt der Hauptinhaltbereich den gesamten Viewport aus. +Hauptinhaltbilder werden durch die Größe ihres Containers begrenzt. Typischerweise wird der Hauptinhaltbereich einer Seite auf den größten Bildschirmen auf eine bestimmte Breite begrenzt, eine `max-width`, aber auf kleinen Bildschirmen füllt der Hauptinhaltbereich den gesamten Bildschirm aus. -Wenn Sie bei einigen Breakpoints mehr als eine Spalte haben, wird es schwieriger, die effektiven Größenregeln zu berechnen, da sich der Prozentsatz der Viewport-Breite, den das Bild einnimmt, ändert. +Wenn Sie bei einigen Breakpoints mehr als eine Spalte haben, wird es schwieriger, die effektiven Sizing-Regeln zu berechnen, da sich der Prozentsatz der Bildschirmbreite ändert, den das Bild einnimmt. ### Die einfache Methode -Das heißt aber nicht, dass man sich den Kopf darüber zerbrechen soll. Wahrscheinlich kommen Sie mit der folgenden Annäherung sehr gut zurecht: +Das gesagt habend, denken Sie nicht zu viel darüber nach. Wahrscheinlich werden Sie mit der folgenden Näherung sehr gut auskommen: -1. Bei welcher Größe hört die Hauptspalte (oder der Container des Bildes) auf zu wachsen? Bis zu dieser Viewport-Breite können wir `100vw` für das `sizes`-Attribut des Bildes verwenden, um anzugeben, dass das Bild 100% der Viewport-Breite einnimmt. +1. Bei welcher Größe hört die Hauptspalte (oder der Container des Bildes) auf zu wachsen? Bis zu dieser Bildschirmgröße können wir `100vw` für das `sizes`-Attribut des Bildes verwenden, um zu sagen, dass das Bild 100% der Bildschirmbreite einnimmt. 2. Was ist die maximale Breite, die der Container jemals erreicht? Wir können das als festgelegte `width` für alles andere setzen. -Wenn Ihre Antwort auf 1 700px und Ihre Antwort auf 2 800px lautet, können Sie das folgende `sizes`-Attribut verwenden: +Wenn Ihre Antwort auf 1 700px und Ihre Antwort auf 2 800px war, können Sie das folgende `sizes`-Attribut verwenden: ```html - + ``` - - -> Man würde denken, dass der Browser all diese Berechnungen netterweise für uns basierend auf dem CSS übernehmen könnte. Leider sind Browser aggressiv darum bemüht, eine Bild-URL *vor* dem Herunterladen von Stylesheets zu wählen. Also müssen wir die Berechnungen selbst durchführen. Und wenn wir nicht perfekt sind, ist es ihr Problem. +> Man würde sich denken, dass der Browser all diese Berechnungen schön für uns basierend auf dem CSS handhaben könnte. Leider sind Browser aggressiv darauf aus, eine Bild-URL *vor* dem Herunterladen der Stylesheets auszuwählen. Daher müssen wir die Berechnungen selbst durchführen, und es ist ihnen recht, wenn wir es nicht perfekt machen. diff --git a/src/content/docs/de/browser-picks-srcset.md b/src/content/docs/de/browser-picks-srcset.md index 542c414..0ab7f49 100644 --- a/src/content/docs/de/browser-picks-srcset.md +++ b/src/content/docs/de/browser-picks-srcset.md @@ -1,70 +1,70 @@ --- -title: Wie der Browser wählt -description: Wie der Browser zwischen in srcset aufgelisteten Bildern wählt -taskInputHash: 565e2cc4a65e54bd +title: Wie der Browser auswählt +description: >- + Wie der Browser zwischen Bildern wählt, die im srcset-Attribut aufgelistet + sind +taskInputHash: 09ab2b098b259019 lang: de -ignore: '/* cSpell:locale de,en*/' -date_published: '2023-03-24' -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' --- -Wie wählt der Browser zwischen den in srcset angegebenen Bildern? Hier sind die Schritte mit Beispielen für sowohl Width- als auch Density-Spezifikationen und wie der Browser basierend auf Gerät und Viewport entscheidet: - -- Wenn man das `srcset`-Attribut in HTML verwendet, verwendet der Browser eine Grundsätze zur Auswahl des geeignetsten Bildes aus der Liste der bereitgestellten Quellen. Diese Grundsätze hängen sowohl von den Anzeigeeigenschaften des Geräts (Auflösung, Pixeldichte) als auch von der Viewport-Größe ab. Das `srcset`-Attribut ermöglicht es Ihnen, verschiedene Bilder auf der Grundlage der Breite (mit Breiten-Beschreibung `w`) oder der Pixeldichte (mit X-Beschreibung `x`) zu spezifizieren. Lassen Sie uns jeden Fall mit Beispielen durchgehen. - -1\. Width-Beschreibung (`w`): - -Angenommen, wir haben das folgende `srcset`-Attribut: - -```html - -Beispielbild - -``` - -Der Browser wird die folgenden Schritte ausführen: - -a. Bestimmen Sie die DPR (Gerätepikselverhältnis) des Geräts. Ein Standardbildschirm hat beispielsweise eine DPR von 1, während ein hochauflösender (Retina-)Bildschirm eine DPR von 2 oder höher hat. - -b. Berechnen Sie die effektive Breite für jedes Bild im `srcset`. Multiplizieren Sie die Breiten-Beschreibung mit der DPR. Für ein Gerät mit einem DPR von 1: - -- Beispiel-small.jpg: 400 * 1 = 400px - -- Beispiel-medium.jpg: 800 * 1 = 800px - -- Beispiel-large.jpg: 1600 * 1 = 1600px - -c. Vergleichen Sie die effektiven Breiten mit der Viewport-Breite. Angenommen, die Viewport-Breite beträgt 420px. Der Browser wählt das kleinste Bild mit einer effektiven Breite, die größer als oder gleich der Viewport-Breite ist. In diesem Fall wählt er `example-medium.jpg`. - - -2\. Pixeldichte-Beschreibung (`x`): - -Angenommen, wir haben das folgende `srcset`-Attribut: - -```html - -Beispielbild - -``` - -Der Browser wird die folgenden Schritte ausführen: - -a. Bestimmen Sie die DPR (Gerätepikselverhältnis) des Geräts. Ein Standardbildschirm hat beispielsweise eine DPR von 1, während ein hochauflösender (Retina-)Bildschirm eine DPR von 2 oder höher hat. - -b. Vergleichen Sie die DPR des Geräts mit den `x`-Beschreibungen im `srcset`. In diesem Fall haben wir drei Bilder mit den folgenden Beschreibungen: - -- Beispiel-1x.jpg: 1x - -- Beispiel-2x.jpg: 2x - -- Beispiel-3x.jpg: 3x - -c. Wählen Sie das Bild mit der `x`-Beschreibung aus, die der DPR des Geräts am nächsten kommt. Für ein Gerät mit einem DPR von 1 wählt der Browser `example-1x.jpg` aus. Für ein Gerät mit einem DPR von 2 wählt er `example-2x.jpg` aus und so weiter. - -Es ist wichtig zu beachten, dass man auch das `sizes`-Attribut in Kombination mit dem `srcset`-Attribut verwenden kann, um weitere Informationen darüber zu liefern, wie das Bild bei unterschiedlichen Viewport-Breiten dargestellt wird. Dies ist besonders nützlich bei Verwendung der Breitenbeschreibung (`w`). Hier ist ein Beispiel: - -```html - -Example Image + +``` + +Der Browser wird die folgenden Schritte ausführen: + +a. Bestimmen Sie die DPR (Gerätepixelverhältnis) des Geräts. Eine Standardanzeige hat beispielsweise eine DPR von 1, während eine Anzeige mit hoher Auflösung (Retina) eine DPR von 2 oder höher hat. + +b. Berechnen Sie die effektive Breite für jedes Bild im `srcset`. Multiplizieren Sie den Breiten-Deskriptor mit der DPR. Für ein Gerät mit einer DPR von 1: + +- example-small.jpg: 400 * 1 = 400px + +- example-medium.jpg: 800 * 1 = 800px + +- example-large.jpg: 1600 * 1 = 1600px + +c. Vergleichen Sie die effektiven Breiten mit der Viewport-Breite. Nehmen Sie an, dass die Viewportbreite 420px beträgt. Der Browser wählt das kleinste Bild mit einer effektiven Breite aus, die größer oder gleich der Viewport-Breite ist. In diesem Fall wird es `example-medium.jpg` auswählen. + +2\. Pixel-Densitäts-Deskriptor (`x`): + +Angenommen, wir haben das folgende `srcset`-Attribut: + +```html + +Example Image + +``` + +Der Browser wird die folgenden Schritte ausführen: + +a. Bestimmen Sie die DPR (Gerätepixelverhältnis) des Geräts. Eine Standardanzeige hat beispielsweise eine DPR von 1, während eine Anzeige mit hoher Auflösung (Retina) eine DPR von 2 oder höher hat. + +b. Vergleichen Sie die DPR des Geräts mit den `x`-Deskriptoren im `srcset`. In diesem Fall haben wir drei Bilder mit den folgenden Deskriptoren: + +- example-1x.jpg: 1x + +- example-2x.jpg: 2x + +- example-3x.jpg: 3x + +c. Wählen Sie das Bild mit dem `x`-Deskriptor aus, das dem DPR des Geräts am nächsten kommt. Für ein Gerät mit einer DPR von 1 wählt der Browser `example-1x.jpg` aus. Für ein Gerät mit einer DPR von 2 wählt er `example-2x.jpg` aus usw. + +Es ist wichtig zu beachten, dass Sie auch das `sizes`-Attribut in Kombination mit dem `srcset`-Attribut verwenden können, um weitere Informationen darüber bereitzustellen, wie das Bild bei unterschiedlichen Viewportbreiten angezeigt wird. Dies ist besonders nützlich bei der Verwendung des Breiten-Deskriptors (`w`). Hier ist ein Beispiel: + +```html + +Ein Beispielbild +     srcset="example-image-1x.jpg 1x, example-image-2x.jpg 2x, example-image-3x.jpg 3x" +     alt="Ein Beispielbild"> ``` Dieses Markup-Beispiel enthält: -- **src**: Die Standardbildquelle, die angezeigt wird, wenn der Browser srcset nicht unterstützt. -- **srcset**: Die Liste der Bildquellen und ihrer Density Descriptors (1x, 2x, 3x). Der Browser wählt das am besten geeignete Bild basierend auf dem Display des Benutzers aus. -- **alt**: Eine Beschreibung des Bildes zu Zwecken der Barrierefreiheit. +- **src**: Die Standard-Bildquelle, die angezeigt wird, wenn der Browser Srcset nicht unterstützt. +- **srcset**: Die Liste der Bildquellen und ihrer Density-Descriptoren (1x, 2x, 3x). Der Browser wählt das am besten geeignete Bild basierend auf dem Display des Benutzers. +- **alt**: Eine Beschreibung des Bildes für die Barrierefreiheit. -Und das war es schon! Sie haben srcset mit Density Descriptors erfolgreich implementiert und damit die Leistung und Benutzererfahrung Ihrer Website verbessert. +Und das ist alles! Sie haben Srcset erfolgreich mit Density-Descriptoren implementiert und damit die Leistung und Benutzererfahrung Ihrer Website verbessert. diff --git a/src/content/docs/de/introduction.md b/src/content/docs/de/introduction.md index cbef95e..ef6174a 100644 --- a/src/content/docs/de/introduction.md +++ b/src/content/docs/de/introduction.md @@ -1,21 +1,23 @@ --- -title: srcset und sizes -description: Ein effizienter und dezidierter Leitfaden für responsive Bilder bis 2023 -taskInputHash: f8e7c31ccf577572 +title: '`srcset` & ``-Größen' +description: >- + Ein effizienter und entschlossener Leitfaden für reaktionsschnelle Bilder bis + 2023 +taskInputHash: dc8c8594bdd45d91 lang: de -ignore: '/* cSpell:locale de,en*/' sidebar_sort_priority: 1000 -date_published: '2023-03-23' -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' --- -**Ein effizienter und dezidierter Leitfaden für Bilder bis 2023** +**Ein effizienter und entschlossener Leitfaden für Bilder bis 2023** -Sehen Sie sich die Seitenleiste für die detaillierte Analyse an. Dies ist die Kurzreferenz zum Aktualisieren dieser ``-Tags, um moderne Geräte in allen Größen und Pixeldichten zu unterstützen. Sie sollten [wissen, dass Pixel ≠ Pixel](/de/pixel-nicht-pixel) und `devicePixelRatio` wahrscheinlicher bei 3,875 als bei 1:1 liegt. Moderne Handys geben vor, 320-428px breit zu sein, um die Lesbarkeit zu verbessern (in CSS-Pixeln), haben aber viele Gerätepixel pro CSS-Pixel. +Überprüfen Sie die Seitenleiste für die Tiefe. Dies ist die schnelle Referenz zum Upgrade dieser ``-Tags, um moderne Geräte in all ihren verschiedenen Größen und Pixeldichten zu verarbeiten. Sie sollten [wissen, dass Pixel != Pixel](/de/pixels-not-pixels) und `devicePixelRatio` eher bei 3,875 als bei 1:1 liegt. Moderne Telefone geben vor, 320-428px breit zu sein, um die Lesbarkeit zu erhöhen (in CSS-Pixel), haben aber viele Gerätepixel pro CSS-Pixel. -> Wenn Ihr Bildgröße sich niemals ändert, unabhängig davon, wie eng Sie das Browserfenster machen, sollten Sie stattdessen einen [Density Descriptor](/de/density-descriptors) verwenden. Dies ist oft geeignet für Logos, Icons und Schaltflächen. +> Wenn Ihr Bild unabhängig von der Breite des Browserfensters niemals seine Größe ändert, sollten Sie stattdessen einen [Density-Deskriptor verwenden](/de/density-descriptors). Dies ist oft geeignet für Logos, Symbole und Schaltflächen. + +Wissen Sie, was Ihre [Breakpoints](/de/breakpoints) sind? Sie benötigen diese Zahlen, um die Lösung unten feinabzustimmen - und zumindest den Viewport-Breiten-Breakpoint zu kennen, an dem der Hauptinhalt aufhört zu wachsen. -Wissen Sie, was Ihre [Breakpoints](/de/breakpoints) sind? Sie benötigen diese Zahlen, um die unten stehende Lösung feinabzustimmen - und mindestens den Viewport-Brechpunkt, bei dem der Hauptinhaltbereich aufhört zu wachsen. ### Die einfache Methode @@ -28,12 +30,12 @@ Wissen Sie, was Ihre [Breakpoints](/de/breakpoints) sind? Sie benötigen diese Z img.jpg?format=webp&w=1600 1600w, img.jpg?format=webp&w=2000 2000w" - sizes="(max-width: 700px) 100vw, 800px" alt="Hund auf einem Fahrrad fahrend" /> + sizes="(max-width: 700px) 100vw, 800px" alt="Hund, der Fahrrad fährt" /> - + - + ``` diff --git a/src/content/docs/de/lighthouse-performance-test.md b/src/content/docs/de/lighthouse-performance-test.md index b794f4e..254a76a 100644 --- a/src/content/docs/de/lighthouse-performance-test.md +++ b/src/content/docs/de/lighthouse-performance-test.md @@ -1,25 +1,24 @@ --- -title: Testen der Leistung mit Lighthouse -description: Schritte zum Testen der Leistung einer Website mit Lighthouse -taskInputHash: ec9606eee206cc98 +title: Testen Sie die Leistung mit Lighthouse +description: Schritte zur Überprüfung der Leistung einer Website mithilfe von Lighthouse +taskInputHash: 26eb06d37d959148 lang: de -ignore: '/* cSpell:locale de,en*/' -date_published: '2023-03-24' -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' --- -Wie testen Sie die Leistung Ihrer Website mit Lighthouse? +Wie testet man die Leistung Ihrer Website mit Lighthouse? -> Lighthouse ist ein Tool, mit dem die Leistung, Zugänglichkeit und andere Aspekte von Websites gemessen werden können. Um die Leistung Ihrer Website mit Lighthouse zu testen, befolgen Sie diese Schritte: +> Lighthouse ist ein Tool, das zur Messung der Leistung, Zugänglichkeit und anderer Aspekte einer Website verwendet werden kann. Folgen Sie diesen Schritten, um die Leistung Ihrer Website mit Lighthouse zu testen: > -> 1\. Öffnen Sie den Google Chrome Webbrowser und navigieren Sie zur Seite, die Sie testen möchten. +> 1\. Öffnen Sie den Google Chrome-Webbrowser und navigieren Sie zur Seite, die Sie testen möchten. > -> 2\. Klicken Sie auf die drei Punkte in der oberen rechten Ecke des Browserfensters und wählen Sie dann "Weitere Tools" und dann "Entwicklertools" oder verwenden Sie einfach die Tastenkombination "Strg+Shift+I" (Windows, Linux) oder "Befehl+Option+I" (macOS). +> 2\. Klicken Sie auf die drei Punkte in der oberen rechten Ecke des Browserfensters und wählen Sie dann "Weitere Tools" und anschließend "Entwickler Tools" oder nutzen Sie einfach die Tastenkombination "Strg+Shift+I" (Windows, Linux) oder "Command+Option+I" (macOS). > -> 3\. Klicken Sie im Entwicklertoolsfenster auf das Lighthouse-Symbol auf der linken Seite des Fensters oder drücken Sie "Strg+Shift+P" (Windows, Linux) oder "Befehl+Shift+P" (macOS), um das Befehlsfenster zu öffnen. Geben Sie "Lighthouse" ein und wählen Sie "Bericht generieren". +> 3\. Klicken Sie im Entwickler-Tools-Panel auf das Lighthouse-Symbol links im Panel oder drücken Sie "Strg+Shift+P" (Windows, Linux) oder "Command+Shift+P" (macOS), um das Befehls-Menü zu öffnen. Geben Sie dann "Lighthouse" ein und wählen Sie "Bericht generieren". > > 4\. Wählen Sie im Lighthouse-Dialogfeld die Leistung und andere relevante Optionen aus, die Sie testen möchten, und klicken Sie dann auf "Bericht generieren". > -> 5\. Nach Abschluss der Analyse durch Lighthouse sehen Sie einen Bericht mit Scores und Empfehlungen zur Verbesserung der Leistung, Zugänglichkeit und anderer Bereiche Ihrer Website. +> 5\. Nach Abschluss der Analyse durch Lighthouse wird ein Bericht mit Scores und Empfehlungen zur Verbesserung der Leistung, Zugänglichkeit und anderer Bereiche Ihrer Website angezeigt. > -> Indem Sie diesen Schritten folgen, können Sie Lighthouse verwenden, um die Leistung Ihrer Website zu testen und zu optimieren, was dazu beitragen kann, die Benutzererfahrung und die Suchmaschinenrankings zu verbessern. +> Durch die Umsetzung dieser Schritte können Sie Lighthouse verwenden, um die Leistung Ihrer Website zu testen und zu optimieren, was zur Verbesserung der Benutzererfahrung und der Suchmaschinen-Rankings beitragen kann. diff --git a/src/content/docs/de/picture-examples.md b/src/content/docs/de/picture-examples.md index 018820d..b8f2d34 100644 --- a/src/content/docs/de/picture-examples.md +++ b/src/content/docs/de/picture-examples.md @@ -1,18 +1,17 @@ --- -title: Beispiele zur Verwendung des -Elements +title: Beispiele für die Verwendung des -Elements description: >- Beispiele zur Verwendung des -Elements für responsive Bilder, Art Direction und unterschiedliche Bildformate -taskInputHash: d2a1e2234ca5c46c +taskInputHash: b441f3138e70c382 lang: de -ignore: '/* cSpell:locale de,en*/' -date_published: '2023-03-24' -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' --- -Hier sind ein paar Beispiele für die Verwendung des `` Elements und deren Erklärungen: +Hier sind ein paar Beispiele für die Verwendung des ``-Elements und deren Erklärungen: -1\. Beispiel für Responsive Bilder: +1\. Beispiel für responsive Bilder: ```html @@ -22,7 +21,7 @@ Hier sind ein paar Beispiele für die Verwendung des `` Elements und de ``` -Erklärung: In diesem Beispiel wird das `` Element verwendet, um verschiedene Bildquellen für verschiedene Bildschirmgrößen bereitzustellen. Die `` Elemente geben die verschiedenen Bildquellen mit dem Attribut "srcset" und dem Attribut "media" an, um die Bedingungen festzulegen, unter denen jede Quelle verwendet werden soll. Das `` Element wird als Fallback für ältere Browser oder wenn die Bedingungen in den `` Elementen nicht erfüllt sind verwendet. +Erklärung: In diesem Beispiel wird das ``-Element verwendet, um unterschiedliche Bildquellen für verschiedene Bildschirmgrößen bereitzustellen. Die ``-Elemente geben die verschiedenen Bildquellen mit dem Attribut "srcset" und dem Attribut "media" an, um die Bedingungen festzulegen, unter denen jede Quelle verwendet werden soll. Das ``-Element wird als Fallback für ältere Browser oder wenn die Bedingungen in den ``-Elementen nicht erfüllt sind, verwendet. 2\. Beispiel für Art Direction: @@ -34,7 +33,7 @@ Erklärung: In diesem Beispiel wird das `` Element verwendet, um versch ``` -Erklärung: In diesem Beispiel wird das `` Element verwendet, um verschiedene Bildquellen je nach Ausrichtung des Geräts bereitzustellen. Das `` Element mit dem Attribut "media" auf "(orientation: landscape)" gibt eine Bildquelle für breite Bildschirme an, während das `` Element eine Bildquelle für Portraitbildschirme angibt. +Erklärung: In diesem Beispiel wird das ``-Element verwendet, um unterschiedliche Bildquellen je nach Ausrichtung des Geräts bereitzustellen. Das ``-Element mit dem Attribut "media", das auf "(orientation: landscape)" gesetzt ist, gibt eine Bildquelle für breite Bildschirme an, während das ``-Element eine Bildquelle für Hochformatbildschirme angibt. 3\. Beispiel für unterschiedliche Bildformate: @@ -48,12 +47,12 @@ Erklärung: In diesem Beispiel wird das `` Element verwendet, um versch ``` -Erklärung: In diesem Beispiel wird das `` Element verwendet, um verschiedene Bildquellen für unterschiedliche Bildformate bereitzustellen. Die `` Elemente geben unterschiedliche Bildquellen mit dem Attribut "srcset" und dem Attribut "type" an, um das Bildformat anzugeben. Das `` Element wird als Fallback für ältere Browser verwendet, die das `` Element nicht unterstützen. +Erklärung: In diesem Beispiel wird das ``-Element verwendet, um unterschiedliche Bildquellen für verschiedene Bildformate bereitzustellen. Die ``-Elemente geben verschiedene Bildquellen mit dem Attribut "srcset" und dem Attribut "type" an, um das Bildformat festzulegen. Das ``-Element wird als Fallback für ältere Browser verwendet, die das ``-Element nicht unterstützen. ## Breakpoints -In Responsive Design werden Breakpoints verwendet, um festzulegen, wann das Layout einer Website oder Anwendung basierend auf der Größe des Viewports geändert werden sollte. Breakpoints werden typischerweise mit Medienabfragen in CSS definiert, die je nach Bildschirmbreite unterschiedliche Stile anwenden. Diese Breakpoints können in Verbindung mit dem `` Element verwendet werden, um verschiedene Bildquellen für verschiedene Bildschirmgrößen bereitzustellen. +In responsivem Design werden Breakpoints verwendet, um zu definieren, wann das Layout einer Website oder Anwendung basierend auf der Größe des Viewports geändert werden soll. Breakpoints werden in der Regel mithilfe von Media Queries in CSS definiert, die je nach Bildschirmbreite unterschiedliche Styles anwenden. Diese Breakpoints können in Verbindung mit dem ``-Element verwendet werden, um unterschiedliche Bildquellen für verschiedene Bildschirmgrößen bereitzustellen. -Zum Beispiel haben wir im obigen ersten Beispiel das Attribut `media` verwendet, um die Bildschirmbreite festzulegen, unter der jede Quelle verwendet werden soll. Wenn die Bildschirmbreite größer oder gleich 768 Pixel ist, wird die Quelle `image-large.jpg` verwendet; wenn die Bildschirmbreite größer oder gleich 480 Pixel, aber weniger als 768 Pixel ist, wird die Quelle `image-medium.jpg` verwendet; und wenn die Bildschirmbreite kleiner als 480 Pixel ist, wird die Quelle `image-small.jpg` verwendet. Dies ermöglicht es uns, für jedes Gerät geeignete Bildgrößen bereitzustellen, um Ladezeiten zu reduzieren und die Benutzererfahrung zu verbessern. +Zum Beispiel haben wir im ersten Beispiel oben das `media`-Attribut verwendet, um die Bildschirmbreite festzulegen, unter der jede Quelle verwendet werden soll. Wenn die Bildschirmbreite größer oder gleich 768 Pixel ist, wird die Quelle `image-large.jpg` verwendet. Wenn die Bildschirmbreite größer oder gleich 480 Pixel, aber kleiner als 768 Pixel ist, wird die Quelle `image-medium.jpg` verwendet und wenn die Bildschirmbreite kleiner als 480 Pixel ist, wird die Quelle `image-small.jpg` verwendet. Dies ermöglicht es uns, für jedes Gerät geeignete Bildgrößen zu verwenden, was die Ladezeiten der Seite reduziert und die Benutzererfahrung verbessert. -Breakpoints können für jede Bildschirmgröße definiert werden und mehrere Breakpoints können verwendet werden, um Layouts zu erstellen, die auf eine breite Palette von Geräten reagieren. Durch die Kombination von Breakpoints mit dem `` Element können flexible und reaktionsschnelle Designs erstellt werden, die auf jedem Gerät gut aussehen. +Breakpoints können bei jeder Bildschirmgröße definiert und mehrere Breakpoints verwendet werden, um Layouts zu erstellen, die auf eine breite Palette von Geräten reagieren. Durch die Kombination von Breakpoints mit dem ``-Element können flexible und responsive Designs erstellt werden, die auf jedem Gerät großartig aussehen. diff --git a/src/content/docs/de/pixels-not-pixels.md b/src/content/docs/de/pixels-not-pixels.md index 946e5fc..5c49060 100644 --- a/src/content/docs/de/pixels-not-pixels.md +++ b/src/content/docs/de/pixels-not-pixels.md @@ -1,20 +1,19 @@ --- title: px ≠ Pixel -description: Geräte-Pixel ≠ Browser-Pixel ≠ Bild-Pixel -taskInputHash: 6bf2840ae3339b2e +description: Gerätepx ≠ Browser-Pixel ≠ Bild-Pixel +taskInputHash: b857216a5693bfeb lang: de -ignore: '/* cSpell:locale de,en*/' sidebar_sort_priority: 900 -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' --- -### Gerätepixel ≠ Browser px ≠ Bild px +### Gerätepixel ≠ Browser px ≠ Bild-Px -Dank Apple entspricht CSS- und HTML-Pixel (`px`) **fast nie genau einem einzigen Geräte-/Druckerpixel**. Der devicePixelRatio auf meinem Handy beträgt 3,875; [wie hoch ist deiner?](https://www.mydevice.io/) +Dank Apple entsprechen CSS- und HTML-Pixel (`px`) fast immer mehreren Geräte-/Druckerpixeln. Das devicePixelRatio auf meinem Telefon beträgt 3,875; [was ist deines?](https://www.mydevice.io/) -Mein Desktop-DevicePixelRatio ändert sich beim Vergrößern des Browsers, ist standardmäßig jedoch 1,5 (mein `System > Anzeige > Skalierung` beträgt schließlich 150%). +Auf meinem Desktop-Computer ändert sich das devicePixelRatio beim Zoomen, aber standardmäßig ist es 1,5 (meine `System > Display > Scale` ist schließlich 150%). -Bilddateien (mit Ausnahme von SVG) entschlüsseln zu einem Raster von Pixeln. **Es ist ärgerlicherweise schwer, Bildpixel perfekt mit Gerätepixeln im Verhältnis 1:1 anzuzeigen - aber mit `srcset` kann man *nahe genug* kommen**, und etwas Javascript kann die Größe des HTML-Elements nach dem Laden anpassen, wenn man wirklich triftige Gründe für eine perfekte Zuordnung hat, obwohl solche verbotenen Künste hier nicht enthüllt werden. +Bilddateien (außer SVG) dekodieren zu einem Raster von Pixeln. **Es ist frustrierend schwierig, dass Bildpixel in einem Verhältnis von 1:1 mit den Gerätepixeln dargestellt werden - aber mit `srcset` können Sie *nahe genug* kommen**. Ein bisschen Javascript kann die Größe des HTML-Elements nach dem Laden anpassen, wenn Sie wirklich gute Gründe für eine solche perfekte Zuordnung haben. Doch solche verbotenen Künste werden hier nicht enthüllt. -> Andere absolute [Einheiten (in, pc, pt, mm, cm, Q)](https://developer.mozilla.org/de/docs/Web/CSS/length) werden in Bezug auf die Anzahl von CSS-Pixeln definiert und tun so, als ob alles 96 dpi hat. Entwickler meiden absolute Einheiten, weil es in der Regel besser ist, Einheiten zu verwenden, die sich von der Schriftgröße oder den Abmessungen des Viewports/Containers ableiten. Nicht übereinstimmende Einheiten können ein Layout brechen, wenn der Benutzer den `Barrierefreiheit > Textgröße`-Multiplikator anpasst, den Browser zoomt oder das Gerät dreht. Selbstverständlich solltest du all diese Dinge vor dem Veröffentlichen deiner Website ausprobieren. +> Andere absolute [Einheiten (in, pc, pt, mm, cm, Q)](https://developer.mozilla.org/de/docs/Web/CSS/length) sind so definiert, als ob alles 96dpi wäre. Entwickler meiden absolute Einheiten, weil es in der Regel besser ist, Einheiten zu verwenden, die von der Schriftgröße oder den Abmessungen des Viewports/Containers abgeleitet sind. Nicht passende Einheiten können ein Layout brechen, wenn der Benutzer seinen `Accessibility > Text Size`-Multiplikator ändert, den Browser zoomt oder das Gerät dreht. Sie sollten all dies tun, bevor Sie Ihre Seite veröffentlichen - das versteht sich von selbst. diff --git a/src/content/docs/de/specify-width-height.md b/src/content/docs/de/specify-width-height.md index 06c16be..0b75bfe 100644 --- a/src/content/docs/de/specify-width-height.md +++ b/src/content/docs/de/specify-width-height.md @@ -1,17 +1,16 @@ --- title: Verwendung von Breite und Höhe -description: Vorteile der Verwendung von Breite und Höhe Attributen im HTML-Code -taskInputHash: fd9dcf8cf97a201b +description: Vorteile der Verwendung von Breite- und Höhe-Attributen im HTML-Code +taskInputHash: 6e6638bf3441e838 lang: de -ignore: '/* cSpell:locale de,en*/' -date_published: '2023-03-24' -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' --- -Warum sollten Sie Breite und Höhe in HTML einfügen? +Warum sollte man Breite und Höhe in HTML setzen? -> Es wird empfohlen, Breite- und Höhenattribute im HTML-Code für Bilder einzufügen, da sie dem Webbrowser helfen, die Größe des Bildes zu kennen, bevor es vollständig geladen wird. Dies ermöglicht es dem Browser, den entsprechenden Platz auf der Webseite für das Bild zu reservieren, was verhindert, dass der Inhalt beim Laden des Bildes springt. +> Es wird empfohlen, Breite und Höhe Attribute im HTML-Code für Bilder anzugeben, da dies dem Webbrowser hilft, die Größe des Bildes zu kennen, bevor es vollständig geladen ist. Dies ermöglicht es dem Browser, den richtigen Platz auf der Webseite für das Bild zu reservieren, was verhindert, dass der Inhalt während des Ladens des Bildes herumspringt. > -> Darüber hinaus können die Angabe von Breite- und Höhenattributen für Bilder dazu beitragen, die Gesamtleistung der Webseite zu verbessern. Wenn ein Browser die Größe eines Bildes im Voraus kennt, kann er genauer berechnen, wie viel Platz benötigt wird, um das Bild anzuzeigen, und unnötige Reflows oder Repaints des Inhalts beim Laden vermeiden. +> Zusätzlich kann die Angabe der Breite und Höhe Attribute für Bilder auch dazu beitragen, die Leistung der Webseite insgesamt zu verbessern. Wenn ein Browser die Größe eines Bildes im Voraus kennt, kann er genauer berechnen, wie viel Platz benötigt wird, um das Bild anzuzeigen, und unnötige Reflows oder Repaints des Inhalts während des Ladens vermeiden. > -> Insgesamt kann die Verwendung von Breite- und Höhenattributen im HTML-Code für Bilder das Benutzererlebnis verbessern, indem der Inhalt schneller geladen wird und visuelle Fehler reduziert werden. +> Insgesamt kann das Verwenden von Breite- und Höhe-Attributen im HTML-Code für Bilder das Nutzererlebnis verbessern, indem Inhalte schneller geladen werden und visuelle Störungen reduziert werden. diff --git a/src/content/docs/de/when-to-use-picture.md b/src/content/docs/de/when-to-use-picture.md index b962b90..c42fc8c 100644 --- a/src/content/docs/de/when-to-use-picture.md +++ b/src/content/docs/de/when-to-use-picture.md @@ -1,23 +1,22 @@ --- title: Wann man das -Element verwenden sollte -description: 'Erklärt, in welchen Situationen das -Element verwendet werden sollte.' -taskInputHash: 0d098655c456a3e4 +description: Erklärt in welchen Situationen man das -Element verwenden sollte +taskInputHash: 73c0c55c4704b344 lang: de -ignore: '/* cSpell:locale de,en*/' -date_published: '2023-03-27' -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' --- -Das `picture`-Element wird verwendet, um mehrere Versionen eines Bildes bereitzustellen und anhand bestimmter Bedingungen zu entscheiden, welche Version des Bildes angezeigt werden soll. Es ist besonders nützlich, um Bilder für verschiedene Bildschirmgrößen und Auflösungen zu optimieren und wird häufig in responsivem Webdesign verwendet. +Das `picture`-Element wird verwendet, um mehrere Versionen eines Bildes bereitzustellen und basierend auf bestimmten Bedingungen zu entscheiden, welche Version des Bildes angezeigt wird. Es ist besonders nützlich für die Optimierung von Bildern für verschiedene Bildschirmgrößen und Auflösungen und wird häufig in responsivem Webdesign verwendet. -Hier sind einige konkrete Szenarien, in denen Sie das `picture`-Element verwenden möchten: +Hier sind einige spezifische Szenarien, in denen Sie das `picture`-Element verwenden möchten: -* **Retina-Displays:** Hochauflösende Bildschirme wie Apples Retina-Displays haben eine höhere Pixeldichte, was bedeutet, dass Bilder unscharf oder pixelig aussehen können, wenn sie nicht für hohe Auflösungen optimiert sind. Mit dem `picture`-Element können Sie eine Version des Bildes zur Verfügung stellen, die doppelt so viele Pixel wie die normale Version hat, sodass es auf Retina-Displays scharf und klar aussieht. +- **Retina-Displays:** Displays mit hoher Dichte wie Apples Retina-Displays haben eine höhere Pixeldichte, was bedeutet, dass Bilder unscharf aussehen oder pixelig wirken können, wenn sie nicht für hohe Auflösungen optimiert sind. Mit dem `picture`-Element können Sie eine Version des Bildes bereitstellen, die doppelt so viele Pixel wie die normale Version hat, sodass es auf Retina-Displays gestochen scharf aussieht. -* **Unterschiedliche Bildverhältnisse:** Wenn Sie eine Website gestalten, die Bilder mit unterschiedlichen Seitenverhältnissen anzeigen muss (z.B. Quer- vs. Hochformat), können Sie das `picture`-Element verwenden, um verschiedene Versionen des Bildes bereitzustellen, die für jedes Seitenverhältnis optimiert sind. +- **Unterschiedliche Seitenverhältnisse:** Wenn Sie eine Website entwerfen, die Bilder mit unterschiedlichen Seitenverhältnissen (wie Landschaft vs. Porträt) anzeigen muss, können Sie das `picture`-Element verwenden, um verschiedene Versionen des Bildes bereitzustellen, die für jedes Seitenverhältnis optimiert sind. -* **Bandbreitenbeschränkungen:** Bilder können große Dateien sein, die viel Bandbreite benötigen, insbesondere auf mobilen Geräten. Mit dem `picture`-Element können Sie kleinere Versionen des Bildes für Geräte mit kleineren Bildschirmen oder langsameren Internetverbindungen bereitstellen, um die Ladezeiten der Website zu reduzieren. +- **Bandbreitenbeschränkungen:** Bilder können große Dateien sein, die viel Bandbreite verbrauchen, insbesondere auf mobilen Geräten. Mit dem `picture`-Element können Sie kleinere Versionen des Bildes für Geräte mit kleineren Bildschirmen oder langsameren Internetverbindungen bereitstellen, was dazu beitragen kann, die Ladezeiten der Seite zu verkürzen. -* **Art-directed Layouts:** Manchmal möchten Sie ein Bild auf bestimmte Weise präsentieren, abhängig vom Layout des Rests der Seite. Beispielsweise möchten Sie auf mobilen Geräten eine Nahaufnahme des Gesichts einer Person zeigen, auf Desktop-Geräten jedoch eine breitere Ansicht. Das `picture`-Element ermöglicht es Ihnen, verschiedene Versionen des Bildes bereitzustellen, die für unterschiedliche Layouts optimiert sind. +- **Art-Directed-Layouts:** Manchmal möchten Sie ein Bild in einer bestimmten Weise präsentieren, abhängig von der Layout der restlichen Seite. Sie möchten beispielsweise auf Mobilgeräten eine Nahaufnahme eines Gesichts anzeigen, aber auf Desktop-Geräten einen breiteren Schuss. Das `picture`-Element ermöglicht es Ihnen, verschiedene Versionen des Bildes bereitzustellen, die für verschiedene Layouts optimiert sind. -Insgesamt ist das `picture`-Element ein leistungsstarkes Werkzeug, mit dem Sie Ihre Bilder für eine Vielzahl von Anwendungsfällen optimieren und sicherstellen können, dass sie unabhängig vom Gerät oder der Bildschirmgröße großartig aussehen. +Insgesamt ist das `picture`-Element ein leistungsstarkes Werkzeug, mit dem Sie Ihre Bilder für eine Vielzahl von Anwendungsfällen optimieren und sicherstellen können, dass sie unabhängig von Gerät oder Bildschirmgröße großartig aussehen. diff --git a/src/content/docs/de/width-density.md b/src/content/docs/de/width-density.md index 8c73476..604c444 100644 --- a/src/content/docs/de/width-density.md +++ b/src/content/docs/de/width-density.md @@ -1,22 +1,21 @@ --- -title: Breiten- und Dichteadapter -description: Beispiele für die Verwendung von Breiten- und Dichteadaptern in `srcset` -taskInputHash: 2171ff4767b5d45d +title: Breiten- und Dichtedescriptoren +description: Beispiele zur Verwendung von Breiten- und Dichtedescriptoren in `srcset` +taskInputHash: ecf3cb15eb544dea lang: de -ignore: '/* cSpell:locale de,en*/' -date_published: '2023-03-24' -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' --- -Verständnis für Breiten- (w) und Dichteadapter (x) in `srcset`. Verwenden Sie Beispiele und Markdown. +Verständnis von Breiten (w) und Dichten (x) Descriptoren in `srcset`. Verwenden Sie Beispiele und Markdown. -> `srcset` ist ein HTML-Attribut, das Entwicklern ermöglicht, mehrere Bildquellen mit unterschiedlichen Auflösungen oder Pixeldichten bereitzustellen, und den Browser das geeignete Bild basierend auf den Anzeigeeigenschaften des Geräts auswählen zu lassen. Das `srcset`-Attribut verwendet eine Kombination aus `URL`- und `w-` oder `x-`Adaptern, um die Bilder zu spezifizieren. +> `srcset` ist ein HTML-Attribut, das Entwicklern ermöglicht, mehrere Bildquellen mit unterschiedlichen Auflösungen oder Pixeldichten zu liefern und den Browser anhand der Anzeigeeigenschaften des Geräts das geeignete Bild auswählen zu lassen. Das `srcset` Attribut verwendet eine Kombination aus `URL` und den Descriptoren `w` oder `x`, um die Bilder zu spezifizieren. -## Breiten- (`w`) Adapter +## Breiten (`w`) Descriptor -> Der `w-`Adapter wird verwendet, um die Breite eines Bildes in Pixeln anzugeben. Er wird verwendet, wenn wir dem Browser die Abmessungen eines Bildes zur Verfügung stellen wollen, damit er das geeignete Bild für den verfügbaren Bildschirmplatz wählen kann. +> Der Breiten-Descriptor (`w`) wird verwendet, um die Breite eines Bildes in Pixeln anzugeben. Er wird verwendet, wenn wir dem Browser die Abmessungen eines Bildes zur Verfügung stellen möchten, damit er das geeignete Bild für den verfügbaren Bildschirmbereich auswählen kann. -> Die Syntax für die Verwendung des `w-`Adapters in `srcset` sieht wie folgt aus: +> Die Syntax für die Verwendung des `w` Descriptors in `srcset` ist wie folgt: ```html Beispielbild ``` -> Im obigen Beispiel haben wir dem Browser drei Bilder und ihre entsprechenden Breiten in Pixeln zur Verfügung gestellt. Der Browser wählt das Bild mit der nächstliegenden Breite zum verfügbaren Bildschirmplatz. -## Dichteadapter (`x`) -> Der `x-`Adapter wird verwendet, um die Pixel-Dichte eines Bildes anzugeben, was das Verhältnis von physischen Pixeln zu CSS-Pixeln ist. Er wird verwendet, wenn wir dem Browser verschiedene Versionen desselben Bildes mit unterschiedlichen Pixeldichten zur Verfügung stellen wollen. +> Im obigen Beispiel haben wir dem Browser drei Bilder und ihre entsprechenden Breiten in Pixeln zur Verfügung gestellt. Der Browser wird das Bild mit der nächstgelegenen Breite zum verfügbaren Bildschirmbereich auswählen. -> Die Syntax für die Verwendung des `x-`Adapters in `srcset` sieht wie folgt aus: +## Dichten (`x`) Descriptor + +> Der Dichtedeskriptor (`x`) wird verwendet, um die Pixeldichte eines Bildes anzugeben, was das Verhältnis von physikalischen Pixeln zu CSS-Pixeln ist. Er wird verwendet, wenn wir dem Browser verschiedene Versionen desselben Bildes mit unterschiedlichen Pixeldichten zur Verfügung stellen möchten. + +> Die Syntax für die Verwendung des `x` Descriptors in `srcset` ist wie folgt: ```html Beispielbild ``` -> Im obigen Beispiel haben wir dem Browser drei Bilder und ihre entsprechenden Pixeldichten zur Verfügung gestellt. Der Browser wählt das Bild mit der nächstgelegenen Pixeldichte für den Gerätebildschirm aus. +> Im obigen Beispiel haben wir dem Browser drei Bilder und ihre entsprechenden Pixeldichten zur Verfügung gestellt. Der Browser wird das Bild mit der nächstgelegenen Pixeldichte zum Bildschirm des Geräts auswählen. -> Beachten Sie, dass die `w-` und `x-`Adapter in derselben `srcset`-Attribut verwendet werden können, um dem Browser mehr Optionen zur Auswahl zu geben. +> Beachten Sie, dass die `w` und `x` Deskriptoren gemeinsam im gleichen `srcset` Attribut verwendet werden können, um dem Browser mehr Auswahlmöglichkeiten zu bieten. diff --git a/src/content/docs/en/breakpoints.md b/src/content/docs/en/breakpoints.md index ad658c5..e503687 100644 --- a/src/content/docs/en/breakpoints.md +++ b/src/content/docs/en/breakpoints.md @@ -1,8 +1,8 @@ --- title: Breakpoints & images description: Why some (but not all) breakpoints matter for your images -date_published: '2023-03-26' -date_modified: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' --- ### Background diff --git a/src/content/docs/en/browser-picks-srcset.md b/src/content/docs/en/browser-picks-srcset.md index 43ecbc0..d9d53aa 100644 --- a/src/content/docs/en/browser-picks-srcset.md +++ b/src/content/docs/en/browser-picks-srcset.md @@ -1,8 +1,8 @@ --- title: How the browser chooses description: How the browser chooses between images listed in the srcset attribute -date_published: '2023-03-24' -date_modified: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' --- How does the browser choose between images listed in the srcset attribute? Here's a step-by-step, with examples for both width and density specifications and how the browser decides based on device and viewport. diff --git a/src/content/docs/en/density-descriptors.md b/src/content/docs/en/density-descriptors.md index e72dabd..58e809d 100644 --- a/src/content/docs/en/density-descriptors.md +++ b/src/content/docs/en/density-descriptors.md @@ -1,8 +1,8 @@ --- title: Density descriptors & srcset description: Examples of using density descriptors in `srcset` -date_published: '2023-03-26' -date_modified: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' --- Srcset with density descriptors provides a simple and effective method for delivering the most suitable image to each user's device, improving performance and user experience. This guide will walk you through the essentials of using srcset with density descriptors and provide markup examples for your convenience. diff --git a/src/content/docs/en/introduction.md b/src/content/docs/en/introduction.md index c529f64..0a24255 100644 --- a/src/content/docs/en/introduction.md +++ b/src/content/docs/en/introduction.md @@ -2,8 +2,8 @@ title: 'srcset & sizes ' description: An Efficient and Opinionated Guide to Responsive Images for 2023 sidebar_sort_priority: 1000 -date_published: '2023-03-23' -date_modified: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' --- **An Efficient and Opinionated Guide to Images for 2023** diff --git a/src/content/docs/en/lighthouse-performance-test.md b/src/content/docs/en/lighthouse-performance-test.md index 04fb5b5..323dc99 100644 --- a/src/content/docs/en/lighthouse-performance-test.md +++ b/src/content/docs/en/lighthouse-performance-test.md @@ -1,8 +1,8 @@ --- title: Test performance with Lighthouse description: Steps on how to test a website's performance using Lighthouse -date_published: '2023-03-24' -date_modified: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' --- How do you test your site’s performance with Lighthouse? diff --git a/src/content/docs/en/picture-examples.md b/src/content/docs/en/picture-examples.md index 3d3b6d8..2adae70 100644 --- a/src/content/docs/en/picture-examples.md +++ b/src/content/docs/en/picture-examples.md @@ -3,8 +3,8 @@ title: Examples using element description: >- Provides examples using the element, for responsive images, art direction and different image formats -date_published: '2023-03-24' -date_modified: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' --- Here are a few examples of using the `` element and their explanations: diff --git a/src/content/docs/en/pixels-not-pixels.md b/src/content/docs/en/pixels-not-pixels.md index e4c638f..f36c9d5 100644 --- a/src/content/docs/en/pixels-not-pixels.md +++ b/src/content/docs/en/pixels-not-pixels.md @@ -2,8 +2,8 @@ title: px ≠ pixels description: Device px ≠ browser px ≠ image px sidebar_sort_priority: 900 -date_published: '2023-03-26' -date_modified: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' --- ### Device pixels ≠ browser px ≠ image px diff --git a/src/content/docs/en/specify-width-height.md b/src/content/docs/en/specify-width-height.md index 1eb09b0..2cc2947 100644 --- a/src/content/docs/en/specify-width-height.md +++ b/src/content/docs/en/specify-width-height.md @@ -1,8 +1,8 @@ --- title: Use width and height description: Benefits of using width and height attributes in HTML code -date_published: '2023-03-24' -date_modified: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' --- Why should you put width and height in the HTML? diff --git a/src/content/docs/en/when-to-use-picture.md b/src/content/docs/en/when-to-use-picture.md index 66e7244..6fc6f0b 100644 --- a/src/content/docs/en/when-to-use-picture.md +++ b/src/content/docs/en/when-to-use-picture.md @@ -1,8 +1,8 @@ --- title: When to use element description: Explains in which situations you should use the element -date_published: '2023-03-27' -date_modified: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' --- The `picture` element is used to provide multiple versions of an image and determines which version of the image to display based on certain conditions. It is particularly useful for optimizing images for different screen sizes and resolutions, and is commonly used in responsive web design. Here are some specific scenarios where you might want to use the `picture` element: diff --git a/src/content/docs/en/width-density.md b/src/content/docs/en/width-density.md index 1e00293..02739c5 100644 --- a/src/content/docs/en/width-density.md +++ b/src/content/docs/en/width-density.md @@ -1,8 +1,8 @@ --- title: Width and density descriptors description: Examples of using width and density descriptors in `srcset` -date_published: '2023-03-24' -date_modified: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' --- Understanding width (w) and density (x) descriptors in `srcset`. Use examples and use Markdown. diff --git a/src/content/docs/es/_roundtrip_breakpoints.txt b/src/content/docs/es/_roundtrip_breakpoints.txt index 186ad39..5a70075 100644 --- a/src/content/docs/es/_roundtrip_breakpoints.txt +++ b/src/content/docs/es/_roundtrip_breakpoints.txt @@ -2,43 +2,41 @@ title: Breakpoints and Images description: >- Why some (but not all) breakpoints matter for your images -taskInputHash: cc4be952df3fef63 +taskInputHash: d63995938314e702 lang: en -ignore: '/* cSpell:locale es,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 large monitors need different designs. For the purpose of `srcset` and `sizes`, we need to know at what point the design changes. +Small screens and large screens need different designs. For `srcset` and `sizes` purposes, we need to know when the design changes. -Web developers must decide what shrinks, hides, or relocates on smaller screens - or more commonly, what expands, reveals, or adds on larger screens. They also have very little information to work with. Is the user on a tablet or on a horizontally oriented phone - or in a small browser window? +Web developers must decide what will shrink, hide, or relocate on smaller screens, or more commonly, what will expand, reveal, or add on larger screens. They also have very little information. Is the user on a tablet, a landscape phone, or a small browser window? -We have to choose an arbitrary viewport width where the design changes. This is called a **breakpoint**. It is 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. +We have to choose an arbitrary viewport width where the design changes. This is called a **breakpoint**. It's an arbitrary number of CSS pixels ([not device pixels](https://www.w3.org/TR/CSS2/syndata.html#length-units)). 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) might be immune to design changes caused by these breakpoints (and be fine with [srcset density descriptors](/en/density-descriptors)). +Some images (like logos, icons or buttons) may be immune to design changes caused by these breakpoints (and be fine with [srcset density descriptors](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Density_descriptors)). -Main content images will be limited by their container's size. Typically, a page's main content area will be limited to a certain width on larger screens, a `max-width`, but on smaller screens, the main content area will fill the entire viewport. +Main content images will be constrained by the size of their container. Typically, the main content area of a page will be constrained to a certain width on larger screens, a `max-width`, but on smaller screens, the main content area will occupy the entire viewport. -If you have multiple columns at some breakpoints, it will be harder to calculate effective size rules, as the percentage of the viewport width the image takes up will change. +If you have more than one column at some breakpoints, it will be more difficult to calculate the effective size rules, as the percentage of the viewport width the image occupies will change. -### The Easy Method +### The easy way -That being said, don't overcomplicate things. You'll probably be just fine with the following approach: +That said, don't think too much about this. You'll probably be fine with the following approach: -1. At what size does the main column (or the image container) stop growing? Up to that viewport width, we can use `100vw` for the image `sizes` attribute to indicate the image takes up the full width of the viewport. -2. What is the maximum width the container ever reaches? We can set that as a fixed `width` for everything else. +1. At what size does the main column (or the image container) stop growing? Up to that viewport width, we can use `100vw` for the `sizes` attribute of the image to say that the image occupies 100% of the viewport width. +2. What is the maximum width the container ever reaches? We can set that as a fixed width for everything else. If your answer to 1 was 700px and your answer to 2 was 800px, you can use the following `sizes` attribute: ```html - + ``` -> You'd think the browser could handle all these calculations for us based on CSS. Unfortunately, browsers are eager to choose an image URL *before* stylesheets are downloaded. So we have to do the calculations ourselves, and they serve us well if we don't get them perfectly right. - +> You would think the browser could handle all these calculations elegantly for us based on CSS. Unfortunately, browsers are eagerly choosing an image URL *before* the style sheets are downloaded. So we have to do the calculations ourselves, and they serve them well if we don't do it perfectly. ===================== Content prompt used: @@ -51,8 +49,8 @@ Also carefully translate the title and description for the article; do not use & 1. Breakpoints & images 2. Why some (but not all) breakpoints matter for your images -Metadata returned1. Breakpoints e imágenes -2. Por qué algunos (pero no todos) los puntos de interrupción son importantes para tus imágenes +Metadata returned1. Puntos de quiebre e imágenes +2. Por qué importan algunos (pero no todos) los puntos de quiebre para tus imágenes Roundtrip (isolated) prompt used: diff --git a/src/content/docs/es/_roundtrip_browser-picks-srcset.txt b/src/content/docs/es/_roundtrip_browser-picks-srcset.txt index 4443f64..362eae4 100644 --- a/src/content/docs/es/_roundtrip_browser-picks-srcset.txt +++ b/src/content/docs/es/_roundtrip_browser-picks-srcset.txt @@ -1,66 +1,69 @@ --- -title: How browsers choose -description: How browsers choose between images listed in the srcset attribute -taskInputHash: 5d7773a8c6385fd7 +title: How the browser chooses +description: How the browser chooses between the images listed in the srcset attribute +taskInputHash: 78ffb2179558549b lang: en +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -How do browsers choose between images listed in the `srcset` attribute? Here we explain the steps, with examples for both width and density specifications, and how the browser decides according to the device and screen size. +How does the browser choose between the images listed in the `srcset` attribute? Here’s a step-by-step guide, with both width and density specifications, and how the browser decides based on device and window size. -- When using the `srcset` attribute in HTML, the browser follows a set of rules to choose the most appropriate 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 display window. The `srcset` attribute allows specifying different images based on width (using the `w` descriptor) or pixel density (using the `x` descriptor). Let's look at each case with examples. +- When using the `srcset` attribute in HTML, the browser uses a set of rules to choose the most appropriate image from a list of sources provided. These rules depend on both device display characteristics (resolution, pixel density) and window size. 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 over each case with examples. -1\. Width descriptor (`w`): +1. Width descriptor (`w`): -Suppose we have the following `srcset` attribute: +Assume we have the following `srcset` attribute: ```html -Example Image +Example Image ``` The browser will follow these steps: -a. Determine the DPR (Device Pixel Ratio) of the device. For example, a standard screen has a DPR of 1, while a high-resolution (Retina) screen has a DPR of 2 or higher. +a. Determine the DPR (Device Pixel Ratio). For example, a standard screen has a DPR of 1, while a high-resolution (Retina) screen has a DPR of 2 or more. 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: -- small-example.jpg: 400 * 1 = 400 pixels +- example-small.jpg: 400 * 1 = 400px -- medium-example.jpg: 800 * 1 = 800 pixels +- example-medium.jpg: 800 * 1 = 800px -- large-example.jpg: 1600 * 1 = 1600 pixels +- example-large.jpg: 1600 * 1 = 1600px -c. Compare the effective widths to the width of the display window. Suppose the width of the display window is 420 pixels. The browser will choose the smallest image with an effective width greater than or equal to the width of the display window. In this case, it will select `medium-example.jpg`. +c. Compare the effective widths with the window width. Suppose the window width is 420px. The browser will choose the smallest image with an effective width greater than or equal to the window width. In this case, it will select `example-medium.jpg`. -2\. Pixel density descriptor (`x`): +2. Pixel density descriptor (`x`): -Suppose we have the following `srcset` attribute: +Assume we have the following `srcset` attribute: ```html -Example Image +Example Image ``` The browser will follow these steps: -a. Determine the DPR (Device Pixel Ratio). For example, a standard screen has a DPR of 1, while a high-resolution (Retina) screen has a DPR of 2 or higher. +a. Determine the DPR (Device Pixel Ratio). For example, a standard screen has a DPR of 1, while a high-resolution (Retina) screen has a DPR of 2 or more. b. Compare the device DPR with the `x` descriptors in the `srcset`. In this case, we have three images with the following descriptors: -- 1x-example.jpg: 1x +- example-1x.jpg: 1x -- 2x-example.jpg: 2x +- example-2x.jpg: 2x -- 3x-example.jpg: 3x +- example-3x.jpg: 3x -c. Choose the image with the `x` descriptor closest to the device DPR. For a device with a DPR of 1, the browser will select `1x-example.jpg`. For a device with a DPR of 2, it will choose `2x-example.jpg`, and so on. +c. Choose the image with the `x` descriptor closest to the device DPR. For a device with a DPR of 1, the browser will select `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 the `sizes` attribute can also be used in combination with the `srcset` attribute to provide more information about how the image will be displayed at different window widths. This is especially useful when using the width descriptor (`w`). Here's an example: +It’s important to note that you can also use the `sizes` attribute in combination with the `srcset` attribute to provide more information about how the image will be displayed at different window widths. This is especially useful when using the width descriptor (`w`). Here’s an example: ```html - ``` -This sample markup includes: -- **src**: The default image source, displayed if the browser doesn't support srcset. -- **srcset**: The list of image sources and their density descriptors (1x, 2x, 3x). The browser chooses the most suitable image based on the user's screen. -- **alt**: A description of the image for accessibility purposes. +This markup example includes: +- **src**: The default image source to be displayed if the browser does not support srcset. +- **srcset**: The list of image sources and their density descriptors (1x, 2x, 3x). The browser will choose the most suitable 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. ===================== @@ -55,8 +50,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. Descriptores de densidad y Srcset -2. Ejemplos de uso de descriptores de densidad en `srcset` +Metadata returned1. Descriptores de densidad y srcset +2. Ejemplos de cómo utilizar descriptores de densidad en `srcset` Roundtrip (isolated) prompt used: diff --git a/src/content/docs/es/_roundtrip_introduction.txt b/src/content/docs/es/_roundtrip_introduction.txt index 7d7d4de..f8e962c 100644 --- a/src/content/docs/es/_roundtrip_introduction.txt +++ b/src/content/docs/es/_roundtrip_introduction.txt @@ -1,40 +1,38 @@ --- title: srcset and sizes attributes for -description: An efficient and opinionated guide to responsive images for 2023 -taskInputHash: c0bfd3a988eb464d +description: An efficient and opinionated guide to responsive images in 2023 +taskInputHash: a764c357741581bc lang: en -ignore: '/* cSpell:locale es,en*/' sidebar_sort_priority: 1000 -date_published: '2023-03-23' -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' --- -**An efficient and opinionated guide to images for 2023** +**An efficient and opinionated guide to responsive images in 2023** -See the sidebar for detailed information. This is the quick reference for updating your `` tags and handling modern devices in all their different sizes and pixel densities. You should [know that pixels aren't equal](/en/pixels-not-pixels) and `devicePixelRatio` is more likely to be around 3.875 than 1:1. Modern phones pretend to be 320-428 pixels wide for legibility (in CSS pixels), but have many device pixels per CSS pixel. +Please check the sidebar for detailed information. This is the quick reference for updating your `` tags to handle modern devices at all their different sizes and pixel densities. You should [know that pixels != pixels](/en/pixels-are-not-pixels) and that `devicePixelRatio` is more likely to be around 3.875 than 1:1. Modern phones pretend to have anywhere from 320 to 428 pixels wide for legibility (in CSS pixels) but have many device pixels per CSS pixel. -> If your image never changes size no matter how narrow the browser window, you should use a [density descriptor](/en/density-descriptors). This is often suitable for logos, icons, and buttons. +> If your image never resizes, no matter how narrow the browser window is, you should [use a density descriptor instead](/en/density-descriptors). This is usually suitable for logos, icons, and buttons. -Do you know your [breakpoints](/en/breakpoints)? You'll need those numbers to adjust the solution below — at minimum, the viewport width breakpoint where the main content area stops growing. +Do you know your [breakpoints](/en/breakpoints)? You'll need those numbers to adjust the solution below, and at a minimum the viewport width breakpoint at which the main content area stops growing. -### The easy method +### The Simple Method ```html Dog riding a bicycle - - + when the viewport is larger, the image is capped at 800 CSS pixels wide. --> - ``` ===================== @@ -50,7 +48,7 @@ Also carefully translate the title and description for the article; do not use & 2. An Efficient and Opinionated Guide to Responsive Images for 2023 Metadata returned1. srcset y tamaños de -2. Una guía eficiente y con opiniones sobre imágenes responsivas para 2023 +2. Una guía eficiente y con opiniones sobre imágenes receptivas para 2023 Roundtrip (isolated) prompt used: diff --git a/src/content/docs/es/_roundtrip_lighthouse-performance-test.txt b/src/content/docs/es/_roundtrip_lighthouse-performance-test.txt index 51c9125..5231655 100644 --- a/src/content/docs/es/_roundtrip_lighthouse-performance-test.txt +++ b/src/content/docs/es/_roundtrip_lighthouse-performance-test.txt @@ -1,28 +1,27 @@ --- -title: Performance testing with Lighthouse +title: Performance Testing with Lighthouse description: Steps on how to test the performance of a website using Lighthouse -taskInputHash: d6d69f5336f685c3 +taskInputHash: f77d81584d57a9a3 lang: en -ignore: '/* cSpell:locale es,en*/' -date_published: '2023-03-24' -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' --- -How to test the performance of your site with Lighthouse? +How do you test website performance with Lighthouse? -> Lighthouse is a tool that can be used to measure the performance, accessibility, and other aspects of a website. To test the performance of your website with Lighthouse, follow these steps: -> +> Lighthouse is a tool that can be used to measure performance, accessibility, and other aspects of a website. To test the performance of your website with Lighthouse, follow these steps: +> > 1\. Open the Google Chrome web browser and navigate to the page you want to test. -> -> 2\. Click on the three dots in the upper right corner of the browser window, then select "More Tools" and then "Developer Tools" or simply use the keyboard shortcut "Ctrl + Shift + I" (Windows, Linux) or "Command + Option + I" (macOS). -> -> 3\. In the Developer Tools panel, click on the Lighthouse icon located on the left side of the panel or press "Ctrl + Shift + P" (Windows, Linux) or "Command + Shift + P" (macOS) to open the command menu, type "Lighthouse", and select "Generate report". -> -> 4\. In the Lighthouse dialog box, select the performance and other relevant options you want to test, then click "Generate report". -> -> 5\. After Lighthouse completes its analysis, you will see a report with scores and recommendations for improving the performance, accessibility, and other areas of your website. -> -> By following these steps, you can use Lighthouse to test and optimize the performance of your website, which can help improve the user experience and search engine rankings. +> +> 2\. Click on the three dots in the upper right corner of the browser window, then select "More Tools" and then "Developer Tools" or simply use the keyboard shortcut "Ctrl+Shift+I" (Windows, Linux) or "Command+Option+I" (macOS). +> +> 3\. In the Developer Tools panel, click on the Lighthouse icon located on the left side of the panel or press "Ctrl+Shift+P" (Windows, Linux) or "Command+Shift+P" (macOS) to open the Command Menu, then type "Lighthouse" and select "Generate report." +> +> 4\. In the Lighthouse dialog box, select performance and other relevant options you want to test, then click "Generate report." +> +> 5\. After Lighthouse completes its analysis, you will see a report with scores and recommendations to improve the performance, accessibility, and other areas of your website. +> +> By following these steps, you can use Lighthouse to test and optimize the performance of your website, which can help improve its user experience and rankings in search engines. ===================== Content prompt used: @@ -36,7 +35,7 @@ Also carefully translate the title and description for the article; do not use & 2. Steps on how to test a website's performance using Lighthouse Metadata returned1. Prueba de rendimiento con Lighthouse -2. Pasos sobre cómo probar el rendimiento de un sitio web utilizando Lighthouse +2. Pasos sobre cómo probar el rendimiento de un sitio web usando Lighthouse Roundtrip (isolated) prompt used: diff --git a/src/content/docs/es/_roundtrip_picture-examples.txt b/src/content/docs/es/_roundtrip_picture-examples.txt index 9103a02..1ecdd08 100644 --- a/src/content/docs/es/_roundtrip_picture-examples.txt +++ b/src/content/docs/es/_roundtrip_picture-examples.txt @@ -2,36 +2,39 @@ title: Examples using the element description: >- Provides examples using the element for responsive images, art direction, and different image formats. -taskInputHash: aa9de5a15f947b5e +taskInputHash: b566d36d33874c9e lang: en +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Here are some examples of using the `` element and their explanations: +Here are some examples of how to use the `` element and their explanations: -1. Example for responsive images: +1\. Example for responsive images: ```html - - - An image + + + An image ``` -Explanation: In this example, the `` element is used to provide different image sources for different screen sizes. The `` elements specify the different image sources using the "srcset" attribute and the "media" attribute to specify the conditions under which each source should be used. The `` element is used as a fallback for older browsers or when the conditions specified in the `` elements are not met. +Explanation: In this example, the `` element is used to provide different image resources for different screen sizes. The `` elements specify the different image resources using the "srcset" attribute and the "media" attribute to specify the conditions under which each source should be used. The `` element is used as a fallback for older browsers or when the conditions specified in the `` elements are not met. -2. Example for art direction: +2\. Example for art direction: ```html - + - An image + An image ``` -Explanation: In this example, the `` element is used to provide different image sources depending on the orientation of the device. The `` element with the "media" attribute set to "(orientation: landscape)" specifies an image source for wide screens, while the `` element specifies an image source for vertical screens. +Explanation: In this example, the `` element is used to provide different image resources based on the device's orientation. The `` element with the "media" attribute set to "(orientation: landscape)" specifies an image resource for wide screens, while the `` element specifies an image resource for vertical screens. -3. Example for different image formats: +3\. Example for different image formats: ```html @@ -43,15 +46,15 @@ Explanation: In this example, the `` element is used to provide differe ``` -Explanation: In this example, the `` element is used to provide different image sources in different formats. The `` elements specify different image sources using the "srcset" attribute and the "type" attribute to specify the image format. The `` element is used as a fallback for older browsers that do not support the `` element. +Explanation: In this example, the `` element is used to provide different image resources for different image formats. The `` elements specify different image resources using the "srcset" attribute and the "type" attribute to specify the image format. The `` element is used as a fallback for older browsers that do not support the `` element. ## Breakpoints -In responsive design, breakpoints are used to define when the layout of a website or application should change based on the size of the viewport. Breakpoints are typically defined using media queries in CSS, which apply different styles based on the screen width. These breakpoints can be used in conjunction with the `` element to provide different image sources for different screen sizes. +In responsive design, breakpoints are used to define when the layout of a website or application should change based on the size of the viewport. Breakpoints are defined using media queries in CSS, which apply different styles based on the width of the screen. These breakpoints can be used in conjunction with the `` element to provide different image resources for different screen sizes. -For example, in the first example above, we used the `media` attribute to specify the screen width under which each source should be used. When the screen width is greater than or equal to 768 pixels, the `image-large.jpg` source will be used; when the screen width is greater than or equal to 480 pixels but less than 768 pixels, the `image-medium.jpg` source will be used; and when the screen width is less than 480 pixels, the `image-small.jpg` source will be used. This allows us to serve appropriately sized images for each device, reducing page load times and improving the user experience. +For example, in the first example above, we used the `media` attribute to specify the screen width at which each resource should be used. When the screen width is greater than or equal to 768 pixels, the `big-image.jpg` source is used; when the screen width is greater than or equal to 480 pixels but less than 768 pixels, the `medium-image.jpg` source is used; and when the screen width is less than 480 pixels, the `small-image.jpg` source is used. This allows us to provide appropriately sized images for every device, reduce page load times, and improve the user experience. -Breakpoints can be defined at any screen size, and multiple breakpoints can be used to create layouts that respond to a wide range of devices. By combining breakpoints with the `` element, flexible and responsive layouts can be created that look good on any device. +Breakpoints can be defined for any screen size and multiple breakpoints can be used to create layouts that respond to a wide variety of devices. By combining breakpoints with the `` element, you can create flexible and responsive designs that look great on any device. ===================== Content prompt used: @@ -64,8 +67,8 @@ Also carefully translate the title and description for the article; do not use & 1. Examples using element 2. Provides examples using the element, for responsive images, art direction and different image formats -Metadata returned1. Ejemplos utilizando el elemento -2. Proporciona ejemplos utilizando el elemento para imágenes responsivas, dirección de arte y diferentes formatos de imagen. +Metadata returned1. Ejemplos usando el elemento +2. Proporciona ejemplos que utilizan el elemento para imágenes responsivas, dirección de arte y diferentes formatos de imagen. Roundtrip (isolated) prompt used: diff --git a/src/content/docs/es/_roundtrip_pixels-not-pixels.txt b/src/content/docs/es/_roundtrip_pixels-not-pixels.txt index 80ec2d2..8976d19 100644 --- a/src/content/docs/es/_roundtrip_pixels-not-pixels.txt +++ b/src/content/docs/es/_roundtrip_pixels-not-pixels.txt @@ -1,23 +1,22 @@ --- title: px ≠ pixels description: Device pixels ≠ browser pixels ≠ image pixels -taskInputHash: a6f6575dc9ddbf59 +taskInputHash: f879e185cc72444b lang: en -ignore: '/* cSpell:locale es,en*/' sidebar_sort_priority: 900 -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' --- -### Device Pixels ≠ Browser Pixels ≠ Image Pixels +### Device pixels ≠ browser px ≠ image px -Thanks to Apple, CSS and HTML pixels (`px`) **almost always map to multiple device/printer pixels**. My phone's devicePixelRatio is 3.875; [what's yours?](https://www.mydevice.io/) +Thanks to Apple, CSS and HTML pixels (`px`) **almost always map to multiple device/printer pixels**. My phone's `devicePixelRatio` is 3.875; [what's yours?](https://www.mydevice.io/) -My desktop devicePixelRatio changes with the browser zoom, but is set to 1.5 by default (after all, my `System > Display > Scale` is set to 150%). +My desktop's `devicePixelRatio` changes when zooming in the browser, but it's 1.5 by default (my `System > Display > Scale` is set to 150%, after all). -Image files (excluding SVG) decode to a grid of pixels. **It's annoyingly difficult to get the image pixels to display perfectly at a 1:1 ratio with device pixels—but with `srcset` you can get close enough**, and a bit of Javascript can adjust the size of the HTML element after loading if you really have a justified reason for needing that perfect mapping, though such forbidden arts won't be revealed here. +Image files (excluding SVG) are decoded into a grid of pixels. **It's annoyingly difficult to get image pixels to display perfectly 1:1 with device pixels, but `srcset` can get close enough**, and you can adjust the HTML element size after loading with a bit of JavaScript if you have a truly compelling reason for needing that perfect mapping, although such forbidden arts will not be revealed here. -> Other absolute units [units (in, pc, pt, mm, cm, Q)](https://developer.mozilla.org/en/docs/Web/CSS/length) are defined in terms of the CSS pixel count and presume 96ppi. Developers avoid absolute units because it's generally better to use units derived from font size or viewport/container dimensions. Incompatible units can break layout if the user adjusts the `Accessibility > Text size multiplier`, zooms the browser, or rotates their device. It should be noted that you should do all these things before launching your site. +> Other absolute units [in, pc, pt, mm, cm, Q](https://developer.mozilla.org/es/docs/Web/CSS/Medidas_y_otros_unidades) are defined in terms of the number of CSS pixels and assume everything is 96ppi. Developers avoid absolute units because it's generally better to use units derived from font size or viewport/container dimensions. Non-matching units can break a layout if the user adjusts their `Accessibility > Text Size` multiplier, zooms in the browser, or rotates their device. Of course, you should test all of these things before launching your site. ===================== Content prompt used: @@ -31,7 +30,7 @@ Also carefully translate the title and description for the article; do not use & 2. Device px ≠ browser px ≠ image px Metadata returned1. px ≠ píxeles -2. Píxeles de dispositivo ≠ píxeles del navegador ≠ píxeles de imagen +2. Píxeles de dispositivo ≠ píxeles de navegador ≠ píxeles de imagen Roundtrip (isolated) prompt used: diff --git a/src/content/docs/es/_roundtrip_specify-width-height.txt b/src/content/docs/es/_roundtrip_specify-width-height.txt index bd3e7c3..82e1ec8 100644 --- a/src/content/docs/es/_roundtrip_specify-width-height.txt +++ b/src/content/docs/es/_roundtrip_specify-width-height.txt @@ -1,21 +1,20 @@ --- -title: Use Width and Height Attributes -description: Benefits of using width and height attributes in HTML code -taskInputHash: c1840d188c21b829 +title: Use Width and Height +description: Benefits of using the width and height attributes in HTML code +taskInputHash: 3a697d0f6acf5385 lang: en -ignore: '/* cSpell:locale es,en*/' -date_published: '2023-03-24' -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' --- Why should you use width and height in HTML? -> It's recommended to use width and height attributes in HTML code for images because it helps the web browser know the size of the image before it fully loads. This allows the browser to reserve the appropriate amount of space on the webpage for the image, which prevents content from jumping around while the image loads. -> -> Additionally, specifying the width and height attributes for images can also help improve overall webpage performance. When a browser knows the size of an image in advance, it can more accurately calculate the amount of space needed to display the image and prevent unnecessary reflows or repaints of content as it loads. -> -> Overall, using width and height attributes in HTML code for images can improve the user experience by making content load faster and reducing visual glitches. +> It is recommended to use the width and height attributes in HTML code for images because it helps the web browser to know the size of the image before it fully loads. This allows the browser to reserve the appropriate amount of space on the web page for the image, which prevents content from jumping while the image is loading. +> +> Additionally, specifying the width and height attributes for images can also help improve overall webpage performance. When a browser knows the size of an image in advance, it can more accurately calculate the amount of space needed to display the image and avoid unnecessary reflow or repaint of content while loading. +> +> Overall, using the width and height attributes in HTML code for images can improve the user experience by making content load faster and reducing visual glitches. ===================== Content prompt used: @@ -28,8 +27,8 @@ Also carefully translate the title and description for the article; do not use & 1. Use width and height 2. Benefits of using width and height attributes in HTML code -Metadata returned1. Usa ancho y altura -2. Beneficios de usar los atributos de ancho y altura en el código HTML +Metadata returned1. Usa ancho y alto +2. Beneficios de usar los atributos de ancho y alto en el código HTML Roundtrip (isolated) prompt used: diff --git a/src/content/docs/es/_roundtrip_when-to-use-picture.txt b/src/content/docs/es/_roundtrip_when-to-use-picture.txt index 088b3f2..e755abe 100644 --- a/src/content/docs/es/_roundtrip_when-to-use-picture.txt +++ b/src/content/docs/es/_roundtrip_when-to-use-picture.txt @@ -1,26 +1,24 @@ --- -title: When to Use the Element +title: When to use the element description: Explains in which situations you should use the element -taskInputHash: 97265d75f3229eaa +taskInputHash: 51d7f5ab633e52ac lang: en -ignore: '/* cSpell:locale es,en*/' -date_published: '2023-03-27' -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' --- -The `picture` element is used to provide multiple versions of an image and determine which version of the image to display based on certain conditions. It is particularly useful for optimizing images for different screen sizes and resolutions, and is commonly used in responsive web design. - +The `picture` element is used to offer multiple versions of an image and determines which version of the image to display based on certain conditions. It is particularly useful for optimizing images for different screen sizes and resolutions and is commonly used in responsive web design. Here are some specific scenarios where you might want to use the `picture` element: -* **Retina displays:** High-density displays such as Apple's Retina displays have a higher pixel density, which means images can appear blurry or pixelated if they are not optimized for high resolution. With the `picture` element, you can provide a version of the image that has twice the pixels of the normal version, so it appears sharp and clear on Retina displays. +* **Retina displays:** High-density displays like Apple's retina displays have a higher pixel density, which means images can appear blurry or pixelated if they are not optimized for high resolution. With the `picture` element, you can provide a version of the image that has double the pixels of the normal version, so it looks sharp and clear on retina displays. * **Different aspect ratios:** If you're designing a site that needs to display images with different aspect ratios (such as landscape vs. portrait), you can use the `picture` element to provide different versions of the image that are optimized for each aspect ratio. * **Bandwidth limitations:** Images can be large files that take up a lot of bandwidth, especially on mobile devices. With the `picture` element, you can provide smaller versions of the image for devices with smaller screens or slower internet connections, which can help reduce page load times. -* **Art-directed layouts:** Sometimes you may want to present an image in a certain way based on the design of the rest of the page. For example, you may want to show a close-up of a person's face on mobile devices, but a wider shot on desktop devices. The `picture` element allows you to provide different versions of the image that are optimized for different layouts. +* **Art-directed designs:** Sometimes, you may want to present an image in a certain way depending on the design of the rest of the page. For example, you may want to show a close-up of a person's face on mobile devices, but a wider photo on desktop devices. The `picture` element allows you to provide different versions of the image that are optimized for different designs. -Overall, the `picture` element is a powerful tool that can help you optimize your images for a variety of use cases and ensure that they look great no matter what device or screen size they are being viewed on. +Overall, the `picture` element is a powerful tool that can help you optimize your images for a variety of use cases and ensure they look great regardless of the device or screen size they are being viewed on. ===================== Content prompt used: @@ -34,7 +32,7 @@ Also carefully translate the title and description for the article; do not use & 2. Explains in which situations you should use the element Metadata returned1. Cuándo usar el elemento -2. Explica en qué situaciones se debe usar el elemento +2. Explica en qué situaciones deberías utilizar el elemento Roundtrip (isolated) prompt used: diff --git a/src/content/docs/es/_roundtrip_width-density.txt b/src/content/docs/es/_roundtrip_width-density.txt index e37b05a..460d210 100644 --- a/src/content/docs/es/_roundtrip_width-density.txt +++ b/src/content/docs/es/_roundtrip_width-density.txt @@ -1,20 +1,19 @@ --- title: Width and Density Descriptors -description: Examples of using width and density descriptors in `srcset` -taskInputHash: 74b8eb2869d948a0 +description: Examples of how to use width and density descriptors in `srcset` +taskInputHash: 57ff1c28d63c24f5 lang: en -ignore: '/* cSpell:locale es,en*/' -date_published: '2023-03-24' -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' --- Understanding Width (`w`) and Density (`x`) Descriptors in `srcset`. Use examples and Markdown. -> `srcset` is an HTML attribute that allows developers to provide multiple sources of images with different resolutions or pixel densities, and allow the browser to select the appropriate image based on the display characteristics of the device. The `srcset` attribute uses a combination of the `URL` and `w` or `x` descriptors to specify the images. +> `srcset` is an HTML attribute that allows developers to provide multiple image sources with different resolutions or pixel densities, and lets the browser select the appropriate image based on the device's screen characteristics. The `srcset` attribute uses a combination of the `URL` and either the `w` or `x` descriptors to specify the images. -## Width Descriptors (`w`) +## Width Descriptor (`w`) Description -> The `w` descriptor is used to specify the width of an image in pixels. It is used when you want to provide the browser with the dimensions of an image so it can choose the appropriate image for the available space on the screen. +> The `w` descriptor is used to specify the width of an image in pixels. It is used when we want to provide the browser with the dimensions of an image so it can choose the appropriate image for the available screen space. > The syntax for using the `w` descriptor in `srcset` is as follows: @@ -26,11 +25,11 @@ Understanding Width (`w`) and Density (`x`) Descriptors in `srcset`. Use example alt="Example Image"> ``` -> In the above example, we have provided the browser with three images and their corresponding widths in pixels. The browser will select the image with the width closest to the available space on the screen. +> In the example above, we have provided the browser with three images and their corresponding widths in pixels. The browser will select the image with the width closest to the available screen space. -## Density Descriptors (`x`) +## Density Descriptor (`x`) Description -> The `x` descriptor is used to specify the pixel density of an image, which is the ratio of physical pixels to CSS pixels. It is used when you want to provide the browser with different versions of the same image with different pixel densities. +> The `x` descriptor is used to specify the pixel density of an image, which is the ratio of physical pixels to CSS pixels. It is used when we want to provide the browser with different versions of the same image with different pixel densities. > The syntax for using the `x` descriptor in `srcset` is as follows: @@ -42,9 +41,9 @@ Understanding Width (`w`) and Density (`x`) Descriptors in `srcset`. Use example alt="Example Image"> ``` -> In the above example, we have provided the browser with three images and their different corresponding pixel densities. The browser will select the image with the pixel density closest to the device's display. +> In the example above, we have provided the browser with three images and their corresponding pixel densities. The browser will select the image with the pixel density closest to the device's screen. -> It is important to note that `w` and `x` descriptors can be used together in the same `srcset` attribute to provide the browser with more options to choose from. +> Note that the `w` and `x` descriptors can be used together in the same `srcset` attribute to provide the browser with even more options to choose from. ===================== Content prompt used: @@ -58,7 +57,7 @@ Also carefully translate the title and description for the article; do not use & 2. Examples of using width and density descriptors in `srcset` Metadata returned1. Descriptores de ancho y densidad -2. Ejemplos de uso de descriptores de ancho y densidad en `srcset` +2. Ejemplos de cómo usar los descriptores de ancho y densidad en `srcset` Roundtrip (isolated) prompt used: diff --git a/src/content/docs/es/breakpoints.md b/src/content/docs/es/breakpoints.md index fe98f82..ef650fb 100644 --- a/src/content/docs/es/breakpoints.md +++ b/src/content/docs/es/breakpoints.md @@ -1,37 +1,36 @@ --- -title: Breakpoints e imágenes +title: Puntos de quiebre e imágenes description: >- - Por qué algunos (pero no todos) los puntos de interrupción son importantes - para tus imágenes -taskInputHash: cc4be952df3fef63 + Por qué importan algunos (pero no todos) los puntos de quiebre para tus + imágenes +taskInputHash: d63995938314e702 lang: es -ignore: '/* cSpell:locale es,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' --- ### Antecedentes -Las pantallas pequeñas y los monitores grandes necesitan diseños diferentes. Para el propósito de `srcset` y `sizes`, necesitamos saber en qué punto cambia el diseño. +Las pantallas pequeñas y las pantallas grandes necesitan diseños diferentes. Para el propósito de `srcset` y `sizes`, necesitamos saber en qué punto cambia el diseño. -Los desarrolladores web deben decidir qué se encoje, se oculta o se reubica en pantallas más pequeñas - o más comúnmente, qué se expande, se revela o se agrega en pantallas más grandes. También tienen muy poca información para trabajar. ¿Está el usuario en una tableta o en un teléfono en modo horizontal - o en una ventana de pequeño navegador? +Los desarrolladores web deben decidir qué se encogerá, ocultará o reubicará en pantallas más pequeñas, o más comúnmente, qué se expandirá, revelará o agregará en pantallas más grandes. También tienen muy poca información. ¿Está el usuario en una tableta o en un teléfono en modo horizontal, o en una ventana de navegador pequeña? -Tenemos que elegir un ancho de viewport arbitrario donde cambie el diseño. Esto se llama un **punto de interrupción**. Es un número arbitrario de píxeles CSS ([no píxeles de dispositivo](/es/pixeles-no-pixeles)). Polypane tiene un [gran artículo](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023) sobre los puntos de interrupción utilizados comúnmente. +Tenemos que elegir un ancho de viewport arbitrario donde se produzca el cambio de diseño. Esto se llama un **punto de quiebre**. Es un número arbitrario de píxeles CSS ([no píxeles de dispositivo](/es/pixeles-no-pixeles)). Polypane tiene un [gran artículo](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023) sobre los puntos de quiebre comúnmente utilizados. -Algunas imágenes (como logotipos, iconos o botones) podrían ser inmunes a los cambios de diseño causados por estos puntos de interrupción (y estar bien con [descriptores de densidad de srcset](/es/descriptores-de-densidad)). +Algunas imágenes (como logotipos, iconos o botones) podrían ser inmunes a los cambios de diseño causados por estos puntos de quiebre (y estar bien con [descriptores de densidad de srcset](/es/descriptores-de-densidad)). -Las imágenes del contenido principal estarán limitadas por el tamaño de su contenedor. Por lo general, el área de contenido principal de una página se limitará a un ancho determinado en las pantallas más grandes, un `max-width`, pero en las pantallas pequeñas, el área de contenido principal llenará todo el viewport. +Las imágenes de contenido principal estarán limitadas por el tamaño de su contenedor. Típicamente, el área de contenido principal de una página se limitará a cierto ancho en las pantallas más grandes, un `max-width`, pero en pantallas pequeñas, el área de contenido principal ocupará todo el viewport. -Si tiene más de una columna en algunos puntos de interrupción, será más difícil calcular las reglas de tamaño efectivas, ya que el porcentaje del ancho de viewport que ocupa la imagen cambiará. +Si tiene más de una columna en algunos puntos de quiebre, será más difícil calcular las reglas de tamaño efectivas, ya que el porcentaje del ancho del viewport que ocupa la imagen cambiará. ### El método fácil -Dicho esto, no te compliques demasiado. Probablemente estarás muy bien con la siguiente aproximación: +Dicho esto, no piense demasiado en esto. Probablemente estará muy bien con la siguiente aproximación: -1. ¿A qué tamaño el columna principal (o el contenedor de la imagen) deja de crecer? Hasta ese ancho de viewport, podemos usar `100vw` para el atributo `sizes` de la imagen para indicar que la imagen ocupa el 100% del ancho del viewport. -2. ¿Cuál es el ancho máximo que el contenedor jamás alcanza? Podemos fijar eso como una `width` fija para todo lo demás. +1. ¿A qué tamaño deja de crecer la columna principal (o el contenedor de la imagen)? Hasta ese ancho de viewport, podemos usar `100vw` para el atributo `sizes` de la imagen para decir que la imagen ocupa el 100% del ancho del viewport. +2. ¿Cuál es el ancho máximo que el contenedor alcanza alguna vez? Podemos establecer eso como un ancho fijo para todo lo demás. -Si tu respuesta a 1 fue 700px y tu respuesta a 2 fue 800px, puedes usar el siguiente atributo `sizes`: +Si su respuesta a 1 fue 700px y su respuesta a 2 fue 800px, puede usar el siguiente atributo `sizes`: ```html @@ -40,4 +39,4 @@ Si tu respuesta a 1 fue 700px y tu respuesta a 2 fue 800px, puedes usar el sigui -> Pensarías que el navegador podría manejar todos estos cálculos por nosotros en función de CSS. Desafortunadamente, los navegadores están ávidos de elegir una URL de imagen *antes* de que se descarguen las hojas de estilo. Así que tenemos que hacer los cálculos nosotros mismos, y les sirve bien si no lo hacemos perfecto. +> Pensarías que el navegador podría manejar todos estos cálculos elegantemente por nosotros basados en el CSS. Desafortunadamente, los navegadores están ávidamente ansiosos de elegir una URL de la imagen *antes* de que se descarguen las hojas de estilo. Así que tenemos que hacer los cálculos nosotros mismos, y les sirve bien si no lo hacemos perfecto. diff --git a/src/content/docs/es/browser-picks-srcset.md b/src/content/docs/es/browser-picks-srcset.md index 5236618..8a23b71 100644 --- a/src/content/docs/es/browser-picks-srcset.md +++ b/src/content/docs/es/browser-picks-srcset.md @@ -1,16 +1,15 @@ --- -title: Cómo el navegador elige -description: Cómo el navegador elige entre imágenes listadas en el atributo srcset -taskInputHash: 49304fce4ac555da +title: Cómo elige el navegador +description: Cómo elige el navegador entre las imágenes listadas en el atributo srcset +taskInputHash: 78ffb2179558549b lang: es -ignore: '/* cSpell:locale es,en*/' -date_published: '2023-03-24' -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' --- -¿Cómo el navegador elige entre las imágenes listadas en el atributo `srcset`? Aquí hay un paso a paso, con ejemplos para especificaciones tanto de ancho como de densidad y cómo decide el navegador en función del dispositivo y el tamaño de la ventana gráfica. +¿Cómo elige el navegador entre las imágenes listadas en el atributo `srcset`? Aquí hay una guía paso a paso, con ejemplos tanto para las especificaciones de anchura como de densidad, y cómo decide el navegador basándose en el dispositivo y el tamaño de la ventana. -- Al usar el atributo `srcset` en HTML, el navegador utiliza un conjunto de reglas para elegir la imagen más apropiada de una lista de fuentes proporcionadas. Estas reglas dependen tanto de las características de la pantalla del dispositivo (resolución, densidad de píxeles), como del tamaño de la ventana gráfica. El atributo `srcset` te permite especificar diferentes imágenes según el ancho (usando el descriptor `w`) o la densidad de píxeles (usando el descriptor `x`). Repasemos cada caso con ejemplos. +- Al usar el atributo `srcset` en HTML, el navegador usa un conjunto de reglas para elegir la imagen más apropiada de una lista de fuentes proporcionadas. Estas reglas dependen tanto de las características de visualización del dispositivo (resolución, densidad de píxeles) como del tamaño de la ventana. El atributo `srcset` le permite especificar diferentes imágenes en función de la anchura (usando el descriptor `w`) o de la densidad de píxeles (usando el descriptor `x`). Veamos cada caso con ejemplos. 1\. Descriptor de ancho (`w`): @@ -18,23 +17,23 @@ Supongamos que tenemos el siguiente atributo `srcset`: ```html -Ejemplo de imagen +Imagen de ejemplo ``` -El navegador seguirá los siguientes pasos: +El navegador seguirá estos pasos: -a. Determina la DPR (Relación de píxeles del dispositivo) del dispositivo. Por ejemplo, una pantalla estándar tiene una DPR de 1, mientras que una pantalla de alta resolución (Retina) tiene una DPR de 2 o más. +a. Determinar el DPR (Relación de píxeles del dispositivo). Por ejemplo, una pantalla estándar tiene un DPR de 1, mientras que una pantalla de alta resolución (Retina) tiene un DPR de 2 o más. -b. Calcula el ancho efectivo para cada imagen en `srcset`. Multiplica el descriptor de ancho por la DPR. Para un dispositivo con una DPR de 1: +b. Calcular la anchura efectiva para cada imagen en el `srcset`. Multiplique el descriptor de ancho por el DPR. Para un dispositivo con un DPR de 1: -- example-small.jpg: 400 \* 1 = 400px +- ejemplo-pequeño.jpg: 400 \* 1 = 400px -- example-medium.jpg: 800 \* 1 = 800px +- ejemplo-mediano.jpg: 800 \* 1 = 800px -- example-large.jpg: 1600 \* 1 = 1600px +- ejemplo-grande.jpg: 1600 \* 1 = 1600px -c. Compara los anchos efectivos con el ancho de la ventana gráfica (viewport). Supongamos que el ancho de la ventana gráfica es de 420px. El navegador elegirá la imagen más pequeña con un ancho efectivo mayor o igual al ancho de la ventana gráfica. En este caso, seleccionará `example-medium.jpg`. +c. Compare las anchuras efectivas con el ancho de la ventana. Supongamos que el ancho de la ventana es de 420px. El navegador elegirá la imagen más pequeña con una anchura efectiva mayor o igual al ancho de la ventana. En este caso, seleccionará `ejemplo-mediano.jpg`. 2\. Descriptor de densidad de píxeles (`x`): @@ -42,28 +41,28 @@ Supongamos que tenemos el siguiente atributo `srcset`: ```html -Ejemplo de imagen +Imagen de ejemplo ``` -El navegador seguirá los siguientes pasos: +El navegador seguirá estos pasos: -a. Determina la DPR (Relación de píxeles de dispositivo) del dispositivo. Por ejemplo, una pantalla estándar tiene una DPR de 1, mientras que una pantalla de alta resolución (Retina) tiene una DPR de 2 o más. +a. Determinar el DPR (Relación de píxeles del dispositivo). Por ejemplo, una pantalla estándar tiene un DPR de 1, mientras que una pantalla de alta resolución (Retina) tiene un DPR de 2 o más. -b. Compara la DPR del dispositivo con los descriptores `x` en `srcset`. En este caso, tenemos tres imágenes con los siguientes descriptores: +b. Compare el DPR del dispositivo con los descriptores `x` en el `srcset`. En este caso, tenemos tres imágenes con los siguientes descriptores: -- example-1x.jpg: 1x +- ejemplo-1x.jpg: 1x -- example-2x.jpg: 2x +- ejemplo-2x.jpg: 2x -- example-3x.jpg: 3x +- ejemplo-3x.jpg: 3x -c. Elige la imagen con el descriptor `x` que se acerque más a la DPR del dispositivo. Para un dispositivo con una DPR de 1, el navegador seleccionará `example-1x.jpg`. Para un dispositivo con una DPR de 2, elegirá `example-2x.jpg`, y así sucesivamente. +c. Elija la imagen con el descriptor `x` que esté más cerca del DPR del dispositivo. Para un dispositivo con un DPR de 1, el navegador seleccionará `ejemplo-1x.jpg`. Para un dispositivo con un DPR de 2, elegirá `ejemplo-2x.jpg`, y así sucesivamente. -Es importante tener en cuenta que también se puede utilizar el atributo `sizes` en combinación con el atributo `srcset` para proporcionar más información sobre cómo se mostrará la imagen en diferentes anchos de ventana gráfica. Esto es particularmente útil cuando se utiliza el descriptor de anchura (`w`). Aquí hay un ejemplo: +Es importante tener en cuenta que también puede usar el atributo `sizes` en combinación con el atributo `srcset` para proporcionar más información sobre cómo se mostrará la imagen en diferentes anchos de ventana. Esto es especialmente útil cuando se usa el descriptor de ancho (`w`). Aquí hay un ejemplo: ```html -Una imagen de ejemplo ``` -Este ejemplo de marcado incluye: -- **src**: La fuente de imagen predeterminada, se muestra si el navegador no admite srcset. -- **srcset**: La lista de fuentes de imagen y sus descriptores de densidad (1x, 2x, 3x). El navegador elegirá la imagen más adecuada según la pantalla del usuario. -- **alt**: Una descripción de la imagen con fines de accesibilidad. +Este ejemplo de marcaje incluye: +- **src**: La fuente de imagen predeterminada, se muestra si el navegador no admite srcset. +- **srcset**: La lista de fuentes de imágenes y sus descriptores de densidad (1x, 2x, 3x). El navegador elegirá la imagen más adecuada en función de la pantalla del usuario. +- **alt**: Una descripción de la imagen con fines de accesibilidad. -¡Y eso es todo! Ha implementado con éxito srcset con descriptores de densidad, mejorando el rendimiento y la experiencia del usuario de su sitio web. +¡Y eso es todo! Ha implementado con éxito srcset con descriptores de densidad, mejorando el rendimiento y la experiencia de usuario de su sitio web. diff --git a/src/content/docs/es/introduction.md b/src/content/docs/es/introduction.md index a374792..edac3ac 100644 --- a/src/content/docs/es/introduction.md +++ b/src/content/docs/es/introduction.md @@ -1,23 +1,22 @@ --- title: srcset y tamaños de -description: Una guía eficiente y con opiniones sobre imágenes responsivas para 2023 -taskInputHash: c0bfd3a988eb464d +description: Una guía eficiente y con opiniones sobre imágenes receptivas para 2023 +taskInputHash: a764c357741581bc lang: es -ignore: '/* cSpell:locale es,en*/' sidebar_sort_priority: 1000 -date_published: '2023-03-23' -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' --- **Una guía eficiente y con opiniones sobre imágenes para 2023** -Consulte la barra lateral para obtener información detallada. Esta es la referencia rápida para actualizar las etiquetas `` y manejar los dispositivos modernos en todas sus diferentes tamaños y densidades de píxeles. Debe [saber que los píxeles no son iguales](/es/pixels-not-pixels) y que `devicePixelRatio` es más probable que esté alrededor de 3,875 en lugar de 1:1. Los teléfonos modernos fingen tener 320-428 píxeles de ancho para la legibilidad (en píxeles CSS), pero tienen muchos píxeles de dispositivo por píxel CSS. +Verifique la barra lateral para obtener información detallada. Esta es la referencia rápida para actualizar esas etiquetas `` para manejar dispositivos modernos en todos sus diferentes tamaños y densidades de píxeles. Debe [saber que píxeles != píxeles](/es/pixeles-no-son-pixeles) y que `devicePixelRatio` es más probable que sea alrededor de 3.875 que 1:1. Los teléfonos modernos aparentan tener de 320 a 428 píxeles de ancho para la legibilidad (en píxeles CSS), pero tienen muchos píxeles de dispositivo por píxel CSS. -> Si su imagen nunca cambia de tamaño, no importa cuán estrecha haga la ventana del navegador, debe utilizar un [descriptor de densidad](/es/density-descriptors). Esto a menudo es adecuado para logotipos, iconos y botones. +> Si su imagen nunca cambia de tamaño, sin importar lo estrecha que haga la ventana del navegador, debe usar [un descriptor de densidad en su lugar](/es/descriptores-de-densidad). Esto suele ser adecuado para logotipos, iconos y botones. -¿Sabe cuáles son sus [puntos de interrupción](/es/breakpoints)? Necesitará esos números para ajustar la solución a continuación, como mínimo, el punto de interrupción del ancho del viewport donde el área de contenido principal deja de crecer. - -### El método fácil +¿Sabe cuáles son sus [puntos de interrupción](/es/puntos-de-interrupción)? Necesitará esos números para ajustar la solución a continuación, y como mínimo el punto de interrupción del ancho del viewport en el que el área de contenido principal deja de crecer. + +### El método sencillo ```html @@ -28,12 +27,12 @@ Consulte la barra lateral para obtener información detallada. Esta es la refere img.jpg?format=webp&w=1600 1600w, img.jpg?format=webp&w=2000 2000w" - sizes="(max-width: 700px) 100vw, 800px" alt="Perro montando en bicicleta" /> + sizes="(max-width: 700px) 100vw, 800px" alt="Perro montando bicicleta" /> - - - + + ``` diff --git a/src/content/docs/es/lighthouse-performance-test.md b/src/content/docs/es/lighthouse-performance-test.md index 823fd93..68a4364 100644 --- a/src/content/docs/es/lighthouse-performance-test.md +++ b/src/content/docs/es/lighthouse-performance-test.md @@ -1,25 +1,24 @@ --- title: Prueba de rendimiento con Lighthouse -description: Pasos sobre cómo probar el rendimiento de un sitio web utilizando Lighthouse -taskInputHash: d6d69f5336f685c3 +description: Pasos sobre cómo probar el rendimiento de un sitio web usando Lighthouse +taskInputHash: f77d81584d57a9a3 lang: es -ignore: '/* cSpell:locale es,en*/' -date_published: '2023-03-24' -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' --- -¿Cómo se prueba el rendimiento del sitio con Lighthouse? +¿Cómo se prueba el rendimiento de un sitio web con Lighthouse? -> Lighthouse es una herramienta que se puede utilizar para medir el rendimiento, accesibilidad y otros aspectos de un sitio web. Para probar el rendimiento de tu sitio web con Lighthouse, sigue estos pasos: -> +> Lighthouse es una herramienta que se puede utilizar para medir el rendimiento, la accesibilidad y otros aspectos de un sitio web. Para probar el rendimiento de tu sitio web con Lighthouse, sigue estos pasos: +> > 1\. Abre el navegador web Google Chrome y navega hasta la página que deseas probar. -> -> 2\. Haz clic en los tres puntos en la esquina superior derecha de la ventana del navegador, luego selecciona "Más herramientas" y luego "Herramientas de desarrollador" o usa simplemente el atajo del teclado "Ctrl + Shift + I" (Windows, Linux) o "Command + Option + I" (macOS). -> -> 3\. En el panel Herramientas de desarrollador, haz clic en el icono de Lighthouse ubicado en el lado izquierdo del panel o presiona "Ctrl + Shift + P" (Windows, Linux) o "Command + Shift + P" (macOS) para abrir el menú de comandos, escribe "Lighthouse" y selecciona "Generar reporte". -> -> 4\. En el cuadro de diálogo Lighthouse, selecciona el rendimiento y otras opciones relevantes que deseas probar, luego haz clic en "Generar reporte". -> -> 5\. Después de que Lighthouse complete su análisis, verás un informe con puntuaciones y recomendaciones para mejorar el rendimiento, accesibilidad y otras áreas de tu sitio web. -> -> Siguiendo estos pasos, puedes utilizar Lighthouse para probar y optimizar el rendimiento de tu sitio web, lo que puede ayudar a mejorar la experiencia de usuario y los rankings de los motores de búsqueda. +> +> 2\. Haz clic en los tres puntos en la esquina superior derecha de la ventana del navegador, luego selecciona "Más herramientas" y luego "Herramientas para desarrolladores" o simplemente usa el atajo de teclado "Ctrl+Shift+I" (Windows, Linux) o "Command+Option+I" (macOS). +> +> 3\. En el panel de Herramientas para desarrolladores, haz clic en el icono de Lighthouse ubicado en el lado izquierdo del panel o presiona "Ctrl+Shift+P" (Windows, Linux) o "Command+Shift+P" (macOS) para abrir el Menú de comandos, luego escribe "Lighthouse" y selecciona "Generar informe". +> +> 4\. En el cuadro de diálogo de Lighthouse, selecciona el rendimiento y otras opciones relevantes que deseas probar, luego haz clic en "Generar informe". +> +> 5\. Después de que Lighthouse complete su análisis, verás un informe con puntuaciones y recomendaciones para mejorar el rendimiento, la accesibilidad y otras áreas de tu sitio web. +> +> Siguiendo estos pasos, puedes utilizar Lighthouse para probar y optimizar el rendimiento de tu sitio web, lo que puede ayudar a mejorar su experiencia de usuario y sus clasificaciones en los motores de búsqueda. diff --git a/src/content/docs/es/picture-examples.md b/src/content/docs/es/picture-examples.md index 2d49689..d9b7c19 100644 --- a/src/content/docs/es/picture-examples.md +++ b/src/content/docs/es/picture-examples.md @@ -1,14 +1,13 @@ --- title: Ejemplos usando el elemento description: >- - Proporciona ejemplos utilizando el elemento , para imágenes + Proporciona ejemplos que utilizan el elemento para imágenes responsivas, dirección de arte y diferentes formatos de imagen. -taskInputHash: 6db4516ee45090eb +taskInputHash: b566d36d33874c9e lang: es -ignore: '/* cSpell:locale es,en*/' -date_published: '2023-03-24' -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' --- Aquí hay algunos ejemplos de cómo usar el elemento `` y sus explicaciones: @@ -16,44 +15,44 @@ Aquí hay algunos ejemplos de cómo usar el elemento `` y sus explicaci ```html - - - Una imagen + + + Una imagen ``` -Explicación: En este ejemplo, el elemento `` se utiliza para proporcionar diferentes fuentes de imágenes para diferentes tamaños de pantalla. Los elementos `` especifican las diferentes fuentes de imagen utilizando el atributo "srcset" y el atributo "media" para especificar las condiciones en las que se debe utilizar cada fuente. El elemento `` se utiliza como alternativa para navegadores antiguos o cuando no se cumplen las condiciones especificadas en los elementos ``. +Explicación: En este ejemplo, el elemento `` se utiliza para proporcionar diferentes recursos de imagen para diferentes tamaños de pantalla. Los elementos `` especifican los diferentes recursos de imagen utilizando el atributo "srcset" y el atributo "media" para especificar las condiciones en las que se debe usar cada fuente. El elemento `` se utiliza como alternativa para navegadores más antiguos o cuando no se cumplen las condiciones especificadas en los elementos ``. -2\. Ejemplo para dirección de arte: +2\. Ejemplo para la dirección de arte: ```html - + - Una imagen + Una imagen ``` -Explicación: En este ejemplo, el elemento `` se utiliza para proporcionar diferentes fuentes de imágenes según la orientación del dispositivo. El elemento `` con el atributo "media" establecido en "(orientation: landscape)" especifica una fuente de imagen para pantallas anchas, mientras que el elemento `` especifica una fuente de imagen para pantallas verticales. +Explicación: En este ejemplo, el elemento `` se utiliza para proporcionar diferentes recursos de imagen según la orientación del dispositivo. El elemento `` con el atributo "media" establecido en "(orientation: landscape)" especifica un recurso de imagen para pantallas anchas, mientras que el elemento `` especifica un recurso de imagen para pantallas verticales. 3\. Ejemplo para diferentes formatos de imagen: ```html - + - + - Una imagen + Una imagen ``` -Explicación: En este ejemplo, el elemento `` se utiliza para proporcionar diferentes fuentes de imágenes para diferentes formatos de imagen. Los elementos `` especifican diferentes fuentes de imagen utilizando el atributo "srcset" y el atributo "type" para especificar el formato de imagen. El elemento `` se utiliza como alternativa para navegadores antiguos que no admiten el elemento ``. +Explicación: En este ejemplo, el elemento `` se utiliza para proporcionar diferentes recursos de imagen para diferentes formatos de imagen. Los elementos `` especifican distintos recursos de imagen usando el atributo "srcset" y el atributo "type" para especificar el formato de imagen. El elemento `` se utiliza como alternativa para navegadores más antiguos que no admiten el elemento ``. -## Puntos de quiebre +## Puntos de interrupción -En el diseño responsivo, los puntos de quiebre se utilizan para definir cuándo debe cambiar el diseño de un sitio web o aplicación en función del tamaño del viewport. Los puntos de quiebre se definen típicamente utilizando consultas de medios en CSS, que aplican diferentes estilos dependiendo del ancho de la pantalla. Estos puntos de quiebre se pueden utilizar en conjunto con el elemento `` para proporcionar diferentes fuentes de imágenes para diferentes tamaños de pantalla. +En el diseño responsivo, se utilizan los puntos de interrupción para definir cuándo el diseño de un sitio web o aplicación debe cambiar según el tamaño de la ventana gráfica. Los puntos de interrupción se definen mediante consultas de medios en CSS, que aplican diferentes estilos según el ancho de la pantalla. Estos puntos de interrupción se pueden utilizar junto con el elemento `` para proporcionar diferentes recursos de imagen para diferentes tamaños de pantalla. -Por ejemplo, en el primer ejemplo anterior, usamos el atributo `media` para especificar el ancho de pantalla bajo el cual se debe utilizar cada fuente. Cuando el ancho de pantalla es mayor o igual a 768 píxeles, se utilizará la fuente `image-large.jpg`; cuando el ancho de pantalla es mayor o igual a 480 píxeles pero menor a 768 píxeles, se utilizará la fuente `image-medium.jpg`; y cuando el ancho de pantalla es inferior a 480 píxeles, se utilizará la fuente `image-small.jpg`. Esto nos permite servir imágenes con el tamaño adecuado para cada dispositivo, reduciendo los tiempos de carga de página y mejorando la experiencia del usuario. +Por ejemplo, en el primer ejemplo anterior, usamos el atributo `media` para especificar el ancho de pantalla en el que se debe usar cada recurso. Cuando el ancho de la pantalla es mayor o igual a 768 píxeles, se usa la fuente `imagen-grande.jpg`; cuando el ancho de pantalla es mayor o igual a 480 píxeles pero menor que 768 píxeles, se usa la fuente `imagen-media.jpg`; y cuando el ancho de pantalla es inferior a 480 píxeles, se usa la fuente `imagen-pequeña.jpg`. Esto nos permite proporcionar imágenes de tamaño adecuado para cada dispositivo, reducir los tiempos de carga de página y mejorar la experiencia del usuario. -Los puntos de quiebre se pueden definir en cualquier tamaño de pantalla, y se pueden utilizar múltiples puntos de quiebre para crear diseños que respondan a una amplia gama de dispositivos. Al combinar puntos de quiebre con el elemento ``, se pueden crear diseños flexibles y responsivos que se ven geniales en cualquier dispositivo. +Los puntos de interrupción se pueden definir para cualquier tamaño de pantalla y se pueden usar varios puntos de interrupción para crear diseños que respondan a una amplia gama de dispositivos. Al combinar puntos de interrupción con el elemento ``, puede crear diseños flexibles y responsivos que se vean geniales en cualquier dispositivo. diff --git a/src/content/docs/es/pixels-not-pixels.md b/src/content/docs/es/pixels-not-pixels.md index 00b7cef..2b3eaf7 100644 --- a/src/content/docs/es/pixels-not-pixels.md +++ b/src/content/docs/es/pixels-not-pixels.md @@ -1,20 +1,19 @@ --- title: px ≠ píxeles -description: Píxeles de dispositivo ≠ píxeles del navegador ≠ píxeles de imagen -taskInputHash: a6f6575dc9ddbf59 +description: Píxeles de dispositivo ≠ píxeles de navegador ≠ píxeles de imagen +taskInputHash: f879e185cc72444b lang: es -ignore: '/* cSpell:locale es,en*/' sidebar_sort_priority: 900 -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' --- -### Píxeles de dispositivo ≠ píxeles del navegador ≠ píxeles de imagen +### Dispositivo pixels ≠ px de navegador ≠ px de imagen -Gracias a Apple, los píxeles de CSS y HTML (`px`) **casi siempre se asignan a múltiples píxeles de dispositivo/impresora**. El devicePixelRatio de mi teléfono es 3,875; [¿cuál es el tuyo?](https://www.mydevice.io/) +Gracias a Apple, los píxeles CSS y HTML (`px`) **casi siempre se mapean a múltiples píxeles del dispositivo/impresora**. El devicePixelRatio en mi teléfono es de 3,875; [¿cuál es el tuyo?](https://www.mydevice.io/) -Mi dispositivo de escritorio devicePixelRatio cambia con el zoom del navegador, pero es predeterminadamente 1,5 (después de todo, mi `Sistema > Pantalla > Escala` es 150%). +Mi devicePixelRatio de escritorio cambia al hacer zoom en el navegador, pero por defecto es 1,5 (mi `System > Display > Scale` es del 150%, después de todo). -Los archivos de imagen (excluyendo SVG) se decodifican a una cuadrícula de píxeles. **Es molestoamente difícil obtener que los píxeles de la imagen se muestren perfectamente a una relación 1:1 con los píxeles de dispositivo -pero con `srcset` puedes llegar lo *suficientemente* cerca**, y un poco de Javascript puede ajustar el tamaño del elemento html después de la carga si realmente tienes razones justificadas para necesitar ese mapeo perfecto, aunque dichas artes prohibidas no serán reveladas aquí. +Los archivos de imagen (excluyendo SVG) se decodifican en una cuadrícula de píxeles. **Es molestomente difícil conseguir que los píxeles de la imagen se muestren de manera perfecta en una relación de 1:1 con los píxeles del dispositivo, pero con `srcset` puedes acercarte lo suficiente**, y con un poco de JavaScript se puede ajustar el tamaño del elemento HTML después de la carga si tienes razones verdaderamente justificadas para necesitar ese mapeo perfecto, aunque tales artes prohibidas no serán reveladas aquí. -> Otras unidades absolutas [unidades (in, pc, pt, mm, cm, Q)](https://developer.mozilla.org/es/docs/Web/CSS/length) se definen en términos del número de píxeles CSS y pretenden que todo sea de 96 ppp. Los desarrolladores evitan las unidades absolutas porque generalmente es mejor utilizar unidades derivadas del tamaño de fuente o de las dimensiones del viewport/contenedor. Las unidades incompatibles pueden romper una disposición si el usuario ajusta el multiplicador de `Accesibilidad > Tamaño de texto`, acerca el navegador, o rota su dispositivo. Cabe decir que debes hacer todas estas cosas antes de lanzar tu sitio. +> Otras unidades absolutas [in, pc, pt, mm, cm, Q](https://developer.mozilla.org/es/docs/Web/CSS/Medidas_y_otros_unidades) se definen en términos del número de píxeles CSS y pretenden que todo es de 96 ppp. Los desarrolladores evitan las unidades absolutas porque generalmente es mejor usar unidades que se derivan del tamaño de fuente o de las dimensiones del viewport/contenedor. Las unidades no coincidentes pueden romper un diseño si el usuario ajusta su multiplicador de `Accessibility > Text Size`, hace zoom en el navegador o rota su dispositivo. Por supuesto, debes hacer todas estas cosas antes de lanzar tu sitio. diff --git a/src/content/docs/es/specify-width-height.md b/src/content/docs/es/specify-width-height.md index 74d5c12..3611e6b 100644 --- a/src/content/docs/es/specify-width-height.md +++ b/src/content/docs/es/specify-width-height.md @@ -1,17 +1,16 @@ --- -title: Usa ancho y altura -description: Beneficios de usar los atributos de ancho y altura en el código HTML -taskInputHash: c1840d188c21b829 +title: Usa ancho y alto +description: Beneficios de usar los atributos de ancho y alto en el código HTML +taskInputHash: 3a697d0f6acf5385 lang: es -ignore: '/* cSpell:locale es,en*/' -date_published: '2023-03-24' -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' --- -¿Por qué deberías poner ancho y altura en el HTML? +¿Por qué deberías poner el ancho y alto en HTML? -> Se recomienda poner los atributos de ancho y altura en el código HTML de las imágenes porque ayuda al navegador web a conocer el tamaño de la imagen antes de que se cargue por completo. Esto permite al navegador reservar la cantidad apropiada de espacio en la página web para la imagen, lo que evita que el contenido salte mientras se carga la imagen. +> Se recomienda poner los atributos de ancho y alto en el código HTML de las imágenes porque ayuda al navegador web a conocer el tamaño de la imagen antes de que se cargue completamente. Esto permite al navegador reservar la cantidad adecuada de espacio en la página web para la imagen, lo que evita que el contenido salte mientras la imagen se carga. > -> Además, especificar los atributos de ancho y altura para las imágenes también puede ayudar a mejorar el rendimiento general de la página web. Cuando un navegador conoce el tamaño de una imagen de antemano, puede calcular con mayor precisión la cantidad de espacio necesario para mostrar la imagen y evitar reflujo innecesarios o repintados del contenido a medida que se carga. +> Además, especificar los atributos de ancho y alto para las imágenes también puede ayudar a mejorar el rendimiento general de la página web. Cuando un navegador conoce el tamaño de una imagen de antemano, puede calcular con mayor precisión la cantidad de espacio necesario para mostrar la imagen y evitar reflujo o repintado innecesario del contenido mientras se carga. > -> En general, el uso de los atributos de ancho y altura en el código HTML de las imágenes puede mejorar la experiencia del usuario al hacer que el contenido se cargue más rápido y reducir las fallas visuales. +> En general, usar los atributos de ancho y alto en el código HTML de las imágenes puede mejorar la experiencia del usuario al hacer que el contenido se cargue más rápido y reducir las fallas visuales. diff --git a/src/content/docs/es/when-to-use-picture.md b/src/content/docs/es/when-to-use-picture.md index 2c26e07..b7d26ae 100644 --- a/src/content/docs/es/when-to-use-picture.md +++ b/src/content/docs/es/when-to-use-picture.md @@ -1,23 +1,21 @@ --- title: Cuándo usar el elemento -description: Explica en qué situaciones se debe usar el elemento -taskInputHash: 97265d75f3229eaa +description: Explica en qué situaciones deberías utilizar el elemento +taskInputHash: 51d7f5ab633e52ac lang: es -ignore: '/* cSpell:locale es,en*/' -date_published: '2023-03-27' -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' --- -El elemento `picture` se utiliza para proporcionar múltiples versiones de una imagen y determina cuál versión de la imagen mostrar en función de ciertas condiciones. Es particularmente útil para optimizar imágenes para diferentes tamaños de pantalla y resoluciones, y se utiliza comúnmente en diseño web adaptable. +El elemento `picture` se utiliza para ofrecer múltiples versiones de una imagen y determina cuál versión de la imagen se debe mostrar en función de ciertas condiciones. Es particularmente útil para optimizar imágenes para diferentes tamaños y resoluciones de pantalla, y se utiliza comúnmente en el diseño web responsivo. +Aquí hay algunos escenarios específicos donde podrías querer utilizar el elemento `picture`: -Aquí hay algunos escenarios específicos donde podría querer utilizar el elemento `picture`: +* **Pantallas retina:** Las pantallas de alta densidad como las pantallas retina de Apple tienen una mayor densidad de píxeles, lo que significa que las imágenes pueden parecer borrosas o pixeladas si no están optimizadas para alta resolución. Con el elemento `picture`, puedes proporcionar una versión de la imagen que tenga el doble de píxeles que la versión normal, para que se vea nítida y clara en las pantallas retina. -* **Pantallas Retina:** Las pantallas de alta densidad como las pantallas Retina de Apple tienen una mayor densidad de píxeles, lo que significa que las imágenes pueden verse borrosas o pixeladas si no se optimizan para una resolución alta. Con el elemento `picture`, puede proporcionar una versión de la imagen que tiene el doble de píxeles que la versión normal, para que se vea nítida y clara en las pantallas Retina. +* **Diferentes relaciones de aspecto:** Si estás diseñando un sitio que necesita mostrar imágenes con diferentes razones de aspecto (como paisaje frente a retrato), puedes utilizar el elemento `picture` para proporcionar diferentes versiones de la imagen que están optimizadas para cada relación de aspecto. -* **Diferentes relaciones de aspecto:** Si está diseñando un sitio que debe mostrar imágenes con diferentes relaciones de aspecto (como paisaje vs. retrato), puede utilizar el elemento `picture` para proporcionar diferentes versiones de la imagen que estén optimizadas para cada relación de aspecto. +* **Limitaciones de ancho de banda:** Las imágenes pueden ser archivos grandes que ocupan mucho ancho de banda, especialmente en dispositivos móviles. Con el elemento `picture`, puedes proporcionar versiones más pequeñas de la imagen para dispositivos con pantallas más pequeñas o conexiones a Internet más lentas, lo que puede ayudar a reducir los tiempos de carga de la página. -* **Limitaciones de ancho de banda:** Las imágenes pueden ser archivos grandes que ocupan mucho ancho de banda, especialmente en dispositivos móviles. Con el elemento `picture`, puede proporcionar versiones más pequeñas de la imagen para dispositivos con pantallas más pequeñas o conexiones de Internet más lentas, lo que puede ayudar a reducir los tiempos de carga de la página. +* **Diseños dirigidos por arte:** A veces, puede que desees presentar una imagen de determinada manera dependiendo del diseño del resto de la página. Por ejemplo, puedes querer mostrar un primer plano del rostro de una persona en dispositivos móviles, pero una foto más amplia en dispositivos de escritorio. El elemento `picture` te permite proporcionar diferentes versiones de la imagen que están optimizadas para diferentes diseños. -* **Diseños dirigidos por arte:** A veces puede desear presentar una imagen de cierta manera según el diseño del resto de la página. Por ejemplo, puede querer mostrar un primer plano del rostro de una persona en dispositivos móviles, pero una toma más amplia en dispositivos de escritorio. El elemento `picture` le permite proporcionar diferentes versiones de la imagen que estén optimizadas para diferentes diseños. - -En general, el elemento `picture` es una herramienta poderosa que puede ayudarlo a optimizar sus imágenes para una variedad de casos de uso y asegurarse de que se vean geniales sin importar en qué dispositivo o tamaño de pantalla se estén viendo. +En general, el elemento `picture` es una herramienta poderosa que puede ayudarte a optimizar tus imágenes para una variedad de casos de uso y asegurarte de que se vean geniales independientemente del dispositivo o tamaño de pantalla en que se estén visualizando. diff --git a/src/content/docs/es/width-density.md b/src/content/docs/es/width-density.md index 123cd3f..1563561 100644 --- a/src/content/docs/es/width-density.md +++ b/src/content/docs/es/width-density.md @@ -1,19 +1,19 @@ --- title: Descriptores de ancho y densidad -description: Ejemplos de uso de descriptores de ancho y densidad en `srcset` -taskInputHash: 74b8eb2869d948a0 +description: Ejemplos de cómo usar los descriptores de ancho y densidad en `srcset` +taskInputHash: 57ff1c28d63c24f5 lang: es -ignore: '/* cSpell:locale es,en*/' -date_published: '2023-03-24' -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' --- -Entendiendo los descriptores de ancho (w) y densidad (x) en `srcset`. Usa ejemplos y Markdown. +Entendiendo los descriptores de ancho (w) y densidad (x) en `srcset`. Use ejemplos y use Markdown. -> `srcset` es un atributo HTML que permite a los desarrolladores proporcionar múltiples fuentes de imágenes con diferentes resoluciones o densidades de píxeles, y permitir que el navegador seleccione la imagen adecuada en función de las características de visualización del dispositivo. El atributo `srcset` utiliza una combinación de la `URL` y los descriptores `w` o `x` para especificar las imágenes. -## Descriptores de Ancho (`w`) +> `srcset` es un atributo HTML que permite a los desarrolladores proporcionar múltiples fuentes de imágenes con diferentes resoluciones o densidades de píxeles, y permitir que el navegador seleccione la imagen apropiada según las características de pantalla del dispositivo. El atributo `srcset` utiliza una combinación de la `URL` y los descriptores `w` o `x` para especificar las imágenes. -> El descriptor `w` se utiliza para especificar el ancho de una imagen en píxeles. Se utiliza cuando se desea proporcionar al navegador las dimensiones de una imagen para que pueda elegir la imagen adecuada para el espacio disponible en la pantalla. +## Descripción del ancho (`w`) + +> El descriptor `w` se utiliza para especificar el ancho de una imagen en píxeles. Se utiliza cuando queremos proporcionar al navegador las dimensiones de una imagen para que pueda elegir la imagen adecuada para el espacio de pantalla disponible. > La sintaxis para utilizar el descriptor `w` en `srcset` es la siguiente: @@ -26,10 +26,11 @@ Entendiendo los descriptores de ancho (w) y densidad (x) en `srcset`. Usa ejempl ``` -> En el ejemplo anterior, hemos proporcionado al navegador tres imágenes y sus anchos correspondientes en píxeles. El navegador seleccionará la imagen con el ancho más cercano al espacio disponible en la pantalla. -## Descriptores de Densidad (`x`) +> En el ejemplo anterior, hemos proporcionado al navegador tres imágenes y sus correspondientes anchuras en píxeles. El navegador seleccionará la imagen con el ancho más cercano al espacio de pantalla disponible. + +## Descripción de densidad (`x`) -> El descriptor `x` se utiliza para especificar la densidad de píxeles de una imagen, que es la relación de píxeles físicos a píxeles CSS. Se utiliza cuando se desea proporcionar al navegador diferentes versiones de la misma imagen con diferentes densidades de píxeles. +> El descriptor `x` se utiliza para especificar la densidad de píxeles de una imagen, que es la relación entre los píxeles físicos y los píxeles CSS. Se utiliza cuando queremos proporcionar al navegador diferentes versiones de la misma imagen con diferentes densidades de píxeles. > La sintaxis para utilizar el descriptor `x` en `srcset` es la siguiente: @@ -42,6 +43,6 @@ Entendiendo los descriptores de ancho (w) y densidad (x) en `srcset`. Usa ejempl ``` -> En el ejemplo anterior, hemos proporcionado al navegador tres imágenes y sus diferentes densidades de píxeles correspondientes. El navegador seleccionará la imagen con la densidad de píxeles más cercana a la pantalla del dispositivo. +> En el ejemplo anterior, hemos proporcionado al navegador tres imágenes y sus correspondientes densidades de píxeles. El navegador seleccionará la imagen con la densidad de píxeles más cercana a la pantalla del dispositivo. -> Es importante notar que los descriptores `w` y `x` se pueden usar juntos en el mismo atributo `srcset` para proporcionar al navegador más opciones para elegir. +> Tenga en cuenta que los descriptores `w` y `x` se pueden utilizar juntos en el mismo atributo `srcset` para proporcionar al navegador más opciones para elegir. diff --git a/src/content/docs/fr/_roundtrip_breakpoints.txt b/src/content/docs/fr/_roundtrip_breakpoints.txt index ff1e785..74f0462 100644 --- a/src/content/docs/fr/_roundtrip_breakpoints.txt +++ b/src/content/docs/fr/_roundtrip_breakpoints.txt @@ -1,43 +1,44 @@ --- title: Breakpoints and Images description: >- - Why some breakpoints (but not all) matter for your images -taskInputHash: b9dc6c0d27d7c8b7 + Why some (but not all) breakpoints matter for your images +taskInputHash: 3a845882fe3c1d34 lang: en -ignore: '/* cSpell:locale fr,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' --- -### Context +### Background -Small screens and large monitors require different layouts. For the needs of `srcset` and `sizes`, we need to know when the layout changes. +Small screens and large monitors require different layouts. For `srcset` and `sizes`, we need to know when the layout changes. -Web developers need to decide what to reduce, hide or move on small screens - or more commonly, what to stretch, reveal or add on large screens. They also have very little information. Is the user on a tablet or a phone in landscape mode - or a small browser window? +Web developers have to decide what to reduce, hide, or move on small screens—or more commonly, what to enlarge, reveal or add on large screens. They also have very little information to work with. Is the user using a tablet or a phone in landscape mode, or a small browser window? -We need to choose an arbitrary viewport width where 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 an [excellent 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 where the layout changes. This is called a **breakpoint**. It's an arbitrary number of pixels in CSS ([not physical pixels](/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. -Some images (like logos or icons or buttons) may be immune to layout changes caused by these breakpoints (and be fine with [srcset density descriptors](/en/density-descriptors)). +Some images (like logos, icons, or buttons) may be insensitive to layout changes caused by these breakpoints (and work with [srcset density descriptors](/density-descriptors)). -Images in the main content will be constrained by the size of their container. Typically, the main content area of a page will be limited to some width on larger screens, a `max-width`, but on smaller screens, the main content area will fill the entire viewport. +Images of primary content will be constrained by the size of their layout container. Generally, the main content area of a page will be constrained to a certain width on larger screens, with a `max-width`, but on smaller screens, the main content area will fill the entire viewport. -If you have more than one column at certain breakpoints, it will be harder to calculate effective sizing rules, because the percentage of the viewport width the image occupies will change. +If you have more than one column at certain breakpoints, it will be harder to calculate effective dimensioning rules, because the percentage of the viewport width that the image occupies will change. -### The easy way +### The Simple Method -That being said, don't think too much about this. You'll probably be just fine with the following approximation method: +That being said, don't sweat it too much. You'll probably be just fine with the following approximation: -1. At what size does the main column (or image container) stop growing? Up to this 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. -2. What is the maximum width the container ever reaches? We can set that as a fixed width for everything else. +1. At what size does the main column (or image container) stop growing? Up to this viewport width, we can use `100vw` for the image's `sizes` attribute to say the image takes up 100% of the viewport width. +2. What is the maximum width of the container? We can set it as a fixed width for everything else. -If your answer to 1 was 700px and your answer to 2 was 800px, you can use the following `sizes` attribute: +If your answer to question 1 was 700px, and your answer to question 2 was 800px, you can use the following `sizes` attribute: ```html - + ``` -> You thought the browser might handle all these calculations for us based on CSS. Unfortunately, browsers are aggressively keen to choose an image URL *before* downloading style sheets. We have to do the calculations ourselves, and they're well worth it if we don't get them perfectly. + + +> You might think the browser could handle all these calculations perfectly for us based on the CSS. Unfortunately, the browsers are aggressively eager to pick an image URL *before* downloading any stylesheets. So we have to do the calculations ourselves, and too bad for them if we're not perfect. ===================== Content prompt used: @@ -51,7 +52,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. Points de rupture et images -2. Pourquoi certains points de rupture (mais pas tous) sont importants pour vos images +2. Pourquoi certains (mais pas tous) les points de rupture sont importants pour vos images Roundtrip (isolated) prompt used: diff --git a/src/content/docs/fr/_roundtrip_browser-picks-srcset.txt b/src/content/docs/fr/_roundtrip_browser-picks-srcset.txt index e7bf5a7..25577c0 100644 --- a/src/content/docs/fr/_roundtrip_browser-picks-srcset.txt +++ b/src/content/docs/fr/_roundtrip_browser-picks-srcset.txt @@ -1,60 +1,68 @@ --- -title: How does the browser choose between images listed in the srcset attribute -description: How the browser chooses between images listed in the srcset attribute -taskInputHash: df517c34368094dc +title: How the browser chooses +description: >- + How the browser chooses between images listed in the srcset attribute +taskInputHash: 526ee912d47a6d62 lang: en +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -How does the browser choose between images listed in the `srcset` attribute? Here is a step-by-step guide with examples for width and density specifications for how the browser decides based on support and viewport. +How does the browser choose between images listed in the srcset attribute? Here are the steps to follow, with examples for width and density specifications, and how the browser decides based on the device and viewport. -- When you use the `srcset` attribute in HTML, the browser uses a set of rules to choose the most appropriate image from a provided list of sources. These rules depend on both the display characteristics of the device (resolution, pixel density) and the viewport size. 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 review each case with examples. +- When using the `srcset` attribute in HTML, the browser uses a set of rules to choose the most appropriate 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 look at each case with examples. -1. Width Descriptor (`w`): +1\. Width descriptor (`w`): -Assuming we have the following `srcset` attribute: +Suppose we have the following `srcset` attribute: -```html +```html -Example image +Example Image ``` -The browser follows these steps: +The browser will follow these steps: -a. Determine the DPR (Device Pixel Ratio) of the device. For example, a regular screen has a DPR of 1, while a high-resolution (Retina) screen has a DPR of 2 or more. +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 more. -b. Calculate the effective width for each image in `srcset`. Multiply the width descriptor by 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 = 400 px -- example-medium.jpg: 800 * 1 = 800 px -- example-large.jpg: 1600 * 1 = 1600 px +- example-small.jpg: 400 * 1 = 400px -c. Compare the effective widths with the viewport width. Suppose the viewport width is 420 px. The browser selects the smallest image with an effective width greater than or equal to the viewport width. In this case, it selects `example-medium.jpg`. +- example-medium.jpg: 800 * 1 = 800px -2. Pixel Density Descriptor (`x`): +- example-large.jpg: 1600 * 1 = 1600px -Assuming we have the following `srcset` attribute: +c. Compare the effective widths with the viewport width. Suppose 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 select `example-medium.jpg`. -```html +2\. Pixel Density descriptor (`x`): -Example image +Suppose we have the following `srcset` attribute: + +```html + +Example Image ``` -The browser follows these steps: +The browser will follow these steps: -a. Determine the DPR (Device Pixel Ratio) of the device. For example, a regular screen has a DPR of 1, while a high-resolution (Retina) screen has a DPR of 2 or more. +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 more. -b. Compare the device DPR with the `x` descriptors in `srcset`. In this case, we have three images with the following descriptors: +b. Compare the device DPR with the `x` descriptors in the `srcset`. In this case, we have three images with the following descriptors: - example-1x.jpg: 1x + - example-2x.jpg: 2x + - example-3x.jpg: 3x -c. Choose the image with the `x` descriptor that is closest to the device 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 that is closest to the device DPR. For a device with a DPR of 1, the browser will select `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 more information about how the image will be displayed at different viewport widths. This is especially useful when using the width descriptor (`w`). Here is an example: +It is important to note that you can also use the `sizes` attribute in combination with the `srcset` attribute to provide more information about how the image will be displayed at different viewport widths. This is particularly useful when using the width descriptor (`w`). Here's an example: -```html +```html sizes -description: An efficient and subjective guide for responsive images in 2023 -taskInputHash: 2f3bd9fa4d308fbc +title: srcset and sizes +description: An effective and categorical guide to adaptive images in 2023 +taskInputHash: ddea94bb07b6ac00 lang: en -ignore: '/* cSpell:locale fr,en*/' sidebar_sort_priority: 1000 -date_published: '2023-03-23' -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' --- -**An efficient and subjective guide for images in 2023** +**An effective and categorical guide to adaptive images in 2023** -Check the sidebar for a deeper dive. This is a quick reference for updating those `` tags to support modern devices in all their varied sizes and pixel densities. You need to [know that pixels != pixels](/en/pixels-not-pixels) and `devicePixelRatio` is more likely to be around 3.875 than 1:1. Modern phones claim a width of 320 to 428 pixels for legibility (in CSS pixels), but have many pixels per CSS pixel. +Check the sidebar for an in-depth analysis. This is the quick reference for upgrading those `` tags to handle modern devices in all their various sizes and pixel densities. You should [know that pixels != pixels](/en/pixels-not-pixels) and that `devicePixelRatio` is more likely to be around 3.875 than 1:1. Modern phones claim to be wide from 320 to 428px for legibility (in CSS pixels), but have many device pixels per CSS pixel. -> If your image never changes size, no matter how small the browser window gets, you should use a [density descriptor instead](/en/density-descriptors). This often suits logos, icons, and buttons. +> If your image never changes size, regardless of the size of the browser window, you should use a [density descriptor instead](/en/density-descriptors). This is often appropriate for logos, icons and buttons. -Do you know what your [breakpoints](/en/breakpoints) are? You'll need those numbers to refine the solution below, at minimum the display width breakpoint where the main content area stops growing. +Do you know what your [breakpoints](/en/breakpoints) are? You'll need those numbers to fine-tune the solution below - at minimum, the breakpoint at which the main content area stops growing in width. -### The easy way + +### The easy method ```html -Dog riding bicycle + sizes="(max-width: 700px) 100vw, 800px" + alt="Dog riding bike" /> - + - + ``` ===================== @@ -48,8 +49,8 @@ Also carefully translate the title and description for the article; do not use & 1. srcset & sizes 2. An Efficient and Opinionated Guide to Responsive Images for 2023 -Metadata returned1. srcset et tailles d' -2. Un guide efficace et subjectif pour les images réactives en 2023 +Metadata returned1. srcset et tailles +2. Un guide efficace et catégorique pour les images adaptatives en 2023 Roundtrip (isolated) prompt used: diff --git a/src/content/docs/fr/_roundtrip_lighthouse-performance-test.txt b/src/content/docs/fr/_roundtrip_lighthouse-performance-test.txt index fa42679..4b9dc49 100644 --- a/src/content/docs/fr/_roundtrip_lighthouse-performance-test.txt +++ b/src/content/docs/fr/_roundtrip_lighthouse-performance-test.txt @@ -1,28 +1,27 @@ --- -title: Testing Performance with Lighthouse -description: Steps for testing a website's performance using Lighthouse -taskInputHash: 8e6d39610c052ea3 +title: Testing performance with Lighthouse +description: The steps to test a website's performance using Lighthouse +taskInputHash: 41b20c3fed2f0d3d lang: en -ignore: '/* cSpell:locale fr,en*/' -date_published: '2023-03-24' -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' --- -How to test your site's performance with Lighthouse? +How to test the performance of your website with Lighthouse? -> Lighthouse is a tool that can be used to measure performance, accessibility, and other aspects of a website. To test your website's performance with Lighthouse, follow these steps: -> -> 1\. Open the Google Chrome web browser and go to the page you want to test. -> -> 2\. Click on the three dots in the upper right corner of the browser window, then select "More tools" and then "Developer tools" or simply use the keyboard shortcut "Ctrl+Shift+I" (Windows, Linux) or "Command+Option+I" (macOS). -> -> 3\. In the Developer Tools panel, click on the Lighthouse icon located on the left side of the panel or press "Ctrl+Shift+P" (Windows, Linux) or "Command+Shift+P" (macOS) to open the Command Menu, then type "Lighthouse" and select "Generate report". -> -> 4\. In the Lighthouse dialog box, select the relevant performance and other options you want to test, then click "Generate report". -> -> 5\. After Lighthouse finishes its analysis, you will see a report with scores and recommendations for improving the performance, accessibility, and other areas of your website. -> -> By following these steps, you can use Lighthouse to test and optimize your website's performance, which can help improve its user experience and ranking in search engines. +>Lighthouse is a tool that can be used to measure a website's performance, accessibility, and other aspects. To test your website's performance with Lighthouse, follow these steps: +> +>1. Open the Google Chrome web browser and navigate to the page you want to test. +> +>2. Click on the three dots in the upper right corner of the browser window, then select "More tools" and then "Developer tools," or simply use the keyboard shortcut "Ctrl+Shift+I" (Windows, Linux) or "Command+Option+I" (macOS). +> +>3. In the Developer tools panel, click on the Lighthouse icon on the left side of the panel, or press "Ctrl+Shift+P" (Windows, Linux) or "Command+Shift+P" (macOS) to open the Command menu, then type "Lighthouse" and select "Generate report." +> +>4. In the Lighthouse dialog box, select the performance options and other relevant options that you want to test, then click "Generate report." +> +>5. After Lighthouse completes its analysis, you will see a report with scores and recommendations for improving the performance, accessibility, and other areas of your website. +> +>By following these steps, you can use Lighthouse to test and optimize your website's performance, which can help improve its user experience and rankings in search engines. ===================== Content prompt used: @@ -36,7 +35,7 @@ Also carefully translate the title and description for the article; do not use & 2. Steps on how to test a website's performance using Lighthouse Metadata returned1. Tester les performances avec Lighthouse -2. Étapes pour tester les performances d'un site web en utilisant Lighthouse +2. Les étapes pour tester les performances d'un site web en utilisant Lighthouse Roundtrip (isolated) prompt used: diff --git a/src/content/docs/fr/_roundtrip_picture-examples.txt b/src/content/docs/fr/_roundtrip_picture-examples.txt index 10f80e1..e6e31ac 100644 --- a/src/content/docs/fr/_roundtrip_picture-examples.txt +++ b/src/content/docs/fr/_roundtrip_picture-examples.txt @@ -1,16 +1,16 @@ --- -title: Examples using the element +title: Examples of using the element description: >- - Provides examples using the element, for responsive images, art direction, and different image formats. -taskInputHash: 9b88532218099931 + Provides examples for using the element, for adaptive images, art direction, and different image formats. +taskInputHash: 612a054526e2fcb5 lang: en -date_published: '2023-03-24' -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' --- -Here are some examples of using the `` element with explanations: +Here are some examples of using the `` element and their explanations: -1. Example for responsive images: +1. Example for adaptive images: ```html @@ -20,7 +20,7 @@ Here are some examples of using the `` element with explanations: ``` -Explanation: In this example, the `` element is used to provide different image sources for different screen sizes. The `` elements specify different image sources using the "srcset" attribute and the "media" attribute to specify the conditions under which each source should be used. The `` element is used as a fallback for older browsers or when the conditions specified in the `` elements are not met. +Explanation: In this example, the `` element is used to provide different image sources for different screen sizes. The `` elements specify the different image sources using the "srcset" attribute and the "media" attribute to specify the conditions under which each source should be used. The `` element is used as a fallback for older browsers or when the conditions specified in the `` elements are not met. 2. Example for art direction: @@ -32,7 +32,7 @@ Explanation: In this example, the `` element is used to provide differe ``` -Explanation: In this example, the `` element is used to provide different image sources based on the orientation of the device. The `` element with the "media" attribute set to "(orientation: landscape)" specifies an image source for wide screens, while the `` element specifies an image source for portrait screens. +Explanation: In this example, the `` element is used to provide different image sources based on the device orientation. The `` element with the "media" attribute set to "(orientation: landscape)" specifies an image source for wide screens, while the `` element specifies an image source for portrait screens. 3. Example for different image formats: @@ -50,11 +50,11 @@ Explanation: In this example, the `` element is used to provide differe ## Breakpoints -In responsive design, breakpoints are used to define when the layout of a website or application should change based on the size of the display window. Breakpoints are usually defined using media queries in CSS, which apply different styles based on the screen width. These breakpoints can be used in conjunction with the `` element to provide different image sources for different screen sizes. +In adaptive design, breakpoints are used to define when the layout of a website or application should change based on the display size. Breakpoints are usually defined using media queries in CSS, which apply different styles based on the screen width. These breakpoints can be used in conjunction with the `` element to provide different image sources for different screen sizes. -For example, in the first example above, we used the `media` attribute to specify the screen width under which each source should be used. When the screen width is greater than or equal to 768 pixels, the `image-large.jpg` source will be used; when the screen width is greater than or equal to 480 pixels but less than 768 pixels, the `image-medium.jpg` source will be used; and when the screen width is less than 480 pixels, the `image-small.jpg` source will be used. This allows us to provide appropriately sized images for each device, thus reducing page loading times and improving the user experience. +For example, in the first example above, we used the `media` attribute to specify the screen width under which each source should be used. When the screen width is greater than or equal to 768 pixels, the `image-large.jpg` source will be used; when the screen width is greater than or equal to 480 pixels but less than 768 pixels, the `image-medium.jpg` source will be used; and when the screen width is less than 480 pixels, the `image-small.jpg` source will be used. This allows us to provide appropriately sized images for each device, which reduces page load times and improves the user experience. -Breakpoints can be defined at any screen size, and multiple breakpoints can be used to create layouts that respond to a wide range of devices. By combining breakpoints with the `` element, you can create flexible and responsive designs that look great on any device. +Breakpoints can be defined at any screen size, and multiple breakpoints can be used to create layouts that respond to a wide range of devices. By combining breakpoints with the `` element, you can create flexible and adaptive designs that look great on any device. ===================== Content prompt used: @@ -67,8 +67,8 @@ Also carefully translate the title and description for the article; do not use & 1. Examples using element 2. Provides examples using the element, for responsive images, art direction and different image formats -Metadata returned1. Exemples utilisant l'élément -2. Fournit des exemples utilisant l'élément , pour des images réactives, la direction artistique et différents formats d'image. +Metadata returned1. Exemples d'utilisation de l'élément +2. Fournit des exemples d'utilisation de l'élément , pour des images adaptatives, la direction d'art et différents formats d'image. Roundtrip (isolated) prompt used: diff --git a/src/content/docs/fr/_roundtrip_pixels-not-pixels.txt b/src/content/docs/fr/_roundtrip_pixels-not-pixels.txt index 991ed47..06b998d 100644 --- a/src/content/docs/fr/_roundtrip_pixels-not-pixels.txt +++ b/src/content/docs/fr/_roundtrip_pixels-not-pixels.txt @@ -1,23 +1,23 @@ --- title: px ≠ pixels -description: Screen pixels ≠ browser pixels ≠ image pixels -taskInputHash: 7dfd1c9b5c352f62 +description: >- + Device pixels ≠ browser px ≠ image px +taskInputHash: b505a8e4cccad4f3 lang: en -ignore: '/* cSpell:locale fr,en*/' sidebar_sort_priority: 900 -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' --- -### Screen pixels ≠ browser pixels ≠ image pixels +### Device pixels ≠ browser px ≠ image px -Thanks to Apple, CSS and HTML pixels (`px`) **almost always correspond to multiple screen/printer pixels**. The devicePixelRatio of my phone is 3.875; [what about yours?](https://www.mydevice.io/) +Thanks to Apple, CSS and HTML pixels (`px`) **almost never correspond to a single device/printer pixel**. The devicePixelRatio on my phone is 3.875; [what's yours?](https://www.mydevice.io/) -The devicePixelRatio of my desktop computer changes based on the zoom level of the browser, but is by default 1.5 (my display scaling is 150% in `System > Display`). +The devicePixelRatio on my desktop computer changes depending on the browser zoom, but is defaults to 1.5 (because my `System > Display > Scale` is set to 150%, after all). -Image files (with the exception of SVGs) decode into a grid of pixels. **Getting a perfect one-to-one match between image pixels and screen pixels is surprisingly difficult, but with `srcset`, you can get pretty close, and a little bit of JavaScript can adjust the size of the HTML element after loading if you have a valid reason to require a perfect match, although these dark arts will not be revealed here.** +Image files (excluding SVGs) decode into a grid of pixels. **It's incredibly difficult to get image pixels to display perfectly at a 1:1 ratio with device pixels - but with `srcset`, you can get close enough**, and a bit of JavaScript can adjust the size of HTML elements after loading if you have a valid reason for requiring this perfect mapping, though we won't teach these forbidden arts here. -> Other absolute units ([in, pc, pt, mm, cm, Q)](https://developer.mozilla.org/en-US/docs/Web/CSS/Length_and_Distance) are defined based on the number of CSS pixels and assume everything is at 96dpi. Developers tend to avoid absolute units since it's generally better to use units derived from font size or viewport/container dimensions. Incompatible units can break layout if the user increases text size, zooms the browser, or rotates their device. Needless to say, you should do all these things before publishing your site. +> Other absolute units ([in, pc, pt, mm, cm, Q](https://developer.mozilla.org/en-US/docs/Web/CSS/length)) are defined based on the number of CSS pixels and pretend everything is at 96dpi. Developers avoid using absolute units because it's generally better to use units derived from font size or viewport/container dimensions. Different units can break a design if the user adjusts the `Accessibility > Text size` multiplier, zooms in the browser or rotates their device. Obviously, you should make all these operations before putting your website online. {{Note that the term used here is not the technical term...}}. ===================== Content prompt used: @@ -31,7 +31,7 @@ Also carefully translate the title and description for the article; do not use & 2. Device px ≠ browser px ≠ image px Metadata returned1. px ≠ pixels -2. Pixels d'écran ≠ pixels de navigateur ≠ pixels d'image +2. Les pixels des dispositifs ≠ les pixels des navigateurs ≠ les pixels des images Roundtrip (isolated) prompt used: diff --git a/src/content/docs/fr/_roundtrip_specify-width-height.txt b/src/content/docs/fr/_roundtrip_specify-width-height.txt index 64e5c23..afcf919 100644 --- a/src/content/docs/fr/_roundtrip_specify-width-height.txt +++ b/src/content/docs/fr/_roundtrip_specify-width-height.txt @@ -2,20 +2,19 @@ title: Using Width and Height description: >- Benefits of using width and height attributes in HTML code -taskInputHash: b09c49dc5d3a4a2d +taskInputHash: 710d960e0aef9b37 lang: en -ignore: '/* cSpell:locale fr,en*/' -date_published: '2023-03-24' -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' --- -Why should you include width and height in HTML? +Why should width and height be included in HTML code? -> It is recommended to include width and height attributes in the HTML code of images because it helps the web browser to know the size of the image before it is fully loaded. This allows the browser to reserve the appropriate space on the web page for the image, which prevents content from jumping around while the image is loading. +> It is recommended to include width and height attributes in HTML code for images because this allows the web browser to know the size of the image before it is fully loaded. This allows the browser to reserve the appropriate space on the web page for the image, thus preventing content from jumping around when the image loads. > -> Additionally, specifying width and height attributes for images can also contribute to overall web page performance. When a browser knows the size of an image in advance, it can accurately calculate the amount of space needed to display the image and avoid unnecessary reloads or redraws of content during loading. +> Additionally, specifying width and height attributes for images can also help improve overall performance of the web page. When a browser knows the size of an image in advance, it can more accurately calculate the space needed to display the image and avoid unnecessary reflows or repaints of content as it loads. > -> In summary, the use of width and height attributes in HTML code for images can improve the user experience by speeding up content loading and reducing visual issues. +> Overall, using width and height attributes in HTML code for images can improve the user experience by speeding up content loading and reducing visual issues. ===================== Content prompt used: diff --git a/src/content/docs/fr/_roundtrip_when-to-use-picture.txt b/src/content/docs/fr/_roundtrip_when-to-use-picture.txt index 1e5b634..1c58dc3 100644 --- a/src/content/docs/fr/_roundtrip_when-to-use-picture.txt +++ b/src/content/docs/fr/_roundtrip_when-to-use-picture.txt @@ -1,25 +1,24 @@ --- title: When to use the element description: Explains in which situations you should use the element -taskInputHash: 745796c8db3f3527 +taskInputHash: f314b7d0da04a16a lang: en -ignore: '/* cSpell:locale fr,en*/' -date_published: '2023-03-27' -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' --- -The `picture` element is used to provide multiple versions of an image and determine which version of the image to display based on certain conditions. It is particularly useful for optimizing images for different screen sizes and resolutions, and is commonly used in responsive web design. -Here are some specific scenarios where you would want to use the `picture` element: +The `picture` element is used to provide multiple versions of an image and determine which version of the image to display based on certain conditions. It is particularly useful for optimizing images for different screen sizes and resolutions and is commonly used in responsive web design. +Here are some specific scenarios where you might want to use the `picture` element: -* **Retina Displays:** High-density displays such as Apple's Retina displays have a higher pixel density, which means that images may look blurry or pixelated if they are not optimized for high resolution. With the `picture` element, you can provide a version of the image that has twice as many pixels as the normal version, making it sharp and clear on Retina displays. +* **Retina screens:** High-density screens like Apple's Retina displays have a higher pixel density, which means images can appear blurry or pixelated if they are not optimized for high resolution. With the `picture` element, you can provide a version of the image that has twice as many pixels as the normal version, so it appears sharp and clear on Retina screens. -* **Different Aspect Ratios:** If you are designing a site that needs to display images with different aspect ratios (such as landscape vs. portrait), you can use the `picture` element to provide different versions of the image optimized for each aspect ratio. +* **Different aspect ratios:** If you are designing a site that needs to display images with different aspect ratios (such as landscape vs. portrait), you can use the `picture` element to provide different versions of the image that are optimized for each aspect ratio. -* **Bandwidth Limitations:** Images can be large files that consume a lot of bandwidth, especially on mobile devices. With the `picture` element, you can provide smaller versions of the image for devices with smaller screens or slower internet connections, which can help reduce page load times. +* **Bandwidth limitations:** Images can be large files that take up a lot of bandwidth, especially on mobile devices. With the `picture` element, you can provide smaller versions of the image for devices with smaller screens or slower internet connections, which can help reduce page load times. -* **Art Direction Layout:** Sometimes, you may want to present an image in a certain way based on the layout of the rest of the page. For example, you may want to display a close-up of a person's face on mobile devices, but a wider shot on desktop computers. The `picture` element allows you to provide different versions of the image optimized for different layouts. +* **Art-directed layouts:** Sometimes you may want to present an image in a certain way based on the layout of the rest of the page. For example, you may want to show a close-up of a person's face on mobile devices, but a wider shot on desktop computers. The `picture` element allows you to provide different versions of the image that are optimized for different layouts. -Overall, the `picture` element is a powerful tool that can help you optimize your images for a variety of use cases and ensure that they look great no matter which device or screen size they are displayed on. +Overall, the `picture` element is a powerful tool that can help you optimize your images for a variety of use cases and ensure they look great no matter what device or screen size they are viewed on. ===================== Content prompt used: diff --git a/src/content/docs/fr/_roundtrip_width-density.txt b/src/content/docs/fr/_roundtrip_width-density.txt index 23025c9..30c7e5f 100644 --- a/src/content/docs/fr/_roundtrip_width-density.txt +++ b/src/content/docs/fr/_roundtrip_width-density.txt @@ -1,20 +1,19 @@ --- title: Width and Density Descriptors description: Examples of using width and density descriptors in `srcset` -taskInputHash: 569fd1065931e1e0 +taskInputHash: d4db50f5267305d1 lang: en -ignore: '/* cSpell:locale fr,en*/' -date_published: '2023-03-24' -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' --- Understanding the width (`w`) and density (`x`) descriptors in `srcset`. Use examples and Markdown. ->`srcset` is an HTML attribute that allows developers to provide multiple image sources with different resolutions or pixel densities, and let the browser select the appropriate image based on the display characteristics of the device. The `srcset` attribute uses a combination of the `URL` and `w` or `x` descriptors to specify the images. +> `srcset` is an HTML attribute that allows developers to provide multiple image sources with different resolutions or pixel densities and let the browser choose the appropriate image based on the display characteristics of the device. The `srcset` attribute uses a combination of the URL and `w` or `x` descriptors to specify the images. ## Width Descriptor (`w`) -> The `w` descriptor is used to specify the width of an image in pixels. It is used when we want to provide the browser with the dimensions of an image so that it can choose the appropriate image for the available screen space. +> The `w` descriptor is used to specify the width of an image in pixels. It is used when we want to provide the browser with the dimensions of an image so that it can select the appropriate image for the available display space. > The syntax for using the `w` descriptor in `srcset` is as follows: @@ -23,10 +22,10 @@ Understanding the width (`w`) and density (`x`) descriptors in `srcset`. Use exa srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" - alt="Example Image"> + alt="Example of an image"> ``` -> In the example above, we have provided the browser with three images and their corresponding widths in pixels. The browser will select the image with the closest width to the available screen space. +> In the above example, we have provided the browser with three images and their corresponding widths in pixels. The browser will select the image with the width closest to the available display space. ## Density Descriptor (`x`) @@ -39,12 +38,12 @@ Understanding the width (`w`) and density (`x`) descriptors in `srcset`. Use exa srcset="small.jpg 1x, medium.jpg 2x, large.jpg 3x" - alt="Example Image"> + alt="Example of an image"> ``` -> In the example above, we have provided the browser with three images and their corresponding pixel densities. The browser will select the image with the closest pixel density to the device's screen. +> In the above example, we have provided the browser with three images and their corresponding pixel densities. The browser will select the image with the pixel density closest to the device's screen. -> Note that the `w` and `x` descriptors can be used together in the same `srcset` attribute to provide the browser with more options for selection. +> Note that the `w` and `x` descriptors can be used together in the same `srcset` attribute to provide the browser with more selection options. ===================== Content prompt used: diff --git a/src/content/docs/fr/breakpoints.md b/src/content/docs/fr/breakpoints.md index eb1cb9e..5db303c 100644 --- a/src/content/docs/fr/breakpoints.md +++ b/src/content/docs/fr/breakpoints.md @@ -1,43 +1,42 @@ --- title: Points de rupture et images description: >- - Pourquoi certains points de rupture (mais pas tous) sont importants pour vos - images -taskInputHash: b9dc6c0d27d7c8b7 + Pourquoi certains (mais pas tous) les points de rupture sont importants pour + vos images +taskInputHash: 3a845882fe3c1d34 lang: fr -ignore: '/* cSpell:locale fr,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' --- ### Contexte -Les petits écrans et les grands moniteurs nécessitent des mises en page différentes. Pour les besoins de `srcset` et de `sizes`, nous devons savoir à quel moment la mise en page change. +Les petits écrans et les grands moniteurs nécessitent des mises en page différentes. Pour le `srcset` et les `sizes`, nous devons savoir à quel moment la mise en page change. -Les développeurs Web doivent décider ce qu'il faut réduire, masquer ou déplacer sur les petits écrans - ou plus couramment, ce qu'il faut étendre, révéler ou ajouter sur les grands écrans. Ils disposent également de très peu d'informations. L'utilisateur est-il sur une tablette ou un téléphone en mode paysage - ou une petite fenêtre de navigateur ? +Les développeurs Web doivent décider ce qu'il faut réduire, cacher ou déplacer sur les petits écrans - ou plus communément, ce qu'il faut agrandir, révéler ou ajouter sur les grands écrans. Ils ont également très peu d'informations à leur disposition. L'utilisateur utilise-t-il une tablette ou un téléphone en mode paysage, ou une petite fenêtre de navigateur ? -Nous devons choisir une largeur de viewport arbitraire où la mise en page change. Cela s'appelle un **point de rupture**. C'est un nombre arbitraire de pixels CSS ([pas de pixels d'appareil](/fr/pixels-not-pixels)). Polypane a un [excellent 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) sur les points de rupture couramment utilisés. +Nous devons choisir une largeur de fenêtre d'affichage arbitraire où la mise en page change. C'est ce qu'on appelle un **point de rupture**. C'est un nombre arbitraire de pixels en CSS ([et non de pixels de périphérique](/fr/pixels-pas-pixels)). Polypane a un [formidable 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) sur les points de rupture couramment utilisés. -Certaines images (comme les logos ou les icônes ou les boutons) pourraient être immunisées contre les changements de mise en page causés par ces points de rupture (et être fines avec les [descripteurs de densité srcset](/fr/density-descriptors)). +Certaines images (comme les logos, les icônes ou les boutons) peuvent être insensibles aux changements de mise en page causés par ces points de rupture (et fonctionner avec des [descripteurs de densité srcset](/fr/descripteurs-densite)). -Les images du contenu principal seront limitées par la taille de leur conteneur. En règle générale, la zone de contenu principal d'une page sera limitée à une certaine largeur sur les plus grands écrans, une `max-width`, mais sur les petits écrans, la zone de contenu principal remplira l'ensemble du viewport. +Les images de contenu principal seront limitées par la taille de leur conteneur de mise en page. Généralement, la zone de contenu principal d'une page sera limitée à une certaine largeur sur les plus grands écrans, avec une `max-width`, mais sur les petits écrans, la zone de contenu principal remplira l'ensemble de la fenêtre d'affichage. -Si vous avez plus d'une colonne à certains points de rupture, il sera plus difficile de calculer les règles de dimensionnement effectives, car le pourcentage de la largeur du viewport que l'image occupe changera. +Si vous avez plus d'une colonne à certains points de rupture, il sera plus difficile de calculer les règles de dimensionnement effectives, car le pourcentage de la largeur de la fenêtre d'affichage que l'image occupe changera. -### La méthode facile +### La méthode simple -Cela étant dit, ne pensez pas trop à cela. Vous serez probablement très bien avec la méthode d'approximation suivante : +Cela dit, ne vous en faites pas trop. Vous serez probablement très bien avec l'approximation suivante : -1. À quelle taille la colonne principale (ou le conteneur de l'image) cesse-t-elle de croître ? Jusqu'à cette largeur de viewport, nous pouvons utiliser `100vw` pour l'attribut `sizes` de l'image pour dire que l'image occupe 100 % de la largeur du viewport. -2. Quelle est la largeur maximale que le conteneur atteint jamais ? Nous pouvons fixer cela comme une largeur fixe pour tout le reste. +1. À quelle taille la colonne principale (ou le conteneur de l'image) cesse-t-elle de croître ? Jusqu'à cette largeur de fenêtre d'affichage, nous pouvons utiliser `100vw` pour l'attribut `sizes` de l'image pour dire que l'image occupe 100 % de la largeur de la fenêtre d'affichage. +2. Quelle est la largeur maximale que le conteneur atteint ? Nous pouvons la définir comme une largeur fixe pour tout le reste. -Si votre réponse à 1 était 700px et votre réponse à 2 était 800px, vous pouvez utiliser l'attribut `sizes` suivant : +Si votre réponse à la question 1 était 700 px et votre réponse à la question 2 était 800 px, vous pouvez utiliser l'attribut `sizes` suivant : ```html - + ``` -> Vous pensiez que le navigateur pourrait gérer toutes ces calculs pour nous en fonction des CSS. Malheureusement, les navigateurs sont agressivement désireux de choisir une URL d'image *avant* le téléchargement des feuilles de style. Nous devons donc effectuer les calculs nous-mêmes, et ils méritent bien si nous ne les obtenons pas parfaitement. +> Vous pourriez penser que le navigateur pourrait gérer parfaitement tous ces calculs pour nous en fonction du CSS. Malheureusement, les navigateurs sont agressivement impatients de choisir une URL d'image *avant* le téléchargement des feuilles de style. Nous devons donc faire les calculs nous-mêmes, et tant pis pour eux si nous ne sommes pas parfaits. diff --git a/src/content/docs/fr/browser-picks-srcset.md b/src/content/docs/fr/browser-picks-srcset.md index 42e2dfc..503d593 100644 --- a/src/content/docs/fr/browser-picks-srcset.md +++ b/src/content/docs/fr/browser-picks-srcset.md @@ -3,20 +3,19 @@ title: Comment le navigateur choisit description: >- Comment le navigateur choisit entre les images répertoriées dans l'attribut srcset -taskInputHash: 1ad7279bfa827840 +taskInputHash: 526ee912d47a6d62 lang: fr -ignore: '/* cSpell:locale fr,en*/' -date_published: '2023-03-24' -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' --- -Comment le navigateur choisit-il entre les images répertoriées dans l'attribut srcset ? Voici les étapes détaillées, avec des exemples pour les spécifications de largeur et de densité et comment le navigateur décide en fonction de l'appareil et du viewport. +Comment le navigateur choisit-il entre les images répertoriées dans l'attribut srcset? Voici les étapes à suivre, avec des exemples pour les spécifications de largeur et de densité et la manière dont le navigateur décide en fonction de l'appareil et du viewport. -- Lorsque l'on utilise l'attribut `srcset` en HTML, le navigateur utilise un ensemble de règles pour choisir l'image la plus appropriée à partir d'une liste de sources fournies. Ces règles dépendent à la fois des caractéristiques d'affichage de l'appareil (résolution, densité de pixels) et de la taille du viewport. L'attribut `srcset` vous permet de spécifier des images différentes en fonction de la largeur (en utilisant le descripteur `w`) ou de la densité de pixels (en utilisant le descripteur `x`). Examinons chaque cas avec des exemples. +- Lorsque l'on utilise l'attribut `srcset` en HTML, le navigateur utilise un ensemble de règles pour choisir l'image la plus appropriée parmi une liste de sources fournies. Ces règles dépendent à la fois des caractéristiques d'affichage de l'appareil (résolution, densité de pixels) et de la taille du viewport. L'attribut `srcset` vous permet de spécifier des images différentes en fonction de la largeur (en utilisant le descripteur `w`) ou de la densité de pixels (en utilisant le descripteur `x`). Examinons chaque cas avec des exemples. -1. Descripteur de largeur (`w`): +1\. Descripteur de largeur (`w`): -Supposons que nous avons l'attribut `srcset` suivant : +Supposons que nous avons l'attribut `srcset` suivant: ```html @@ -26,7 +25,7 @@ Supposons que nous avons l'attribut `srcset` suivant : Le navigateur suivra ces étapes: -a. Déterminer le DPR (Device Pixel Ratio) de l'appareil. Par exemple, un écran standard a un DPR de 1, tandis qu'un écran haute résolution (Retina) a un DPR de 2 ou plus. +a. Déterminer le DPR (Device Pixel Ratio) de l'appareil. Par exemple, un affichage standard a un DPR de 1, tandis qu'un affichage haute résolution (Retina) a un DPR de 2 ou plus. b. Calculer la largeur effective pour chaque image dans le `srcset`. Multipliez le descripteur de largeur par le DPR. Pour un appareil avec un DPR de 1: @@ -36,11 +35,11 @@ b. Calculer la largeur effective pour chaque image dans le `srcset`. Multipliez - example-large.jpg: 1600 \* 1 = 1600px -c. Comparer les largeurs effectives avec la largeur du viewport. Supposons que la largeur du viewport est de 420px. Le navigateur choisira l'image la plus petite avec une largeur effective supérieure ou égale à la largeur de viewport. Dans ce cas, il sélectionnera `example-medium.jpg`. +c. Comparez les largeurs effectives avec la largeur du viewport. Supposons que la largeur du viewport soit de 420px. Le navigateur choisira l'image la plus petite ayant une largeur effective supérieure ou égale à la largeur du viewport. Dans ce cas, il sélectionnera `example-medium.jpg`. -2. Descripteur de densité de pixels (`x`): +1\. Descripteur de densité de pixels (`x`): -Supposons que nous avons l'attribut `srcset` suivant : +Supposons que nous avons l'attribut `srcset` suivant: ```html @@ -50,9 +49,9 @@ Supposons que nous avons l'attribut `srcset` suivant : Le navigateur suivra ces étapes: -a. Déterminer le DPR (Device Pixel Ratio) de l'appareil. Par exemple, un écran standard a un DPR de 1, tandis qu'un écran haute résolution (Retina) a un DPR de 2 ou plus. +a. Déterminer le DPR (Device Pixel Ratio) de l'appareil. Par exemple, un affichage standard a un DPR de 1, tandis qu'un affichage haute résolution (Retina) a un DPR de 2 ou plus. -b. Comparer le DPR de l'appareil avec le descripteur `x` dans le `srcset`. Dans ce cas, nous avons trois images avec les descripteurs suivants : +b. Comparez le DPR de l'appareil avec les descripteurs `x` dans le `srcset`. Dans ce cas, nous avons trois images avec les descripteurs suivants: - example-1x.jpg: 1x @@ -60,9 +59,9 @@ b. Comparer le DPR de l'appareil avec le descripteur `x` dans le `srcset`. Dans - example-3x.jpg: 3x -c. Choisir l'image avec le descripteur `x` le plus proche du DPR de l'appareil. Pour un appareil avec un DPR de 1, le navigateur sélectionnera `example-1x.jpg`. Pour un appareil avec un DPR de 2, il choisira `example-2x.jpg`, et ainsi de suite. +c. Choisissez l'image avec le descripteur `x` qui est le plus proche du DPR de l'appareil. Pour un appareil avec un DPR de 1, le navigateur sélectionnera `example-1x.jpg`. Pour un appareil avec un DPR de 2, il choisira `example-2x.jpg`, et ainsi de suite. -Il est important de noter que l'on peut également utiliser l'attribut `sizes` en combinaison avec l'attribut `srcset` pour fournir plus d'informations sur la façon dont l'image sera affichée à différentes largeurs de viewport. Ceci est particulièrement utile lors de l'utilisation du descripteur de largeur (`w`). Voici un exemple : +Il est important de noter que vous pouvez également utiliser l'attribut `sizes` en combinaison avec l'attribut `srcset` pour fournir plus d'informations sur la manière dont l'image sera affichée à différentes largeurs de viewport. Cela est particulièrement utile lors de l'utilisation du descripteur de largeur (`w`). Voici un exemple: ```html diff --git a/src/content/docs/fr/density-descriptors.md b/src/content/docs/fr/density-descriptors.md index e8f8f44..a17310c 100644 --- a/src/content/docs/fr/density-descriptors.md +++ b/src/content/docs/fr/density-descriptors.md @@ -1,44 +1,40 @@ --- title: Descripteurs de densité et srcset description: Exemples d'utilisation des descripteurs de densité dans `srcset` -taskInputHash: 4a6e8aedba865baf +taskInputHash: 1b80ac29f8b4510b lang: fr -ignore: '/* cSpell:locale fr,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 avec descripteurs de densité fournit une méthode simple et efficace pour livrer l'image la plus adaptée à chaque appareil de l'utilisateur, améliorant les performances et l'expérience utilisateur. Ce guide vous guidera à travers l'essentiel de l'utilisation de srcset avec descripteurs de densité et fournira des exemples de balisage pour votre commodité. +Srcset avec descripteurs de densité fournit une méthode simple et efficace pour fournir à chaque appareil utilisateur l'image la plus appropriée, améliorant ainsi les performances et l'expérience utilisateur. Ce guide vous guidera à travers les éléments essentiels de l'utilisation de srcset avec descripteurs de densité et fournira des exemples de balisage pour votre commodité. ## Qu'est-ce que Srcset avec descripteurs de densité? -Srcset est un attribut HTML conçu pour vous permettre de spécifier plusieurs sources d'image pour un seul élément ``. Les descripteurs de densité (`x`) sont utilisés en conjonction avec srcset pour fournir des images de résolution différente en fonction de la densité de pixels de l'affichage de l'utilisateur. -## Quand utiliser Srcset avec descripteurs de densité +Srcset est un attribut HTML conçu pour vous permettre de spécifier plusieurs sources d'image pour un seul élément ``. Les descripteurs de densité (`x`) sont utilisés en conjonction avec srcset pour fournir des images de résolution différente en fonction de la densité de pixels de l'écran de l'utilisateur. +## Quand utiliser Srcset avec descripteurs de densité? L'utilisation de srcset avec descripteurs de densité est particulièrement utile lorsque vous souhaitez : -1. Servir des images haute résolution aux affichages haute densité de pixels (par exemple, les affichages Retina) tout en fournissant des images de résolution inférieure aux affichages standard. -2. Améliorer les performances de la page en livrant la taille d'image la plus appropriée à chaque appareil de l'utilisateur. -## Implémentation de Srcset avec descripteurs de densité +1. Servir des images haute résolution aux écrans haute DPI (par exemple, Retina) tout en fournissant des images de résolution inférieure aux écrans standards. +2. Améliorer les performances de la page en fournissant la taille d'image la plus appropriée à chaque appareil. +## Mise en œuvre de srcset avec descripteurs de densité Pour utiliser srcset avec descripteurs de densité, suivez ces étapes : -1. Préparez vos images dans des résolutions différentes. +1. Préparer vos images dans des résolutions différentes. 2. Ajoutez l'attribut `srcset` à l'élément ``, en incluant les sources d'image et les descripteurs de densité correspondants. -3. Ajoutez l'attribut `sizes` (facultatif) pour spécifier la taille de l'image telle qu'elle sera affichée à l'écran. +3. Ajoutez l'attribut `sizes` (facultatif) pour spécifier la taille de l'image telle qu'elle apparaîtra à l'écran. ### Exemple de balisage -Voici un exemple d'implémentation de srcset avec descripteurs de densité dans votre balisage : +Voici un exemple de mise en œuvre de srcset avec descripteurs de densité dans votre balisage : ```html -Une image d'exemple ``` - - Cet exemple de balisage comprend : - **src** : La source d'image par défaut, affichée si le navigateur ne prend pas en charge srcset. -- **srcset** : La liste des sources d'image et leurs descripteurs de densité (1x, 2x, 3x). Le navigateur choisira l'image la plus appropriée en fonction de l'affichage de l'utilisateur. +- **srcset** : La liste des sources d'image et de leurs descripteurs de densité (1x, 2x, 3x). Le navigateur choisira l'image la plus appropriée en fonction de l'écran de l'utilisateur. - **alt** : Une description de l'image à des fins d'accessibilité. - -Et voilà ! Vous avez implémenté avec succès srcset avec descripteurs de densité, améliorant les performances et l'expérience utilisateur de votre site Web. +Et voilà ! Vous avez réussi à mettre en œuvre srcset avec descripteurs de densité, améliorant les performances et l'expérience utilisateur de votre site web. diff --git a/src/content/docs/fr/introduction.md b/src/content/docs/fr/introduction.md index c65a76f..2728370 100644 --- a/src/content/docs/fr/introduction.md +++ b/src/content/docs/fr/introduction.md @@ -1,21 +1,20 @@ --- -title: srcset et tailles d' -description: Un guide efficace et subjectif pour les images réactives en 2023 -taskInputHash: 2f3bd9fa4d308fbc +title: srcset et tailles +description: Un guide efficace et catégorique pour les images adaptatives en 2023 +taskInputHash: ddea94bb07b6ac00 lang: fr -ignore: '/* cSpell:locale fr,en*/' sidebar_sort_priority: 1000 -date_published: '2023-03-23' -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' --- -**Un guide efficace et subjectif pour les images en 2023** +**Un guide efficace et catégorique pour les images en 2023** -Consultez la barre latérale pour une plongée plus profonde. Ceci est une référence rapide pour mettre à jour ces balises `` pour prendre en charge les appareils modernes dans toutes leurs tailles et densités de pixels variées. Vous devez [savoir que les pixels != pixels](/en/pixels-not-pixels) et `devicePixelRatio` est plus susceptible d'être autour de 3,875 que de 1:1. Les téléphones modernes prétendent avoir une largeur de 320 à 428 pixels pour la lisibilité (en pixels CSS), mais ont de nombreux pixels par pixel CSS. +Vérifiez la barre latérale pour une analyse approfondie. Il s'agit de la référence rapide pour mettre à niveau ces balises `` pour gérer les appareils modernes dans toutes leurs tailles et densités de pixels diverses. Vous devriez [savoir que les pixels != pixels](/fr/pixels-not-pixels) et que `devicePixelRatio` est plus susceptible d'être d'environ 3,875 que 1:1. Les téléphones modernes prétendent être larges de 320 à 428px pour la lisibilité (en pixels CSS), mais ont de nombreux pixels d'appareil par pixel CSS. -> Si votre image ne change jamais de taille, peu importe la taille réduite de la fenêtre du navigateur, vous devriez utiliser un [descripteur de densité à la place](/en/density-descriptors). Ceci convient souvent aux logos, aux icônes et aux boutons. +> Si votre image ne change jamais de taille, quelle que soit la taille de la fenêtre du navigateur, vous devriez utiliser un [descripteur de densité à la place](/fr/density-descriptors). C'est souvent approprié pour les logos, les icônes et les boutons. -Savez-vous ce que sont vos [points de rupture](/en/breakpoints)? Vous aurez besoin de ces numéros pour affiner la solution ci-dessous, et au minimum le point de rupture de la largeur d'affichage où la zone de contenu principal cesse de s'agrandir. +Savez-vous ce que sont vos [points de rupture](/fr/breakpoints) ? Vous aurez besoin de ces chiffres pour affiner la solution ci-dessous - et au minimum, le point de rupture de la largeur du port d'affichage où la zone de contenu principale cesse de croître. ### La méthode facile @@ -29,12 +28,12 @@ Savez-vous ce que sont vos [points de rupture](/en/breakpoints)? Vous aurez beso img.jpg?format=webp&w=1600 1600w, img.jpg?format=webp&w=2000 2000w" - sizes="(max-width: 700px) 100vw, 800px" alt="Chien faisant de la bicyclette" /> + sizes="(max-width: 700px) 100vw, 800px" alt="Chien faisant du vélo" /> + Et que sous cette largeur de port d'affichage, cette image prend 100% de la largeur, mais + lorsque la fenêtre d'affichage est plus grande, l'image est limitée à 800 pixels CSS --> - + ``` diff --git a/src/content/docs/fr/lighthouse-performance-test.md b/src/content/docs/fr/lighthouse-performance-test.md index 9a772bf..9b89e95 100644 --- a/src/content/docs/fr/lighthouse-performance-test.md +++ b/src/content/docs/fr/lighthouse-performance-test.md @@ -1,25 +1,24 @@ --- title: Tester les performances avec Lighthouse -description: Étapes pour tester les performances d'un site web en utilisant Lighthouse -taskInputHash: 8e6d39610c052ea3 +description: Les étapes pour tester les performances d'un site web en utilisant Lighthouse +taskInputHash: 41b20c3fed2f0d3d lang: fr -ignore: '/* cSpell:locale fr,en*/' -date_published: '2023-03-24' -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' --- -Comment tester les performances de votre site avec Lighthouse? +Comment tester les performances de son site avec Lighthouse? -> Lighthouse est un outil qui peut être utilisé pour mesurer les performances, l'accessibilité et d'autres aspects d'un site web. Pour tester les performances de votre site web avec Lighthouse, suivez ces étapes: -> -> 1\. Ouvrez le navigateur Web Google Chrome et accédez à la page que vous souhaitez tester. -> -> 2\. Cliquez sur les trois points en haut à droite de la fenêtre du navigateur, puis sélectionnez "Autres outils" et ensuite "Outils de développement" ou utilisez simplement le raccourci clavier "Ctrl+Shift+I" (Windows, Linux) ou "Command+Option+I" (macOS). -> -> 3\. Dans le panneau Outils de développement, cliquez sur l'icône Lighthouse située sur le côté gauche du panneau ou appuyez sur "Ctrl+Shift+P" (Windows, Linux) ou "Command+Shift+P" (macOS) pour ouvrir le menu Commandes, puis tapez "Lighthouse" et sélectionnez "Générer un rapport". -> -> 4\. Dans la boîte de dialogue Lighthouse, sélectionnez les options de performances et autres pertinentes que vous souhaitez tester, puis cliquez sur "Générer un rapport". -> -> 5\. Après que Lighthouse a terminé son analyse, vous verrez un rapport avec des scores et des recommandations pour améliorer les performances, l'accessibilité et d'autres domaines de votre site web. -> -> En suivant ces étapes, vous pouvez utiliser Lighthouse pour tester et optimiser les performances de votre site web, ce qui peut aider à améliorer son expérience utilisateur et son classement dans les moteurs de recherche. +>Lighthouse est un outil qui peut être utilisé pour mesurer les performances, l'accessibilité et d'autres aspects d'un site web. Pour tester les performances de votre site web avec Lighthouse, suivez ces étapes: +> +>1. Ouvrez le navigateur Web Google Chrome et accédez à la page que vous souhaitez tester. +> +>2. Cliquez sur les trois points en haut à droite de la fenêtre du navigateur, puis sélectionnez "Autres outils" et ensuite "Outils de développement" ou utilisez simplement le raccourci clavier "Ctrl+Shift+I" (Windows, Linux) ou "Commande +Option+I" (macOS). +> +>3. Dans le panneau Outils de développement, cliquez sur l'icône Lighthouse située sur le côté gauche du panneau ou appuyez sur "Ctrl+Shift+P" (Windows, Linux) ou "Commande +Shift+P" (macOS) pour ouvrir le menu Commande, puis tapez "Lighthouse" et sélectionnez "Générer un rapport". +> +>4. Dans la boîte de dialogue Lighthouse, sélectionnez les options de performances et autres options pertinentes que vous souhaitez tester, puis cliquez sur "Générer un rapport". +> +>5. Après que Lighthouse ait terminé son analyse, vous verrez un rapport avec des scores et des recommandations pour améliorer les performances, l'accessibilité et d'autres domaines de votre site web. +> +>En suivant ces étapes, vous pouvez utiliser Lighthouse pour tester et optimiser les performances de votre site web, ce qui peut aider à améliorer son expérience utilisateur et son classement dans les moteurs de recherche. diff --git a/src/content/docs/fr/picture-examples.md b/src/content/docs/fr/picture-examples.md index 5fe61a0..93bb440 100644 --- a/src/content/docs/fr/picture-examples.md +++ b/src/content/docs/fr/picture-examples.md @@ -1,58 +1,58 @@ --- -title: Exemples utilisant l'élément +title: Exemples d'utilisation de l'élément description: >- - Fournit des exemples utilisant l'élément , pour des images réactives, - la direction artistique et différents formats d'image. -taskInputHash: 9b88532218099931 + Fournit des exemples d'utilisation de l'élément , pour des images + adaptatives, la direction d'art et différents formats d'image. +taskInputHash: 612a054526e2fcb5 lang: fr -date_published: '2023-03-24' -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' --- -Voici quelques exemples d'utilisation de l'élément `` avec leurs explications : - -1\. Exemple pour les images réactives : - -```html - - - - Une image - -``` - -Explication : Dans cet exemple, l'élément `` est utilisé pour fournir différentes sources d'image pour différentes tailles d'écran. Les éléments `` spécifient les différentes sources d'image en utilisant l'attribut "srcset" et l'attribut "media" pour spécifier les conditions dans lesquelles chaque source doit être utilisée. L'élément `` est utilisé comme substitution pour les anciens navigateurs ou lorsque les conditions spécifiées dans les éléments `` ne sont pas remplies. - -2\. Exemple pour la direction artistique : - -```html - - - - Une image - -``` - -Explication : Dans cet exemple, l'élément `` est utilisé pour fournir différentes sources d'image en fonction de l'orientation de l'appareil. L'élément `` avec l'attribut "media" défini sur "(orientation: landscape)" spécifie une source d'image pour les écrans larges, tandis que l'élément `` spécifie une source d'image pour les écrans en portrait. - -3\. Exemple pour différents formats d'image : - -```html - - - - - - Une image - -``` - -Explication : Dans cet exemple, l'élément `` est utilisé pour fournir différentes sources d'image pour différents formats d'image. Les éléments `` spécifient différentes sources d'image en utilisant l'attribut "srcset" et l'attribut "type" pour spécifier le format d'image. L'élément `` est utilisé comme substitution pour les anciens navigateurs qui ne supportent pas l'élément ``. - -## Points de rupture - -En design réactif, les points de rupture sont utilisés pour définir quand la mise en page d'un site web ou d'une application doit changer en fonction de la taille de la fenêtre d'affichage. Les points de rupture sont généralement définis à l'aide de requêtes média en CSS, qui appliquent différents styles en fonction de la largeur de l'écran. Ces points de rupture peuvent être utilisés en conjonction avec l'élément `` pour fournir différentes sources d'image pour différentes tailles d'écran. - -Par exemple, dans le premier exemple ci-dessus, nous avons utilisé l'attribut `media` pour spécifier la largeur d'écran sous laquelle chaque source doit être utilisée. Lorsque la largeur d'écran est supérieure ou égale à 768 pixels, la source `image-large.jpg` sera utilisée ; lorsque la largeur d'écran est supérieure ou égale à 480 pixels mais inférieure à 768 pixels, la source `image-medium.jpg` sera utilisée ; et lorsque la largeur d'écran est inférieure à 480 pixels, la source `image-small.jpg` sera utilisée. Cela nous permet de fournir des images aux tailles appropriées pour chaque appareil, réduisant ainsi les temps de chargement des pages et améliorant l'expérience utilisateur. - -Les points de rupture peuvent être définis à n'importe quelle taille d'écran, et plusieurs points de rupture peuvent être utilisés pour créer des mises en page qui répondent à un large éventail d'appareils. En combinant les points de rupture avec l'élément ``, vous pouvez créer des designs flexibles et réactifs qui sont superbes sur n'importe quel appareil. +Voici quelques exemples d'utilisation de l'élément `` et leurs explications : + +1. Exemple d'images adaptatives : + +```html + + + + Une image + +``` + +Explication : Dans cet exemple, l'élément `` est utilisé pour fournir des sources d'images différentes pour différentes tailles d'écran. Les éléments `` spécifient les différentes sources d'images en utilisant l'attribut "srcset" et l'attribut "media" pour spécifier les conditions dans lesquelles chaque source doit être utilisée. L'élément `` est utilisé comme solution de repli pour les anciens navigateurs ou lorsque les conditions spécifiées dans les éléments `` ne sont pas remplies. + +2. Exemple pour la direction d'art : + +```html + + + + Une image + +``` + +Explication : Dans cet exemple, l'élément `` est utilisé pour fournir des sources d'images différentes en fonction de l'orientation de l'appareil. L'élément `` avec l'attribut "media" défini sur "(orientation: landscape)" spécifie une source d'image pour les écrans larges, tandis que l'élément `` spécifie une source d'image pour les écrans en portrait. + +3. Exemple pour différents formats d'image : + +```html + + + + + + Une image + +``` + +Explication : Dans cet exemple, l'élément `` est utilisé pour fournir des sources d'images différentes pour différents formats d'image. Les éléments `` spécifient différentes sources d'images en utilisant l'attribut "srcset" et l'attribut "type" pour spécifier le format d'image. L'élément `` est utilisé comme solution de repli pour les anciens navigateurs qui ne prennent pas en charge l'élément ``. + +## Points de rupture + +En conception adaptative, les points de rupture sont utilisés pour définir quand la mise en page d'un site web ou d'une application doit changer en fonction de la taille de l'affichage. Les points de rupture sont généralement définis à l'aide de requêtes multimédias en CSS, qui appliquent des styles différents en fonction de la largeur de l'écran. Ces points de rupture peuvent être utilisés en conjonction avec l'élément `` pour fournir des sources d'images différentes pour différentes tailles d'écran. + +Par exemple, dans le premier exemple ci-dessus, nous avons utilisé l'attribut `media` pour spécifier la largeur de l'écran sous laquelle chaque source doit être utilisée. Lorsque la largeur de l'écran est supérieure ou égale à 768 pixels, la source `image-large.jpg` sera utilisée ; lorsque la largeur de l'écran est supérieure ou égale à 480 pixels mais inférieure à 768 pixels, la source `image-medium.jpg` sera utilisée ; et lorsque la largeur de l'écran est inférieure à 480 pixels, la source `image-small.jpg` sera utilisée. Cela nous permet de fournir des images de taille appropriée pour chaque appareil, ce qui réduit les temps de chargement de la page et améliore l'expérience utilisateur. + +Les points de rupture peuvent être définis à n'importe quelle taille d'écran, et plusieurs points de rupture peuvent être utilisés pour créer des mises en page qui répondent à une large gamme d'appareils. En combinant les points de rupture avec l'élément ``, vous pouvez créer des designs flexibles et adaptatifs qui ont fière allure sur n'importe quel appareil. diff --git a/src/content/docs/fr/pixels-not-pixels.md b/src/content/docs/fr/pixels-not-pixels.md index f6eef92..20e695b 100644 --- a/src/content/docs/fr/pixels-not-pixels.md +++ b/src/content/docs/fr/pixels-not-pixels.md @@ -1,20 +1,21 @@ --- title: px ≠ pixels -description: Pixels d'écran ≠ pixels de navigateur ≠ pixels d'image -taskInputHash: 7dfd1c9b5c352f62 +description: >- + Les pixels des dispositifs ≠ les pixels des navigateurs ≠ les pixels des + images +taskInputHash: b505a8e4cccad4f3 lang: fr -ignore: '/* cSpell:locale fr,en*/' sidebar_sort_priority: 900 -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' --- -### Pixels d'écran ≠ pixels de navigateur ≠ pixels d'image +### Device pixels ≠ browser px ≠ image px -Grâce à Apple, les pixels CSS et HTML (`px`) **correspondent presque toujours à plusieurs pixels d'écran/imprimante**. Le devicePixelRatio de mon téléphone est de 3,875 ; [et le vôtre ?](https://www.mydevice.io/) +Grâce à Apple, les pixels CSS et HTML (`px`) **ne correspondent presque jamais à un seul pixel du dispositif/imprimante**. Le devicePixelRatio sur mon téléphone est de 3.875 ; [et vous ?](https://www.mydevice.io/) -Le devicePixelRatio de mon ordinateur de bureau change en fonction du zoom du navigateur, mais est par défaut de 1,5 (ma sacle d'affichage est de 150 % dans `Système > Affichage`). +Le devicePixelRatio de mon ordinateur de bureau change en fonction du zoom du navigateur, mais est par défaut de 1.5 (car mon `Système > Affichage > Échelle` est de 150 %, après tout). -Les fichiers image (à l'exception des SVG) se décodent en une grille de pixels. **Il est étonnamment difficile d'obtenir une correspondance parfaite entre les pixels d'image et les pixels d'écran avec un rapport 1 : 1 - mais avec `srcset`, on peut s'en approcher**, et un peu de Javascript peut ajuster la taille de l'élément HTML après le chargement si vous avez une raison valable de nécessiter une correspondance parfaite, bien que ces arts interdites ne seront pas révélées ici. +Les fichiers d'image (à l'exclusion des SVG) se décodent en une grille de pixels. **Il est incroyablement difficile d'obtenir des pixels d'image pour s'afficher parfaitement à un rapport de 1:1 avec les pixels de l'appareil - mais avec `srcset`, vous pouvez vous en approcher suffisamment**, et un peu de JavaScript peut ajuster la taille des éléments HTML après le chargement si vous avez des raisons valables pour nécessiter cette carte parfaite, bien que nous n'enseignerons pas ces arts interdits ici. -> Les autres unités absolues ([in, pc, pt, mm, cm, Q)](https://developer.mozilla.org/fr/docs/Web/CSS/Longueurs-et-dimensions_typographiques) sont définies en fonction du nombre de pixels CSS et prétendent que tout est à 96 dpi. Les développeurs évitent les unités absolues car il est généralement préférable d'utiliser des unités dérivées de la taille de police ou des dimensions de la fenêtre d'affichage/du conteneur. Des unités incompatibles peuvent casser la mise en page si l'utilisateur augmente la taille de texte, zoome le navigateur ou pivote son appareil. Inutile de dire qu'il faut faire toutes ces choses avant de publier votre site. +> Les autres unités absolues ([in, pc, pt, mm, cm, Q](https://developer.mozilla.org/en-US/docs/Web/CSS/length)) sont définies en fonction du nombre de pixels CSS et prétendent que tout est à 96 dpi. Les développeurs évitent l'usage d'unités absolues car il est généralement préférable d'utiliser des unités dérivées de la taille de la police ou des dimensions de la fenêtre d'affichage/conteneur. Des unités différentes peuvent rompre une conception si l'utilisateur ajuste le multiplicateur `Accessibilité > Taille de texte`, effectue un zoom sur le navigateur ou fait pivoter son appareil. Il est évident que vous devez procéder à toutes ces opérations avant de mettre en ligne votre site. diff --git a/src/content/docs/fr/specify-width-height.md b/src/content/docs/fr/specify-width-height.md index e5da3af..ddab2c0 100644 --- a/src/content/docs/fr/specify-width-height.md +++ b/src/content/docs/fr/specify-width-height.md @@ -3,17 +3,16 @@ title: Utiliser la largeur et la hauteur description: >- Avantages de l'utilisation des attributs de largeur et de hauteur dans le code HTML -taskInputHash: b09c49dc5d3a4a2d +taskInputHash: 710d960e0aef9b37 lang: fr -ignore: '/* cSpell:locale fr,en*/' -date_published: '2023-03-24' -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' --- -Pourquoi devriez-vous mettre la largeur et la hauteur dans le HTML ? +Pourquoi faut-il mettre la largeur et la hauteur dans le HTML ? -> Il est recommandé de mettre les attributs de largeur et de hauteur dans le code HTML des images car cela aide le navigateur web à connaître la taille de l'image avant qu'elle ne soit entièrement chargée. Cela permet au navigateur de réserver l'espace approprié sur la page Web pour l'image, ce qui empêche le contenu de sauter pendant que l'image se charge. +> Il est recommandé de mettre les attributs de largeur et de hauteur dans le code HTML des images car cela permet au navigateur Web de connaître la taille de l'image avant qu'elle ne soit entièrement chargée. Cela permet au navigateur de réserver l'espace approprié sur la page Web pour l'image, évitant ainsi que le contenu ne saute autour lorsque l'image se charge. > -> De plus, spécifier les attributs de largeur et de hauteur pour les images peut également contribuer à améliorer les performances globales de la page web. Lorsqu'un navigateur connaît la taille d'une image à l'avance, il peut calculer avec précision la quantité d'espace nécessaire pour afficher l'image et éviter des recharges ou des redessinages inutiles du contenu lors du chargement. +> De plus, spécifier les attributs de largeur et de hauteur pour les images peut également aider à améliorer les performances globales de la page Web. Lorsqu'un navigateur connaît la taille d'une image à l'avance, il peut calculer plus précisément l'espace nécessaire pour afficher l'image et éviter les reflows ou repaints inutiles du contenu lorsqu'il se charge. > -> En somme, l'utilisation des attributs de largeur et de hauteur dans le code HTML des images peut améliorer l'expérience utilisateur en accélérant le chargement du contenu et en réduisant les problèmes visuels. +> Dans l'ensemble, l'utilisation des attributs de largeur et de hauteur dans le code HTML des images peut améliorer l'expérience utilisateur en accélérant le chargement du contenu et en réduisant les problèmes visuels. diff --git a/src/content/docs/fr/when-to-use-picture.md b/src/content/docs/fr/when-to-use-picture.md index cac06f6..d8e9191 100644 --- a/src/content/docs/fr/when-to-use-picture.md +++ b/src/content/docs/fr/when-to-use-picture.md @@ -1,22 +1,21 @@ --- title: Quand utiliser l'élément description: Explique dans quelles situations vous devriez utiliser l'élément -taskInputHash: 745796c8db3f3527 +taskInputHash: f314b7d0da04a16a lang: fr -ignore: '/* cSpell:locale fr,en*/' -date_published: '2023-03-27' -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' --- -L'élément `picture` est utilisé pour fournir plusieurs versions d'une image et détermine quelle version de l'image afficher en fonction de certaines conditions. Il est particulièrement utile pour optimiser des images pour différentes tailles d'écran et résolutions, et est couramment utilisé dans la conception de sites Web adaptatifs. -Voici quelques scénarios spécifiques où vous voudriez utiliser l'élément `picture` : +L'élément `picture` est utilisé pour fournir plusieurs versions d'une image et détermine quelle version de l'image afficher en fonction de certaines conditions. Il est particulièrement utile pour optimiser les images pour différentes tailles d'écran et résolutions et est couramment utilisé dans la conception Web responsive. +Voici quelques scénarios spécifiques où vous pourriez vouloir utiliser l'élément `picture` : -* **Écrans Retina :** Les écrans haute densité tels que les écrans Retina d'Apple ont une densité de pixels plus élevée, ce qui signifie que les images peuvent sembler floues ou pixelisées si elles ne sont pas optimisées pour le haute résolution. Avec l'élément `picture`, vous pouvez fournir une version de l'image qui a deux fois plus de pixels que la version normale, ce qui la rend nette et claire sur les écrans Retina. +* **Écrans Retina :** Les écrans à haute densité comme les écrans Retina d'Apple ont une densité de pixels plus élevée, ce qui signifie que les images peuvent paraître floues ou pixelisées si elles ne sont pas optimisées pour une résolution élevée. Avec l'élément `picture`, vous pouvez fournir une version de l'image qui a deux fois plus de pixels que la version normale, de sorte qu'elle soit nette et claire sur les écrans Retina. -* **Différents ratios d'aspect :** Si vous concevez un site qui doit afficher des images avec différents ratios d'aspect (comme paysage contre portrait), vous pouvez utiliser l'élément `picture` pour fournir différentes versions de l'image optimisées pour chaque ratio d'aspect. +* **Différents ratios d'aspect :** Si vous concevez un site qui doit afficher des images avec différents ratios d'aspect (comme paysage vs portrait), vous pouvez utiliser l'élément `picture` pour fournir différentes versions de l'image qui sont optimisées pour chaque ratio d'aspect. -* **Limitations de la bande passante:** Les images peuvent être de grands fichiers qui consomment beaucoup de bande passante, surtout sur les appareils mobiles. Avec l'élément `picture`, vous pouvez fournir des versions plus petites de l'image pour les appareils avec des écrans plus petits ou des connexions Internet plus lentes, ce qui peut aider à réduire les temps de chargement des pages. +* **Limitations de la bande passante :** Les images peuvent être des fichiers volumineux qui occupent beaucoup de bande passante, en particulier sur les appareils mobiles. Avec l'élément `picture`, vous pouvez fournir des versions plus petites de l'image pour les appareils avec des écrans plus petits ou des connexions Internet plus lentes, ce qui peut aider à réduire les temps de chargement de la page. -* **Mise en page d'art directionnel :** Parfois, vous pouvez vouloir présenter une image d'une certaine manière en fonction de la mise en page du reste de la page. Par exemple, vous pouvez vouloir afficher un gros plan du visage d'une personne sur les appareils mobiles, mais un plan plus large sur les ordinateurs de bureau. L'élément `picture` vous permet de fournir différentes versions de l'image optimisées pour différentes mises en page. +* **Mises en page dirigées par l'art :** Parfois, vous souhaiterez peut-être présenter une image d'une certaine manière en fonction de la mise en page du reste de la page. Par exemple, vous souhaiterez peut-être montrer un gros plan du visage d'une personne sur les appareils mobiles, mais un plan plus large sur les ordinateurs de bureau. L'élément `picture` vous permet de fournir différentes versions de l'image qui sont optimisées pour différentes mises en page. -Dans l'ensemble, l'élément `picture` est un outil puissant qui peut vous aider à optimiser vos images pour une variété de cas d'utilisation et à vous assurer qu'elles ont fière allure, quel que soit l'appareil ou la taille d'écran sur lequel elles sont affichées. +Dans l'ensemble, l'élément `picture` est un outil puissant qui peut vous aider à optimiser vos images pour une variété de cas d'utilisation et vous assurer qu'elles ont l'air superbes quelle que soit l'appareil ou la taille d'écran sur lequel elles sont visualisées. diff --git a/src/content/docs/fr/width-density.md b/src/content/docs/fr/width-density.md index 805d0c9..5cf7a0d 100644 --- a/src/content/docs/fr/width-density.md +++ b/src/content/docs/fr/width-density.md @@ -1,21 +1,21 @@ --- title: Descripteurs de largeur et de densité description: Exemples d'utilisation des descripteurs de largeur et de densité dans `srcset` -taskInputHash: 569fd1065931e1e0 +taskInputHash: d4db50f5267305d1 lang: fr -ignore: '/* cSpell:locale fr,en*/' -date_published: '2023-03-24' -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' --- -Comprendre les descripteurs de largeur (w) et de densité (x) dans `srcset`. Utiliser des exemples et utiliser Markdown. +Comprendre les descripteurs de largeur (w) et de densité (x) dans `srcset`. Utilisez des exemples et utilisez Markdown. + +> `srcset` est un attribut HTML qui permet aux développeurs de fournir plusieurs sources d'image avec des résolutions ou des densités de pixels différentes et de laisser le navigateur sélectionner l'image appropriée en fonction des caractéristiques d'affichage du dispositif. L'attribut `srcset` utilise une combinaison de l'URL et des descripteurs `w` ou `x` pour spécifier les images. -> `srcset` est un attribut HTML qui permet aux développeurs de fournir plusieurs sources d'images avec différentes résolutions ou densités de pixels, et de laisser le navigateur sélectionner l'image appropriée en fonction des caractéristiques d'affichage de l'appareil. L'attribut `srcset` utilise une combinaison de l'`URL` et des descripteurs `w` ou `x` pour spécifier les images. ## Descripteur de largeur (`w`) -> Le descripteur `w` est utilisé pour spécifier la largeur d'une image en pixels. Il est utilisé lorsque nous voulons fournir au navigateur les dimensions d'une image afin qu'il puisse choisir l'image appropriée pour l'espace d'écran disponible. +> Le descripteur `w` est utilisé pour spécifier la largeur d'une image en pixels. Il est utilisé lorsque nous voulons fournir au navigateur les dimensions d'une image afin qu'il puisse choisir l'image appropriée pour l'espace d'affichage disponible. -> La syntaxe pour utiliser le descripteur `w` dans `srcset` est la suivante: +> La syntaxe pour utiliser le descripteur `w` dans `srcset` est la suivante : ```html Exemple d'image ``` +> Dans l'exemple ci-dessus, nous avons fourni au navigateur trois images et leurs largeurs correspondantes en pixels. Le navigateur sélectionnera l'image avec la largeur la plus proche de l'espace d'affichage disponible. - -> Dans l'exemple ci-dessus, nous avons fourni au navigateur trois images et leurs largeurs correspondantes en pixels. Le navigateur sélectionnera l'image avec la largeur la plus proche de l'espace d'écran disponible. ## Descripteur de densité (`x`) -> Le descripteur `x` est utilisé pour spécifier la densité de pixels d'une image, qui est le rapport des pixels physiques aux pixels CSS. Il est utilisé lorsque nous voulons fournir au navigateur différentes versions de la même image avec différentes densités de pixels. +> Le descripteur `x` est utilisé pour spécifier la densité de pixels d'une image, qui est le rapport des pixels physiques aux pixels CSS. Il est utilisé lorsque nous voulons fournir au navigateur différentes versions de la même image avec des densités de pixels différentes. -> La syntaxe pour utiliser le descripteur `x` dans `srcset` est la suivante: +> La syntaxe pour utiliser le descripteur `x` dans `srcset` est la suivante : ```html Exemple d'image ``` - -> Dans l'exemple ci-dessus, nous avons fourni au navigateur trois images et leurs densités de pixels correspondantes. Le navigateur sélectionnera l'image avec la densité de pixels la plus proche de l'écran de l'appareil. +> Dans l'exemple ci-dessus, nous avons fourni au navigateur trois images et leurs densités de pixels correspondantes. Le navigateur sélectionnera l'image avec la densité de pixels la plus proche de l'écran du dispositif. > Notez que les descripteurs `w` et `x` peuvent être utilisés ensemble dans le même attribut `srcset` pour fournir au navigateur plus d'options de choix. diff --git a/src/content/docs/it/_roundtrip_breakpoints.txt b/src/content/docs/it/_roundtrip_breakpoints.txt index e7fe41c..d4ae996 100644 --- a/src/content/docs/it/_roundtrip_breakpoints.txt +++ b/src/content/docs/it/_roundtrip_breakpoints.txt @@ -1,42 +1,44 @@ --- title: Breakpoints and Images -description: Why some (but not all) breakpoints matter for your images -taskInputHash: 7714cadfe55d82ca +description: >- + Why some (but not all) breakpoints matter for your images +taskInputHash: 1dc3f28d444f3158 lang: en -ignore: '/* cSpell:locale it,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' --- ### Context -Small screens and large displays require different layouts. In order for `srcset` and `sizes` to work, we need to know at what point the layout change occurs. +Small and large screens need different layouts. For `srcset` and `sizes` to work, we need to know at what point the layout changes. -Web developers need to decide what to shrink, hide, or move up on smaller screens - or more commonly, what to expand, reveal, or add on larger screens. They also have little information to go on. Is the user using a tablet or a smartphone in landscape mode - or a small browser window? +Web developers have to decide what to resize, hide, or move on smaller screens—or more commonly, what to expand, reveal, or add on larger screens. They also have little information to go on. Is the user using a landscape tablet or phone—or a small browser window? -We need to choose an arbitrary viewport width at which the layout change occurs. This is called a **breakpoint**. It is an arbitrary CSS pixel value ([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**. It's an arbitrary number of CSS pixels ([not device pixels](/en/css-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. -Some images (like logos, icons, or buttons) might be immune to layout changes caused by these breakpoints (and will do fine with [srcset density descriptors](/en/density-descriptors)). +Some images (like logos or icons or buttons) might be immune to layout changes caused by these breakpoints (and will work well with [density descriptors in `srcset`](/en/density-descriptors)). -Main content images will be constrained by the size of their container. Typically, the main content area of a page will be constrained to a certain width on larger screens, a `max-width`, but on smaller screens, the main content area will fill the entire viewport. +Main content images will be limited by the size of their container. Typically the main content area of a page will be limited to a certain width on larger screens—a `max-width`—but on small screens the main content area will fill the entire viewport. -If you have more than one column at certain breakpoints, it becomes harder to calculate the actual sizing rules, as the percentage of the viewport width the image takes up will change. +If you have more than one column at certain breakpoints, it becomes harder to calculate effective sizing rules, because the percentage of the viewport width that the image occupies will change. -### The Easy Way +### The easy method -That being said, you don't need to overthink it. You'll probably be just fine with the following approximation: +That said, don't worry too much. It will probably be very simple by following this approach: -1. At what point does the main column (or image container) stop growing? Up to that viewport width, we can use `100vw` for the image's `sizes` attribute to indicate that the image takes up the full viewport width. -2. What is the maximum width the container reaches? We can set that fixed width for everything else. +1. At what size does the main column (or image container) stop growing? Until that viewport width, we can use `100vw` for the `sizes` attribute of the image to say that the image occupies 100% of the viewport width. +2. What's the largest that the container ever gets? We can set that as a fixed width for everything else. -If your answer to point 1 was 700px and the answer to point 2 was 800px, you can use the following `sizes` attribute: +If the answer to the first question is 700px and the answer to the second question is 800px, we can use the following `sizes` attribute: ```html - + ``` -> You might think that the browser could handle all these calculations for us based on the CSS. Unfortunately, browsers are aggressively eager to choose an image URL *before* style sheets are downloaded. So we have to do the calculations ourselves, and it'll do them a favor if we don't get it perfect. + + +> We might think that the browser could handle all these calculations for us based on the CSS. Unfortunately, browsers are overly eager to choose an image URL *before* downloading the stylesheets. So, we have to do the math ourselves, and that's okay if we don't do it perfectly. ===================== Content prompt used: @@ -49,8 +51,8 @@ Also carefully translate the title and description for the article; do not use & 1. Breakpoints & images 2. Why some (but not all) breakpoints matter for your images -Metadata returned1. Breakpoint e immagini -2. Perché alcuni (ma non tutti) i breakpoint sono importanti per le tue immagini +Metadata returned1. Punti di interruzione e immagini +2. Perché alcuni (ma non tutti) i punti di interruzione sono importanti per le tue immagini Roundtrip (isolated) prompt used: diff --git a/src/content/docs/it/_roundtrip_browser-picks-srcset.txt b/src/content/docs/it/_roundtrip_browser-picks-srcset.txt index ba677da..10ac7d1 100644 --- a/src/content/docs/it/_roundtrip_browser-picks-srcset.txt +++ b/src/content/docs/it/_roundtrip_browser-picks-srcset.txt @@ -1,12 +1,15 @@ --- title: How the browser chooses -description: How the browser chooses among the images listed in the srcset attribute -taskInputHash: 5f305bd3a8d992cf +description: How the browser chooses between images listed in the srcset attribute +taskInputHash: 9d76226efed7cd73 lang: en +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -How does the browser choose among the images listed in the `srcset` attribute? Here are the detailed steps, with examples for both width and density specifications and how the browser chooses based on the device and viewport: +How does the browser choose between images listed in the srcset attribute? Here is a step-by-step description with examples for width and density specifications and how the browser chooses based on device and viewport. -- When using the `srcset` attribute in HTML, the browser uses a set of rules to choose the most appropriate image from a list of provided sources. These rules depend on the display characteristics of the device (resolution, pixel density) and the size of the viewport. The `srcset` attribute allows to specify different images based on width (using the `w` descriptor) or pixel density (using the `x` descriptor). Let's look at each case with examples. +- When using the `srcset` attribute in HTML, the browser uses a set of rules to choose the most appropriate image from a list of provided sources. These rules depend on both the characteristics of the device display (resolution, pixel density) and the size of the viewport. The `srcset` attribute allows specifying several images according to the width (using the `w` descriptor) or the pixel density (using the `x` descriptor). Let's examine each case with some examples. 1\. Width descriptor (`w`): @@ -14,15 +17,15 @@ Suppose we have the following `srcset` attribute: ```html -Example image +Example Image ``` -The browser follows these steps: +The browser will follow these steps: -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. +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 more. -b. Calculate the effective width for each image in `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` attribute. Multiply the width descriptor by the DPR. For a device with a DPR of 1: - example-small.jpg: 400 * 1 = 400px @@ -30,23 +33,23 @@ b. Calculate the effective width for each image in `srcset`. Multiply the width - example-large.jpg: 1600 * 1 = 1600px -c. Compare the effective widths with the viewport width. Suppose the viewport width is 420px. The browser will select the smallest image with an effective width greater than or equal to the viewport width. In this case, it will select `example-medium.jpg`. +c. Compare the effective widths with the width of the viewport. Suppose 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 select `example-medium.jpg`. -1\. Pixel density descriptor (`x`): +2\. Pixel density descriptor (`x`): Suppose we have the following `srcset` attribute: ```html -Example image +Example Image ``` -The browser follows these steps: +The browser will follow these steps: -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. +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 more. -b. Compare the device's DPR with the `x` descriptors in `srcset`. In this case, we have three images with the following descriptors: +b. Compare the device DPR with the `x` descriptors in the `srcset` attribute. In this case, we have three images with the following descriptors: - example-1x.jpg: 1x @@ -54,9 +57,9 @@ b. Compare the device's DPR with the `x` descriptors in `srcset`. In this case, - example-3x.jpg: 3x -c. Choose the image with the `x` descriptor closest to the device's DPR. For a device with a DPR of 1, the browser will select `example-1x.jpg`. For a device with a DPR of 2, it will choose `example-2x.jpg`, and so on. +c. Choose the image with the `x` descriptor closest to the device DPR. For a device with a DPR of 1, the browser will select `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 it is also possible to use the `sizes` attribute in combination with the `srcset` attribute to provide additional information on how the image will be displayed at different viewport widths. This is particularly useful when using the width descriptor (`w`). Here is an example: +It's important to note that it's also possible to use the `sizes` attribute in combination with the `srcset` attribute to provide additional 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: ```html @@ -75,7 +78,7 @@ Also carefully translate the title and description for the article; do not use & 1. How the browser chooses 2. How the browser chooses between images listed in the srcset attribute -Metadata returned1. Come sceglie il browser +Metadata returned1. Come il browser sceglie 2. Come il browser sceglie tra le immagini elencate nell'attributo srcset diff --git a/src/content/docs/it/_roundtrip_density-descriptors.txt b/src/content/docs/it/_roundtrip_density-descriptors.txt index 85b40cf..7974ecd 100644 --- a/src/content/docs/it/_roundtrip_density-descriptors.txt +++ b/src/content/docs/it/_roundtrip_density-descriptors.txt @@ -1,35 +1,32 @@ --- -title: Density descriptors & srcset +title: Density Descriptors and Srcset description: Examples of using density descriptors in `srcset` -taskInputHash: cf54e3343feb0a22 +taskInputHash: 8a445e12ba15aba8 lang: en -ignore: '/* cSpell:locale it,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 to provide the image that fits the user's device best, improving performance and user experience. This guide will take you through the essentials of using srcset with density descriptors and provide markup examples for your convenience. +Srcset with density descriptors provides a simple and effective method for providing the most appropriate image for each user's device, improving performance and user experience. This guide will walk you through using density descriptors for srcset and provide markup examples for your convenience. -## What is Srcset with density descriptors? +## What is Srcset with Density Descriptors? -Srcset is an HTML attribute designed to allow specifying multiple image sources for a single `` element. Density descriptors (`x`) are used together with srcset to provide images at different resolutions based on the pixel density of the user's display. +Srcset is an HTML attribute designed to allow specifying multiple image sources for a single `` element. Density descriptors (`x`) are used in combination with srcset to provide images at different resolutions based on the user's pixel density display. -## When to use Srcset with density descriptors +## When to Use Srcset with Density Descriptors Using srcset with density descriptors is particularly useful when you want to: +1. Serve high-resolution images on high-pixel-density displays (e.g., Retina displays) and provide low-resolution images on standard displays. +2. Improve page performance by providing the most appropriate image size for each user's device. -1. Provide high-resolution images to high DPI displays (such as Retina displays) while providing lower resolution images to standard displays. -2. Improve page performance by providing the most appropriate images 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 images at different resolutions. +1. Prepare your images in different resolutions. 2. Add the `srcset` attribute to the `` element, including the image sources and corresponding density descriptors. -3. Add the `sizes` attribute (optional) to specify image dimensions as it will be displayed on the screen. +3. Add the `sizes` attribute (optional) to specify image size while it is displayed on the screen. -### Example Markup +### Markup Example Here's an example of how to implement srcset with density descriptors in your markup: @@ -40,12 +37,11 @@ Here's an example of how to implement srcset with density descriptors in your ma ``` This example markup includes: - -- **src**: the default image source, shown if the browser doesn't support srcset. -- **srcset**: the list of image sources and their corresponding density descriptors (1x, 2x, 3x). The browser will choose the most appropriate image based on the user's display. +- **src**: the default image source displayed if the browser doesn't support srcset. +- **srcset**: the list of image sources and their density descriptors (1x, 2x, 3x). The browser will select the most appropriate image based on the user's display. - **alt**: an image description for accessibility purposes. -And that's it! You have successfully implemented srcset with density descriptors, improving your website's performance and user experience. +And that's it! You've successfully implemented srcset with density descriptors, improving your website's performance and user experience. ===================== Content prompt used: @@ -58,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. Descrittori di densità & srcset -2. Esempi di utilizzo di descrittori di densità in `srcset` +Metadata returned1. Descrittori di densità e srcset +2. Esempi di utilizzo dei descrittori di densità in `srcset` Roundtrip (isolated) prompt used: diff --git a/src/content/docs/it/_roundtrip_introduction.txt b/src/content/docs/it/_roundtrip_introduction.txt index 2a4967d..cc79995 100644 --- a/src/content/docs/it/_roundtrip_introduction.txt +++ b/src/content/docs/it/_roundtrip_introduction.txt @@ -1,43 +1,39 @@ --- -title: srcset and tag dimensions -description: An Efficient and Opinionated Guide to Responsive Images for 2023 -taskInputHash: 770938b4f7895424 +title: '`srcset` and `` sizes' +description: An Efficient and Decisive Guide to Responsive Images for 2023 +taskInputHash: 7c0db2e5e6194bc9 lang: en -ignore: '/* cSpell:locale it,en*/' sidebar_sort_priority: 1000 -date_published: '2023-03-23' -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' --- -**An Efficient and Opinionated Guide to Images for 2023** +**An Efficient and Guiding Guide for Images in 2023** -Check the sidebar for an in-depth analysis. This is a quick overview for updating `` tags to accommodate modern devices of varying sizes and pixel densities. You need to [know that pixels aren't equal](/en/pixels-not-pixels) and that `devicePixelRatio` tends to be around 3.875 rather than 1:1. Modern phones pretend to be 320-428px wide for readability (in CSS pixels), but have many device pixels per CSS pixel. +Check the sidebar for a more detailed treatment. This is a quick reference guide to updating `` tags to handle modern devices in their various sizes and pixel densities. You should [learn more about pixels != pixels](/en/pixels-are-not-pixels) and that `devicePixelRatio` is more likely to be around 3.875 than 1:1. Modern phones pretend to be wide between 320 and 428px for readability (in CSS pixel), but they have many device pixels per CSS pixel. -> If your image never changes size no matter how narrow the browser window is, you should use a [density descriptor](/en/density-descriptors). This is often appropriate for logos, icons, and buttons. +> If your image never changes size, no matter how much you shrink the browser window, you should use a [density descriptor](/en/density-descriptor) instead. This is often suitable for logos, icons, and buttons. -Do you know what your [breakpoints](/en/breakpoints) are? You'll need those numbers to refine the solution below - at least the viewport width breakpoint where the primary content area stops growing. +Do you know what your [breakpoints](/en/breakpoints) are? You will need these numbers to fine-tune the solution below, and at least the breakpoint where the main content width stops growing. -### The Easy Way +### The simple method ```html - Dog riding a bike - sizes="(max-width: 700px) 100vw, 800px" alt="Dog riding a bicycle" /> - - + - + ``` -{{This seems to be a correctly translated technical documentation with no grammar or clumsy phrasing mistakes.}} ===================== Content prompt used: @@ -50,8 +46,8 @@ Also carefully translate the title and description for the article; do not use & 1. srcset & sizes 2. An Efficient and Opinionated Guide to Responsive Images for 2023 -Metadata returned1. srcset e le dimensioni delle tag -2. Una Guida Efficient and Opinionated alle Immagini Responsive per il 2023 +Metadata returned1. `srcset` e le dimensioni degli `` +2. Una Guida Efficiente e Decisa alle Immagini Responsive per il 2023 Roundtrip (isolated) prompt used: diff --git a/src/content/docs/it/_roundtrip_lighthouse-performance-test.txt b/src/content/docs/it/_roundtrip_lighthouse-performance-test.txt index a590657..0c825de 100644 --- a/src/content/docs/it/_roundtrip_lighthouse-performance-test.txt +++ b/src/content/docs/it/_roundtrip_lighthouse-performance-test.txt @@ -1,28 +1,28 @@ --- -title: Test Performance with Lighthouse -description: Steps on how to test website performance using Lighthouse -taskInputHash: 174be49cc119f58b +title: Testing Performance with Lighthouse +description: >- + Steps on how to test a website's performance using Lighthouse +taskInputHash: 4f7942b4139a285a lang: en -ignore: '/* cSpell:locale it,en*/' -date_published: '2023-03-24' -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' --- -How to Test Your Website Performance with Lighthouse? +How do you test your website's performance with Lighthouse? -> Lighthouse is a tool that can be used to measure website performance, accessibility, and other aspects. To test your website performance with Lighthouse, follow these steps: +> Lighthouse is a tool that can be used to measure a website's performance, accessibility, and other aspects. To test your website's performance with Lighthouse, follow these steps: > -> 1. Open the Google Chrome web browser and go to the page you want to test. +> 1. Open the Google Chrome web browser and navigate to the page you want to test. > -> 2. Click on the three dots in the upper right corner of the browser window, then select "More Tools" and then "Developer Tools" or use the keyboard shortcut "Ctrl+Shift+I" (Windows, Linux) or "Command+Option+I" (macOS). +> 2. Click on the three dots in the upper-right corner of the browser window, then select "More tools" and then "Developer tools" or use the keyboard shortcut "Ctrl+Shift+I" (Windows, Linux) or "Command+Option+I" (macOS). > -> 3. In the Developer Tools panel, click on the Lighthouse icon on the left side of the panel or press "Ctrl+Shift+P" (Windows, Linux) or "Command+Shift+P" (macOS) to open the Command menu, then type "Lighthouse" and select "Generate report." +> 3. In the Developer Tools panel, click on the Lighthouse icon located on the left side of the panel or press "Ctrl+Shift+P" (Windows, Linux) or "Command+Shift+P" (macOS) to open the command menu, then type "Lighthouse" and select "Generate report". > -> 4. In the Lighthouse dialog box, select the performance and other relevant options you want to test, then click "Generate report." +> 4. In the Lighthouse dialog box, select the performance and other relevant options you want to test, then click "Generate report". > -> 5. After Lighthouse completes its analysis, you will see a report with scores and recommendations to improve performance, accessibility, and other areas of your website. +> 5. After Lighthouse has completed its analysis, you will see a report with scores and recommendations for improving the performance, accessibility, and other areas of your website. > -> By following these steps, you can use Lighthouse to test and optimize the performance of your website, which can help improve user experience and search engine ranking. +> By following these steps, you can use Lighthouse to test and optimize your website's performance, which can contribute to improving the user experience and search engine rankings. ===================== Content prompt used: @@ -36,7 +36,7 @@ Also carefully translate the title and description for the article; do not use & 2. Steps on how to test a website's performance using Lighthouse Metadata returned1. Testare la performance con Lighthouse -2. Passaggi su come testare la performance di un sito web usando Lighthouse +2. I passaggi su come testare la performance di un sito web utilizzando Lighthouse Roundtrip (isolated) prompt used: diff --git a/src/content/docs/it/_roundtrip_picture-examples.txt b/src/content/docs/it/_roundtrip_picture-examples.txt index 397769f..56e3dba 100644 --- a/src/content/docs/it/_roundtrip_picture-examples.txt +++ b/src/content/docs/it/_roundtrip_picture-examples.txt @@ -1,10 +1,12 @@ --- -title: Examples of Using the Element +title: Examples of using the element description: >- - Provides examples of using the element for responsive images, - art direction, and different image formats. -taskInputHash: 23abfd2c45089cf6 + Provides examples of using the element for responsive images, art direction, and different image formats. +taskInputHash: 8949b4f455087356 lang: en +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- Here are some examples of using the `` element and their explanations: @@ -30,7 +32,7 @@ Explanation: In this example, the `` element is used to provide differe ``` -Explanation: In this example, the `` element is used to provide different image sources depending on the orientation of the device. The `` element with the "media" attribute set to "(orientation: landscape)" specifies an image source for wide screens, while the `` element specifies an image source for vertical screens. +Explanation: In this example, the `` element is used to provide different image sources based on the orientation of the device. The `` element with the "media" attribute set to "(orientation: landscape)" specifies an image source for wide screens, while the `` element specifies an image source for vertical screens. 3. Example for different image formats: @@ -48,11 +50,11 @@ Explanation: In this example, the `` element is used to provide differe ## Breakpoints -In responsive design, breakpoints are used to define when the layout of a website or application should change based on the size of the viewport. Breakpoints are typically defined using media queries in CSS, which apply different styles based on the screen width. These breakpoints can be used in combination with the `` element to provide different image sources for different screen sizes. +In responsive design, breakpoints are used to define when the layout of a website or application should change based on viewport dimensions. Breakpoints are typically defined using media queries in CSS, which apply different styles based on screen width. These breakpoints can be used with the `` element to provide different image sources for different screen sizes. -For example, in the first example above, we used the `media` attribute to specify the screen width under which each source should be used. When the screen width is greater than or equal to 768 pixels, the `image-large.jpg` source will be used; when the screen width is greater than or equal to 480 pixels but less than 768 pixels, the `image-medium.jpg` source will be used; and when the screen width is less than 480 pixels, the `image-small.jpg` source will be used. This allows us to serve appropriately sized images for each device, reducing page loading times and improving the user experience. +For example, in the first example above, we used the `media` attribute to specify the screen width at which each source should be used. When the screen width is greater than or equal to 768 pixels, the `image-large.jpg` source will be used; when the screen width is greater than or equal to 480 pixels but less than 768 pixels, the `image-medium.jpg` source will be used; and when the screen width is less than 480 pixels, the `image-small.jpg` source will be used. This allows us to serve appropriately sized images for each device, reducing page load times and improving the user experience. -Breakpoints can be defined at any screen size and many breakpoints can be used to create layouts that respond to a wide range of devices. By combining breakpoints with the `` element, flexible and responsive designs can be created that adapt perfectly to any device. +Breakpoints can be defined at any screen size and multiple breakpoints can be used to create layouts that respond to a wide range of devices. By combining breakpoints with the `` element, flexible and responsive designs can be created that look great on any device. ===================== Content prompt used: @@ -65,8 +67,8 @@ Also carefully translate the title and description for the article; do not use & 1. Examples using element 2. Provides examples using the element, for responsive images, art direction and different image formats -Metadata returned1. Esempi di utilizzo dell'elemento -2. Fornisce esempi di utilizzo dell'elemento per immagini responsive, direzione artistica e diversi formati di immagine. +Metadata returned1. Esempi utilizzando l'elemento +2. Fornisce esempi utilizzando l'elemento per immagini responsive, direzione artistica e diversi formati di immagine. Roundtrip (isolated) prompt used: diff --git a/src/content/docs/it/_roundtrip_pixels-not-pixels.txt b/src/content/docs/it/_roundtrip_pixels-not-pixels.txt index 3d40d5b..e496e10 100644 --- a/src/content/docs/it/_roundtrip_pixels-not-pixels.txt +++ b/src/content/docs/it/_roundtrip_pixels-not-pixels.txt @@ -1,25 +1,22 @@ --- -title: px ≠ pixel -description: Device pixels ≠ browser pixels ≠ image pixels -taskInputHash: 9e3d515b23db4c50 +title: px ≠ pixels +description: Device pixels ≠ browser px ≠ image px +taskInputHash: 30d633a4ce310a0f lang: en -ignore: '/* cSpell:locale it,en*/' sidebar_sort_priority: 900 -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' --- -### Device pixels ≠ browser pixels ≠ image pixels +### Device pixels ≠ browser px ≠ image px -Thanks to Apple, CSS and HTML pixels (`px`) **almost always correspond to more device/printer pixels**. My phone's devicePixelRatio is 3.875; [what's yours?](https://www.mydevice.io/) +Thanks to Apple, CSS and HTML pixels (`px`) **almost always correspond to more device/printer pixels**. My device pixel ratio on the phone is 3.875; [what's yours?](https://www.mydevice.io/) -My desktop's devicePixelRatio changes with the browser zoom, but it's 1.5 by default (my `System > Display > Scale` is set to 150%, after all). +The device pixel ratio on the desktop changes with the browser zoom but it is 1.5 by default (my `System > Display > Scale` is set to 150%, after all). -Image files (excluding SVGs) decode a grid of pixels. **It's annoyingly difficult to display image pixels perfectly 1:1 with device pixels, but with the `srcset` attribute, you can come close enough**, and some JavaScript can adjust the size of the HTML element after loading if you have a really good reason to need that perfect correspondence, although such forbidden tricks won't be revealed here. +Image files (excluding SVGs) are decoded into a grid of pixels. **It is extremely difficult to make the image pixels display perfectly at a 1:1 ratio with the device pixels - but with `srcset` you can get *close enough***, and a bit of JavaScript can adjust the size of the HTML element after loading if there are truly compelling reasons to require such a perfect mapping, although such dark arts will not be revealed here. -> Other absolute units [in, pc, pt, mm, cm, Q](https://developer.mozilla.org/en-US/docs/Web/CSS/length) are defined based on the number of CSS pixels and pretend that everything is at 96dpi. Developers avoid absolute units because it's generally better to use units that are derived from font or viewport/container sizes. Discordant units can break a layout if the user adjusts their `Accessibility > Text Size` multiplier, enlarges the browser, or rotates the device. Needless to say, you should do all these things before publishing your site. - -{{Note that the term used here is not the technical term...}}. +> The definition of other absolute units [in, pc, pt, mm, cm, Q](https://developer.mozilla.org/en/docs/Web/CSS/length) is in terms of the number of CSS pixels and pretends that everything is at 96dpi. Developers avoid absolute units because it is generally better to use units derived from font size or viewport/container size. Non-matching units can break a layout if the user adjusts the `Accessibility > Text size` multiplier, zooms the browser, or rotates their device. Needless to say, you should do all these things before publishing your site. ===================== Content prompt used: @@ -32,7 +29,7 @@ Also carefully translate the title and description for the article; do not use & 1. px ≠ pixels 2. Device px ≠ browser px ≠ image px -Metadata returned1. px ≠ pixel +Metadata returned1. px ≠ pixeli 2. Pixel del dispositivo ≠ pixel del browser ≠ pixel dell'immagine diff --git a/src/content/docs/it/_roundtrip_specify-width-height.txt b/src/content/docs/it/_roundtrip_specify-width-height.txt index a9eb002..c541923 100644 --- a/src/content/docs/it/_roundtrip_specify-width-height.txt +++ b/src/content/docs/it/_roundtrip_specify-width-height.txt @@ -1,20 +1,19 @@ --- title: Using width and height description: Benefits of using width and height attributes in HTML code -taskInputHash: 34a145dde0e451eb +taskInputHash: 2c99c7f88c7255ed lang: en -ignore: '/* cSpell:locale it,en*/' -date_published: '2023-03-24' -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' --- -Why should you include width and height in HTML? +Why should you include width and height in HTML code? -> It is recommended to include width and height attributes in the HTML code of images because it helps the web browser to know the dimensions of the image before it is fully loaded. This allows the browser to reserve the appropriate amount of space on the webpage for the image, avoiding content jumping while the image is loading. +> It is recommended to include width and height attributes in HTML code for images because it helps the web browser to know the image dimensions before it is fully loaded. This allows the browser to reserve the appropriate amount of space on the web page for the image, which prevents content from jumping around as the image loads. > -> Additionally, specifying width and height attributes for images can also contribute to improving the overall performance of the webpage. When a browser knows the dimensions of an image in advance, it can more accurately calculate the amount of space needed to display the image, avoiding unnecessary reorganizations or repaints of content while it is loading. +> Additionally, specifying the width and height attributes for images can also help improve overall page performance. When a browser knows the dimensions of an image beforehand, it can more accurately calculate the amount of space needed to display the image and avoid unnecessary rearrangements or redrawing of content as it loads. > -> Ultimately, using width and height attributes in the HTML code of images can improve the user experience by making content load faster and reducing visual flicker. +> Overall, using width and height attributes in HTML code for images can improve the user experience by making content faster and reducing visual glitches. ===================== Content prompt used: @@ -27,7 +26,7 @@ Also carefully translate the title and description for the article; do not use & 1. Use width and height 2. Benefits of using width and height attributes in HTML code -Metadata returned1. Utilizza larghezza e altezza +Metadata returned1. Utilizzare larghezza ed altezza 2. Vantaggi dell'utilizzo degli attributi di larghezza e altezza nel codice HTML diff --git a/src/content/docs/it/_roundtrip_when-to-use-picture.txt b/src/content/docs/it/_roundtrip_when-to-use-picture.txt index ac99d38..4132044 100644 --- a/src/content/docs/it/_roundtrip_when-to-use-picture.txt +++ b/src/content/docs/it/_roundtrip_when-to-use-picture.txt @@ -1,24 +1,25 @@ --- -title: When to Use the Element -description: Explains in which scenarios the element should be used -taskInputHash: 583a9afd2e45d56a +title: When to use the element +description: Illustrates in which situations you should use the element +taskInputHash: a2c5811d41d489da lang: en -ignore: '/* cSpell:locale it,en*/' -date_published: '2023-03-27' -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' --- -The `picture` element is used to provide multiple versions of an image and determine which version of the image to display based on certain conditions. It is particularly useful for optimizing images for different screen sizes and resolutions and is commonly used in responsive web design. Here are some specific scenarios in which you may want to use the `picture` element: +The `picture` element is used to provide multiple versions of an image and determines which version of the image to display based on certain conditions. It is particularly useful for optimizing images for different screen sizes and resolutions and is commonly used in responsive web design. -* **Retina Display:** High-density screens like Apple's Retina display have a higher pixel density, which means that images can appear blurry or pixelated if they are not optimized for high resolution. With the `picture` element, you can provide a version of the image that has twice the pixels of the normal version so that it appears sharp and clear on Retina displays. +Here are some specific scenarios in which you may want to use the `picture` element: -* **Different Proportions:** If you're designing a site that needs to display images with different proportions (such as landscape vs portrait), you can use the `picture` element to provide different versions of the image optimized for each proportion. +* **Retina screens:** High-density screens like those on Apple's Retina displays have a higher pixel density, which means images can appear blurry or pixelated if not optimized for high resolution. With the `picture` element, you can provide an image that has twice the number of pixels of the normal version, so it appears sharp and clear on Retina displays. -* **Bandwidth Limitations:** Images can be large files that take up a lot of bandwidth, especially on mobile devices. With the `picture` element, you can provide smaller versions of the image for devices with smaller screens or slower internet connections, which can help reduce page load times. +* **Different aspect ratios:** If you are designing a site that needs to display images with different aspect ratios (such as landscape vs. portrait), you can use the `picture` element to provide different versions of the image optimized for each aspect ratio. -* **Art-directed Layouts:** Sometimes you may want to present an image in a certain way depending on the layout of the rest of the page. For example, you might want to show a close-up of a person's face on mobile devices, but a wider shot on desktop devices. The `picture` element allows you to provide different versions of the image optimized for different layouts. +* **Bandwidth limitations:** Images can be large files that take up a lot of bandwidth, especially on mobile devices. With the `picture` element, you can provide smaller versions of the image for devices with smaller screens or slower internet connections, which can help reduce page loading times. -Overall, the `picture` element is a powerful tool that can help optimize images for a variety of use cases and ensure that they look great on any device or screen size they are displayed on. +* **Art-directed layout:** Sometimes you may want to present an image in a certain way depending on the layout of the rest of the page. For example, you may want to show a close-up of a person's face on mobile devices, but a wider shot on desktop devices. The `picture` element allows you to provide different versions of the image optimized for different layouts. + +In general, the `picture` element is a powerful tool that can help you optimize your images for a variety of use cases and ensure they look great on any device or screen size they are displayed on. ===================== Content prompt used: @@ -31,8 +32,8 @@ Also carefully translate the title and description for the article; do not use & 1. When to use element 2. Explains in which situations you should use the element -Metadata returned1. Quando utilizzare l'elemento -2. Spiega in quali situazioni si dovrebbe utilizzare l'elemento +Metadata returned1. Quando utilizzare l'elemento +2. Illustra in quali situazioni dovresti utilizzare l'elemento Roundtrip (isolated) prompt used: diff --git a/src/content/docs/it/_roundtrip_width-density.txt b/src/content/docs/it/_roundtrip_width-density.txt index 10692ac..ee8c671 100644 --- a/src/content/docs/it/_roundtrip_width-density.txt +++ b/src/content/docs/it/_roundtrip_width-density.txt @@ -1,20 +1,19 @@ --- title: Width and Density Descriptors description: Examples of using width and density descriptors in `srcset` -taskInputHash: ea49fc07cb749a51 +taskInputHash: b4c91fed1ce98c24 lang: en -ignore: '/* cSpell:locale it,en*/' -date_published: '2023-03-24' -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' --- -Understanding Width (`w`) and Density (`x`) Descriptors in `srcset`. Use examples and Markdown. +Understanding width (`w`) and density (`x`) descriptors in `srcset`. Use examples and Markdown. -> `srcset` is an HTML attribute that allows developers to provide multiple image sources with different resolutions or pixel densities and enable the browser to select the appropriate image based on the characteristics of the device display. The `srcset` attribute uses a combination of `URL` and `w` or `x` descriptors to specify the images. +> `srcset` is an HTML attribute that allows developers to provide multiple image sources with different resolutions or pixel densities, and let the browser choose the appropriate image based on the characteristics of the device's display. The `srcset` attribute uses a combination of URLs and `w` or `x` descriptors to specify the images. ## Width Descriptor (`w`) -> The `w` descriptor is used to specify the width of an image in pixels. It is used when we want to provide the browser with the size of an image so that it can choose the appropriate image for the available space on the screen. +> The `w` descriptor is used to specify the width of an image in pixels. It is used when we want to provide the browser with the dimensions of an image so it can choose the appropriate image for the available screen space. > The syntax for using the `w` descriptor in `srcset` is as follows: @@ -26,11 +25,11 @@ Understanding Width (`w`) and Density (`x`) Descriptors in `srcset`. Use example alt="Example image"> ``` -> In the example above, we have provided the browser with three images and their corresponding widths in pixels. The browser will select the image with the width closest to the available space on the screen. +> In the example above, we have provided the browser with three images and their respective widths in pixels. The browser will select the image with the width closest to the available screen space. ## Density Descriptor (`x`) -> The `x` descriptor is used to specify the pixel density of an image, which is the ratio of physical pixels to CSS pixels. It is used when we want to provide the browser with different versions of the same image with different pixel densities. +> The `x` descriptor is used to specify the pixel density of an image, which is the ratio between physical pixels and CSS pixels. It is used when we want to provide the browser with different versions of the same image with different pixel densities. > The syntax for using the `x` descriptor in `srcset` is as follows: @@ -42,9 +41,9 @@ Understanding Width (`w`) and Density (`x`) Descriptors in `srcset`. Use example alt="Example image"> ``` -> In the example above, we have provided the browser with three images and their corresponding pixel densities. The browser will select the image with the pixel density closest to the device screen. +> In the example above, we have provided the browser with three images and their respective pixel densities. The browser will select the image with the pixel density closest to the device's screen. -> Note that the `w` and `x` descriptors can be used together in the same `srcset` attribute to provide the browser with more options to choose from. +> Note that the `w` and `x` descriptors can be used together in the same `srcset` attribute to provide the browser with even more options to choose from. ===================== Content prompt used: @@ -57,7 +56,7 @@ Also carefully translate the title and description for the article; do not use & 1. Width and density descriptors 2. Examples of using width and density descriptors in `srcset` -Metadata returned1. Descrittori di larghezza e densità +Metadata returned1. Descrittori di larghezza e densità 2. Esempi di utilizzo dei descrittori di larghezza e densità in `srcset` diff --git a/src/content/docs/it/breakpoints.md b/src/content/docs/it/breakpoints.md index 39943b9..95de931 100644 --- a/src/content/docs/it/breakpoints.md +++ b/src/content/docs/it/breakpoints.md @@ -1,41 +1,42 @@ --- -title: Breakpoint e immagini -description: Perché alcuni (ma non tutti) i breakpoint sono importanti per le tue immagini -taskInputHash: 7714cadfe55d82ca +title: Punti di interruzione e immagini +description: >- + Perché alcuni (ma non tutti) i punti di interruzione sono importanti per le + tue immagini +taskInputHash: 1dc3f28d444f3158 lang: it -ignore: '/* cSpell:locale it,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' --- ### Contesto -Schermi piccoli e monitor grandi richiedono layout diversi. Per lo scopo di `srcset` e `sizes`, dobbiamo sapere a che punto avviene il cambio di layout. +Schermi piccoli e grandi hanno bisogno di layout diversi. Ai fini di `srcset` e `sizes`, dobbiamo sapere a che punto cambia il layout. -I web developer devono decidere cosa ridurre, nascondere o spostare su schermi più piccoli - o più comunemente, cosa espandere, rivelare o aggiungere su schermi più grandi. Inoltre hanno poche informazioni a disposizione. L'utente sta utilizzando un tablet o uno smartphone in modalità landscape - o una finestra di browser piccola? +I web developer devono decidere cosa ridimensionare, nascondere o spostare su schermi più piccoli - o più comunemente, cosa espandere, rivelare o aggiungere su schermi più grandi. Hanno anche pochissime informazioni a cui fare riferimento. L'utente utilizza un tablet o un telefono in modalità landscape - o una finestra di browser piccola? -Dobbiamo scegliere una larghezza di viewport arbitraria in cui avviene il cambio di layout. Questo viene chiamato un **breakpoint**. È un valore arbitrario in pixel CSS ([non pixel dispositivo](/it/pixels-non-pixels)). Polypane ha un [ottimo articolo](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023) sui breakpoint comunemente usati. +Dobbiamo scegliere una larghezza di viewport arbitraria in cui il layout cambia. Questo è chiamato **punto di interruzione**. È un numero arbitrario di pixel CSS ([non pixel dei dispositivi](/it/pixel-non-pixel)). Polypane ha un [ottimo articolo](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023) sui punti di interruzione comuni. -Alcune immagini (come loghi, icone o pulsanti) potrebbero essere immune ai cambiamenti di layout causati da questi breakpoint (e andranno bene con i [descrittori di densità srcset](/it/density-descriptors)). +Alcune immagini (come i loghi o le icone o i pulsanti) potrebbero essere immune dai cambiamenti di layout causati da questi punti di interruzione (e andranno bene con [descrittori di densità srcset](/en/density-descriptors)). -Le immagini del contenuto principale saranno limitate dalle dimensioni del loro contenitore. In genere, l'area del contenuto principale di una pagina sarà limitata a una determinata larghezza sui più grandi schermi, una `max-width`, ma su schermi più piccoli l'area del contenuto principale riempirà l'intero viewport. +Le immagini di contenuto principale saranno limitate dalla dimensione del loro contenitore. Tipicamente l'area contenuto principale di una pagina sarà limitata a una certa larghezza sui schermi più grandi, una `max-width`, ma sui piccoli schermi, l'area contenuto principale riempirà l'intero viewport. -Se si hanno più di una colonna a determinati breakpoint, diventa più difficile calcolare le regole di dimensionamento effettive, poiché la percentuale della larghezza del viewport che l'immagine occupa cambierà. +Se hai più di una colonna a certi punti di interruzione, diventa più difficile calcolare le regole di dimensionamento efficaci, poiché la percentuale della larghezza del viewport che l'immagine occupa cambierà. ### Il metodo facile -Detto questo, non bisogna sovrapensare. Probabilmente sarete molto OK con la seguente approssimazione: +Detto questo, non bisogna farsi troppe paranoie. Probabilmente sarà tutto molto semplice seguendo l'approccio seguente: -1. A che dimensione la colonna principale (o il contenitore dell'immagine) smette di crescere? Fino a quella larghezza di viewport, possiamo utilizzare `100vw` per l'attributo `sizes` dell'immagine per indicare che l'immagine occupa il 100% della larghezza del viewport. -2. Qual è la larghezza massima che il contenitore raggiunge? Possiamo impostare quella larghezza fissa per tutto il resto. +1. A quale dimensione la colonna principale (o il contenitore dell'immagine) smette di crescere? Fino a tale larghezza del viewport, possiamo usare `100vw` per l'attributo `sizes` dell'immagine per dire che l'immagine occupa il 100% della larghezza del viewport. +2. Qual è il valore massimo che il contenitore raggiunge mai? Possiamo impostare quello come larghezza fissa per tutto il resto. -Se la vostra risposta al punto 1 è stata 700px e la risposta al punto 2 è stata 800px, potete usare il seguente attributo `sizes`: +Se la risposta alla prima domanda è 700px e la risposta alla seconda domanda è 800px, è possibile utilizzare il seguente attributo `sizes`: ```html - + ``` -> Potreste pensare che il browser potrebbe gestire tutte queste elaborazioni per noi basandosi sul CSS. Sfortunatamente, i browser sono aggressivamente desiderosi di scegliere un URL dell'immagine *prima* che i fogli di stile vengano scaricati. Quindi dobbiamo fare i calcoli da soli, e farà loro comodo se non riusciamo a farlo perfettamente. +> Potremmo pensare che il browser potrebbe gestire bene tutti questi calcoli per noi in base al CSS. Sfortunatamente, i browser sono eccessivamente ansiosi di scegliere un URL dell'immagine *prima* del download dei fogli di stile. Quindi dobbiamo fare i calcoli da soli, e va bene così se non li facciamo perfettamente. diff --git a/src/content/docs/it/browser-picks-srcset.md b/src/content/docs/it/browser-picks-srcset.md index fba5b78..8ab4d9b 100644 --- a/src/content/docs/it/browser-picks-srcset.md +++ b/src/content/docs/it/browser-picks-srcset.md @@ -1,16 +1,15 @@ --- -title: Come sceglie il browser +title: Come il browser sceglie description: Come il browser sceglie tra le immagini elencate nell'attributo srcset -taskInputHash: 0eb976f059b10502 +taskInputHash: 9d76226efed7cd73 lang: it -ignore: '/* cSpell:locale it,en*/' -date_published: '2023-03-24' -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' --- -Come sceglie il browser tra le immagini elencate nell'attributo srcset? Ecco una procedura dettagliata, con esempi sia per le specifiche di larghezza che di densità e come il browser decide in base al dispositivo e alla viewport. +Come sceglie il browser tra le immagini elencate nell'attributo srcset? Ecco una descrizione passo-passo con esempi per specifiche di larghezza e densità e come il browser decide in base al dispositivo e alla viewport. -- Quando si utilizza l'attributo `srcset` in HTML, il browser utilizza un insieme di regole per scegliere l'immagine più appropriata da un elenco di fonti fornite. Queste regole dipendono dalle caratteristiche dello schermo del dispositivo (risoluzione, densità dei pixel) e dalle dimensioni della viewport. L'attributo `srcset` consente di specificare diverse immagini in base alla larghezza (utilizzando il descrittore `w`) o alla densità dei pixel (utilizzando il descrittore `x`). Vediamo ogni caso con degli esempi. +- Quando si utilizza l'attributo `srcset` in HTML, il browser utilizza un insieme di regole per scegliere l'immagine più appropriata da un elenco di fonti fornite. Queste regole dipendono sia dalle caratteristiche del display del dispositivo (risoluzione, densità dei pixel) che dalle dimensioni della viewport. L'attributo `srcset` consente di specificare diverse immagini in base alla larghezza (utilizzando il descrittore `w`) o alla densità dei pixel (utilizzando il descrittore `x`). Vediamo ogni caso con degli esempi. 1\. Descrittore di larghezza (`w`): @@ -18,7 +17,7 @@ Supponiamo di avere il seguente attributo `srcset`: ```html -Example Image +Immagine di Esempio ``` @@ -26,7 +25,7 @@ Il browser seguirà questi passaggi: a. Determinare il DPR (Device Pixel Ratio) del dispositivo. Ad esempio, un display standard ha un DPR di 1, mentre un display ad alta risoluzione (Retina) ha un DPR di 2 o superiore. -b. Calcolare la larghezza efficace per ogni immagine nella `srcset`. Moltiplicare il descrittore di larghezza per il DPR. Per un dispositivo con un DPR di 1: +b. Calcolare la larghezza effettiva per ogni immagine nell'attributo `srcset`. Moltiplicare il descrittore di larghezza per il DPR. Per un dispositivo con un DPR di 1: - example-small.jpg: 400 \* 1 = 400px @@ -34,7 +33,7 @@ b. Calcolare la larghezza efficace per ogni immagine nella `srcset`. Moltiplicar - example-large.jpg: 1600 \* 1 = 1600px -c. Confrontare le larghezze efficaci con la larghezza viewport. Supponiamo che la larghezza viewport sia di 420px. Il browser sceglierà l'immagine più piccola con larghezza efficace maggiore o uguale alla larghezza viewport. In questo caso, selezionerà `example-medium.jpg`. +c. Confrontare le larghezze effettive con la larghezza della viewport. Supponiamo che la larghezza della viewport sia 420px. Il browser sceglierà l'immagine più piccola con una larghezza effettiva maggiore o uguale alla larghezza della viewport. In questo caso, selezionerà `example-medium.jpg`. 2\. Descrittore di densità dei pixel (`x`): @@ -42,7 +41,7 @@ Supponiamo di avere il seguente attributo `srcset`: ```html -Example Image +Immagine di Esempio ``` @@ -50,7 +49,7 @@ Il browser seguirà questi passaggi: a. Determinare il DPR (Device Pixel Ratio) del dispositivo. Ad esempio, un display standard ha un DPR di 1, mentre un display ad alta risoluzione (Retina) ha un DPR di 2 o superiore. -b. Confrontare il DPR del dispositivo con i descrittori `x` presenti nella `srcset`. In questo caso, abbiamo tre immagini con i seguenti descrittori: +b. Confrontare il DPR del dispositivo con i descrittori `x` nell'attributo `srcset`. In questo caso, abbiamo tre immagini con i seguenti descrittori: - example-1x.jpg: 1x @@ -58,9 +57,9 @@ b. Confrontare il DPR del dispositivo con i descrittori `x` presenti nella `srcs - example-3x.jpg: 3x -c. Scegliere l'immagine con il descrittore `x` più vicino al DPR del dispositivo. Per un dispositivo con un DPR di 1, il browser selezionerà `example-1x.jpg`. Per un dispositivo con un DPR di 2, sceglierà `example-2x.jpg`, e così via. +c. Scegliere l'immagine con il descrittore `x` più vicino al DPR del dispositivo. Per un dispositivo con un DPR di 1, il browser selezionerà `example-1x.jpg`. Per un dispositivo con un DPR di 2, sceglierà `example-2x.jpg` e così via. -È importante notare che è possibile utilizzare anche l'attributo `sizes` in combinazione con l'attributo `srcset` per fornire ulteriori informazioni su come l'immagine verrà visualizzata su diverse larghezze viewport. Questo è particolarmente utile quando si utilizza il descrittore di larghezza (`w`). Ecco un esempio: +È importante notare che è anche possibile utilizzare l'attributo `sizes` in combinazione con l'attributo `srcset` per fornire ulteriori informazioni su come l'immagine verrà visualizzata a diverse larghezze della viewport. Questo è particolarmente utile quando si utilizza il descrittore di larghezza (`w`). Ecco un esempio: ```html diff --git a/src/content/docs/it/density-descriptors.md b/src/content/docs/it/density-descriptors.md index 499d6b0..8304ab2 100644 --- a/src/content/docs/it/density-descriptors.md +++ b/src/content/docs/it/density-descriptors.md @@ -1,42 +1,44 @@ --- -title: Descrittori di densità & srcset -description: Esempi di utilizzo di descrittori di densità in `srcset` -taskInputHash: cf54e3343feb0a22 +title: Descrittori di densità e srcset +description: Esempi di utilizzo dei descrittori di densità in `srcset` +taskInputHash: 8a445e12ba15aba8 lang: it -ignore: '/* cSpell:locale it,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 con i descrittori di densità fornisce un metodo semplice ed efficace per fornire l'immagine più adatta al dispositivo dell'utente, migliorando le prestazioni e l'esperienza dell'utente. Questa guida ti guiderà attraverso gli elementi essenziali dell'utilizzo di srcset con descrittori di densità e fornirà esempi di markup per la tua convenienza. -## Cosa è Srcset con descrittori di densità? +Srcset con i descrittori di densità fornisce un metodo semplice ed efficace per fornire l'immagine più adatta al dispositivo di ogni utente, migliorando le prestazioni e l'esperienza utente. Questa guida ti guiderà nell'utilizzo delle descrizioni di densità per srcset e fornirà esempi di markup per la tua comodità. -Srcset è un attributo HTML progettato per consentire di specificare più origini di immagini per un singolo elemento ``. I descrittori di densità (`x`) vengono utilizzati insieme a srcset per fornire immagini a diverse risoluzioni in base alla densità di pixel del display dell'utente. -## Quando usare Srcset con descrittori di densità +## Che cos'è Srcset con Descrittori di Densità? -L'utilizzo di srcset con descrittori di densità è particolarmente utile quando si desidera: -1. Fornire immagini ad alta risoluzione ai display ad alta DPI (ad esempio, i display Retina) mentre si forniscono immagini a risoluzione inferiore ai display standard. -2. Migliorare le prestazioni della pagina fornendo le immagini più appropriate a ciascun dispositivo dell'utente. -## Implementare Srcset con descrittori di densità +Srcset è un attributo HTML progettato per consentire di specificare più fonti di immagine per un singolo elemento ``. I descrittori di densità (`x`) vengono utilizzati in combinazione con srcset per fornire immagini a diverse risoluzioni in base alla densità dei pixel del display dell'utente. -Per utilizzare srcset con descrittori di densità, seguire questi passaggi: -1. Preparare le immagini in diverse risoluzioni. -2. Aggiungere l'attributo `srcset` all'elemento ``, inclusi le origini delle immagini e i corrispondenti descrittori di densità. -3. Aggiungere l'attributo `sizes` (facoltativo) per specificare le dimensioni dell'immagine come verrà visualizzata sullo schermo. -### Esempio di markup +## Quando usare Srcset con Descrittori di Densità? + +L'uso di srcset con descrittori di densità è particolarmente utile quando si desidera: +1. Servire immagini ad alta risoluzione su display ad alta densità di pixel (ad esempio, i display Retina) e fornire immagini a bassa risoluzione su display standard. +2. Migliorare le prestazioni della pagina fornendo la dimensione dell'immagine più appropriata per il dispositivo di ogni utente. + +## Implementazione di Srcset con Descrittori di Densità + +Per utilizzare srcset con descrittori di densità, segui questi passaggi: +1. Prepara le tue immagini in diverse risoluzioni. +2. Aggiungi l'attributo `srcset` all'elemento ``, incluso le fonti delle immagini e i corrispondenti descrittori di densità. +3. Aggiungi l'attributo `sizes` (facoltativo) per specificare la dimensione dell'immagine mentre verrà visualizzata sullo schermo. + +### Esempio di Markup Ecco un esempio di come implementare srcset con descrittori di densità nel tuo markup: ```html -Un esempio di immagine +Un'immagine di esempio ``` Questo esempio di markup include: +- **src**: la fonte dell'immagine predefinita, visualizzata se il browser non supporta srcset. +- **srcset**: l'elenco di fonti di immagini e i loro descrittori di densità (1x, 2x, 3x). Il browser sceglierà l'immagine più appropriata in base al display dell'utente. +- **alt**: una descrizione dell'immagine a scopo di accessibilità. -- **src**: la sorgente predefinita dell'immagine, mostrata se il browser non supporta srcset. -- **srcset**: l'elenco di origini dell'immagine e dei relativi descrittori di densità (1x, 2x, 3x). Il browser sceglierà l'immagine più appropriata in base al display dell'utente. -- **alt**: una descrizione dell'immagine per scopi di accessibilità. - -E questo è tutto! Hai implementato con successo srcset con descrittori di densità, migliorando le prestazioni del tuo sito web e l'esperienza dell'utente. +E questo è tutto! Hai implementato con successo srcset con descrittori di densità, migliorando le prestazioni e l'esperienza utente del tuo sito web. diff --git a/src/content/docs/it/introduction.md b/src/content/docs/it/introduction.md index 0de941c..977a4c9 100644 --- a/src/content/docs/it/introduction.md +++ b/src/content/docs/it/introduction.md @@ -1,39 +1,36 @@ --- -title: srcset e le dimensioni delle tag -description: Una Guida Efficient and Opinionated alle Immagini Responsive per il 2023 -taskInputHash: 770938b4f7895424 +title: '`srcset` e le dimensioni degli ``' +description: Una Guida Efficiente e Decisa alle Immagini Responsive per il 2023 +taskInputHash: 7c0db2e5e6194bc9 lang: it -ignore: '/* cSpell:locale it,en*/' sidebar_sort_priority: 1000 -date_published: '2023-03-23' -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' --- -**Una Guida Efficient and Opinionated sulle Immagini per il 2023** +**Una guida efficiente e guidata per le Immagini del 2023** -Controlla la sidebar per un'analisi approfondita. Questa è una rapida panoramica per l'aggiornamento dei tag `` per gestire i dispositivi moderni delle varie dimensioni e densità di pixel. Devi [sapere che i pixel non sono uguali](/it/pixels-not-pixels) e che il `devicePixelRatio` tende a essere verso 3,875 piuttosto che 1:1. I telefoni moderni fingono di essere larghi da 320-428px per la leggibilità (in pixel CSS), ma hanno molti pixel del dispositivo per ogni pixel CSS. +Controlla la barra laterale per una trattazione più dettagliata. Questa è una rapida guida di riferimento per aggiornare i tag `` per gestire i dispositivi moderni nelle loro diverse dimensioni e densità di pixel. Dovresti [saperne di più sui pixel != pixel](/it/pixel-non-sono-pixel) e che `devicePixelRatio` è più probabile essere attorno a 3.875 che a 1:1. I telefoni moderni fingono di essere larghi tra 320 e 428px per la leggibilità (in CSS pixel), ma hanno molti pixel per dispositivo per CSS pixel. -> Se la tua immagine non cambia mai dimensione, indipendentemente da quanto è stretta la finestra del browser, dovresti usare un [descrittore di densità](/it/density-descriptors). Questo è spesso adatto per loghi, icone e pulsanti. +> Se la tua immagine non cambia mai di dimensione, indipendentemente da quanto riduci la finestra del browser, dovresti usare una [descrizione della densità](/it/descrizione-della-densità) al suo posto. Questo è spesso adatto per i loghi, le icone e i pulsanti. -Sai qual è il tuo [breakpoint](/it/breakpoints)? Avrai bisogno di quei numeri per affinare la soluzione qui sotto - e almeno il breakpoint della larghezza del viewport in cui l'area del contenuto principale smette di crescere. +Sai quali sono i tuoi [punti di interruzione](/it/punti-di-interruzione)? Avrai bisogno di questi numeri per perfezionare la soluzione sottostante, e almeno il punto di interruzione in cui la larghezza del contenuto principale smette di crescere. -### Il metodo facile +### Il metodo semplice ```html - -Cane che guida una bicicletta - sizes="(max-width: 700px) 100vw, 800px" alt="Cane che cavalca una bicicletta" /> - - + - + ``` diff --git a/src/content/docs/it/lighthouse-performance-test.md b/src/content/docs/it/lighthouse-performance-test.md index 94f71a6..15c7287 100644 --- a/src/content/docs/it/lighthouse-performance-test.md +++ b/src/content/docs/it/lighthouse-performance-test.md @@ -1,25 +1,26 @@ --- title: Testare la performance con Lighthouse -description: Passaggi su come testare la performance di un sito web usando Lighthouse -taskInputHash: 174be49cc119f58b +description: >- + I passaggi su come testare la performance di un sito web utilizzando + Lighthouse +taskInputHash: 4f7942b4139a285a lang: it -ignore: '/* cSpell:locale it,en*/' -date_published: '2023-03-24' -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' --- Come si testa la performance del tuo sito con Lighthouse? > Lighthouse è uno strumento che può essere utilizzato per misurare la performance, l'accessibilità e altri aspetti di un sito web. Per testare la performance del tuo sito web con Lighthouse, segui questi passaggi: > -> 1\. Apri il browser web Google Chrome e vai alla pagina che desideri testare. +> 1\. Apri il browser web Google Chrome e naviga sulla pagina che desideri testare. > > 2\. Fai clic sui tre puntini nell'angolo in alto a destra della finestra del browser, quindi seleziona "Altri strumenti" e poi "Strumenti per sviluppatori" o usa la scorciatoia da tastiera "Ctrl+Shift+I" (Windows, Linux) o "Command+Option+I" (macOS). > -> 3\. Nel riquadro degli Strumenti per sviluppatori, fai clic sull'icona di Lighthouse situata sul lato sinistro del riquadro o premi "Ctrl+Shift+P" (Windows, Linux) o "Command+Shift+P" (macOS) per aprire il menu Comandi, quindi digita "Lighthouse" e seleziona "Genera rapporto". +> 3\. Nel pannello degli Strumenti per sviluppatori, fai clic sull'icona di Lighthouse situata sul lato sinistro del pannello o premi "Ctrl+Shift+P" (Windows, Linux) o "Command+Shift+P" (macOS) per aprire il menu dei comandi, quindi digita "Lighthouse" e seleziona "Genera rapporto". > -> 4\. Nella finestra di dialogo di Lighthouse, seleziona le opzioni di performance e altre pertinenti che desideri testare, quindi fai clic su "Genera rapporto". +> 4\. Nella finestra di dialogo di Lighthouse, seleziona le opzioni di performance e altre pertinenti che desideri testare, quindi clicca su "Genera rapporto". > > 5\. Dopo che Lighthouse ha completato la sua analisi, vedrai un rapporto con punteggi e raccomandazioni per migliorare la performance, l'accessibilità e altre aree del tuo sito web. > -> Seguendo questi passaggi, puoi utilizzare Lighthouse per testare e ottimizzare la performance del tuo sito web, il che può contribuire a migliorare l'esperienza degli utenti e il posizionamento sui motori di ricerca. +> Seguendo questi passaggi, puoi utilizzare Lighthouse per testare e ottimizzare la performance del tuo sito web, il che può contribuire a migliorarne l'esperienza utente e il posizionamento sui motori di ricerca. diff --git a/src/content/docs/it/picture-examples.md b/src/content/docs/it/picture-examples.md index f33fbe9..a84f30a 100644 --- a/src/content/docs/it/picture-examples.md +++ b/src/content/docs/it/picture-examples.md @@ -1,18 +1,17 @@ --- -title: Esempi di utilizzo dell'elemento +title: Esempi utilizzando l'elemento description: >- - Fornisce esempi di utilizzo dell'elemento , per immagini responsive, - direzione artistica e diversi formati di immagine -taskInputHash: 1eedb92f6cc7cb3e + Fornisce esempi utilizzando l'elemento per immagini responsive, + direzione artistica e diversi formati di immagine. +taskInputHash: 8949b4f455087356 lang: it -ignore: '/* cSpell:locale it,en*/' -date_published: '2023-03-24' -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' --- -Ecco alcuni esempi di utilizzo dell'elemento `` e le loro spiegazioni: +Ecco alcuni esempi sull'utilizzo dell'elemento `` e le loro spiegazioni: -1. Esempio per immagini responsive: +1\. Esempio per immagini responsive: ```html @@ -22,9 +21,9 @@ Ecco alcuni esempi di utilizzo dell'elemento `` e le loro spiegazioni: ``` -Spiegazione: In questo esempio, l'elemento `` viene utilizzato per fornire diverse fonti di immagini per diverse dimensioni dello schermo. Gli elementi `` specificano le diverse fonti di immagini utilizzando l'attributo "srcset" e l'attributo "media" per specificare le condizioni in cui ciascuna fonte dovrebbe essere utilizzata. L'elemento `` viene utilizzato come fallback per i browser più vecchi o quando le condizioni specificate negli elementi `` non vengono soddisfatte. +Spiegazione: In questo esempio, l'elemento `` viene utilizzato per fornire diverse fonti di immagine per diverse dimensioni dello schermo. Gli elementi `` specificano le diverse fonti di immagine utilizzando l'attributo "srcset" e l'attributo "media" per specificare le condizioni in base alle quali ogni sorgente dovrebbe essere utilizzata. L'elemento `` viene utilizzato come fallback per i browser più vecchi o quando le condizioni specificate negli elementi `` non sono soddisfatte. -2. Esempio per la direzione artistica: +2\. Esempio per la direzione artistica: ```html @@ -34,9 +33,9 @@ Spiegazione: In questo esempio, l'elemento `` viene utilizzato per forn ``` -Spiegazione: In questo esempio, l'elemento `` viene utilizzato per fornire diverse fonti di immagini a seconda dell'orientamento del dispositivo. L'elemento `` con l'attributo "media" impostato su "(orientation: landscape)" specifica una fonte di immagine per schermi larghi, mentre l'elemento `` specifica una fonte di immagine per schermi verticali. +Spiegazione: In questo esempio, l'elemento `` viene utilizzato per fornire diverse fonti di immagine in base all'orientamento del dispositivo. L'elemento `` con l'attributo "media" impostato su "(orientation: landscape)" specifica una fonte di immagine per schermi ampi, mentre l'elemento `` specifica una fonte di immagine per schermi verticali. -3. Esempio per diversi formati di immagine: +3\. Esempio per diversi formati di immagine: ```html @@ -48,12 +47,12 @@ Spiegazione: In questo esempio, l'elemento `` viene utilizzato per forn ``` -Spiegazione: In questo esempio, l'elemento `` viene utilizzato per fornire diverse fonti di immagini per diversi formati di immagine. Gli elementi `` specificano diverse fonti di immagini utilizzando l'attributo "srcset" e l'attributo "type" per specificare il formato dell'immagine. L'elemento `` viene utilizzato come fallback per i browser più vecchi che non supportano l'elemento ``. +Spiegazione: In questo esempio, l'elemento `` viene utilizzato per fornire diverse fonti di immagine per diversi formati di immagine. Gli elementi `` specificano diverse fonti di immagine utilizzando l'attributo "srcset" e l'attributo "type" per specificare il formato dell'immagine. L'elemento `` viene utilizzato come fallback per i browser più vecchi che non supportano l'elemento ``. -## Punti di interruzione +## Breakpoints -Nel design responsive, i punti di interruzione vengono utilizzati per definire quando il layout di un sito web o di un'applicazione dovrebbe cambiare in base alle dimensioni del viewport. I punti di interruzione vengono tipicamente definiti utilizzando media queries in CSS, che applicano stili diversi a seconda della larghezza dello schermo. Questi punti di interruzione possono essere utilizzati in combinazione con l'elemento `` per fornire diverse fonti di immagini per diverse dimensioni dello schermo. +Nel design responsivo, i breakpoints vengono utilizzati per definire quando il layout di un sito web o di un'applicazione dovrebbe cambiare in base alle dimensioni del viewport. I breakpoints vengono tipicamente definiti utilizzando media query in CSS, che applicano stili diversi in base alla larghezza dello schermo. Questi breakpoints possono essere utilizzati con l'elemento `` per fornire diverse fonti di immagine per diverse dimensioni dello schermo. -Ad esempio, nel primo esempio sopra, abbiamo utilizzato l'attributo `media` per specificare la larghezza dello schermo in base alla quale utilizzare ciascuna fonte. Quando la larghezza dello schermo è maggiore o uguale a 768 pixel, verrà utilizzata la fonte "image-large.jpg"; quando la larghezza dello schermo è maggiore o uguale a 480 pixel ma inferiore a 768 pixel, verrà utilizzata la fonte "image-medium.jpg"; e quando la larghezza dello schermo è inferiore a 480 pixel, verrà utilizzata la fonte "image-small.jpg". Questo ci consente di servire immagini delle dimensioni appropriate per ogni dispositivo, riducendo i tempi di caricamento delle pagine e migliorando l'esperienza dell'utente. +Ad esempio, nel primo esempio sopra, abbiamo utilizzato l'attributo `media` per specificare la larghezza dello schermo sotto la quale deve essere utilizzata ogni sorgente. Quando la larghezza dello schermo è maggiore o uguale a 768 pixel, verrà utilizzata la sorgente `image-large.jpg`; quando la larghezza dello schermo è maggiore o uguale a 480 pixel ma inferiore a 768 pixel, verrà utilizzata la sorgente `image-medium.jpg`; e quando la larghezza dello schermo è inferiore a 480 pixel, verrà utilizzata la sorgente `image-small.jpg`. Ciò ci consente di servire immagini della dimensione appropriata per ogni dispositivo, riducendo i tempi di caricamento della pagina e migliorando l'esperienza dell'utente. -I punti di interruzione possono essere definiti a qualsiasi dimensione dello schermo e possono essere utilizzati più punti di interruzione per creare layout che rispondono a una vasta gamma di dispositivi. Combina i punti di interruzione con l'elemento ``, puoi creare design flessibili e reattivi che hanno un bell'aspetto su qualsiasi dispositivo. +I breakpoints possono essere definiti a qualsiasi dimensione dello schermo e possono essere utilizzati più breakpoints per creare layout che rispondono a una vasta gamma di dispositivi. Combinando i breakpoints con l'elemento ``, è possibile creare design flessibili e responsivi che sembrano ottimi su qualsiasi dispositivo. diff --git a/src/content/docs/it/pixels-not-pixels.md b/src/content/docs/it/pixels-not-pixels.md index d2c40e8..bdfb59d 100644 --- a/src/content/docs/it/pixels-not-pixels.md +++ b/src/content/docs/it/pixels-not-pixels.md @@ -1,20 +1,19 @@ --- -title: px ≠ pixel +title: px ≠ pixeli description: Pixel del dispositivo ≠ pixel del browser ≠ pixel dell'immagine -taskInputHash: 9e3d515b23db4c50 +taskInputHash: 30d633a4ce310a0f lang: it -ignore: '/* cSpell:locale it,en*/' sidebar_sort_priority: 900 -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' --- -### Pixel del dispositivo ≠ pixel del browser ≠ pixel dell'immagine +### Device pixels ≠ browser px ≠ image px -Grazie ad Apple, i pixel CSS e HTML (`px`) **quasi sempre corrispondono a più pixel del dispositivo/stampante**. Il devicePixelRatio del mio telefono è di 3,875; [qual è il tuo?](https://www.mydevice.io/it/) +Grazie ad Apple, i pixel CSS e HTML (`px`) **quasi sempre corrispondono a più pixel del dispositivo/stampante**. Il mio rapporto tra pixel del dispositivo sul telefono è di 3,875; [qual è il tuo?](https://www.mydevice.io/) -Il devicePixelRatio del mio desktop cambia allo zoom del browser, ma di default è di 1,5 (la mia `System > Display > Scale` è al 150%, dopotutto). +Il rapporto tra pixel del dispositivo sul desktop cambia con lo zoom del browser, ma di default è 1,5 (il mio `System > Display > Scale` è impostato al 150%, dopotutto). -I file di immagine (escludendo gli SVG) decodificano una griglia di pixel. **È fastidiosamente difficile ottenere la visualizzazione dei pixel dell'immagine perfettamente a un rapporto 1:1 con i pixel del dispositivo - ma con l'attributo `srcset` puoi avvicinarti abbastanza**, e un po' di Javascript può regolare la dimensione dell'elemento HTML dopo il caricamento se hai motivi davvero giustificati per necessitare di quella corrispondenza perfetta, anche se tali arti proibite non saranno svelate qui. +I file di immagine (esclusi gli SVG) vengono decodificati in una griglia di pixel. **È estremamente difficile far sì che i pixel dell'immagine si visualizzino perfettamente con un rapporto di 1:1 con i pixel del dispositivo - ma con `srcset` si può arrivare *abbastanza vicino***, e un po' di Javascript può regolare la dimensione dell'elemento HTML dopo il caricamento se si hanno ragioni veramente giustificate per necessitare di tale mappatura perfetta, anche se tali arti proibite non verranno rivelate qui. -> Altre unità assolute [in, pc, pt, mm, cm, Q](https://developer.mozilla.org/it/docs/Web/CSS/length) sono definite in base al numero di pixel CSS e fingono che tutto sia a 96dpi. Gli sviluppatori evitano le unità assolute perché in genere è meglio utilizzare unità che derivano dalle dimensioni del carattere o del viewport/contenitore. Unità discordanti possono rompere un layout se l'utente regola il loro moltiplicatore `Accessibility > Text Size`, ingrandisce il browser o ruota il dispositivo. Inutile dire che dovresti fare tutte queste cose prima di pubblicare il tuo sito. +> La definizione di altre unità assolute [in, pc, pt, mm, cm, Q](https://developer.mozilla.org/it/docs/Web/CSS/length) avviene in termini del numero di pixel CSS e finge che tutto sia a 96dpi. Gli sviluppatori evitano le unità assolute perché generalmente è meglio utilizzare le unità derivate dalla dimensione del font o dalle dimensioni del viewport/contenitore. Unità non corrispondenti possono rompere un layout se l'utente regola il moltiplicatore `Accessibilità > Dimensioni testo`, ingrandisce il browser o ruota il proprio dispositivo. Inutile dire che dovresti fare tutte queste cose prima di pubblicare il tuo sito. diff --git a/src/content/docs/it/specify-width-height.md b/src/content/docs/it/specify-width-height.md index 1d94fdd..a27ca3a 100644 --- a/src/content/docs/it/specify-width-height.md +++ b/src/content/docs/it/specify-width-height.md @@ -1,17 +1,16 @@ --- -title: Utilizza larghezza e altezza +title: Utilizzare larghezza ed altezza description: Vantaggi dell'utilizzo degli attributi di larghezza e altezza nel codice HTML -taskInputHash: 34a145dde0e451eb +taskInputHash: 2c99c7f88c7255ed lang: it -ignore: '/* cSpell:locale it,en*/' -date_published: '2023-03-24' -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' --- Perché dovresti inserire larghezza e altezza nell'HTML? -> Si consiglia di inserire gli attributi di larghezza e altezza nel codice HTML delle immagini poiché aiuta il browser web a conoscere le dimensioni dell'immagine prima che sia completamente caricata. Questo permette al browser di riservare la quantità appropriata di spazio sulla pagina web per l'immagine, evitando che il contenuto salti mentre l'immagine viene caricata. +> È consigliabile inserire gli attributi di larghezza e altezza nel codice HTML per le immagini perché aiuta il browser web a conoscere le dimensioni dell'immagine prima che sia completamente caricata. Ciò consente al browser di riservare la quantità appropriata di spazio sulla pagina web per l'immagine, il che impedisce al contenuto di saltellare mentre viene caricata l'immagine. > -> Inoltre, specificare gli attributi di larghezza e altezza per le immagini può anche contribuire a migliorare le prestazioni complessive della pagina web. Quando un browser conosce le dimensioni di un'immagine in anticipo, può calcolare più accuratamente la quantità di spazio necessaria per visualizzare l'immagine evitando riorganizzazioni o ripaints inutili del contenuto mentre viene caricata. +> Inoltre, specificare gli attributi di larghezza e altezza per le immagini può anche contribuire a migliorare le prestazioni complessive della pagina web. Quando un browser conosce le dimensioni di un'immagine in anticipo, può calcolare in modo più accurato la quantità di spazio necessario per visualizzare l'immagine e evitare riorganizzazioni o ripitture non necessarie del contenuto mentre viene caricato. > -> Complessivamente, l'utilizzo degli attributi di larghezza e altezza nel codice HTML delle immagini può migliorare l'esperienza utente facendo caricare più velocemente il contenuto e riducendo gli sfarfallii visivi. +> Nel complesso, utilizzare gli attributi di larghezza e altezza nel codice HTML per le immagini può migliorare l'esperienza dell'utente rendendo il contenuto più veloce e riducendo i glitch visivi. diff --git a/src/content/docs/it/when-to-use-picture.md b/src/content/docs/it/when-to-use-picture.md index 6a43d70..37d1772 100644 --- a/src/content/docs/it/when-to-use-picture.md +++ b/src/content/docs/it/when-to-use-picture.md @@ -1,22 +1,21 @@ --- title: Quando utilizzare l'elemento -description: Spiega in quali situazioni si dovrebbe utilizzare l'elemento -taskInputHash: 583a9afd2e45d56a +description: Illustra in quali situazioni dovresti utilizzare l'elemento +taskInputHash: a2c5811d41d489da lang: it -ignore: '/* cSpell:locale it,en*/' -date_published: '2023-03-27' -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' --- -L'elemento `picture` viene utilizzato per fornire più versioni di un'immagine e determina quale versione dell'immagine visualizzare in base a determinate condizioni. È particolarmente utile per ottimizzare le immagini per diverse dimensioni e risoluzioni dello schermo ed è comunemente usato nel web design responsive. +L'elemento `picture` viene utilizzato per fornire più versioni di un'immagine e determina quale versione dell'immagine visualizzare in base a determinate condizioni. È particolarmente utile per ottimizzare le immagini per diverse dimensioni e risoluzioni dello schermo ed è comunemente utilizzato nel design web responsivo. Ecco alcuni scenari specifici in cui potresti voler utilizzare l'elemento `picture`: -* **Display Retina:** gli schermi ad alta densità come i display Retina di Apple hanno una densità di pixel maggiore, il che significa che le immagini possono sembrare sfocate o pixelate se non sono ottimizzate per l'alta risoluzione. Con l'elemento `picture`, è possibile fornire una versione dell'immagine che ha il doppio dei pixel della versione normale, in modo che appaia nitida e chiara sui display Retina. +* **Schermi Retina:** Schermi ad alta densità come quelli di Apple Retina hanno una densità di pixel più elevata, il che significa che le immagini possono apparire sfocate o pixelate se non sono ottimizzate per l'alta risoluzione. Con l'elemento `picture`, è possibile fornire una versione dell'immagine che ha il doppio dei pixel della versione normale, in modo che appaia nitida e chiara sui display Retina. -* **Proporzioni diverse:** se stai progettando un sito che deve visualizzare immagini con diverse proporzioni (come paesaggio vs ritratto), puoi utilizzare l'elemento `picture` per fornire diverse versioni dell'immagine ottimizzate per ciascuna proporzione. +* **Rapporti di aspetto diversi:** Se stai progettando un sito che deve visualizzare immagini con rapporti di aspetto diversi (come paesaggio vs ritratto), puoi utilizzare l'elemento `picture` per fornire diverse versioni dell'immagine ottimizzate per ciascun rapporto di aspetto. -* **Limitazioni della larghezza di banda:** le immagini possono essere file di grandi dimensioni che occupano molta larghezza di banda, specialmente su dispositivi mobili. Con l'elemento `picture`, è possibile fornire versioni più piccole dell'immagine per dispositivi con schermi più piccoli o connessioni Internet più lente, il che può aiutare a ridurre i tempi di caricamento della pagina. +* **Limitazioni di larghezza di banda:** Le immagini possono essere file di grandi dimensioni che occupano molta larghezza di banda, specialmente sui dispositivi mobili. Con l'elemento `picture`, è possibile fornire versioni più piccole dell'immagine per dispositivi con schermi più piccoli o connessioni Internet più lente, il che può aiutare a ridurre i tempi di caricamento della pagina. -* **Layout diretti dall'arte:** a volte si può desiderare di presentare un'immagine in un certo modo a seconda del layout del resto della pagina. Ad esempio, si potrebbe voler mostrare un primo piano del viso di una persona sui dispositivi mobili, ma una ripresa più ampia sui dispositivi desktop. L'elemento `picture` consente di fornire diverse versioni dell'immagine ottimizzate per diversi layout. +* **Layout art-direct:** A volte potresti voler presentare un'immagine in un certo modo a seconda del layout della restante parte della pagina. Ad esempio, potresti voler mostrare un primo piano del volto di una persona sui dispositivi mobili, ma uno scatto più ampio sui dispositivi desktop. L'elemento `picture` consente di fornire diverse versioni dell'immagine ottimizzate per diversi layout. -Complessivamente, l'elemento `picture` è uno strumento potente che può aiutare a ottimizzare le immagini per una varietà di casi d'uso e garantire che appaiano fantastici su qualsiasi dispositivo o dimensione dello schermo su cui vengono visualizzati. +In generale, l'elemento `picture` è uno strumento potente che può aiutarti a ottimizzare le tue immagini per una varietà di casi d'uso e garantire che appaiano sempre ottime su qualsiasi dispositivo o dimensione dello schermo vengano visualizzate. diff --git a/src/content/docs/it/width-density.md b/src/content/docs/it/width-density.md index 82059f1..7ac2d2d 100644 --- a/src/content/docs/it/width-density.md +++ b/src/content/docs/it/width-density.md @@ -1,48 +1,47 @@ --- title: Descrittori di larghezza e densità description: Esempi di utilizzo dei descrittori di larghezza e densità in `srcset` -taskInputHash: ea49fc07cb749a51 +taskInputHash: b4c91fed1ce98c24 lang: it -ignore: '/* cSpell:locale it,en*/' -date_published: '2023-03-24' -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' --- -Capire i descrittori di larghezza (w) e densità (x) in `srcset`. Usare esempi e usare Markdown. +Capire i descrittori di larghezza (w) e densità (x) in `srcset`. Utilizzare degli esempi e Markdown. -> `srcset` è un attributo HTML che consente agli sviluppatori di fornire più sorgenti di immagini con diverse risoluzioni o densità di pixel e consentire al browser di selezionare l'immagine appropriata in base alle caratteristiche del display del dispositivo. L'attributo `srcset` utilizza una combinazione di `URL` e descrittori `w` o `x` per specificare le immagini. +> `srcset` è un attributo HTML che permette agli sviluppatori di fornire molteplici sorgenti di immagini con differenti risoluzioni o densità di pixel, e lasciare che il browser scelga l'immagine appropriata in base alle caratteristiche del display del dispositivo. L'attributo `srcset` utilizza una combinazione di URL e descrittori `w` o `x` per specificare le immagini. ## Descrittore di larghezza (`w`) > Il descrittore `w` viene utilizzato per specificare la larghezza di un'immagine in pixel. Viene utilizzato quando vogliamo fornire al browser le dimensioni di un'immagine in modo che possa scegliere l'immagine appropriata per lo spazio disponibile sullo schermo. -> La sintassi per utilizzare il descrittore `w` in `srcset` è la seguente: +> La sintassi per l'utilizzo del descrittore `w` in `srcset` è la seguente: ```html Esempio immagine + alt="Immagine di esempio"> ``` -> Nell'esempio sopra, abbiamo fornito al browser tre immagini e le loro larghezze corrispondenti in pixel. Il browser selezionerà l'immagine con la larghezza più vicina allo spazio disponibile sullo schermo. +> Nell'esempio sopra abbiamo fornito al browser tre immagini e le relative larghezze in pixel. Il browser selezionerà l'immagine con la larghezza più vicina allo spazio sullo schermo disponibile. ## Descrittore di densità (`x`) -> Il descrittore `x` viene utilizzato per specificare la densità di pixel di un'immagine, che è il rapporto tra pixel fisici e pixel CSS. Viene utilizzato quando vogliamo fornire al browser diverse versioni della stessa immagine con diverse densità di pixel. +> Il descrittore `x` viene utilizzato per specificare la densità di pixel di un'immagine, che è il rapporto tra i pixel fisici e i pixel CSS. Viene utilizzato quando vogliamo fornire al browser diverse versioni della stessa immagine con diverse densità di pixel. -> La sintassi per utilizzare il descrittore `x` in `srcset` è la seguente: +> La sintassi per l'utilizzo del descrittore `x` in `srcset` è la seguente: ```html Esempio immagine + alt="Immagine di esempio"> ``` -> Nell'esempio sopra, abbiamo fornito al browser tre immagini e le loro densità di pixel corrispondenti. Il browser selezionerà l'immagine con la densità di pixel più vicina allo schermo del dispositivo. +> Nell'esempio sopra, abbiamo fornito al browser tre immagini e le relative densità di pixel. Il browser selezionerà l'immagine con la densità di pixel più vicina allo schermo del dispositivo. -> Notare che i descrittori `w` e `x` possono essere utilizzati insieme nello stesso attributo `srcset` per fornire al browser più opzioni di scelta. +> Si noti che i descrittori `w` e `x` possono essere utilizzati insieme nello stesso attributo `srcset` per fornire al browser maggiori opzioni di scelta. diff --git a/src/content/docs/ja/_roundtrip_breakpoints.txt b/src/content/docs/ja/_roundtrip_breakpoints.txt index 588b9bd..9bbff8d 100644 --- a/src/content/docs/ja/_roundtrip_breakpoints.txt +++ b/src/content/docs/ja/_roundtrip_breakpoints.txt @@ -1,44 +1,43 @@ --- title: Breakpoints and Images -description: Why some (not all) breakpoints are important in images -taskInputHash: f409cdb7248e141b +description: Why some (but not all) breakpoints are important for your images +taskInputHash: 1fed01119b132d9d lang: en -ignore: '/* cSpell:locale ja,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 -Different layouts are needed for small screens and large monitors. To achieve the purposes of `srcset` and `sizes`, you need to know the points at which the layout changes. +Tiny screens and big monitors need different layouts. For the purposes of `srcset` and `sizes`, you need to know when the layout changes. -Web developers need to decide what to shrink, hide, or move on small screens or, more generally, what to enlarge, expose, or add on large screens. They have very little information. Is the user using a tablet, landscape phone, or small browser window? +Web developers need to decide what to shrink, hide, or move (or, generally, what to enlarge, show, or add) on small screens. And there's very little information to go on. Is the user on a tablet or a landscape mode phone, or are they just in a small browser window? -You need to choose any viewport width at which the layout changes. This is called a **breakpoint**. It's any number of CSS pixels (not device pixels) and Polypane has a great article on [common breakpoints](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023). +You need to pick any viewport width where the layout changes. This is called a **breakpoint**. It's any number of CSS pixels (not [device pixels](/en/pixels-not-pixels)). Polypane has a great article about the [breakpoints to test in 2022](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023). -Some images (such as logos, icons, buttons, etc.) are immune to layout changes caused by these breakpoints, and there are no issues with density descriptors in `srcset`. +Some images (logos, icons, buttons, etc.) can be immune to layout shifts due to these breakpoints (and [density descriptors in `srcset`](/en/density-descriptors)). -Images in main content are constrained by the size of their containers. Typically, the primary content area of a page is constrained to a specific width that is the maximum screen size. That is, `max-width` is specified, but on small screens, the primary content area occupies the entire viewport. +Images in main content are constrained by the size of the container. Usually the main content area of a page is limited to a certain width, which is the maximum screen width. On tablet/mobile the main content area fills the viewport. -When there are multiple columns at some breakpoints, it becomes more difficult to calculate valid sizing rules because the percentage of viewport width occupied by the image changes. +If you have multiple columns at a breakpoint, the percentage of the viewport width taken up by images changes, making it hard to calculate effective sizing rules. -### A Simple Way +### A simple method -So don't make this too complicated. You can probably get a very reasonable answer with the following approximations. +That being said, you don't need to overthink it. You'll probably be just fine with the following rough estimates. -1. At what size does the main column (or image container) stop growing? If the viewport width is less than that, you can specify that the image occupies 100% of the viewport width using `100vw` in the `sizes` attribute. -2. What is the maximum width for the container to reach? You can set that as a fixed `width` for everything else. +1. What is the size at which your main column (or image container) stops growing? Use `100vw` for a `sizes` attribute to indicate the image should take up 100% of the viewport width up to that width. +2. What is the maximum width that container achieves? You can set it as a fixed `width` on everything. -If the answer to #1 is 700px and the answer to #2 is 800px, you can use the following `sizes` attribute: +If the answer to 1 is 700px and the answer to 2 is 800px, you can use the following `sizes` attribute: ```html - + ``` -> You may think that the browser can calculate it because it selects the image URL before it downloads the CSS. Unfortunately, web browsers select the image URL first, so we have to calculate it ourselves. It doesn't have to be perfect, though. +> Of course, one would like to think that the browser can do all the calculations nicely based on the CSS. Unfortunately, browsers are eager to pick an image URL *before* the stylesheets are downloaded. So we need to do the calculation ourselves. And it's okay if it's not perfect. ===================== Content prompt used: @@ -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. ブレークポイントと画像 -2. なぜ画像においていくつかの（すべてではない）ブレークポイントが重要なのか +2. あなたの画像にいくつか（しかしすべてではない）のブレークポイントが重要な理由 Roundtrip (isolated) prompt used: diff --git a/src/content/docs/ja/_roundtrip_browser-picks-srcset.txt b/src/content/docs/ja/_roundtrip_browser-picks-srcset.txt index 7bdc4e4..d7745fd 100644 --- a/src/content/docs/ja/_roundtrip_browser-picks-srcset.txt +++ b/src/content/docs/ja/_roundtrip_browser-picks-srcset.txt @@ -1,25 +1,27 @@ --- -title: How Browsers Select Images in srcset -description: Step-by-step explanation of how browsers choose images listed in the srcset attribute -taskInputHash: c272925d0cc63780 +title: How Browsers Select Images +description: How browsers select images listed in the srcset attribute +taskInputHash: e33bc9ab3ee1a7e0 lang: en +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -How does a browser select which image to display from those listed in the `srcset` attribute? We'll explain step-by-step, providing examples for both width and density descriptors based on device and viewport. +Browsers use a set of rules to select the best image from several images specified in the `srcset` attribute. These rules depend on the display characteristics of the device (resolution, pixel density) and the size of the viewport. With the `srcset` attribute, you can specify different images depending on the width (using the `w` descriptor) or the pixel density (using the `x` descriptor). We will explain each case with examples below. -When using the `srcset` attribute in HTML, the browser uses a set of rules to select the optimal image from the provided list of sources. These rules depend on the display characteristics of the device (resolution, pixel density) and the size of the viewport. The `srcset` attribute allows specifying different images based on width (`w` descriptor), or based on pixel density (`x` descriptor). Let's explain with examples for each case: +1. Width Descriptor (`w`): -1. Width descriptor (`w`): - -Assume we have the following `srcset` attribute: +Consider an `srcset` attribute like the following: ```html Example Image ``` -The browser follows these steps: -a. Determine the device's DPR (Device Pixel Ratio). For example, the standard display has a DPR of 1, and high-resolution (Retina) displays have a DPR of 2 or more. +Browsers follow these steps: + +a. Determine the device's DPR (Device Pixel Ratio). For example, the standard display has a DPR of 1, while high-resolution (Retina) displays have a DPR of 2 or greater. -b. Calculate the effective width for each image in `srcset` by multiplying its width descriptor by the DPR. For devices with a DPR of 1, they would be as follows: +b. Calculate the effective width of each image in `srcset`. Multiply the width descriptor by the DPR. For devices with a DPR of 1: - example-small.jpg: 400 * 1 = 400px @@ -27,21 +29,21 @@ b. Calculate the effective width for each image in `srcset` by multiplying its w - example-large.jpg: 1600 * 1 = 1600px -c. Compare each effective width with the viewport width. The browser chooses the smallest image with an effective width larger than the viewport width. In this case, `example-medium.jpg` would be chosen if the viewport width is assumed to be 420px. +c. Compare the effective width to the viewport width. Assuming a viewport width of 420px, the browser selects the smallest image whose effective width is larger than the viewport width. In this case, `example-medium.jpg` is selected. -2. Density descriptor (`x`): +2. Pixel Density Descriptor (`x`): -Assume we have the following `srcset` attribute: +Consider an `srcset` attribute like the following: ```html Example Image ``` -The browser follows these steps: +Browsers follow these steps: -a. Determine the device's DPR (Device Pixel Ratio). For example, the standard display has a DPR of 1, and high-resolution (Retina) displays have a DPR of 2 or more. +a. Determine the device's DPR. For example, the standard display has a DPR of 1, while high-resolution (Retina) displays have a DPR of 2 or greater. -b. Compare each image's `x` descriptor in `srcset` with the device's DPR. In this case, there are three images with descriptors: +b. Compare each `x` descriptor in `srcset` with the device's DPR. In this case, there are three images with the following descriptors: - example-1x.jpg: 1x @@ -49,9 +51,9 @@ b. Compare each image's `x` descriptor in `srcset` with the device's DPR. In thi - example-3x.jpg: 3x -c. The browser chooses the image with the closest descriptor to the device's DPR. With a DPR of 1, the browser will choose `example-1x.jpg`. With a DPR of 2, the browser will choose `example-2x.jpg`. +c. Select the image whose `x` descriptor is 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 or greater, the browser selects `example-2x.jpg`, and so on. -When using width descriptors (`w`), you can also provide detailed information about how the image should be displayed on different viewport widths by combining the `sizes` and `srcset` attributes. Here's an example: +When using the width descriptor (`w`), you can provide information about how to display images at different viewport widths by combining the `srcset` attribute with the `sizes` attribute. Here is an example: ```html An example image + alt="Description of this image"> ``` +This markup example includes: +- **src**: the default image source that appears if the browser doesn't support Srcset. +- **srcset**: a list of image sources and density descriptors (1x, 2x, 3x). The browser chooses the best image for the user's display. +- **alt**: a description of the image for accessibility purposes. -This markup example includes the following: - -- **src**: The default image source to display if the browser does not support srcset. -- **srcset**: A list of image sources and their density descriptors (1x, 2x, 3x). The browser selects the optimal image based on the user's display. -- **alt**: The description of the image for accessibility purposes. - -That's it! You have successfully implemented Srcset with density descriptors and improved your website's performance and user experience. +That's it! You have successfully implemented Srcset with Density Descriptors, improving your website's performance and user experience. ===================== Content prompt used: @@ -56,8 +47,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. 密度指定子とsrcset -2. `srcset`内で密度指定子を使用する例 +Metadata returned1. 密度記述子とSrcset +2. `srcset`で密度記述子を使用する例 Roundtrip (isolated) prompt used: diff --git a/src/content/docs/ja/_roundtrip_introduction.txt b/src/content/docs/ja/_roundtrip_introduction.txt index 6e5eb2a..7942a58 100644 --- a/src/content/docs/ja/_roundtrip_introduction.txt +++ b/src/content/docs/ja/_roundtrip_introduction.txt @@ -1,43 +1,43 @@ --- -title: '`srcset` and `sizes` for ``' -description: An Efficient and Subjective Guide to Responsive Images in 2023 -taskInputHash: fb587f981b4441f1 +title: 'Efficient and Opinionated Guide to `srcset` and `sizes` for 2023 images' +description: 'Efficient and Opinionated Guide to `srcset` and `sizes` for 2023 images' +taskInputHash: 5849d4b5bb433cd3 lang: en -ignore: '/* cSpell:locale ja,en*/' sidebar_sort_priority: 1000 -date_published: '2023-03-23' -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' --- -**An Efficient and Subjective Guide to Responsive Images in 2023** +**Efficient and Opinionated Guide to 2023 Images** -For a deeper dive, consult the sidebar. This is a quick reference to upgrade your `` game, covering how to handle various image sizes and pixel densities in the modern age. You need to know that pixels != pixels [{{Note that the term used here is not the technical term}}](/en/pixels-not-pixels), and that `devicePixelRatio` is more like 3.875 than 1:1. Modern smartphones have many device pixels per CSS pixel, and they are often declared to have a viewport width in CSS pixels that's different from their physical width in device pixels. +Check the sidebar for deep dives. This is a quick reference for upgrading your `` tag to handle modern sizes and pixel densities. You should know that [pixels are not pixels](/en/pixels-not-pixels) and that `devicePixelRatio` is often greater than 1:1, perhaps 3.875. While modern phones may appear to have widths of 320-428px in CSS pixels for legibility, there are often many device pixels per CSS pixel. -> If an image has to be the same size irrespective of the browser window, [a density descriptor](/en/density-descriptors) should be used. This is suitable for logos, icons, buttons, etc. +> If you have an image that does not change size no matter how narrow the browser window, you should use [density descriptors](/en/density-descriptors) instead. These are often ideal for logos, icons, and buttons. -Do you know your [breakpoints](/en/breakpoints)? You'll need these numbers to fine-tune the following solutions— at a minimum, you need the breakpoint at which the main content area stops expanding and the viewport width. +Do you know your [breakpoints](/en/breakpoints)? You will need these numbers to fine-tune the following solutions. At minimum, you will need a breakpoint for the viewport width at which your main content area stops expanding. -### The Easy Solution + +### The Easy Way ```html -A dog riding a bike. - - - - +A photo of a dog on a bicycle. + + + + ``` -{{The translation is complete and accurate.}} +{{Note: It is possible that minor formatting issues could result due to markdown conversion.}} ===================== Content prompt used: @@ -51,7 +51,7 @@ Also carefully translate the title and description for the article; do not use & 2. An Efficient and Opinionated Guide to Responsive Images for 2023 Metadata returned1. `srcset` と `` の `sizes` -2. 2023年のレスポンシブイメージの効率的で主観的なガイド +2. 2023年のレスポンシブ画像に関する効率的で意見のあるガイド Roundtrip (isolated) prompt used: diff --git a/src/content/docs/ja/_roundtrip_lighthouse-performance-test.txt b/src/content/docs/ja/_roundtrip_lighthouse-performance-test.txt index 5c84db5..1a40c0b 100644 --- a/src/content/docs/ja/_roundtrip_lighthouse-performance-test.txt +++ b/src/content/docs/ja/_roundtrip_lighthouse-performance-test.txt @@ -1,28 +1,25 @@ --- -title: Testing website performance with Lighthouse -description: Steps for testing website performance using Lighthouse -taskInputHash: 7f9c623aaf7861da +title: Testing Performance with Lighthouse +description: Step-by-step guide to test website performance using Lighthouse. +taskInputHash: 514590b0de96e45f lang: en -ignore: '/* cSpell:locale ja,en*/' -date_published: '2023-03-24' -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' --- -# How to test website performance with Lighthouse - -`Lighthouse` is a tool used for measuring website performance, accessibility, and more. To test a website's performance with `Lighthouse`, follow these steps: +Here are the steps to test a site's performance using Lighthouse: 1. Open the Google Chrome web browser and navigate to the page you want to test. -2. Click the three dots in the top-right corner of the browser window, select "More Tools," then "Developer Tools," or use the keyboard shortcut "Ctrl+Shift+I" (Windows, Linux) or "Command+Option+I" (macOS). +2. Click the three dots on the top right corner of the browser window and select "More Tools" -> "Developer Tools", or use the keyboard shortcut "Ctrl+Shift+I" (Windows, Linux) or "Command+Option+I" (macOS). -3. In the Developer Tools panel, click the `Lighthouse` icon on the left side of the panel, or open the command menu by pressing "Ctrl+Shift+P" (Windows, Linux) or "Command+Shift+P" (macOS), type "Lighthouse," and select "Generate report." +3. In the Developer Tools panel, click on the Lighthouse icon on the left side of the panel or press "Ctrl+Shift+P" (Windows, Linux) or "Command+Shift+P" (macOS) to open the command menu, type "Lighthouse," and select "Generate report." -4. In the Lighthouse dialog box, select the relevant options for the performance you want to test, then click "Generate report." +4. In the Lighthouse dialog box, select the performance and other related options you want to test, and click "Generate report." -5. Once `Lighthouse` has completed the analysis, a report will be displayed showing the website's performance, accessibility, and other areas along with scores and recommendations for improvement. +5. When Lighthouse completes the analysis, a report will be displayed containing scores and recommendations for improving performance, accessibility, and other areas. -By following these steps, you can use `Lighthouse` to test and optimize website performance, improve user experience, and increase search engine rankings. +By following these steps, you can use Lighthouse to test and optimize a site's performance, resulting in improved user experience and search engine rankings. ===================== Content prompt used: @@ -35,8 +32,8 @@ Also carefully translate the title and description for the article; do not use & 1. Test performance with Lighthouse 2. Steps on how to test a website's performance using Lighthouse -Metadata returned1. Lighthouseによるパフォーマンスのテスト -2. Lighthouseを使用してウェブサイトのパフォーマンスをテストする手順 +Metadata returned1. Lighthouseでパフォーマンスをテストする +2. Lighthouseを使用してWebサイトのパフォーマンスをテストする手順 Roundtrip (isolated) prompt used: diff --git a/src/content/docs/ja/_roundtrip_picture-examples.txt b/src/content/docs/ja/_roundtrip_picture-examples.txt index 3656078..e1f9278 100644 --- a/src/content/docs/ja/_roundtrip_picture-examples.txt +++ b/src/content/docs/ja/_roundtrip_picture-examples.txt @@ -1,33 +1,36 @@ --- -title: Examples of using the `` element +title: Example of using `` element description: Provides examples of using the `` element for responsive images, art direction, and different image formats. -taskInputHash: 4cec70ff1dc4182d +taskInputHash: be7eddc11abaf63a lang: en +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Below are examples and explanations for using the `` element: +Below are some examples of using the `` element and their descriptions. -1. Example of a responsive image: +1. Example of responsive images: ```html - An image + image ``` -Explanation: In this example, the `` element is used to provide different image sources for different screen sizes. The `` element specifies the conditions for using each source using the `srcset` and `media` attributes. The `` element is used as a fallback for older browsers or if the conditions specified in the `` element are not met. +Explanation: In this example, the `` element is used to provide different image sources for different screen sizes. The `` element uses the `srcset` attribute and the `media` attribute to specify the condition under which each source is used. The `` element is used as a fallback for old browsers and when the conditions specified in the `` element are not met. 2. Example of art direction: ```html - An image + image ``` -Explanation: In this example, the `` element is used to provide different image sources depending on the device's orientation. The `` element with the `media` attribute set to `(orientation: landscape)` specifies the image source for wide screens, while the `` element specifies the image source for portrait screens. +Explanation: In this example, the `` element is used to provide different image sources depending on the device orientation. The `` element with the `media` attribute set to `(orientation: landscape)` specifies the image source for the wide screen, and the `` element specifies the image source for the portrait screen. 3. Example of different image formats: @@ -35,19 +38,20 @@ Explanation: In this example, the `` element is used to provide differe - An image + image ``` -Explanation: In this example, the `` element is used to provide different image sources for different image formats. The `` element uses the `srcset` and `type` attributes to specify the image format. The `` element is used as a fallback for older browsers that do not support the `` element. +Explanation: In this example, the `` element is used to provide different image sources for different image formats. The `` element uses the `srcset` attribute and the `type` attribute to specify different image sources. The `` element is used as a fallback for old browsers that do not support the `` element. ## Breakpoints -In responsive design, breakpoints define when a website or application's layout changes based on the size of the viewport. Breakpoints are typically defined using CSS media queries, which apply different styles based on screen width. These breakpoints can be used in combination with the `` element to provide different image sources for different screen sizes. +In responsive design, breakpoints are used to define the timing at which the layout of a website or application changes based on the size of the viewport. Breakpoints are usually defined using media queries in CSS, and different styles are applied based on the screen width. By using these breakpoints in combination with the `` element, different image sources can be provided for different screen sizes. -For example, in the first example, the `media` attribute is used to specify the screen width for each source. If the screen width is 768 pixels or larger, the `image-large.jpg` source is used. If the screen width is between 768 and 480 pixels, the `image-medium.jpg` source is used. If the screen width is 480 pixels or smaller, the `image-small.jpg` source is used. This allows for providing appropriately sized images for each device, reducing page load times, and improving the user experience. +For example, in the first example above, the `media` attribute is used to specify the screen width under which each source is used. If the screen width is above 768 pixels, the "image-large.jpg" source is used, if it is between 480 and 768 pixels, the "image-medium.jpg" source is used, and if the screen width is below 480 pixels, the "image-small.jpg" source is used. This provides the appropriate size image for each device, reduces page loading times, and improves the user experience. + +Breakpoints can be defined at any screen size, and multiple breakpoints can be used to create layouts that are responsive to a wide range of devices. By combining breakpoints with the `` element, a great flexible responsive design can be created for any device. -Breakpoints can be defined for any screen size and using multiple breakpoints can create layouts for a wide variety of devices. By combining breakpoints with the `` element, responsive and flexible designs with great visual appearance can be created on any device. ===================== Content prompt used: @@ -60,8 +64,8 @@ Also carefully translate the title and description for the article; do not use & 1. Examples using element 2. Provides examples using the element, for responsive images, art direction and different image formats -Metadata returned1. `` 要素を使用する例 -2. レスポンシブイメージ、アートディレクション、異なる画像形式に対して、 `` 要素を使用するための例を提供します。 +Metadata returned1. `` 要素を使用した例 +2. レスポンシブ画像、アートディレクション、異なる画像形式に対して、`` 要素を使用する例を提供します。 Roundtrip (isolated) prompt used: diff --git a/src/content/docs/ja/_roundtrip_pixels-not-pixels.txt b/src/content/docs/ja/_roundtrip_pixels-not-pixels.txt index 3786304..77754e3 100644 --- a/src/content/docs/ja/_roundtrip_pixels-not-pixels.txt +++ b/src/content/docs/ja/_roundtrip_pixels-not-pixels.txt @@ -1,23 +1,22 @@ --- -title: px ≠ Pixel +title: px ≠ Pixels description: Device px ≠ Browser px ≠ Image px -taskInputHash: 73be94d33f113c9c +taskInputHash: c3c114c4cc3f772b lang: en -ignore: '/* cSpell:locale ja,en*/' sidebar_sort_priority: 900 -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' --- -### Device pixels ≠ Browser pixels ≠ Image pixels +### Device Pixels ≠ Browser px ≠ Image px -Thanks to Apple, CSS and HTML pixels (`px`) map to **multiple device/printer pixels almost all the time**. The `devicePixelRatio` on my mobile phone is 3.875, what's yours? [Find out here](https://www.mydevice.io/) +Thanks to Apple, CSS and HTML pixels (`px`) are almost always mapped to multiple device/printer pixels. The devicePixelRatio of my phone is 3.875. [Check yours out?](https://www.mydevice.io/) -The `devicePixelRatio` of a desktop varies with browser zoom, but defaults to 1.5 (mine is upped to 150% under `System > Display > Scale`). +The devicePixelRatio on desktop changes according to the browser zoom but is usually default to 1.5. (`System> Display> Scale` is 150%) -Image files (excluding SVG) are decoded onto a pixel grid. **It is very hard to display image pixels perfectly at a 1:1 ratio with device pixels, but using `srcset` can get you close enough**. If there's a legitimate reason for needing a perfect mapping, a bit of JavaScript can adjust the size of the HTML element after loading. However, we won't delve into such frowned upon techniques here. +Image files (excluding SVGs) are decoded onto a grid of pixels. **Trying to display the image pixels perfectly 1:1 to device pixels is very tricky. However, using `srcset` will get you *close enough*. And if there is a critical need for a truly perfect mapping, a bit of JavaScript can adjust the size of the HTML element after loading. But we won't disclose such illegal actions here. -> Other absolute units (`in`, `pc`, `pt`, `mm`, `cm`, `Q`) are assumed to represent a number of CSS pixels, which all happen to be 96dpi. Developers should avoid absolute units. Because it's generally better to use units derived from font size or viewport/container dimensions. Mismatched units could break the layout if the user adjusts the multiplicative factor of `Accessibility > Text Size`, browser zoom, or rotates the device. Needless to say, all of these should be done before shipping the site. +> Other absolute units (in, pc, pt, mm, cm, Q) are defined as the number of CSS pixels, assuming everything is 96dpi. It is generally better to use units derived from font size or viewport/container dimensions for layout adjustments. Inconsistent units can result in layout breaking when users adjust the `Accessibility > Text Size` multiplier, browser zoom, or rotate the device, so all of these should be tested before shipping the site. ===================== Content prompt used: @@ -31,7 +30,7 @@ Also carefully translate the title and description for the article; do not use & 2. Device px ≠ browser px ≠ image px Metadata returned1. px ≠ ピクセル -2. デバイスpx ≠ ブラウザpx ≠ 画像px +2. デバイスのpx ≠ ブラウザのpx ≠ 画像のpx Roundtrip (isolated) prompt used: diff --git a/src/content/docs/ja/_roundtrip_specify-width-height.txt b/src/content/docs/ja/_roundtrip_specify-width-height.txt index 878dc2d..962859a 100644 --- a/src/content/docs/ja/_roundtrip_specify-width-height.txt +++ b/src/content/docs/ja/_roundtrip_specify-width-height.txt @@ -1,20 +1,19 @@ --- title: Using Width and Height -description: The benefits of using the width and height attributes in HTML code -taskInputHash: 8d1d8f5ead1a1b70 +description: Benefits of using width and height attributes in HTML code. +taskInputHash: 8edb8d80ec75276c lang: en -ignore: '/* cSpell:locale ja,en*/' -date_published: '2023-03-24' -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' --- -Why is it necessary to specify width and height in HTML code? +What is the reason for specifying width and height in HTML? -> It is recommended to specify the width and height attributes in HTML code for images. This is to help web browsers know the size of the image before it is fully loaded. With this information, the browser can reserve the appropriate space for the image in the web page, preventing content from jumping when the image is loaded. +> It is recommended to specify the width and height attributes in image HTML code to allow the web browser to know the size of the image before it is fully loaded. This allows for reserving the appropriate space on the web page to display the image and prevents content from moving while the image is loading. > -> Additionally, specifying the width and height of an image can improve the overall performance of your web page. With the browser knowing the size of the image beforehand, it can more accurately calculate the space needed to display the image, avoiding unnecessary repositioning or redrawing of content while it is loaded. +> Furthermore, specifying the width and height attributes of an image can improve the overall performance of the web page. Knowing the size of the image beforehand allows the browser to more accurately calculate the space required to display the image, avoiding unnecessary reloads or repainting of content when loading. > -> Ultimately, using the width and height attributes in HTML code for images can speed up content loading, reduce visual anomalies, and enhance user experience. +> Overall, using the width and height attributes in image HTML code can speed up content loading, reduce visual issues, and improve the user experience. ===================== Content prompt used: @@ -27,8 +26,8 @@ Also carefully translate the title and description for the article; do not use & 1. Use width and height 2. Benefits of using width and height attributes in HTML code -Metadata returned1. 幅と高さの使用 -2. HTMLコードで幅と高さ属性を使用するメリット +Metadata returned1. 幅と高さの利用 +2. HTMLコードで幅と高さ属性を使用する利点 Roundtrip (isolated) prompt used: diff --git a/src/content/docs/ja/_roundtrip_when-to-use-picture.txt b/src/content/docs/ja/_roundtrip_when-to-use-picture.txt index e9853cf..9976d9c 100644 --- a/src/content/docs/ja/_roundtrip_when-to-use-picture.txt +++ b/src/content/docs/ja/_roundtrip_when-to-use-picture.txt @@ -1,24 +1,25 @@ --- -title: How to Use the `` Element -description: Explains when and how to use the `` element. -taskInputHash: 09553a05f76abc73 +title: 'When to Use the `` Element' +description: This article explains when to use the `` element to provide multiple versions of an image and determine which version to display based on certain conditions. +taskInputHash: bb5a6af1428273b7 lang: en -ignore: '/* cSpell:locale ja,en*/' -date_published: '2023-03-27' -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' --- -The `picture` element is used to provide multiple versions of an image and display them based on specific conditions. It is useful for optimizing for different screen sizes and resolutions, and is commonly used in responsive web design. Here are some specific scenarios in which to use the `picture` element: +The `` element is used to provide multiple versions of an image and determine which version to display based on certain conditions. It is commonly used to provide images optimized for different screen sizes and resolutions to achieve responsive web design. -* **Retina Displays:** High-density screens such as Apple's Retina display may display images as blurry or pixelated if not optimized for high resolution. The `picture` element can provide a version of the image with twice the normal pixel density, resulting in clear and sharp display on Retina displays. +Here are specific scenarios where the `` element should be used: -* **Different Aspect Ratios:** When designing sites that need to display images with different aspect ratios, such as landscape versus portrait, the `picture` element can be used to provide different versions of the image optimized for each aspect ratio. +* **Retina display:** High-density screens like Apple's Retina displays sometimes display images as blurred and low-quality due to their high pixel density. By using the `` element, you can provide a version of the image with twice the normal pixel density, allowing it to appear clear and sharp even on Retina displays. -* **Bandwidth Limitations:** Images can be large files and may consume a lot of bandwidth, especially on mobile devices. The `picture` element can be used to provide smaller versions of the image for devices with smaller screen sizes or slower internet connections, reducing page load times. +* **Different aspect ratios:** For sites that need to display images with different aspect ratios, such as landscape and portrait orientations, the `` element can be used to provide optimized versions of the image. -* **Art Direction Layout:** There may be cases where images need to be displayed in a specific way to match the layout of other parts of the page. For example, on mobile devices, a close-up of a person's face may be preferred, while on desktop devices, a wide-angle shot may be preferred. The `picture` element can be used to provide different versions of the image that are optimized for different layouts. +* **Bandwidth limitations:** Images are large files that can consume a lot of bandwidth, especially on mobile devices. By using the `` element, you can provide smaller versions of the image for devices with smaller screens or slower internet connections. This can help reduce page load times. -Overall, the `picture` element is a powerful tool for providing images optimized for various use cases and achieving great display on any device or screen size. +* **Art direction layout:** There may be cases where you want to display images in a specific way based on the page layout. For example, you may want to display a close-up of a person's face on mobile devices, but a wide shot on desktop devices. By using the `` element, you can provide different versions of the image optimized for different layouts. + +Overall, the `` element is a powerful tool for providing images optimized for different use cases and delivering a superior visual experience across all devices and screen sizes. ===================== Content prompt used: @@ -31,8 +32,8 @@ Also carefully translate the title and description for the article; do not use & 1. When to use element 2. Explains in which situations you should use the element -Metadata returned1. ``要素の使用方法 -2. ``要素を使用すべき状況について説明します。 +Metadata returned1. ``要素を使用するタイミング +2. どのような状況で``要素を使用するべきかについて説明します。 Roundtrip (isolated) prompt used: diff --git a/src/content/docs/ja/_roundtrip_width-density.txt b/src/content/docs/ja/_roundtrip_width-density.txt index 83eda75..e71edd4 100644 --- a/src/content/docs/ja/_roundtrip_width-density.txt +++ b/src/content/docs/ja/_roundtrip_width-density.txt @@ -1,22 +1,20 @@ --- -title: Width and Density Descriptor -description: 'An example of using the "srcset" attribute with width and density descriptors' -taskInputHash: 85e0a3c7357342e1 +title: Width and Density Descriptors +description: 'Example of using width and density descriptors with `srcset`' +taskInputHash: 90676cde22fe88fe lang: en -ignore: '/* cSpell:locale ja,en*/' -date_published: '2023-03-24' -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' --- -Understand the width (w) and density (x) descriptors in `srcset`, using examples and Markdown. +Learn about width (`w`) and density (`x`) descriptors in `srcset`. Use an example to explain using Markdown. -The `srcset` attribute is an HTML attribute that allows developers to provide multiple image sources with different resolutions and pixel densities, so that the browser can select the appropriate image based on the device's display characteristics. The `srcset` attribute specifies an image using a combination of a URL and a `w` or `x` descriptor. +>`srcset` is an HTML attribute that allows developers to provide different image sources for different resolutions or pixel densities and enable the browser to select the appropriate image based on the display characteristics of the device. The `srcset` attribute specifies images using a combination of a `URL` and `w` or `x` descriptors. -## Width (w) Descriptor +## Width (`w`) descriptor +> The `w` descriptor is used to specify the width of an image in pixels. It is used when you want the browser to select the appropriate image for the available screen space. -The `w` descriptor is used to specify the width of an image in pixels. It provides the browser with the dimensions of the image, allowing it to choose an image that best fits the available screen space. - -The syntax for using the `w` descriptor in `srcset` is as follows: +> The syntax to use `w` descriptor in `srcset` is as follows. ```html Example Image ``` -In the above example, three images are provided to the browser, along with their respective widths in pixels. The browser selects the image with the closest width to the available screen space. - -## Density (x) Descriptor +In the above example, three images are provided to the browser, with each width specified in pixels. The browser selects the closest width image for the available screen space. -The `x` descriptor is used to specify the pixel density of an image, which is the ratio of physical pixels to CSS pixels. It is used when providing different versions of the same image with different pixel densities to the browser. +## Density (`x`) descriptor +> The `x` descriptor is used to specify the pixel density of an image, which is the ratio of physical pixels to CSS pixels. It is used to provide different versions of the same image with different pixel densities to the browser. -The syntax for using the `x` descriptor in `srcset` is as follows: +> The syntax to use `x` descriptor in `srcset` is as follows. ```html Example Image ``` -In the above example, three images are provided to the browser, along with their respective pixel densities. The browser selects the image with the closest pixel density to the device's screen. +In the above example, three images are provided to the browser, with each pixel density specified. The browser selects the closest pixel density image for the device screen. -Both `w` and `x` descriptors can be used together within the same `srcset` attribute, providing the browser with choices. +Note that it is possible to use both the `w` and `x` descriptors together in a single `srcset` attribute to provide options to the browser. ===================== Content prompt used: @@ -57,8 +54,8 @@ Also carefully translate the title and description for the article; do not use & 1. Width and density descriptors 2. Examples of using width and density descriptors in `srcset` -Metadata returned1. 幅と密度のディスクリプタ -2. `srcset`で幅と密度のディスクリプタを使用する例 +Metadata returned1. 幅と密度ディスクリプター +2. `srcset`で幅と密度ディスクリプターを使用する例 Roundtrip (isolated) prompt used: diff --git a/src/content/docs/ja/breakpoints.md b/src/content/docs/ja/breakpoints.md index bfc3676..16a0ab1 100644 --- a/src/content/docs/ja/breakpoints.md +++ b/src/content/docs/ja/breakpoints.md @@ -1,41 +1,40 @@ --- title: ブレークポイントと画像 -description: なぜ画像においていくつかの（すべてではない）ブレークポイントが重要なのか -taskInputHash: f409cdb7248e141b +description: あなたの画像にいくつか（しかしすべてではない）のブレークポイントが重要な理由 +taskInputHash: 1fed01119b132d9d lang: ja -ignore: '/* cSpell:locale ja,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` と `sizes` の目的のために、レイアウトが変更されるポイントを知る必要があります。 +Tinyのスクリーンとbigなモニターは別々のレイアウトが必要です。srcsetとsizesの目的のために、レイアウトが変化するポイントを知る必要があります。 -Web開発者は、小さなスクリーンでは何を縮小、非表示、または移動するか、またはより一般的には大きなスクリーンでは何を拡大、公開、または追加するかを決定する必要があります。彼らは非常に少ない情報しか持っていません。ユーザーはタブレット、または横向きの電話、または小さなブラウザウィンドウを使用していますか？ +Web開発者は、小さなスクリーンでは何を縮小、非表示、または移動するか（または一般的には、大きなスクリーンでは何を拡大、表示するか、または追加するか）を決定する必要があります。また、行うための情報は非常に少ないです。ユーザーはタブレットまたはランドスケープモードの電話なのか、または小さなブラウザーウィンドウなのか？ -レイアウトが変更される任意のビューポート幅を選択する必要があります。これを **ブレークポイント** と呼びます。これは CSS ピクセルの任意の数字であり（[デバイスピクセルではありません](/ja/pixels-not-pixels)）、Polypane には共通に使用されるブレークポイントに関する[優れた記事](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023)があります。 +レイアウトが変更される任意のビューポート幅を選択する必要があります。これを**ブレークポイント**と呼びます。これは、CSSピクセルの任意の数です（[デバイスピクセルではありません](/ja/pixels-not-pixels)）。Polypaneは、よく使用されるブレークポイントについての[素晴らしい記事](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023)を持っています。 -一部の画像（ロゴやアイコン、ボタンなど）は、これらのブレークポイントによって引き起こされるレイアウトの変更に免疫があり、[srcset 密度記述子](/ja/density-descriptors)で問題ありません。 +一部の画像（ロゴ、アイコン、ボタンなど）は、これらのブレークポイントによるレイアウトシフトに対して免疫を持つことができます（および[srcset density descriptors](/ja/density-descriptors)で問題ありません）。 -メインコンテンツの画像は、そのコンテナのサイズに制限されます。通常、ページのメインコンテンツ領域は、最大のスクリーンである特定の幅に制限されます。つまり、 `max-width` が指定されますが、小さなスクリーンでは、メインコンテンツ領域がビューポート全体を占めます。 +メインコンテンツの画像は、コンテナのサイズに制限されます。通常、ページのメインコンテンツエリアは、最大のスクリーンである一定の幅に制限されます。タブレット・モバイルの場合は、メインコンテンツエリアはビューポート全体を埋めます。 -いくつかのブレークポイントで複数の列がある場合、画像が占めるビューポート幅の割合が変わるため、有効なサイズ指定ルールを計算することがより困難になります。 +ブレークポイントで複数の列がある場合、画像が占めるビューポート幅の割合が変化するため、効果的なサイジングルールを計算することが困難になる場合があります。 ### 簡単な方法 -それでは、これを過度に複雑にしたりしないでください。おそらく次の近似値で非常に妥当な答えが得られます。 +それが言われても、過度に考えすぎることはありません。おそらく、次の概算で非常にOKです。 -1. メイン列（または画像のコンテナ）がどのサイズで成長を止めるのですか？ビューポート幅がそれ以下の場合、 `sizes` 属性に `100vw` を使用して画像がビューポート幅の100％を占めるように指定できます。 -2. コンテナが最大で達する幅は何ですか？ それを、それ以外のすべてに対して固定された `width` として設定できます。 +1. メインコラム（または画像のコンテナ）が成長を停止するサイズは何ですか？そのビューポート幅まで、画像の`sizes`属性に`100vw`を使用して、画像がビューポート幅の100％を占めることを示します。 +2. そのコンテナが達成する最大幅は何ですか？それをすべて固定された`width`として設定できます。 -1番の答えが700pxで2番の答えが800pxの場合、次の `sizes` 属性を使用できます。 +1に対する回答が700pxで、2に対する回答が800pxであれば、次の`sizes`属性を使用できます。 ```html - + ``` -> ブラウザーが CSS をダウンロードする前に画像のURLを選択するのが非常に早いため、ブラウザーが計算することができると思うかもしれません。残念ながら、Webブラウザーは先に画像 URL を選択してしまうため、私たちは自分自身で計算する必要があります。完璧でなくても構わないのです。 +> もちろん、ブラウザはCSSに基づいてすべての計算を素敵に処理できると思いたいものです。残念ながら、ブラウザはスタイルシートがダウンロードされる*前*に画像URLを選択することに熱心です。ですから、私たちは自分で計算を行う必要があります。そして、完璧になっていなくても、大丈夫です。 diff --git a/src/content/docs/ja/browser-picks-srcset.md b/src/content/docs/ja/browser-picks-srcset.md index 37cde17..7759c2a 100644 --- a/src/content/docs/ja/browser-picks-srcset.md +++ b/src/content/docs/ja/browser-picks-srcset.md @@ -1,70 +1,66 @@ --- title: ブラウザが選択する方法 -description: '`srcset`属性にリストされた画像からブラウザが選択する方法' -taskInputHash: 4ad7cdb54859d445 +description: srcset属性でリストされた画像の選択方法 +taskInputHash: e33bc9ab3ee1a7e0 lang: ja -ignore: '/* cSpell:locale ja,en*/' -date_published: '2023-03-24' -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`属性にリストされた画像からどの画像を選択するのでしょうか？ デバイスとビューポートに基づき、幅と密度のそれぞれの指定について例を挙げて、ブラウザがどのように決定するかをステップバイステップで説明します。 - -- HTMLの `srcset`属性を使用する場合、ブラウザは提供されたソースリストから最適な画像を選択するための一連のルールを使用します。これらのルールは、デバイスの表示特性（解像度、ピクセル密度）およびビューポートサイズに依存します。 `srcset`属性を使用すると、幅（ `w`ディスクリプタを使用）またはピクセル密度（ `x`ディスクリプタを使用）に基づいて異なる画像を指定できます。それでは、それぞれのケースについて例を挙げて説明していきましょう。 - -1\. 幅ディスクリプタ（ `w`）: - -次の `srcset`属性を持つ場合を想定します。 - -```html - -Example Image - -``` - -ブラウザは、次のステップに従います。 - -a. デバイスのDPR（デバイスピクセル比）を決定します。たとえば、標準ディスプレイのDPRは1であり、高解像度（Retina）ディスプレイのDPRは2以上です。 - -b. `srcset`内の各画像の効果的な幅を計算します。幅ディスクリプタをDPRで乗算します。DPRが1のデバイスの場合: - -- example-small.jpg: 400 \* 1 = 400px - -- example-medium.jpg: 800 \* 1 = 800px - -- example-large.jpg: 1600 \* 1 = 1600px - -c. 効果的な幅をビューポート幅と比較します。ビューポート幅が420pxであると仮定します。ブラウザは、効果的な幅がビューポート幅以上の最小の画像を選択します。この場合、 `example-medium.jpg`を選択します。 - -1\. ピクセル密度ディスクリプタ（ `x`）: - -次の `srcset`属性を持つ場合を想定します。 - - -```html - -Example Image - -``` - -ブラウザは、次のステップに従います。 - -a. デバイスのDPR（デバイスピクセル比）を決定します。たとえば、標準ディスプレイのDPRは1であり、高解像度（Retina）ディスプレイのDPRは2以上です。 - -b. デバイスのDPRを `srcset`内の `x`ディスクリプタと比較します。この場合、次のようなディスクリプタを持つ3つの画像があります。 - -- example-1x.jpg: 1x - -- example-2x.jpg: 2x - -- example-3x.jpg: 3x - -c. デバイスのDPRに最も近い `x`ディスクリプタを持つ画像を選択します。DPRが1のデバイスの場合、ブラウザは `example-1x.jpg`を選択します。DPRが2の場合、 `example-2x.jpg`を選択します。 - -幅ディスクリプタ（ `w`）を使用する場合、 `srcset`属性と `sizes`属性を組み合わせて、異なるビューポート幅での画像の表示方法に関するより詳細な情報を提供することもできます。これは、特に有用です。以下は例です。 - -```html - -Example Image + +``` + +ブラウザは次の手順に従います。 + +a. デバイスのDPR（Device Pixel Ratio）を決定する。たとえば、標準ディスプレイのDPRは1であり、高解像度（Retina）ディスプレイのDPRは2以上である。 + +b. `srcset`にある各画像の効果的な幅を計算する。幅の記述子にDPRを乗じます。DPRが1のデバイスの場合： + +- example-small.jpg：400 \* 1 = 400px + +- example-medium.jpg：800 \* 1 = 800px + +- example-large.jpg：1600 \* 1 = 1600px + +c. 効果的な幅をビューポートの幅と比較する。ビューポートの幅が420pxであると仮定する。ブラウザは、効果的な幅がビューポートの幅以上の最小の画像を選択します。この場合、`example-medium.jpg`が選択されます。 + +2\. 画素密度の記述子（`x`）： + +次のような`srcset`属性を持つ場合を考えます。 + +```html + +Example Image + +``` + +ブラウザは次の手順に従います。 + +a. デバイスのDPRを決定する。たとえば、標準ディスプレイのDPRは1であり、高解像度（Retina）ディスプレイのDPRは2以上である。 + +b. `srcset`の中の`x`記述子とデバイスのDPRを比較する。この場合、次の記述子がある3つの画像があります。 + +- example-1x.jpg：1x + +- example-2x.jpg：2x + +- example-3x.jpg：3x + +c. デバイスのDPRに最も近い`x`記述子の画像を選択する。DPRが1のデバイスの場合、ブラウザは`example-1x.jpg`を選択します。DPRが2のデバイスの場合、`example-2x.jpg`が選択され、以降同様に選択されます。 + +幅の記述子（`w`）を使用する場合には、`srcset`属性と`sizes`属性を組み合わせて、異なるビューポート幅での画像の表示方法に関する情報を提供できます。以下は例です。 + +```html + +An example image + alt="この画像の説明"> ``` +このマークアップ例には、以下のものが含まれています。 +- **src**: ブラウザがSrcsetをサポートしていない場合に表示される、デフォルトの画像ソース。 +- **srcset**：画像ソースと密度記述子（1x、2x、3x）の一覧。ブラウザは、ユーザーのディスプレイに最適な画像を選択します。 +- **alt**：アクセシビリティのためのイメージの説明。 -このマークアップ例には次のものが含まれます。 - -- **src** ：ブラウザがsrcsetをサポートしていない場合に表示されるデフォルトの画像ソース。 -- **srcset** ：画像ソースとその密度指定子（1x、2x、3x）のリスト。ブラウザは、ユーザーのディスプレイに基づいて最適な画像を選択します。 -- **alt** ：アクセシビリティの目的で画像の説明。 - -以上です！ これで、密度指定子を使用したSrcsetを正常に実装し、Webサイトのパフォーマンスとユーザーエクスペリエンスを向上させました。 +以上です！Density Descriptorsを使用したSrcsetを正常に実装し、ウェブサイトのパフォーマンスとユーザーエクスペリエンスを向上させました。 diff --git a/src/content/docs/ja/introduction.md b/src/content/docs/ja/introduction.md index 721670b..da0f95f 100644 --- a/src/content/docs/ja/introduction.md +++ b/src/content/docs/ja/introduction.md @@ -1,21 +1,21 @@ --- title: '`srcset` と `` の `sizes`' -description: 2023年のレスポンシブイメージの効率的で主観的なガイド -taskInputHash: fb587f981b4441f1 +description: 2023年のレスポンシブ画像に関する効率的で意見のあるガイド +taskInputHash: 5849d4b5bb433cd3 lang: ja -ignore: '/* cSpell:locale ja,en*/' sidebar_sort_priority: 1000 -date_published: '2023-03-23' -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' --- -**2023年のイメージに関する効率的で主観的なガイド** +**2023年の画像に関する効率的で意見のあるガイド** -深堀りについてはサイドバーを参照してください。これは、現代の様々なサイズとピクセル密度に対応するために、`` タグをアップグレードするクイックリファレンスです。pixels != pixels であることを[知っておくべきです](/ja/pixels-not-pixels)。そして、`devicePixelRatio` は1:1よりも3.875程度の方が多いです。現代のスマートフォンは、CSSピクセル単位で320-428pxの幅になるように見せかけますが、CSSピクセル単位あたりの多数のデバイスピクセルがあります。 +深堀りするにはサイドバーをチェックしてください。これは、現代の様々なサイズとピクセル密度を扱うための `` タグのアップグレードのクイックリファレンスです。[ピクセルがピクセルとは限らない](/ja/pixels-not-pixels)ことを知っておくべきであり、`devicePixelRatio` は 1:1 よりもむしろ 3.875 である可能性が高いことを覚えておいてください。現代の電話は、可読性のために CSS ピクセルで 320-428px 幅があるように見えますが、CSS ピクセルあたりの多くのデバイスピクセルがあります。 -> ブラウザウィンドウをどんなに狭くしても、画像のサイズが変わらない場合は、[density descriptor](/ja/density-descriptors) を使用する必要があります。これは、ロゴ、アイコン、ボタンなどに適しています。 +> ブラウザのウィンドウをどれだけ狭くしてもサイズが変わらない画像がある場合は、 [密度記述子](/ja/density-descriptors)を代わりに使用する必要があります。これは、しばしばロゴ、アイコン、およびボタンに適しています。 + +あなたの [ブレークポイント](/ja/breakpoints)を知っていますか？以下の解決策を微調整するためにこれらの数字が必要になります。少なくとも、メインコンテンツエリアの幅が広がらなくなるビューポート幅のブレークポイントが必要です。 -あなたの[ブレークポイント](/ja/breakpoints)を知っていますか？以下のソリューションを微調整するためにこれらの数値が必要になります-最小限に、メインコンテンツ領域が成長を止めるビューポート幅のブレークポイントが必要です。 ### 簡単な方法 @@ -28,12 +28,12 @@ date_updated: '2023-03-31' img.jpg?format=webp&w=1600 1600w, img.jpg?format=webp&w=2000 2000w" - sizes="(max-width: 700px) 100vw, 800px" alt="犬が自転車に乗っている画像" /> + sizes="(max-width: 700px) 100vw, 800px" alt="犬が自転車に乗っている写真" /> - + - + ``` diff --git a/src/content/docs/ja/lighthouse-performance-test.md b/src/content/docs/ja/lighthouse-performance-test.md index 1214cb4..b4850af 100644 --- a/src/content/docs/ja/lighthouse-performance-test.md +++ b/src/content/docs/ja/lighthouse-performance-test.md @@ -1,25 +1,22 @@ --- -title: Lighthouseによるパフォーマンスのテスト -description: Lighthouseを使用してウェブサイトのパフォーマンスをテストする手順 -taskInputHash: 7f9c623aaf7861da +title: Lighthouseでパフォーマンスをテストする +description: Lighthouseを使用してWebサイトのパフォーマンスをテストする手順 +taskInputHash: 514590b0de96e45f lang: ja -ignore: '/* cSpell:locale ja,en*/' -date_published: '2023-03-24' -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' --- -# Lighthouseを使ってサイトのパフォーマンスをテストする方法 - -`Lighthouse`は、ウェブサイトのパフォーマンス、アクセシビリティなどを測定するためのツールです。ウェブサイトのパフォーマンスを `Lighthouse`でテストするためには、次の手順を実行します。 +Lighthouseを使用してサイトのパフォーマンスをテストする方法は次のとおりです。 1. Google Chromeウェブブラウザを開き、テストしたいページに移動します。 -2. ブラウザウィンドウの右上にある3つの点をクリックし、[その他のツール]、[開発者ツール]を選択するか、キーボードショートカット「Ctrl + Shift + I」（Windows、Linux）または「Command + Option + I」（macOS）を使用します。 +2. ブラウザウィンドウの右上隅にある3つの点をクリックして、「その他のツール」->「開発者ツール」を選択するか、「Ctrl+Shift+I」(Windows、Linux）または「Command+Option+I」（macOS）のキーボードショートカットを使用します。 -3. 開発者ツールパネルで、パネルの左側にある `Lighthouse` アイコンをクリックするか、「Ctrl + Shift + P」（Windows、Linux）または「Command + Shift + P」（macOS）を押してコマンドメニューを開き、「Lighthouse」と入力して「レポートの生成」を選択します。 +3. 開発者ツールパネルで、パネルの左側にあるLighthouseアイコンをクリックするか、「Ctrl+Shift+P」（Windows、Linux）または「Command+Shift+P」（macOS）を押してコマンドメニューを開き、「Lighthouse」と入力して「レポートを生成する」を選択します。 -4. Lighthouseのダイアログボックスで、テストしたいパフォーマンスなどの関連するオプションを選択し、「レポートの生成」をクリックします。 +4. Lighthouseのダイアログボックスで、テストしたいパフォーマンスとその他の関連オプションを選択し、「レポートを生成する」をクリックします。 -5. `Lighthouse`が解析を完了すると、ウェブサイトのパフォーマンス、アクセシビリティ、その他の領域を改善するためのスコアと推奨事項が記載されたレポートが表示されます。 +5. Lighthouseが分析を完了すると、パフォーマンス、アクセシビリティ、その他の領域のスコアと改善に関する推奨事項が含まれたレポートが表示されます。 -これらの手順に従うことで、`Lighthouse`を使用してウェブサイトのパフォーマンスをテストおよび最適化し、ユーザーエクスペリエンスや検索エンジンランキングを向上することができます。 +これらの手順に従うことで、Lighthouseを使用してサイトのパフォーマンスをテストおよび最適化できます。これにより、ユーザーエクスペリエンスと検索エンジンのランキングを向上させることができます。 diff --git a/src/content/docs/ja/picture-examples.md b/src/content/docs/ja/picture-examples.md index 71affa6..7ee00e9 100644 --- a/src/content/docs/ja/picture-examples.md +++ b/src/content/docs/ja/picture-examples.md @@ -1,54 +1,56 @@ --- title: '`` 要素を使用した例' -description: レスポンシブイメージ、アートディレクション、異なる画像フォーマットに対して、`` 要素を使用した例を提供します。 -taskInputHash: ec17d7bd226d3aa1 +description: レスポンシブ画像、アートディレクション、異なる画像形式に対して、`` 要素を使用する例を提供します。 +taskInputHash: be7eddc11abaf63a lang: ja -ignore: '/* cSpell:locale ja,en*/' -date_published: '2023-03-24' -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' --- -以下は、`` 要素を使用した例とその説明です。 - -1. レスポンシブイメージの例: - -```html - - - - An image - -``` - -説明: この例では、`` 要素を使用して、画面サイズに応じて異なる画像リソースを提供しています。`` 要素は、「srcset」属性を使用して異なる画像リソースを指定し、「media」属性を使用して各リソースを使用する条件を指定します。`` 要素は、古いブラウザー用の代替方法であり、また `` 要素で指定された条件が満たされない場合にも使用されます。 - -2. アートディレクションの例: - -```html - - - An image - -``` - -説明: この例では、デバイスの向きに応じて、異なる画像リソースを提供するために、`` 要素が使用されています。`` 要素は、「media」属性を `(orientation: landscape)` に設定して、ワイドスクリーン用の画像リソースを指定していますが、`` 要素はポートレートスクリーン用の画像リソースを指定しています。 - -3. 異なる画像フォーマットの例: - -```html - - - - An image - -``` - -説明: この例では、`` 要素を使用して、異なる画像フォーマット用の異なる画像リソースを提供します。`` 要素は、「srcset」属性と「type」属性を使用して、異なる画像フォーマットを指定した異なる画像リソースを指定します。`` 要素は、`` 要素をサポートしていない古いブラウザーの代替品として使用されます。 - -## ブレークポイント - -レスポンシブデザインでは、ビューポートのサイズに基づいてウェブサイトやアプリケーションのレイアウトが変更されるタイミングを定義するために、ブレークポイントが使用されます。ブレークポイントは、通常、CSSのメディアクエリを使用して定義され、画面幅に応じて異なるスタイルが適用されます。これらのブレークポイントは、`` 要素と組み合わせて、異なる画面サイズに対して異なる画像リソースを提供するために使用することができます。 - -たとえば、最初の例では、`media` 属性を使用して、各リソースが使用されるスクリーン幅を指定しました。スクリーン幅が 768 ピクセル以上の場合、`image-large.jpg` リソースが使用されます。スクリーン幅が 480 ピクセル以上 768 ピクセル未満の場合、`image-medium.jpg` リソースが使用されます。スクリーン幅が 480 ピクセル未満の場合は、`image-small.jpg` リソースが使用されます。これにより、各デバイスに適切なサイズの画像を提供できるため、ページの読み込み時間が短縮され、ユーザー体験が向上します。 - -ブレークポイントは任意の画面サイズで定義することができ、複数のブレークポイントを使用して、様々なデバイスに対応したレイアウトを作成することができます。ブレークポイントを `` 要素と組み合わせることで、どんなデバイスでも見栄えが良くフレキシブルでレスポンシブなデザインを作成することができます。 +以下は、`` 要素を使用するいくつかの例とそれらの説明です。 + +1\. レスポンシブ画像の例: + +```html + + + + 画像 + +``` + +説明: この例では、 `` 要素を使用して、異なる画面サイズに対して異なる画像ソースを提供するために使用されます。 `` 要素は、「srcset」属性と「media」属性を使用して、各ソースが使用される条件を指定します。 `` 要素は、古いブラウザや `` 要素で指定された条件が満たされない場合のフォールバックとして使用されます。 + +2\. 美術方向の例: + +```html + + + + 画像 + +``` + +説明: この例では、 `` 要素を使用して、デバイスの向きに応じて異なる画像ソースを提供するために使用されます。 "(orientation: landscape)" という "media" 属性を設定された `` 要素は、広いスクリーンの画像ソースを指定し、`` 要素は縦向きのスクリーンの画像ソースを指定します。 + +3\. 異なる画像形式の例: + +```html + + + + + + 画像 + +``` + +説明: この例では、 `` 要素を使用して、異なる画像形式に対して異なる画像ソースを提供するために使用されます。 `` 要素は、 "srcset" 属性と "type" 属性を使用して、異なる画像ソースを指定します。 `` 要素は、 `` 要素をサポートしていない古いブラウザのフォールバックとして使用されます。 + +## ブレークポイント + +レスポンシブデザインでは、ビューポートのサイズに基づいて、ウェブサイトやアプリケーションのレイアウトが変更されるタイミングを定義するためにブレークポイントが使用されます。ブレークポイントは通常、CSS内のメディアクエリを使用して定義され、画面の幅に応じて異なるスタイルが適用されます。これらのブレークポイントを `` 要素と組み合わせて使用することで、異なる画面サイズに対して異なる画像ソースを提供できます。 + +たとえば、前述の最初の例では、 `media` 属性を使用して、各ソースが使用される画面幅を指定しました。 画面幅が 768 ピクセル以上の場合は、「image-large.jpg」ソースが使用され、 480 ピクセル以上 768 ピクセル未満の場合は、「image-medium.jpg」ソースが使用され、画面幅が 480ピクセル未満の場合は、「image-small.jpg」ソースが使用されます。これにより、各デバイスに適切なサイズの画像を提供して、ページの読み込み時間を短縮し、ユーザーエクスペリエンスを向上させることができます。 + +ブレークポイントは任意の画面サイズで定義でき、複数のブレークポイントを使用することで、多様なデバイスに応じたレイアウトを作成できます。ブレークポイントを `` 要素と組み合わせることで、どのデバイスでも素晴らしい柔軟なレスポンシブデザインを作成できます。 diff --git a/src/content/docs/ja/pixels-not-pixels.md b/src/content/docs/ja/pixels-not-pixels.md index 620a491..0d88b12 100644 --- a/src/content/docs/ja/pixels-not-pixels.md +++ b/src/content/docs/ja/pixels-not-pixels.md @@ -1,20 +1,19 @@ --- title: px ≠ ピクセル -description: デバイスpx ≠ ブラウザpx ≠ 画像px -taskInputHash: 73be94d33f113c9c +description: デバイスのpx ≠ ブラウザのpx ≠ 画像のpx +taskInputHash: c3c114c4cc3f772b lang: ja -ignore: '/* cSpell:locale ja,en*/' sidebar_sort_priority: 900 -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' --- -### デバイスピクセル ≠ ブラウザpx ≠ 画像px +### デバイスのピクセル ≠ ブラウザのpx ≠ 画像のpx -Appleのおかげで、CSSとHTMLのピクセル（ `px` ）は**ほとんど常に複数のデバイス/プリンターピクセルにマップされます**。私の携帯電話の `devicePixelRatio` は3.875です。[あなたのものは？](https://www.mydevice.io/) +Appleのおかげで、CSSとHTMLのピクセル (`px`) はほとんど常に複数のデバイス/プリンタピクセルにマッピングされます。私の電話のdevicePixelRatioは3.875です。[あなたのも見てみる？](https://www.mydevice.io/) -デスクトップの `devicePixelRatio` は、ブラウザーズームによって変化しますが、デフォルトは1.5です（私の `System> Display> Scale` は150％です）。 +デスクトップのdevicePixelRatioはブラウザのズームに従って変わりますが、デフォルトでは1.5になります。 (`System > Display > Scale` は150%です) -画像ファイル（SVGを除く）は、ピクセルのグリッドにデコードされます。 **画像ピクセルをデバイスピクセルと1：1の比率で完璧に表示するのは非常に難しいですが、 `srcset` を使用すれば、それに十分に近づけることができます**。ただし、完璧なマッピングが必要な正当な理由がある場合は、少しのJavaScriptを使用して、ロード後にHTML要素のサイズを調整することができます。しかし、ここではそのような禁じられた技は明かされません。 +画像ファイル (SVGを除く) はピクセルのグリッドにデコードされます。 **画像のピクセルをデバイスのピクセルと1:1に完全に表示することは、非常に厄介になります。 しかし、 `srcset` を使うと*十分近い*ものを取得できます。そして、本当に完璧なマッピングが必要な最重要な理由がある場合は、少しのJavaScriptが読み込み後にhtml要素のサイズを調整できます。ただそのような違法行為(?)はここでは公開されません。 -> 他の絶対単位（in、pc、pt、mm、cm、Q）は、CSSピクセルの数とすべてが96dpiであると想定されています。開発者は絶対単位を避けます。なぜなら、フォントサイズまたはビューポート/コンテナの寸法から派生した単位を使用する方が一般的には良いからです。ユーザーが `Accessibility > Text Size` の乗数を調整、ブラウザーズーム、またはデバイスを回転させると、ミスマッチした単位がレイアウトを壊す可能性があります。言うまでもなく、サイトを出荷する前にこれらすべてのことを行う必要があります。 +> 他の絶対単位 (in, pc, pt, mm, cm, Q) は、CSSピクセルの数と、すべてが96dpiであると仮定して定義されています。レイアウトのユーザ調整に対応するためには、フォントサイズやビューポート/コンテナの寸法から派生した単位を使用する方が一般的にはより良いです。 不一致な単位は、ユーザが `Accessibility > Text Size` 乗数を調整したり、ブラウザをズームしたり、デバイスを回転させたりするとレイアウトが崩れる可能性があるため、サイトを出荷する前にこれらのすべてを行う必要があります。 diff --git a/src/content/docs/ja/specify-width-height.md b/src/content/docs/ja/specify-width-height.md index 549dadd..6831442 100644 --- a/src/content/docs/ja/specify-width-height.md +++ b/src/content/docs/ja/specify-width-height.md @@ -1,17 +1,16 @@ --- -title: 幅と高さの使用 -description: HTMLコードで幅と高さ属性を使用するメリット -taskInputHash: 8d1d8f5ead1a1b70 +title: 幅と高さの利用 +description: HTMLコードで幅と高さ属性を使用する利点 +taskInputHash: 8edb8d80ec75276c lang: ja -ignore: '/* cSpell:locale ja,en*/' -date_published: '2023-03-24' -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' --- -なぜHTMLに幅と高さを指定する必要があるのでしょうか？ +HTMLに幅と高さを指定するべき理由は何ですか？ -> 画像のHTMLコードに幅と高さの属性を指定することが推奨されています。これは、ウェブブラウザーが画像のサイズを完全に読み込む前に画像の大きさを知ることを助けるためです。これにより、ブラウザーは画像に適切なスペースをウェブページに予約でき、画像が読み込まれる際にコンテンツがジャンプするのを防ぐことができます。 +> 画像のHTMLコードに幅と高さの属性を指定することを推奨します。これにより、Webブラウザが画像を完全に読み込む前にそのサイズを知ることができます。これにより、Webページ上の適切なスペースを予約して画像を表示し、画像が読み込まれる間にコンテンツが移動することを防止することができます。 > -> さらに、画像の幅と高さを指定することで、ウェブページ全体のパフォーマンスを向上させることができます。ブラウザーが事前に画像のサイズを知っていると、画像を表示するために必要なスペースをより正確に計算でき、ロード中のコンテンツの不必要な再配置や再描画を回避することができます。 +> さらに、画像の幅と高さの属性を指定することで、Webページ全体のパフォーマンスを向上させることもできます。ブラウザが事前に画像のサイズを知っていると、画像を表示するために必要なスペースをより正確に計算し、コンテンツがロードされる際の不必要な再ロードや再描画を避けることができます。 > -> 結局のところ、画像のHTMLコードに幅と高さの属性を使用することで、コンテンツの読み込みを高速化し、ビジュアル的な不具合を減少させることで、ユーザーエクスペリエンスを向上させることができます。 +> 全体的に、画像のHTMLコードに幅と高さの属性を使用することで、コンテンツの読み込みを高速化し、視覚的な問題を減らすことができ、ユーザーエクスペリエンスを向上させることができます。 diff --git a/src/content/docs/ja/when-to-use-picture.md b/src/content/docs/ja/when-to-use-picture.md index aab2daa..626fea8 100644 --- a/src/content/docs/ja/when-to-use-picture.md +++ b/src/content/docs/ja/when-to-use-picture.md @@ -1,22 +1,22 @@ --- -title: '``要素の使用方法' -description: '``要素を使用すべき状況について説明します。' -taskInputHash: 09553a05f76abc73 +title: '``要素を使用するタイミング' +description: どのような状況で``要素を使用するべきかについて説明します。 +taskInputHash: bb5a6af1428273b7 lang: ja -ignore: '/* cSpell:locale ja,en*/' -date_published: '2023-03-27' -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' --- -`picture`要素は、複数のバージョンの画像を提供し、特定の条件に基づいて表示するために使用されます。異なる画面サイズや解像度に最適化するために役立ち、レスポンシブWebデザインで一般的に使用されます。 -ここでは、`picture`要素を使用する特定のシナリオをいくつか紹介します。 +``要素は、画像の複数バージョンを提供し、特定の条件に基づいて表示するバージョンを決定するために使用されます。異なる画面サイズや解像度に最適化された画像を提供したり、レスポンシブウェブデザインによく使用されます。 -* **Retinaディスプレイ：** AppleのRetinaディスプレイのような高密度なスクリーンは、高解像度に最適化されていない場合、画像がぼやけたり、ピクセル化したりする可能性があります。 `picture`要素を使用すると、通常のバージョンの2倍のピクセルを持つ画像のバージョンを提供して、Retinaディスプレイでクリアで鮮明な表示を実現できます。 +次に、``要素を使用する特定のシナリオを示します。 -* **異なるアスペクト比：** 横長と縦長のような異なるアスペクト比を持つ画像を表示する必要があるサイトを設計している場合、 `picture`要素を使用して、各アスペクト比に最適化された異なるバージョンの画像を提供できます。 +* **Retinaディスプレイ：** AppleのRetinaディスプレイのような高密度スクリーンは、ピクセル密度が高いため、高品質でない場合画像がぼやけて見えることがあります。``要素を使用すると、通常のバージョンの2倍のピクセルを持つ画像のバージョンを提供できるため、Retinaディスプレイでもクリアで鮮明な画像を表示できます。 -* **帯域制限：** 画像は大きなファイルで、特にモバイルデバイスでは多くのバンド幅を占有する可能性があります。 `picture`要素を使用すると、画面サイズが小さいデバイスまたはインターネット接続が遅いデバイス向けに、より小さいバージョンの画像を提供できます。これによりページの読み込み時間を短縮できます。 +* **異なるアスペクト比：** ランドスケープとポートレートなど、異なるアスペクト比の画像を表示する必要があるサイトの場合、``要素を使用して最適化された異なるバージョンの画像を提供できます。 -* **アートディレクションによるレイアウト：** ページの他の部分のレイアウトに応じて、画像を特定の方法で表示したい場合があります。たとえば、モバイルデバイスでは人物の顔のアップを表示したい場合がありますが、デスクトップデバイスでは広角を表示したい場合があります。 `picture`要素を使用すると、異なるレイアウトに最適化された異なるバージョンの画像を提供できます。 +* **帯域幅制限：** 画像は大きなファイルであり、特にモバイルデバイスでは多くの帯域幅を占有します。``要素を使用すると、スクリーンサイズが小さいか、インターネット接続が遅いデバイス向けに、より小さいバージョンの画像を提供することができます。これにより、ページの読み込み時間が短縮される可能性があります。 -全体的に、`picture`要素は様々なユースケースに最適化された画像を提供するのに役立つ強力なツールであり、どのデバイスや画面サイズでも素晴らしい表示を実現できます。 +* **アートディレクションレイアウト：** ページのレイアウトに応じて画像を特定の方法で表示したい場合があります。例えば、モバイルデバイスでは人物の顔のクローズアップを表示したいが、デスクトップデバイスでは広いショットを表示する場合があります。``要素を使用すると、異なるレイアウトに最適化された異なるバージョンの画像を提供できます。 + +全体的に、``要素は、さまざまなユースケースに最適化された画像を提供し、どのデバイスや画面サイズから見ても優れた視覚的体験を提供するための強力なツールです。 diff --git a/src/content/docs/ja/width-density.md b/src/content/docs/ja/width-density.md index c61bc38..bf24bac 100644 --- a/src/content/docs/ja/width-density.md +++ b/src/content/docs/ja/width-density.md @@ -1,22 +1,20 @@ --- -title: 幅と密度のディスクリプタ -description: '`srcset`で幅と密度のディスクリプタを使用する例' -taskInputHash: 85e0a3c7357342e1 +title: 幅と密度ディスクリプター +description: '`srcset`で幅と密度ディスクリプターを使用する例' +taskInputHash: 90676cde22fe88fe lang: ja -ignore: '/* cSpell:locale ja,en*/' -date_published: '2023-03-24' -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`の中のwidth(w)とdensity(x)ディスクリプタを理解する。例を用いて説明しMarkdownを使用する。 +`srcset` 内で幅 (w) と密度 (x) ディスクリプターを理解する。例を用いて、Markdown を使って説明する。 -`srcset`は、開発者が異なる解像度やピクセル密度を持つ複数の画像ソースを提供し、ブラウザがデバイスの表示特性に基づいて適切な画像を選択できるようにするHTML属性です。 `srcset`属性は、`URL`と`w`または`x`ディスクリプタの組み合わせを使用して、画像を指定します。 +>`srcset` は HTML 属性であり、開発者が異なる解像度またはピクセル密度に異なる画像ソースを提供し、ブラウザがデバイスのディスプレイ特性に応じて適切な画像を選択できるようにすることを可能にします。 `srcset` 属性は、 `URL` と `w` または `x` ディスクリプターの組み合わせを使用して画像を指定します。 -## Width（w）ディスクリプタ +## 幅（`w`）ディスクリプター +> `w`ディスクリプターは、画像の幅をピクセル単位で指定するために使用されます。使用可能な画面スペースに適切な画像をブラウザに選択させたい場合に使用されます。 -`w`ディスクリプタは、画像の幅をピクセル単位で指定するために使用されます。使用すると、ブラウザに画像の寸法を提供して利用可能な画面スペースに適した画像を選択することができます。 - -`srcset`で`w`ディスクリプタを使用する構文は次のようになります。 +> `srcset`で `w` ディスクリプターを使用する構文は以下の通りです。 ```html Example Image ``` -上記の例では、3つの画像とそれぞれの幅をピクセル単位でブラウザに提供しています。ブラウザは利用可能な画面スペースに最も近い幅の画像を選択します。 -## Density（x）ディスクリプタ +上記の例では、3つの画像をブラウザに提供し、それぞれの幅をピクセル単位で指定しています。ブラウザは使用可能な画面スペースに最も近い幅の画像を選択します。 -`x`ディスクリプタは、画像のピクセル密度を指定するために使用されます。これは、物理ピクセルとCSSピクセルの比率です。同じ画像の異なるピクセル密度のバージョンをブラウザに提供する場合に使用します。 +## 密度 (`x`) ディスクリプター +> `x` ディスクリプターは、物理的なピクセルと CSS ピクセルの比率である画像のピクセル密度を指定するために使用されます。同じ画像の異なるピクセル密度のバージョンをブラウザに提供するために使用されます。 -`srcset`で`x`ディスクリプタを使用する構文は次のようになります。 +> `srcset` で `x` ディスクリプターを使用する構文は以下の通りです。 ```html Example Image ``` -上記の例では、3つの画像とそれぞれのピクセル密度をブラウザに提供しています。ブラウザはデバイスの画面に最も近いピクセル密度の画像を選択します。 -`w`および`x`ディスクリプタは、同じ`srcset`属性の中で一緒に使用することができ、ブラウザに選択肢を提供できます。 +上記の例では、3つの画像をブラウザに提供し、それぞれのピクセル密度を指定しています。ブラウザはデバイスのスクリーンに最も近いピクセル密度の画像を選択します。 + +`w`ディスクリプタと`x`ディスクリプタを1つの `srcset` 属性で一緒に使用して、ブラウザに選択肢を提供することができることに注意してください。 diff --git a/src/content/docs/sv/_roundtrip_breakpoints.txt b/src/content/docs/sv/_roundtrip_breakpoints.txt index bd6f1e5..bccaa85 100644 --- a/src/content/docs/sv/_roundtrip_breakpoints.txt +++ b/src/content/docs/sv/_roundtrip_breakpoints.txt @@ -1,42 +1,45 @@ --- title: Breakpoints & Images -description: Why some (but not all) breakpoints matter for your images -taskInputHash: 93c856b4f6a02850 +description: Why some (but not all) breakpoints are important for your images +taskInputHash: 67fe0daf8eb1aa7c lang: en -ignore: '/* cSpell:locale sv,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 large screens require different layouts. For `srcset` and `sizes`, we need to know at what point the layout changes. +Small screens and large screens require different layouts. For `srcset` and `sizes`, we need to know at which point the layout changes. -Web developers must decide what to shrink, hide, or move around on smaller screens—or more often, what to expand, reveal, or add on larger screens. They also have very little information to go on. Is the user on a tablet, or a phone in landscape mode—or a small browser window? +Web developers have to decide what to shrink, hide or move on smaller screens – or more commonly, what to expand, reveal or add on larger screens. They also have very little information to go on. Is the user on a tablet or phone in landscape – or a small browser window? -We must choose an arbitrary viewport width where 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. +We must choose an arbitrary viewport width where 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 [fantastic 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 or icons or buttons) might be unaffected by layout shifts caused by these breakpoints (and work well with [srcset density descriptors](/en/density-descriptors)). +Some images (like logos or icons, or buttons) can be immune to layout changes caused by these breakpoints (and look great with [srcset density descriptors](/en/density-descriptors)). -Main content images will be constrained by the size of their container. Typically, the main content area on a page will be constrained to a certain width on the largest screens, a `max-width`, but on small screens, the main content area will fill the entire viewport. +Images for the main content will be constrained by the size of their container. Typically, the main content area of a page will be restrained to a certain width on larger screens, a `max-width`, but on small screens the main content area will take up the entire viewport. -If you have more than one column at certain breakpoints, it becomes harder to calculate effective sizing rules, because the percentage of the viewport width the image takes up will change. +If you have more than one column at certain breakpoints, it becomes harder to calculate the effective size rules because the proportion of the viewport width that the image takes up will change. -### The Simple Way +### The easy way -That being said, don't overthink this. You'll probably be just fine with the following approximation: +That being said, don’t overthink this. You’ll probably be perfectly fine with the following estimation: -1. At what size does the main column (or image container) stop growing? Up to that viewport width, we can use `100vw` for the image's size attribute to say the image takes up 100% of the viewport's width. -2. What's the maximum width the container ever reaches? 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 to that viewport width, we can use `100vw` for the image’s `sizes` attribute to say that the image takes up 100% of the viewport width. +2. What’s the maximum width the container ever achieves? We can set that as a fixed width for everything else. If your answer to 1 was 700px and your answer to 2 was 800px, you can use the following `sizes` attribute: ```html - + ``` -> You'd think the browser could simply handle all these calculations for us based on the CSS. Unfortunately, browsers are aggressively eager to choose an image URL *before* stylesheets finish downloading. So we must do the calculations ourselves, and it serves them right if we don't get it perfect. + + +> You might think the browser could handle all these calculations nicely for us based on CSS. Unfortunately, browsers are aggressively eager to choose an image URL *before* the stylesheets have loaded. So we need to make the calculations ourselves, and it suits them if we don't get it entirely right. + +{{Note that the term used here is not the technical term for "device pixel ratio", which is a topic for a different article.}} ===================== Content prompt used: @@ -49,8 +52,8 @@ Also carefully translate the title and description for the article; do not use & 1. Breakpoints & images 2. Why some (but not all) breakpoints matter for your images -Metadata returned1. Brytpunkter & bilder -2. Varför vissa (men inte alla) brytpunkter är viktiga för dina bilder +Metadata returned1. Breakpoints & bilder +2. Varför vissa (men inte alla) breakpoints är viktiga för dina bilder Roundtrip (isolated) prompt used: diff --git a/src/content/docs/sv/_roundtrip_browser-picks-srcset.txt b/src/content/docs/sv/_roundtrip_browser-picks-srcset.txt index e316926..e7766a6 100644 --- a/src/content/docs/sv/_roundtrip_browser-picks-srcset.txt +++ b/src/content/docs/sv/_roundtrip_browser-picks-srcset.txt @@ -1,16 +1,19 @@ --- -title: How the browser chooses -description: How the browser chooses between images listed in the srcset attribute -taskInputHash: 3fd2b41750391cb2 +title: How the Browser Chooses +description: How the browser chooses between images specified in the srcset attribute +taskInputHash: 8c5f60d1e3eafe9f lang: en +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -How does the browser choose between images listed in the `srcset` attribute? Here is a step-by-step description, with examples for both width and density specifications, and how the browser chooses based on device and viewport size. +How does the browser choose between images specified in the `srcset` attribute? Here is a step-by-step guide, with examples of both width and density specifications and how the browser chooses based on device and viewport. -- When using the `srcset` attribute in HTML, the browser follows a set of rules to choose the most appropriate image from a list of specified sources. These rules depend on both the device's display properties (resolution, pixel density) and the viewport size. The `srcset` attribute allows you to specify different images based on width (by using the `w` descriptor) or pixel density (by using the `x` descriptor). Let's go through each case with an example. +- When using the `srcset` attribute in HTML, the browser uses a set of rules to choose the most appropriate image from a list of sources provided. These rules depend on both the device's display properties (resolution, pixel density) and the viewport size. The `srcset` attribute allows you to specify different images based on width (using `w` descriptors) or pixel density (using `x` descriptors). Let's go through each case with examples. 1. Width descriptor (`w`): -Assume that we have the following `srcset` attribute: +Assume we have the following `srcset` attribute: ```html @@ -22,19 +25,19 @@ The browser follows these steps: a. Determine the device's DPR (Device Pixel Ratio). 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 sources. Multiply the width descriptor by DPR. For a device with a DPR of 1: +b. Calculate the effective width for each image in `srcset`. Multiply the width descriptor with DPR. For a device with a DPR of 1: -- example-small.jpg: 400 * 1 = 400px +- example-small.jpg: 400 \* 1 = 400px -- example-medium.jpg: 800 * 1 = 800px +- example-medium.jpg: 800 \* 1 = 800px -- example-large.jpg: 1600 * 1 = 1600px +- example-large.jpg: 1600 \* 1 = 1600px -c. Compare the effective widths to the viewport width. Assume that 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, it selects `example-medium.jpg`. +c. Compare the effective widths with the viewport width. Assume 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`. 2. Pixel density descriptor (`x`): -Assume that we have the following `srcset` attribute: +Assume we have the following `srcset` attribute: ```html @@ -54,9 +57,9 @@ b. Compare the device's DPR with the `x` descriptors in `srcset`. In this case, - 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 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, it chooses `example-2x.jpg`, and so on. -It is important to note that you can also use the `sizes` attribute in conjunction with the `srcset` attribute to provide more information about how the image will be displayed at different viewport widths. This is particularly useful when using the width descriptor (`w`). Here is an example: +It's important to note that you can also use the `sizes` attribute with the `srcset` attribute to provide more information about how the image will be displayed at different viewport widths. This is especially useful when using the width descriptor (`w`). Here's an example: ```html @@ -76,7 +79,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. Hur webbläsaren väljer -2. Hur webbläsaren väljer mellan bilder som listas i srcset-attributet +2. Hur webbläsaren väljer mellan bilder som anges i srcset-attributet Roundtrip (isolated) prompt used: diff --git a/src/content/docs/sv/_roundtrip_density-descriptors.txt b/src/content/docs/sv/_roundtrip_density-descriptors.txt index 250a3b5..e28d8c9 100644 --- a/src/content/docs/sv/_roundtrip_density-descriptors.txt +++ b/src/content/docs/sv/_roundtrip_density-descriptors.txt @@ -1,35 +1,34 @@ --- -title: Density Descriptors and Srcset -description: Examples of using density descriptors in `srcset` -taskInputHash: 55ea5bbfbf5779eb +title: Density Descriptions & srcset +description: Examples of using density descriptions in `srcset` +taskInputHash: 3e4c00237cedf2c5 lang: en -ignore: '/* cSpell:locale sv,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 to each user's device, improving performance and user experience. This guide covers the essentials of using srcset with density descriptors and provides examples of markup for your convenience. +Srcset with density descriptions provides a simple and effective way to deliver the most appropriate image to each user's device, improving performance and user experience. This guide will walk through basic usage of srcset with density descriptions and provide examples of markup for your convenience. -## What is Srcset with Density Descriptors? +## What is Srcset with Density Descriptions? -Srcset is an HTML attribute designed to allow you to specify multiple image sources for a single `` element. Density descriptors (`x`) are used in combination with srcset to provide images with different resolutions based on the user's screen pixel density. +Srcset is an HTML attribute designed to allow you to specify multiple image sources for a single `` element. Density descriptions (`x`) are used in conjunction with srcset to provide different resolution images based on the user's display. -## When to Use Srcset with Density Descriptors +## When to Use Srcset with Density Descriptions -Using srcset with density descriptors is particularly useful when you want to: -1. Serve high-resolution images to high-DPI screens (e.g. Retina screens) while providing lower-resolution images to normal screens. +Using srcset with density descriptions is particularly useful when you want to: +1. Serve high-resolution images to high-DPI displays (such as Retina displays) while providing lower-resolution images to regular displays. 2. Improve page performance by delivering the most appropriate image size to each user's device. -## Implementing Srcset with Density Descriptors +## Implementing Srcset with Density Descriptions -To use srcset with density descriptors, follow these steps: -1. Prepare your images in different resolutions. -2. Add the `srcset` attribute to the `` element, including the image sources and corresponding density descriptors. -3. Add the `sizes` attribute (optional) to specify the size of the image when displayed on the screen. +To use srcset with density descriptions, follow these steps: +1. Prepare your images at different resolutions. +2. Add the `srcset` attribute to the `` element, including image sources and corresponding density descriptions. +3. Add the `sizes` attribute (optional) to specify the image size in the viewport. ### Markup Example -Here's an example of how to implement srcset with density descriptors in your markup: +Here is an example of how you can implement srcset with density descriptions in your markup: ```html sizes -description: An efficient and clear guide to responsive images for 2023 -taskInputHash: 87881becd1c9192b +description: An efficient and opinionated guide to responsive images for 2023 +taskInputHash: 9073468e325bcbed lang: en -ignore: '/* cSpell:locale sv,en*/' sidebar_sort_priority: 1000 -date_published: '2023-03-23' -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' --- -**An efficient and definite guide to images for 2023** +**An efficient and opinionated guide to images for 2023** -Check the sidebar for a more in-depth description. This is the quick reference for upgrading `` tags to handle modern devices in all their different sizes and pixel densities. You should know that pixels != pixels and `devicePixelRatio` is more likely to be around 3.875 than 1:1. Modern phones pretend to be 320-428px wide for legibility (in CSS-pixels), but have many device pixels per CSS-pixel. +Check the sidebar for more information. This is a quick reference for upgrading your `` tags to handle modern devices with varying screen sizes and pixel densities. You should [know that pixels != pixels](/en/pixels-not-pixels) and that `devicePixelRatio` is more likely to be around 3.875 than 1:1. Modern phones pretend to be 320-428px wide for legibility (in CSS pixels) but have many device pixels per CSS pixel. ->If your image never changes size no matter how narrow you make the browser window, you should use a density descriptor instead. This is often appropriate for logos, icons and buttons. +> If your image never changes size no matter how narrow you make the browser window, you should use a [density descriptor](/en/density-descriptors) instead. This is often appropriate for logos, icons, and buttons. -Do you know what your breakpoints are? You will need these numbers to fine-tune the solution below - and at a minimum the viewport width breakpoint where the main content area stops growing in width. +Do you know what your [breakpoints](/en/breakpoints) are? You'll need those values to fine-tune the solution below – and at a minimum, the breakpoint where the main content stops growing. -### The simple method +### The easy way ```html Dog riding a bike + alt="Dog cycling" /> - + - + ``` +{{Note that the original document seems to be in Swedish as indicated in the lang property. Although most of the translation looks fine, there are slight changes that could be made to ensure linguistic coherence. For example, in the introduction sentence, "Check the sidebar for more information" could be translated to "Consult the sidebar for additional information". Also, "modern devices with varying screen sizes and pixel densities" could be rephrased as "modern devices of diverse screen sizes and pixel densities". Finally, a possible correction is writing instead of `` to ensure markdown is being rendered correctly.}} ===================== Content prompt used: @@ -51,7 +50,7 @@ Also carefully translate the title and description for the article; do not use & 2. An Efficient and Opinionated Guide to Responsive Images for 2023 Metadata returned1. srcset och sizes -2. En effektiv och tydlig guide till responsiva bilder för 2023 +2. En effektiv och åsiktsbaserad guide till responsiva bilder för 2023 Roundtrip (isolated) prompt used: diff --git a/src/content/docs/sv/_roundtrip_lighthouse-performance-test.txt b/src/content/docs/sv/_roundtrip_lighthouse-performance-test.txt index 363f3e2..c4d9143 100644 --- a/src/content/docs/sv/_roundtrip_lighthouse-performance-test.txt +++ b/src/content/docs/sv/_roundtrip_lighthouse-performance-test.txt @@ -1,29 +1,27 @@ --- -title: Test site performance with Lighthouse -description: >- - Step-by-step guide on how to test a website's performance using Lighthouse -taskInputHash: d9b9eb078ceeeb1f +title: Testing Website Performance with Lighthouse +description: Step-by-step guide on how to test a website's performance using Lighthouse +taskInputHash: 034f3b9f627231a8 lang: en -ignore: '/* cSpell:locale sv,en*/' -date_published: '2023-03-24' -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' --- -How do you test your website's performance with Lighthouse? +How do you test your website performance using Lighthouse? -> Lighthouse is a tool that can be used to measure the performance, accessibility, and other aspects of a website. To test your website's performance with Lighthouse, follow these steps: +> Lighthouse is a tool that can be used to measure the performance, accessibility, and other aspects of a website. To test your website performance using Lighthouse, follow these steps: > -> 1\. Open Google Chrome browser and navigate to the page you want to test. +> 1. Open Google Chrome browser and navigate to the page you want to test. > -> 2\. Click the three dots in the upper right corner of the browser window, then select "More tools" and then "Developer tools" or simply use the keyboard shortcut "Ctrl + Shift + I" (Windows, Linux) or "Command + Option + I" (macOS). +> 2. Click the three dots in the upper right corner of the browser window, then select "More tools" and then "Developer tools" or simply use the shortcut "Ctrl + Shift + I" (Windows, Linux) or "Command + Option + I" (macOS). > -> 3\. In the Developer tools panel, click on the Lighthouse icon located on the left side of the panel or press "Ctrl+Shift+P" (Windows, Linux) or "Command+Shift+P" (macOS) to open the Command menu, then type "Lighthouse" and select "Generate report". +> 3. In the developer tools window, click the Lighthouse icon located on the left side of the panel or press "Ctrl + Shift + P" (Windows, Linux) or "Command + Shift + P" (macOS) to open the command menu, type "Lighthouse," and select "Generate report." > -> 4\. In the Lighthouse dialog box, select Performance and other relevant options you want to test, then click "Generate report". +> 4. In the Lighthouse dialog box, select performance and other relevant options you wish to test, then click "Generate report." > -> 5\. After Lighthouse completes its analysis, you will see a report with scores and recommendations for improving your website's performance, accessibility, and other areas. +> 5. When Lighthouse has completed its analysis, you will see a report with scores and recommendations to improve your website's performance, accessibility, and other areas. > -> By following these steps, you can use Lighthouse to test and optimize your website's performance, which can help improve its user experience and search engine ranking. +> By following these steps, you can use Lighthouse to test and optimize your website's performance, which can help improve its user experience and search engine optimization. ===================== Content prompt used: @@ -37,7 +35,7 @@ Also carefully translate the title and description for the article; do not use & 2. Steps on how to test a website's performance using Lighthouse Metadata returned1. Testa prestanda med Lighthouse -2. Steg för steg guide för att testa en webbplats prestanda med hjälp av Lighthouse +2. Steg för steg-guide om hur du testar en webbplats prestanda med Lighthouse Roundtrip (isolated) prompt used: diff --git a/src/content/docs/sv/_roundtrip_picture-examples.txt b/src/content/docs/sv/_roundtrip_picture-examples.txt index cd820f2..b251326 100644 --- a/src/content/docs/sv/_roundtrip_picture-examples.txt +++ b/src/content/docs/sv/_roundtrip_picture-examples.txt @@ -1,57 +1,59 @@ ---- -title: Example with the Element -description: >- - Provides examples using the element for responsive images, art direction, - and different image formats. -taskInputHash: 3b4e429f7eb84ce2 -lang: en ---- -Here are some examples of how to use the `` element and their explanations: - -1. Example for responsive images: - -```html - - - - An image - -``` - -Explanation: In this example, the `` element is used to provide different image sources for different screen sizes. The `` elements specify the different image sources using the "srcset" and "media" attributes to specify the conditions under which each source should be used. The `` element is used as a fallback for older browsers or when the conditions specified in the `` elements are not met. - -2. Example for art direction: - -```html - - - - An image - -``` - -Explanation: In this example, the `` element is used to provide different image sources depending on the orientation of the device. The `` element with the "media" attribute set to "(orientation: landscape)" specifies an image source for wide screens, while the `` element specifies an image source for portrait screens. - -3. Example for different image formats: - -```html - - - - - - An image - -``` - -Explanation: In this example, the `` element is used to provide different image sources for different image formats. The `` elements specify different image sources using the "srcset" and "type" attributes to specify the image format. The `` element is used as a fallback for older browsers that do not support the `` element. - -## Breakpoints - -In responsive design, breakpoints are used to define when the layout of a website or application should change based on the viewport size. Breakpoints are typically defined with media queries in CSS, which apply different styling depending on the screen width. These breakpoints can be used in conjunction with the `` element to provide different image sources for different screen sizes. - -For example, in the first example above, we used the `media` attribute to specify the screen width under which each source should be used. When the screen width is greater than or equal to 768 pixels, the source `image-large.jpg` is used; when the screen width is greater than or equal to 480 pixels but less than 768 pixels, the source `image-medium.jpg` is used; and when the screen width is less than 480 pixels, the source `image-small.jpg` is used. This allows us to serve appropriately sized images for each device, reducing page load times and improving the user experience. - +--- +title: Examples with the element +description: >- + Provides examples with the element for responsive images, image control, and different image formats +taskInputHash: 2be3dc0822137e26 +lang: en +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' +--- +Here are a few examples of how to use the `` element and their explanations: + +1\. Example of responsive images: + +```html + + + + An image + +``` + +Explanation: In this example, the `` element is used to provide different image sources for different screen sizes. The `` elements specify the different image sources using the "srcset" and "media" attributes to specify the conditions under which each source should be used. The `` element is used as a fallback for older browsers or when the conditions specified in the `` elements are not met. + +2\. Example of image control: + +```html + + + + An image + +``` + +Explanation: In this example, the `` element is used to provide different image sources depending on the device's orientation. The `` element with the "media" attribute set to "(orientation: landscape)" specifies an image source for wide screens, while the `` element specifies an image source for portrait screens. + +3\. Example of different image formats: + +```html + + + + + + An image + +``` + +Explanation: In this example, the `` element is used to provide different image sources for different image formats. The `` elements specify different image sources using the "srcset" and "type" attributes to specify the image format. The `` element is used as a fallback for older browsers that do not support the `` element. + +## Breakpoints + +In responsive design, breakpoints are used to define when the layout of a website or application should change based on the size of the viewport. Breakpoints are typically defined using media queries in CSS, which apply different styles depending on the screen width. These breakpoints can be used in conjunction with the `` element to provide different image sources for different screen sizes. + +As an example, we used the `media` attribute in the first example above to specify the screen width under which each source should be used. When the screen width is greater than or equal to 768 pixels, the `image-large.jpg` source will be used; when the screen width is greater than or equal to 480 pixels but less than 768 pixels, the `image-medium.jpg` source will be used; and when the screen width is less than 480 pixels, the `image-small.jpg` source will be used. This allows us to serve appropriately sized images for each device, reducing page load times and improving the user experience. + Breakpoints can be defined at any screen size, and multiple breakpoints can be used to create layouts that respond to a wide range of devices. By combining breakpoints with the `` element, you can create flexible and responsive designs that look great on any device. ===================== @@ -65,8 +67,8 @@ Also carefully translate the title and description for the article; do not use & 1. Examples using element 2. Provides examples using the element, for responsive images, art direction and different image formats -Metadata returned1. Exempel med elementet -2. Ger exempel med elementet, för responsiva bilder, konstriktning och olika bildformat. +Metadata returned1. Exempel med -elementet +2. Tillhandahåller exempel med -elementet, för responsiva bilder, bildreglering och olika bildformat Roundtrip (isolated) prompt used: diff --git a/src/content/docs/sv/_roundtrip_pixels-not-pixels.txt b/src/content/docs/sv/_roundtrip_pixels-not-pixels.txt index 301ba8c..1c20eb1 100644 --- a/src/content/docs/sv/_roundtrip_pixels-not-pixels.txt +++ b/src/content/docs/sv/_roundtrip_pixels-not-pixels.txt @@ -1,23 +1,22 @@ --- title: px ≠ pixels -description: Unit px ≠ browser px ≠ image px -taskInputHash: 2b5adfa6783beef0 +description: Device pixels ≠ browser pixels ≠ image pixels +taskInputHash: 49c85f11bddeb9d6 lang: en -ignore: '/* cSpell:locale sv,en*/' sidebar_sort_priority: 900 -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' --- -### Unit pixels ≠ browser pixels ≠ image pixels +### Device pixels ≠ browser pixels ≠ image pixels -Thanks to Apple, CSS and HTML pixels (`px`) **almost always map to several device/print pixels**. The `devicePixelRatio` on my phone is 3.875; [what's yours?](https://www.mydevice.io/) +Thanks to Apple, CSS and HTML pixels (`px`) **almost always map to multiple device pixels**. The `devicePixelRatio` on my mobile phone is 3.875; [what's yours?](https://www.mydevice.io/) -My desktop's `devicePixelRatio` changes with the browser zoom, but defaults to 1.5 (because my `System > Display > Scale` is set to 150%). +On my desktop, the device pixel ratio changes with browser zoom, but the default is 1.5 (my `System > Display > Scale` is 150%, after all). -Image files (excluding SVG) decode to an array of pixels. **Getting image pixels to display perfectly 1:1 with device pixels is annoyingly hard—but with `srcset` you can get *close enough***, and a little bit of JavaScript can adjust the HTML element's dimensions after loading if you have a truly compelling reason for needing that perfect match—although such forbidden sorcery shall not be revealed here. +Image files (excluding SVG) decode to a grid of pixels. **It's annoyingly difficult to get image pixels to display perfectly in a 1:1 mapping with device pixels, but with `srcset` you can get *almost* as good**, and a little JavaScript can adjust the HTML element size after load if you have a really good reason for needing that perfect mapping, though such dark arts won't be revealed here. -> Other absolute [units (in, pc, pt, mm, cm, Q)](https://developer.mozilla.org/en-US/docs/Web/CSS/length) are defined in terms of CSS pixels pretending everything is 96dpi. Developers mostly avoid absolute units because it's usually better to use units derived from font-size or viewport/container dimensions. Using incorrect units can break a layout if the user adjusts their `Accessibility > Text Size` multiplier, zooms the browser, or rotates their device. Needless to say, you should do all these things before launching your site. +> Other absolute [units (in, pc, pt, mm, cm, Q)](https://developer.mozilla.org/en-US/docs/Web/CSS/length) are defined in terms of CSS pixels and pretend that everything is 96dpi. Developers avoid absolute units since it's usually better to use units that derive from font size or UI/container dimensions. Unit differences can break a layout if the user adjusts their `Accessibility > Text Size` multiplier, zooms the browser, or rotates their device. Of course, you should do all those things before publishing your website. ===================== Content prompt used: @@ -31,7 +30,7 @@ Also carefully translate the title and description for the article; do not use & 2. Device px ≠ browser px ≠ image px Metadata returned1. px ≠ pixlar -2. Enhet px ≠ webbläsare px ≠ bild px +2. Enhet-pixlar ≠ webbläsarpx ≠ bildpx Roundtrip (isolated) prompt used: diff --git a/src/content/docs/sv/_roundtrip_specify-width-height.txt b/src/content/docs/sv/_roundtrip_specify-width-height.txt index 1f7977b..c101ca9 100644 --- a/src/content/docs/sv/_roundtrip_specify-width-height.txt +++ b/src/content/docs/sv/_roundtrip_specify-width-height.txt @@ -1,20 +1,19 @@ --- title: Use width and height description: The benefits of using width and height attributes in HTML code -taskInputHash: ce0d1fb3ed0bb779 +taskInputHash: fbee33d6919f5c1d lang: en -ignore: '/* cSpell:locale sv,en*/' -date_published: '2023-03-24' -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' --- -Why should you add width and height to your HTML code? - -> It is recommended to add width and height attributes to images in HTML code because it helps the browser know the size of the image before it has fully loaded. This allows the browser to reserve appropriate space on the web page for the image, preventing content from jumping around when the image loads. -> -> Additionally, specifying the width and height attributes for images can also help improve the performance of the web page as a whole. When a browser knows the size of an image in advance, it can more accurately calculate the amount of space needed to display the image and avoid unnecessary reloading or redrawing of content as it loads. -> -> Overall, using width and height attributes in HTML code for images can improve user experience by making content load faster and reducing visual errors. +Why should you set width and height in HTML code? + +> It is recommended to set width and height attributes in HTML code for images because it helps the browser to know the size of the image before it is fully loaded. This allows the browser to reserve the correct amount of space on the web page for the image, preventing content from jumping around when the image is loaded. +> +> Additionally, specifying width and height attributes for images can also help improve the overall performance of the web page. When a browser knows the size of an image in advance, it can more accurately calculate the amount of space needed to display the image and avoid unnecessary flows or redraws of content while it is loading. +> +> Overall, the use of width and height attributes in HTML code for images can improve the user experience by making content load faster and reducing visual errors. ===================== Content prompt used: @@ -28,7 +27,7 @@ Also carefully translate the title and description for the article; do not use & 2. Benefits of using width and height attributes in HTML code Metadata returned1. Använd bredd och höjd -2. Fördelarna med att använda bredd och höjd-attribut i HTML-kod +2. Fördelarna med att använda bredd- och höjdattribut i HTML-koden Roundtrip (isolated) prompt used: diff --git a/src/content/docs/sv/_roundtrip_when-to-use-picture.txt b/src/content/docs/sv/_roundtrip_when-to-use-picture.txt index 05a92e7..5760b55 100644 --- a/src/content/docs/sv/_roundtrip_when-to-use-picture.txt +++ b/src/content/docs/sv/_roundtrip_when-to-use-picture.txt @@ -1,25 +1,25 @@ --- -title: When to use the element -description: Explains in which situations you should use the element -taskInputHash: be2190453a34daf1 +title: When to use the element +description: Explains in which scenarios to use the element +taskInputHash: 22cea24f0bea57f5 lang: en -ignore: '/* cSpell:locale sv,en*/' -date_published: '2023-03-27' -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' --- -The `picture` element is used to provide multiple versions of an image and determine which version to display based on certain conditions. It is particularly useful for optimizing images for different screen sizes and resolutions, and is often used in responsive web design. -Here are some specific scenarios where you may want to use the `picture` element: +The `img` element is used to provide multiple versions of an image and determines which version of the image to display based on certain conditions. It is especially useful for optimizing images for different screen sizes and resolutions and is commonly used in responsive web design. -* **Retina displays:** High density displays like Apple's Retina displays have higher pixel density, which means that images can appear blurry or pixelated if they are not optimized for high resolution. With the `picture` element, you can provide a version of the image that has twice as many pixels as the regular version, so it looks sharp and clear on Retina displays. +Here are some specific scenarios where you might want to use the `img` element: -* **Different image formats:** If you are designing a website that needs to display images with different aspect ratios (e.g. landscape or portrait), you can use the `picture` element to provide different versions of the image that are optimized for each aspect ratio. +* **Retina displays:** High-density screens like Apple's Retina displays have a higher pixel density, which means images can look blurry or pixelated if they are not optimized for high resolution. With the `img` element, you can provide a version of the image that has twice as many pixels as the normal version, so it looks sharp and clear on Retina displays. -* **Bandwidth limitations:** Images can be large files that take up a lot of bandwidth, especially on mobile devices. With the `picture` element, you can provide smaller versions of the image for devices with smaller screens or slower internet connections, which can help reduce page load times. +* **Different image formats:** If you are designing a website that needs to display images with different formats (such as landscape vs. portrait), you can use the `img` element to provide different versions of the image that are optimized for each format. -* **Artistic layout:** Sometimes you may want to present an image in a certain way depending on the layout of the rest of the page. For example, you may want to show a close-up of a person's face on mobile devices, but a wider image on desktop devices. The `picture` element allows you to provide different versions of the image that are optimized for different layouts. +* **Bandwidth limits:** Images can be large files that take up a lot of bandwidth, especially on mobile devices. With the `img` element, you can provide smaller versions of the image for devices with smaller screens or slower internet connections, which can help reduce page load times. -In summary, the `picture` element is a powerful tool that can help you optimize your images for different use cases and ensure they look great regardless of the device or screen size they are viewed on. +* **Art-directed layouts:** Sometimes you may want to display an image in a certain way depending on the layout of the rest of the page. For example, you may want to show a close-up of a person's face on mobile devices but a wider image on desktop devices. The `img` element allows you to provide different versions of the image that are optimized for different layouts. + +Overall, the `img` element is a powerful tool that can help you optimize your images for a variety of use cases and ensure they look great no matter what device or screen size they are displayed on. ===================== Content prompt used: @@ -32,8 +32,8 @@ Also carefully translate the title and description for the article; do not use & 1. When to use element 2. Explains in which situations you should use the element -Metadata returned1. När du ska använda -elementet -2. Förklarar i vilka situationer du bör använda -elementet +Metadata returned1. När man ska använda elementet +2. Förklarar i vilka situationer du bör använda -elementet Roundtrip (isolated) prompt used: diff --git a/src/content/docs/sv/_roundtrip_width-density.txt b/src/content/docs/sv/_roundtrip_width-density.txt index dac7b90..3e1da5d 100644 --- a/src/content/docs/sv/_roundtrip_width-density.txt +++ b/src/content/docs/sv/_roundtrip_width-density.txt @@ -1,52 +1,49 @@ --- title: Width and Density Descriptors -description: Examples of using width and density descriptors in `srcset` -taskInputHash: de07e2c59a8993ce +description: Example usage of width and density descriptors in `srcset` +taskInputHash: 788dd1b49d02d6e5 lang: en -ignore: '/* cSpell:locale sv,en*/' -date_published: '2023-03-24' -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' --- -Understanding width (`w`) and density (`x`) descriptors in `srcset`. Use examples and markdown. +Understanding width (`w`) and density (`x`) descriptors in `srcset`. Use examples and Markdown. + +>`srcset` is an HTML attribute that allows developers to provide multiple image sources with different resolutions or pixel densities, letting the browser choose the appropriate image based on the device's display characteristics. The `srcset` attribute uses a combination of `URL` and `w` or `x` descriptors to specify the images. -> `srcset` is an HTML attribute that allows developers to provide multiple image sources with different resolutions or pixel densities and let the browser choose the appropriate image based on the device's display characteristics. The `srcset` attribute uses a combination of `URL` and either `w` or `x` descriptors to specify the images. ## Width (`w`) Descriptor -> The `w` descriptor is used to specify the width of an image in pixels. It is used when we want to provide the browser with the dimensions of an image so that it can choose the right image for the available viewport. +> The `w` descriptor is used to specify the width of an image in pixels. It is used when we want to provide the browser with the dimensions of an image so that it can choose an appropriate image for the available screen space. -> The syntax for using the `w` descriptor in `srcset` looks like this: +> The syntax for using the `w` descriptor in `srcset` is as follows: -````html +```html Example Image + alt="Example image"> ``` - - ->In the example above, we have provided the browser with three images and their corresponding widths in pixels. The browser will choose the image that has the closest width to the available viewport. +> In the above example, we have provided the browser with three images and their corresponding widths in pixels. The browser will choose the image with the closest width to the available screen space. ## Density (`x`) Descriptor -> The `x` descriptor is used to specify the pixel density of an image, which is the ratio of physical pixels to CSS pixels. It is used when we want to provide the browser with different versions of the same image with different pixel densities. +> The `x` descriptor is used to specify the pixel density of the image, which is the ratio of physical pixels to CSS pixels. It is used when we want to provide the browser with different versions of the same image with different pixel densities. -> The syntax for using the `x` descriptor in `srcset` looks like this: +> The syntax for using the `x` descriptor in `srcset` is as follows: ```html Example Image + alt="Example image"> ``` +> In the above example, we have provided the browser with three images and their corresponding pixel densities. The browser will choose the image with the closest pixel density to the device's screen. ->In the example above, we have provided the browser with three images and their corresponding pixel densities. The browser will choose the image that has the closest pixel density to the device's display. - ->Note that the `w` and `x` descriptors can be used together in the same `srcset` attribute to provide the browser with more options to choose from. +> Note that `w` and `x` descriptors can be used together in the same `srcset` attribute to provide the browser with more options to choose from. ===================== Content prompt used: @@ -60,7 +57,7 @@ Also carefully translate the title and description for the article; do not use & 2. Examples of using width and density descriptors in `srcset` Metadata returned1. Bredd- och densitetsbeskrivare -2. Exempel på användning av bredd- och densitetsbeskrivare i `srcset` +2. Exempel på att använda bredd- och densitetsbeskrivare i `srcset` Roundtrip (isolated) prompt used: diff --git a/src/content/docs/sv/breakpoints.md b/src/content/docs/sv/breakpoints.md index f3dc527..33945b9 100644 --- a/src/content/docs/sv/breakpoints.md +++ b/src/content/docs/sv/breakpoints.md @@ -1,39 +1,40 @@ --- -title: Brytpunkter & bilder -description: Varför vissa (men inte alla) brytpunkter är viktiga för dina bilder -taskInputHash: 93c856b4f6a02850 +title: Breakpoints & bilder +description: Varför vissa (men inte alla) breakpoints är viktiga för dina bilder +taskInputHash: 67fe0daf8eb1aa7c lang: sv -ignore: '/* cSpell:locale sv,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' --- ### Bakgrund -Små skärmar och stora skärmar behöver olika layouter. För `srcset` och `sizes` behöver vi veta vid vilken punkt layouten ändras. +Små skärmar och stora skärmar kräver olika layouter. För `srcset` och `sizes` behöver vi veta vid vilken punkt layouten ändras. -Webbutvecklare måste besluta vad som ska krympas, döljas eller flyttas på mindre skärmar - eller oftare, vad som ska expandera, avslöjas eller läggas till på större skärmar. De har också väldigt lite information att gå på. Är användaren på en surfplatta, eller en telefon i liggande läge - eller en liten webbläsarfönster? +Webbutvecklare måste bestämma vad som ska krympas, döljas eller flyttas på mindre skärmar - eller oftare, vad som ska expandera, avslöjas eller läggas till på större skärmar. De har också väldigt lite information att gå på. Är användaren på en surfplatta eller en telefon i liggande läge - eller en liten webbläsarfönster? -Vi måste välja en godtycklig viewport-breddenhet där layouten ändras. Detta kallas en **brytpunkt**. Det är en godtycklig siffra av CSS-pixlar ([inte enhetspixlar](/sv/pixels-not-pixels)). Polypane har en [bra artikel](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023) om vanligt använda brytpunkter. +Vi måste välja en godtycklig viewport-bredden där layouten ändras. Detta kallas en **breakpoint**. Det är ett godtyckligt antal CSS-pixlar ([inte enhetspixlar](/sv/pixels-not-pixels)). Polypane har en [fantastisk artikel](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023) om vanligt använda breakpoints. -Några bilder (som logotyper eller ikoner eller knappar) kan vara opåverkade av layoutskift som orsakas av dessa brytpunkter (och fungera bra med [srcset density descriptors](/en/density-descriptors)). +Vissa bilder (som logotyper eller ikoner eller knappar) kan vara immuna mot layoutförändringar orsakade av dessa breakpoints (och vara fina med [srcset density descriptors](/sv/density-descriptors)). -Huvudinnehållsbilder kommer att begränsas av storleken på deras behållare. Vanligtvis kommer huvudinnehållsområdet på en sida att begränsas till en viss bredd på de största skärmarna, en `max-width`, men på små skärmar kommer huvudinnehållsområdet att fylla hela viewporten. +Bilder för huvudinnehåll kommer att begränsas av storleken på deras behållare. Vanligtvis kommer huvudinnehållsområdet på en sida att begränsas till en viss bredd på större skärmar, en `max-width`, men på små skärmar kommer huvudinnehållsområdet att fylla hela viewporten. -Om du har mer än en kolumn vid vissa brytpunkter, blir det svårare att beräkna de effektiva dimensioneringsreglerna, eftersom den procentandel av viewportbredden som bilden tar upp kommer att ändras. +Om du har mer än en kolumn på vissa breakpoints blir det svårare att beräkna de effektiva storleksreglerna, eftersom andelen av viewportbredden som bilden tar upp kommer att ändras. -### Det enkla sättet +### Det lätta sättet -Med det sagt, överanalysera inte det här. Du kommer förmodligen att vara mycket OK med följande approximation: +Det sagt, överanalysera inte detta. Du kommer förmodligen vara mycket OK med följande uppskattning: -1. Vid vilken storlek slutar huvudkolumnen (eller bildens behållare) att växa? Upp till den viewportbredden, kan vi använda `100vw` för bildens storleksattribut att säga att bilden tar upp 100% av viewportens bredd. -2. Vad är den maximala bredden som behållaren någonsin uppnår? Vi kan ställa in det som en fast `bredd` för allt annat. +1. Vid vilken storlek slutar huvudkolumnen (eller bildens behållare) att växa? Upp till den viewport-bredden kan vi använda `100vw` för bilden `sizes` attribut för att säga att bilden tar upp 100% av viewportbredden. +2. Vad är den maximala bredden som behållaren någonsin uppnår? Vi kan ställa in det som en fast bredd för allt annat. -Om ditt svar på 1 var 700px och ditt svar på 2 var 800px, kan du använda följande `sizes`-attribut: +Om ditt svar på 1 var 700px och ditt svar på 2 var 800px, kan du använda följande `sizes` attribut: ```html - + ``` -> Du skulle tro att webbläsaren enkelt kan hantera alla dessa beräkningar för oss baserat på CSS:en. Tyvärr är webbläsare aggressivt angelägna om att välja en bild-URL *innan* stylesheetsen laddas ner. Så vi måste göra beräkningarna själva, och det tjänar dem rätt om vi inte får det perfekt. + + +> Du skulle kunna tro att webbläsaren kunde hantera alla dessa beräkningar snyggt åt oss baserat på CSS. Tyvärr är webbläsarna aggressivt ivriga att välja en bild-URL *innan* stylesheetsen har hämtats. Så vi måste göra beräkningarna själva, och det passar dem om vi inte får det helt rätt. diff --git a/src/content/docs/sv/browser-picks-srcset.md b/src/content/docs/sv/browser-picks-srcset.md index 865d27f..4f0627b 100644 --- a/src/content/docs/sv/browser-picks-srcset.md +++ b/src/content/docs/sv/browser-picks-srcset.md @@ -1,69 +1,68 @@ --- title: Hur webbläsaren väljer -description: Hur webbläsaren väljer mellan bilder som listas i srcset-attributet -taskInputHash: ca195aa8819f20d7 +description: Hur webbläsaren väljer mellan bilder som anges i srcset-attributet +taskInputHash: 8c5f60d1e3eafe9f lang: sv -ignore: '/* cSpell:locale sv,en*/' -date_published: '2023-03-24' -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' --- -Hur väljer webbläsaren mellan bilder som listas i `srcset`-attributet? Här är en steg-för-steg-guide, med exempel för både bredd- och densitetsspecifikationer och hur webbläsaren väljer baserat på enhet och viewport. - -- När man använder `srcset`-attributet i HTML använder webbläsaren en uppsättning regler för att välja den mest lämpliga bilden från en lista med angivna källor. Dessa regler beror på både enhetens skärminställningar (upplösning, pixeldensitet) och viewport-storlek. `Srcset`-attributet låter dig specificera olika bilder baserat på bredd (med hjälp av `w` descriptor) eller pixeldensitet (med hjälp av `x` descriptor). Låt oss gå igenom båda fallen med exempel. - -1\. Breddspecifikation (`w`): - -Antag att vi har följande `srcset`-attribut: - -```html - -Exempelbild - -``` - -Webbläsaren gör följande steg: - -a. Bestäm enhetens DPR (Device Pixel Ratio). Till exempel har en standarddisplay en DPR på 1, medan en högupplösningsskärm (Retina) har en DPR på 2 eller högre. - -b. Beräkna den effektiva bredden för varje bild i `srcset`. Multiplicera bredddescriptorn med DPR. För en enhet med en DPR på 1: - -- example-small.jpg: 400 \* 1 = 400px - -- example-medium.jpg: 800 \* 1 = 800px - -- example-large.jpg: 1600 \* 1 = 1600px - -c. Jämför de effektiva bredderna med viewport-bredden. Antag att viewport-bredden är 420px. Webbläsaren väljer den minsta bilden med en effektiv bredd som är större än eller lika med viewport-bredden. I detta fall väljer den `example-medium.jpg`. - -1\. Pixeldensitetsspecifikation (`x`): - -Antag att vi har följande `srcset`-attribut: - -```html - -Exempelbild - -``` - -Webbläsaren gör följande steg: - -a. Bestäm enhetens DPR (Device Pixel Ratio). Till exempel har en standarddisplay en DPR på 1, medan en högupplösningsskärm (Retina) har en DPR på 2 eller högre. - -b. Jämför enhetens DPR med `x`-descriptorn i `srcset`. I detta fall har vi tre bilder med följande descriptorer: - -- example-1x.jpg: 1x - -- example-2x.jpg: 2x - -- example-3x.jpg: 3x - -c. Välj bilden med `x`-descriptorn som är närmast enhetens DPR. För en enhet med en DPR på 1 väljer webbläsaren `example-1x.jpg`. För en enhet med en DPR på 2 väljer den `example-2x.jpg`, och så vidare. - -Det är viktigt att notera att du också kan använda `sizes`-attributet i kombination med `srcset`-attributet för att ge mer information om hur bilden visas vid olika viewport-breder. Detta är särskilt användbart när man använder bredddescriptor (`w`). Här är ett exempel: - -```html - -Example Image + +``` + +Webbläsaren följer dessa steg: + +a. Ta reda på enhetens DPR (Device Pixel Ratio). Till exempel har en standard-display en DPR på 1, medan en högupplöst (Retina) display har en DPR på 2 eller högre. + +b. Beräkna den effektiva bredden för varje bild i `srcset`. Multiplicera bredd-beskrivaren med DPR. För en enhet med en DPR på 1: + +- example-small.jpg: 400 \* 1 = 400px + +- example-medium.jpg: 800 \* 1 = 800px + +- example-large.jpg: 1600 \* 1 = 1600px + +c. Jämför de effektiva bredderna med vyportens bredd. Antag att vyportens bredd är 420px. Webbläsaren kommer att välja den minsta bilden med en effektiv bredd som är större än eller lika med vyportens bredd. I det här fallet kommer den att välja `example-medium.jpg`. + +2. Pixeltäthets-beskrivare (`x`): + +Anta att vi har följande `srcset`-attribut: + +```html + +Example Image + +``` + +Webbläsaren följer dessa steg: + +a. Ta reda på enhetens DPR (Device Pixel Ratio). Till exempel har en standard-display en DPR på 1, medan en högupplöst (Retina) display har en DPR på 2 eller högre. + +b. Jämför enhetens DPR med `x`-beskrivarna i `srcset`. I det här fallet har vi tre bilder med följande beskrivare: + +- example-1x.jpg: 1x + +- example-2x.jpg: 2x + +- example-3x.jpg: 3x + +c. Välj den bild med `x`-beskrivaren som är närmast enhetens DPR. För en enhet med en DPR på 1, väljer webbläsaren `example-1x.jpg`. För en enhet med en DPR på 2 väljer den `example-2x.jpg`, och så vidare. + +Det är viktigt att notera att man också kan använda `sizes`-attributet tillsammans med `srcset`-attributet för att ge mer information om hur bilden kommer att visas vid olika vyportsbredder. Detta är särskilt användbart när man använder bredd-beskrivaren (`w`). Här är ett exempel: + +```html + +En exempelbild ``` +Detta markup exempel innehåller: +- **src**: Standardbildkällan, visas om webbläsaren inte stöder srcset. +- **srcset**: Listan av bildkällor och deras densitetsbeskrivningar (1x, 2x, 3x). Webbplatsen väljer den lämpligaste bilden baserat på användarens display. +- **alt**: Beskrivning av bilden för tillgänglighetsskäl. - -Detta markupexempel inkluderar: -- **src**: Standard bildkälla som visas om webbläsaren inte stöder srcset. -- **srcset**: Listan över bildkällor och deras densitetsdescriptors (1x, 2x, 3x). Webbläsaren väljer den mest lämpliga bilden baserat på användarens skärm. -- **alt**: En beskrivning av bilden för tillgänglighetsändamål. - - -Och det är allt! Du har framgångsrikt implementerat srcset med densitetsdescriptors, vilket förbättrar din webbplats prestanda och användarupplevelse. +Och det är det! Du har nu framgångsrikt implementerat srcset med densitetsbeskrivningar, förbättrat prestandan och användarupplevelsen på din webbplats. diff --git a/src/content/docs/sv/introduction.md b/src/content/docs/sv/introduction.md index 272c473..4dc5d9a 100644 --- a/src/content/docs/sv/introduction.md +++ b/src/content/docs/sv/introduction.md @@ -1,23 +1,22 @@ --- title: srcset och sizes -description: En effektiv och tydlig guide till responsiva bilder för 2023 -taskInputHash: 87881becd1c9192b +description: En effektiv och åsiktsbaserad guide till responsiva bilder för 2023 +taskInputHash: 9073468e325bcbed lang: sv -ignore: '/* cSpell:locale sv,en*/' sidebar_sort_priority: 1000 -date_published: '2023-03-23' -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' --- -**En effektiv och bestämd guide till bilder för 2023** +**En effektiv och åsiktsbaserad guide till bilder för 2023** -Kontrollera sidofältet för en mer ingående beskrivning. Detta är snabbreferensen för att uppgradera ``-taggarna så att de kan hantera moderna enheter i alla sina olika storlekar och pixeldensiteter. Du bör veta att pixels != pixels och `devicePixelRatio` är mer troligt att vara runt 3.875 än 1:1. Moderna telefoner låtsas vara 320-428px breda för läsbarhet (i CSS-pixels), men har många enhetspixlar per CSS-pixel. +Kolla på sidofältet för mer information. Detta är en snabbreferens för att uppgradera dina ``-taggar för att hantera moderna enheter med olika storlekar och pixeldensiteter. Du bör [veta att pixels != pixels](/sv/pixels-not-pixels) och att `devicePixelRatio` är mer troligt att vara runt 3,875 än 1:1. Moderna telefoner låtsas vara 320-428px breda för läsbarhet (i CSS-pixels), men har många enhetspixlar per CSS-pixel. -> Om din bild aldrig ändrar storlek, oavsett hur smalt du gör webbläsarfönstret bör du istället använda en densitetsbeskrivning. Detta är ofta lämpligt för logotyper, ikoner och knappar. +> Om din bild aldrig ändrar storlek, oavsett hur smal du gör webbläsarfönstret, bör du istället använda en [densitetsbeskrivning](/sv/density-descriptors). Detta är ofta lämpligt för logotyper, ikoner och knappar. -Vet du vad dina breakpoints är? Du kommer att behöva dessa nummer för att finslipa lösningen nedan - och som minimum viewport width breakpoint där huvudinnehållsytan slutar växa in i bredd. +Vet du vad dina [brytpunkter](/sv/breakpoints) är? Du behöver dessa tal för att finjustera lösningen nedan - och åtminstone brytpunkten där huvudinnehållsavsnittet slutar växa. -### Den enkla metoden +### Det enkla sättet ```html @@ -30,10 +29,11 @@ Vet du vad dina breakpoints är? Du kommer att behöva dessa nummer för att fin sizes="(max-width: 700px) 100vw, 800px" alt="Hund som cyklar" /> - + - + ``` diff --git a/src/content/docs/sv/lighthouse-performance-test.md b/src/content/docs/sv/lighthouse-performance-test.md index 5c1e8f3..5871bc1 100644 --- a/src/content/docs/sv/lighthouse-performance-test.md +++ b/src/content/docs/sv/lighthouse-performance-test.md @@ -1,27 +1,24 @@ --- title: Testa prestanda med Lighthouse -description: >- - Steg för steg guide för att testa en webbplats prestanda med hjälp av - Lighthouse -taskInputHash: d9b9eb078ceeeb1f +description: Steg för steg-guide om hur du testar en webbplats prestanda med Lighthouse +taskInputHash: 034f3b9f627231a8 lang: sv -ignore: '/* cSpell:locale sv,en*/' -date_published: '2023-03-24' -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' --- Hur testar du din webbplats prestanda med Lighthouse? -> Lighthouse är ett verktyg som kan användas för att mäta prestandan, tillgängligheten och andra aspekter av en webbplats. För att testa din webbplats prestanda med Lighthouse, följ dessa steg: +> Lighthouse är ett verktyg som kan användas för att mäta prestanda, tillgänglighet och andra aspekter av en webbplats. För att testa din webbplats prestanda med Lighthouse, följ dessa steg: > > 1\. Öppna Google Chrome webbläsare och navigera till sidan du vill testa. > -> 2\. Klicka på de tre punkterna i det övre högra hörnet av webbläsarfönstret, välj sedan "Fler verktyg" och sedan "Utvecklarverktyg" eller använd helt enkelt tangentbordsgenvägen "Ctrl + Shift + I" (Windows, Linux) eller "Command + Option + I" (macOS). +> 2\. Klicka på de tre punkterna i det övre högra hörnet av webbläsarfönstret, välj sedan "Fler verktyg" och sedan "Utvecklarverktyg" eller använd helt enkelt kortkommandot "Ctrl + Shift + I" (Windows, Linux) eller "Command + Option + I" (macOS). > -> 3\. I Utvecklarverktyg panelen, klicka på Lighthouse ikonen som ligger på vänster sida av panelen eller tryck "Ctrl+Shift+P" (Windows, Linux) eller "Command+Shift+P" (macOS) för att öppna Kommando-menyn, skriv sedan "Lighthouse" och välj "Generera rapport". +> 3\. I utvecklarverktygsfönstret klicka på Lighthouse-ikonen som är placerad på vänster sida av panelen eller tryck "Ctrl + Shift + P" (Windows, Linux) eller "Command + Shift + P" (macOS) för att öppna kommandomenyn, skriv "Lighthouse" och välj "Generera rapport". > -> 4\. I Lighthouse dialogrutan, välj prestanda och andra relevanta alternativ som du vill testa, klicka sedan på "Generera rapport". +> 4\. I Lighthouse-dialogrutan, välj prestanda och andra relevanta alternativ du vill testa, klicka sedan på "Generera rapport". > -> 5\. Efter att Lighthouse har slutfört sin analys, kommer du att se en rapport med poäng och rekommendationer för att förbättra din webbplats prestanda, tillgänglighet och andra områden. +> 5\. När Lighthouse har slutfört sin analys, kommer du att se en rapport med poäng och rekommendationer för att förbättra din webbplats prestanda, tillgänglighet och andra områden. > -> Genom att följa dessa steg kan du använda Lighthouse för att testa och optimera din webbplats prestanda, vilket kan hjälpa till att förbättra dess användarupplevelse och sökmotor ranking. +> Genom att följa dessa steg, kan du använda Lighthouse för att testa och optimera din webbplats prestanda, vilket kan hjälpa till att förbättra dess användarupplevelse och sökmotoroptimering. diff --git a/src/content/docs/sv/picture-examples.md b/src/content/docs/sv/picture-examples.md index 0b07de6..3e4bb86 100644 --- a/src/content/docs/sv/picture-examples.md +++ b/src/content/docs/sv/picture-examples.md @@ -1,14 +1,13 @@ --- title: Exempel med -elementet description: >- - Ger exempel på användning av -elementet för responsiva bilder, - konstnärlig riktning och olika bildformat -taskInputHash: d2042ff600a5ac1a + Tillhandahåller exempel med -elementet, för responsiva bilder, + bildreglering och olika bildformat +taskInputHash: 2be3dc0822137e26 lang: sv -ignore: '/* cSpell:locale sv,en*/' -date_published: '2023-03-24' -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' --- Här är några exempel på hur man använder ``-elementet och deras förklaringar: @@ -22,9 +21,9 @@ Här är några exempel på hur man använder ``-elementet och deras f ``` -Förklaring: I det här exemplet används ``-elementet för att tillhandahålla olika bildkällor för olika skärmstorlekar. ``-elementen specifierar de olika bildkällorna genom att använda attributet "srcset" och "media" för att specificera villkoren under vilka varje källa ska användas. ``-elementet används som en fallback för äldre webbläsare eller när villkoren som specificerats i ``-elementen inte uppfylls. +Förklaring: I det här exemplet används ``-elementet för att tillhandahålla olika bildkällor för olika skärmstorlekar. ``-elementen specificerar de olika bildkällorna med hjälp av attributen "srcset" och "media" för att specificera villkoren under vilka varje källa ska användas. ``-elementet används som reserv för äldre webbläsare eller när villkoren som specificerats i ``-elementen inte uppfylls. -2\. Exempel på konstnärlig riktning: +2\. Exempel på bildreglering: ```html @@ -34,9 +33,9 @@ Förklaring: I det här exemplet används ``-elementet för att tillhan ``` -Förklaring: I det här exemplet används ``-elementet för att tillhandahålla olika bildkällor beroende på enhetens orientering. ``-elementet med attributet "media" satt till "(orientation: landscape)" specifierar en bildkälla för breda skärmar, medan ``-elementet specifierar en bildkälla för porträttskärmar. +Förklaring: I det här exemplet används ``-elementet för att tillhandahålla olika bildkällor beroende på enhetens orientering. ``-elementet med attributet "media" satt till "(orientation: landscape)" specificerar en bildkälla för breda skärmar, medan ``-elementet specificerar en bildkälla för porträttskärmar. -3\. Exempel för olika bildformat: +3\. Exempel på olika bildformat: ```html @@ -48,12 +47,12 @@ Förklaring: I det här exemplet används ``-elementet för att tillhan ``` -Förklaring: I det här exemplet används ``-elementet för att tillhandahålla olika bildkällor för olika bildformat. ``-elementen specifierar olika bildkällor genom att använda attributen "srcset" och "type" för att specificera bildformatet. ``-elementet används som en fallback för äldre webbläsare som inte stödjer ``-elementet. +Förklaring: I det här exemplet används ``-elementet för att tillhandahålla olika bildkällor för olika bildformat. ``-elementen specificerar olika bildkällor med hjälp av attributen "srcset" och "type" för att specificera bildformatet. ``-elementet används som reserv för äldre webbläsare som inte stödjer ``-elementet. ## Brytpunkter -I responsiv design används brytpunkter för att definiera när layouten på en webbplats eller applikation ska ändras baserat på storleken på viewporten. Brytpunkter definieras vanligtvis med hjälp av media queries i CSS, som tillämpar olika stilar beroende på skärmens bredd. Dessa brytpunkter kan användas i kombination med ``-elementet för att tillhandahålla olika bildkällor för olika skärmstorlekar. +I responsiv design används brytpunkter för att definiera när layouten på en webbplats eller applikation ska ändras baserat på storleken på viewporten. Brytpunkter definieras vanligtvis med hjälp av media queries i CSS, som tillämpar olika stilar beroende på skärmens bredd. Dessa brytpunkter kan användas tillsammans med ``-elementet för att tillhandahålla olika bildkällor för olika skärmstorlekar. -Till exempel använde vi i det första exemplet ovan `media`-attributet för att specificera skärmens bredd under vilken varje källa ska användas. När skärmbredden är större än eller lika med 768 pixlar, används källan `image-large.jpg`; när skärmbredden är större än eller lika med 480 pixlar men mindre än 768 pixlar, används källan `image-medium.jpg`; och när skärmbredden är mindre än 480 pixlar, används källan `image-small.jpg`. Detta gör det möjligt för oss att servera lämpligt storleksanpassade bilder för varje enhet, vilket minskar sidladdningstider och förbättrar användarupplevelsen. +Som exempel använde vi `media`-attributet i det första exemplet ovan för att ange skärmens bredd under vilken varje källa ska användas. När skärmens bredd är större än eller lika med 768 pixlar kommer källan `image-large.jpg` att användas; när skärmens bredd är större än eller lika med 480 pixlar men mindre än 768 pixlar kommer källan `image-medium.jpg` att användas; och när skärmens bredd är mindre än 480 pixlar vil källan `image-small.jpg` att användas. Detta gör det möjligt för oss att servera lämpligt storleksanpassade bilder för varje enhet, vilket minskar sidbelastningstider och förbättrar användarupplevelsen. -Brytpunkter kan definieras vid vilken skärmstorlek som helst, och flera brytpunkter kan användas för att skapa layouter som svarar på ett brett utbud av enheter. Genom att kombinera brytpunkter med ``-elementet kan du skapa flexibla och responsiva design som ser bra ut på alla enheter. +Brytpunkter kan definieras vid en vilken skärmstorlek som helst, och flera brytpunkter kan användas för att skapa layouter som svarar på en bred skala av enheter. Genom att kombinera brytpunkter med ``-elementet kan du skapa flexibla och responsiva design som ser bra ut på en vilken enhet som helst. diff --git a/src/content/docs/sv/pixels-not-pixels.md b/src/content/docs/sv/pixels-not-pixels.md index dc3ed90..77b584d 100644 --- a/src/content/docs/sv/pixels-not-pixels.md +++ b/src/content/docs/sv/pixels-not-pixels.md @@ -1,20 +1,19 @@ --- title: px ≠ pixlar -description: Enhet px ≠ webbläsare px ≠ bild px -taskInputHash: 2b5adfa6783beef0 +description: Enhet-pixlar ≠ webbläsarpx ≠ bildpx +taskInputHash: 49c85f11bddeb9d6 lang: sv -ignore: '/* cSpell:locale sv,en*/' sidebar_sort_priority: 900 -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' --- -### Enhet pixlar ≠ webbläsare px ≠ bild px +### Enhet pixlar ≠ webbläsarpx ≠ bildpx -Tack vare Apple mappar CSS och HTML pixlar (`px`) **nästan alltid mot flera enhets-/skrivar-pixlar**. devicePixelRatio på min telefon är 3,875; [vad är din?](https://www.mydevice.io/) +Tack vare Apple, kartlägger CSS- och HTML-pixlar (`px`) **nästan alltid flera enhet-/skrivarpixlar**. devicePixelRatio på min mobiltelefon är 3.875; [vad är din?](https://www.mydevice.io/) -min desktop devicePixelRatio ändras med webbläsar-zoomet, men är standard på 1,5 (eftersom min `System > Display > Scale` är 150%). +min desktop enhetPixelRatio ändras på webbläsarzoom, men standardvärdet är 1,5 (min `System > Display > Scale` är 150%, trots allt). -Bildfiler (exklusive SVG) avkodas till en matris av pixlar. **Det är irriterande svårt att få bildpixlar att visas perfekt i 1:1-förhållande med enhetspixel - men med `srcset` kan du komma *tillräckligt nära***, och lite Javascript kan justera html-elementets storlek efter laddning om du har verkligt motiverade skäl för att behöva den perfekta matchningen, även om sådana förbjudna konster inte avslöjas här. +Bildfiler (exklusive SVG) avkodas till ett rutnät av pixlar. **Det är irriterande svårt att få bildpixlar att visas perfekt i en 1:1-ratio med enhetspixel - men med `srcset` kan du komma till *nästan lika* bra**, och lite JavaScript kan justera HTML-elementstorleken efter inläsningen om du har verkligt motiverade skäl för att behöva den perfekta kartläggningen, även om sådana förbjudna konster inte kommer att avslöjas här. -> Andra absoluta [enheter (in, pc, pt, mm, cm, Q)](https://developer.mozilla.org/en-US/docs/Web/CSS/length) definieras i termer av antalet CSS-pixlar och låtsas att allt är 96 dpi. Utvecklare undviker absoluta enheter eftersom det brukar vara bättre att använda enheter som härstammar från teckenstorleken eller från viewport-/behållar-dimensionerna. Felaktiga enheter kan bryta en layout om användaren justerar sin `Accessibility > Text Size`-multiplikator, zoomar webbläsaren eller roterar sin enhet. Det behöver inte sägas att du bör göra alla dessa saker innan du lanserar din webbplats. +> Andra absoluta [enheter (in, pc, pt, mm, cm, Q)](https://developer.mozilla.org/sv-SE/docs/Web/CSS/length) definieras i termer av antal CSS-pixlar och låtsas att allt är 96 dpi. Utvecklare undviker absoluta enheter eftersom det oftast är bättre att använda enheter som härleds från teckenstorleken eller gränssnitts-/behållardimensioner. Enhetsskillnader kan bryta en layout om användaren justerar sin `Tillgänglighet > Textstorlek`-multiplikator, zoomar webbläsaren eller roterar sin enhet. Självklart bör du göra alla dessa saker innan du publicerar din webbplats. diff --git a/src/content/docs/sv/specify-width-height.md b/src/content/docs/sv/specify-width-height.md index f91261f..5a5fb14 100644 --- a/src/content/docs/sv/specify-width-height.md +++ b/src/content/docs/sv/specify-width-height.md @@ -1,17 +1,16 @@ --- title: Använd bredd och höjd -description: Fördelarna med att använda bredd och höjd-attribut i HTML-kod -taskInputHash: ce0d1fb3ed0bb779 +description: Fördelarna med att använda bredd- och höjdattribut i HTML-koden +taskInputHash: fbee33d6919f5c1d lang: sv -ignore: '/* cSpell:locale sv,en*/' -date_published: '2023-03-24' -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' --- -Varför ska man lägga till bredd och höjd i HTML-koden? +Varför ska du sätta bredd och höjd i HTML-koden? -> Det rekommenderas att lägga till bredd och höjd-attribut i HTML-koden för bilder eftersom det hjälper webbläsaren att veta hur stor bilden är innan den har laddats helt. Detta gör att webbläsaren kan reservera lämpligt utrymme på webbsidan för bilden, vilket förhindrar att innehållet hoppar runt när bilden laddas. +> Det rekommenderas att sätta bredd- och höjdattribut i HTML-koden för bilder eftersom det hjälper webbläsaren att känna till bildens storlek innan den är helt laddad. Detta gör att webbläsaren kan reservera rätt mängd utrymme på webbsidan för bilden, vilket förhindrar att innehållet hoppar runt när bilden laddas. > -> Dessutom kan att specificera bredd- och höjd-attribut för bilder också hjälpa till att förbättra prestandan för webbsidan som helhet. När en webbläsare känner till storleken på en bild i förväg kan den mer noggrant beräkna mängden utrymme som behövs för att visa bilden och undvika onödiga omladdningar eller omritningar av innehållet när det laddas. +> Dessutom kan att specificera bredd- och höjdattribut för bilder också hjälpa till att förbättra den övergripande prestandan på webbsidan. När en webbläsare känner till storleken på en bild i förväg kan den mer noggrant beräkna mängden utrymme som behövs för att visa bilden och undvika onödiga flöden eller omritningar av innehållet när det laddas. > -> Sammantaget kan användningen av bredd- och höjd-attribut i HTML-koden för bilder förbättra användarupplevelsen genom att göra innehållet laddas snabbare och minska visuella fel. +> Sammantaget kan användningen av bredd- och höjdattribut i HTML-koden för bilder förbättra användarupplevelsen genom att göra innehållet lastas snabbare och reducera visuella fel. diff --git a/src/content/docs/sv/when-to-use-picture.md b/src/content/docs/sv/when-to-use-picture.md index 30d4794..8674431 100644 --- a/src/content/docs/sv/when-to-use-picture.md +++ b/src/content/docs/sv/when-to-use-picture.md @@ -1,22 +1,22 @@ --- -title: När du ska använda -elementet -description: Förklarar i vilka situationer du bör använda -elementet -taskInputHash: be2190453a34daf1 +title: När man ska använda elementet +description: Förklarar i vilka situationer du bör använda -elementet +taskInputHash: 22cea24f0bea57f5 lang: sv -ignore: '/* cSpell:locale sv,en*/' -date_published: '2023-03-27' -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' --- -Elementet `picture` används för att tillhandahålla flera versioner av en bild och avgör vilken version av bilden som ska visas baserat på vissa villkor. Det är särskilt användbart för att optimera bilder för olika skärmstorlekar och upplösningar och används ofta i responsiv webbdesign. -Här är några specifika scenarier där du kan vilja använda `picture`-elementet: +Elementet `bild` används för att tillhandahålla flera versioner av en bild och bestämmer vilken version av bilden som ska visas baserat på vissa villkor. Det är särskilt användbart för att optimera bilder för olika skärmstorlekar och upplösningar och används vanligtvis i responsiv webbdesign. -* **Retina-skärmar:** Skärmar med hög densitet som Apples Retina-skärmar har högre pixeltäthet, vilket innebär att bilder kan se suddiga eller pixelerade ut om de inte är optimerade för hög upplösning. Med `picture`-elementet kan du tillhandahålla en version av bilden som har dubbelt så många pixlar som den vanliga versionen, så att den ser skarp och tydlig ut på Retina-skärmar. +Här är några specifika scenarier där du kanske vill använda `bild`-elementet: -* **Olika bildformat:** Om du utformar en webbplats som behöver visa bilder med olika bildförhållanden (t.ex. liggande eller stående), kan du använda `picture`-elementet för att tillhandahålla olika versioner av bilden som är optimerade för varje bildförhållande. +* **Retina-displayer:** Skärmar med hög densitet som Apples Retina-displayer har en högre pixeldensitet, vilket innebär att bilder kan se suddiga eller pixelerade ut om de inte är optimerade för hög upplösning. Med `bild`-elementet kan du tillhandahålla en version av bilden som har dubbelt så många pixlar som normalversionen, så den ser skarp och tydlig ut på Retina-displayer. -* **Bandbreddsbegränsningar:** Bilder kan vara stora filer som tar upp mycket bandbredd, särskilt på mobila enheter. Med `picture`-elementet kan du tillhandahålla mindre versioner av bilden för enheter med mindre skärmar eller långsammare internetanslutningar, vilket kan hjälpa till att minska sidlastningstiderna. +* **Olika bildformat:** Om du designar en webbplats som behöver visa bilder med olika bildformat (som landskap vs. porträtt), kan du använda `bild`-elementet för att tillhandahålla olika versioner av bilden som är optimerade för varje bildformat. -* **Konstnärlig layout:** Ibland vill du kanske presentera en bild på ett visst sätt beroende på layouten för resten av sidan. Till exempel kan du vill visa en närbild av en persons ansikte på mobila enheter, men en bredare bild på stationära enheter. `Picture`-elementet låter dig tillhandahålla olika versioner av bilden som är optimerade för olika layouter. +* **Bandbreddsgränser:** Bilder kan vara stora filer som tar upp mycket bandbredd, särskilt på mobila enheter. Med `bild`-elementet kan du tillhandahålla mindre versioner av bilden för enheter med mindre skärmar eller långsammare internetanslutningar, vilket kan hjälpa till att minska sidladdningstiderna. -Sammanfattningsvis är `picture`-elementet ett kraftfullt verktyg som kan hjälpa dig att optimera dina bilder för olika användningsområden och se till att de ser bra ut oavsett vilken enhet eller skärmstorlek de visas på. +* **Art-dirigerade layouter:** Ibland vill du kanske visa en bild på ett visst sätt beroende på layouten för resten av sidan. Till exempel kan du vilja visa en närbild av en persons ansikte på mobila enheter, men en bredare bild på stationära enheter. `Bild`-elementet gör det möjligt att tillhandahålla olika versioner av bilden som är optimerade för olika layouter. + +Övergripande sett är `bild`-elementet ett kraftfullt verktyg som kan hjälpa dig att optimera dina bilder för en mängd olika användningsfall och se till att de ser bra ut oavsett vilken enhet eller skärmstorlek de visas på. diff --git a/src/content/docs/sv/width-density.md b/src/content/docs/sv/width-density.md index 4907c29..124eb0b 100644 --- a/src/content/docs/sv/width-density.md +++ b/src/content/docs/sv/width-density.md @@ -1,23 +1,23 @@ --- title: Bredd- och densitetsbeskrivare -description: Exempel på användning av bredd- och densitetsbeskrivare i `srcset` -taskInputHash: de07e2c59a8993ce +description: Exempel på att använda bredd- och densitetsbeskrivare i `srcset` +taskInputHash: 788dd1b49d02d6e5 lang: sv -ignore: '/* cSpell:locale sv,en*/' -date_published: '2023-03-24' -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' --- -Förståelse för bredd (w) och densitet (x) deskriptorer i `srcset`. Använd exempel och använd markdown. +Förståelse av bredd (w) och densitet (x) beskrivare i `srcset`. Använd exempel och använd Markdown. + +>`srcset` är en HTML-attribut som låter utvecklare tillhandahålla flera bildkällor med olika upplösningar eller pixeldensiteter, och låt webbläsaren välja den lämpliga bilden baserat på enhetens displayegenskaper. `srcset`-attributet använder en kombination av `URL` och `w` eller `x` beskrivare för att ange bilderna. -> `srcset` är en HTML-attribut som tillåter utvecklare att tillhandahålla flera bildkällor med olika upplösningar eller pixeldensiteter och låta webbläsaren välja den lämpliga bilden baserad på enhetens visningskaraktär. `srcset` attributen använder en kombination av `URL` och `w` eller `x` beskrivare för att specificera bilderna. ## Bredd (`w`) Beskrivare -> Beskrivaren `w` används för att specificera bredden på en bild i pixlar. Den används när vi vill tillhandahålla webbläsaren med dimensionerna på en bild så att den kan välja rätt bild för den tillgängliga skärmutrymmet. +> `w`-beskrivaren används för att ange bredden på en bild i pixlar. Den används när vi vill ge webbläsaren dimensionerna på en bild så att den kan välja lämplig bild för den tillgängliga skärmytan. -> Syntaxen för att använda beskrivaren `w` i `srcset` ser ut som följer: +> Syntaxen för att använda `w`-beskrivaren i `srcset` är följande: -````html +```html ``` - - -> I exemplet ovan har vi tillhandahållit webbläsaren med tre bilder och deras motsvarande bredder i pixlar. Webbläsaren kommer att välja bilden som har den närmaste bredden till det tillgängliga skärmutrymmet. +> I exemplet ovan har vi tillhandahållit webbläsaren tre bilder och deras motsvarande bredder i pixlar. Webbläsaren kommer att välja bilden med den närmaste bredden till den tillgängliga skärmytan. ## Densitet (`x`) Beskrivare -> Beskrivaren `x` används för att specificera pixeldensiteten på en bild, vilket är proportionen mellan fysiska pixlar och CSS-pixlar. Den används när vi vill tillhandahålla webbläsaren olika versioner av samma bild med olika pixeldensiteter. +> `x`-beskrivaren används för att ange bildens pixeldensitet, vilket är förhållandet mellan fysiska pixlar och CSS-pixlar. Den används när vi vill tillhandahålla webbläsaren olika versioner av samma bild med olika pixeldensiteter. -> Syntaxen för att använda beskrivaren `x` i `srcset` ser ut som följer: +> Syntaxen för att använda `x`-beskrivaren i `srcset` är följande: ```html Exempelbild ``` +> I exemplet ovan har vi tillhandahållit webbläsaren tre bilder och deras motsvarande pixeldensiteter. Webbläsaren kommer att välja bilden med den närmaste pixeldensiteten till enhetens skärm. -> I exemplet ovan har vi tillhandahållit webbläsaren med tre bilder och deras motsvarande pixeldensiteter. Webbläsaren kommer att välja bilden som har den närmaste pixeldensiteten till enhetens skärm. - -> Observera att beskrivarna `w` och `x` kan användas tillsammans i samma `srcset` attribut för att tillhandahålla webbläsaren fler alternativ att välja mellan. +> Observera att `w`- och `x`-beskrivare kan användas tillsammans i samma `srcset`-attribut för att tillhandahålla webbläsaren fler alternativ att välja mellan. diff --git a/src/content/docs/zh/_roundtrip_breakpoints.txt b/src/content/docs/zh/_roundtrip_breakpoints.txt index cc20524..634143f 100644 --- a/src/content/docs/zh/_roundtrip_breakpoints.txt +++ b/src/content/docs/zh/_roundtrip_breakpoints.txt @@ -1,42 +1,41 @@ --- title: Breakpoints and Images description: Why some (but not all) breakpoints affect your images -taskInputHash: e220f548add04019 +taskInputHash: 32b3202b064608d3 lang: en -ignore: '/* cSpell:locale zh,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 large screens require different layouts. To use `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 when the layout changes. -Web developers must decide what content to shrink, hide, or reposition on smaller screens, or more commonly, what content to expand, reveal, or add on larger screens. However, they have very little information to go on. Is the user on a tablet, a landscape phone, or a small browser window? +Web developers must decide what to shrink, hide, or rearrange on smaller screens, or what to expand, show, or add on larger screens, or most commonly, for what size screen? Are users on a tablet in landscape mode, on a phone, or using a small browser window? -We have to pick an arbitrary viewport width at which layouts change. This is called a **breakpoint**. It's an arbitrary number of CSS pixels (not device 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. +We must choose an arbitrary viewport width to change the layout. These are called **breakpoints**. They are an arbitrary number based on CSS pixels ([not device pixels](/en-US/pixels-not-pixels)). Polypane discusses common breakpoints in their [blog post](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023). -Some images, like logos, icons, or buttons, might be exempt from layout shifts caused by these breakpoints (and can use [srcset density descriptors](/density-descriptors)). +Some images, such as logos, icons, or buttons, might not be affected by the layout shift caused by these breakpoints (and can use [srcset density descriptors](/en-US/density-descriptors)). -Main content images will be constrained by their container size. Typically, a page's main content area will be limited to a width on larger screens, i.e. `max-width`, but on smaller screens, the main content area will fill the entire viewport. +Main content images will be limited by the size of their container. Typically, the main content area of a page is limited to a certain width, or `max-width`, on larger screens, but the main content area will fill the viewport on smaller screens. -If there are multiple columns at some breakpoints, calculating effective sizing rules will become more difficult, as the percentage of the viewport width that images occupy will change. +If there are multiple columns at some breakpoints, computing the effective size rules can become more difficult because the percentage of the viewport width occupied by an image will change. -### A simple approach +### Simple approach -That being said, don't overthink it. You might be perfectly happy with these approximations: +That said, don’t sweat the details too much. You might get away with approximations like: -1. At what viewport width does the main column (or image container) stop growing? Within that viewport width range, we can use `100vw` as the `sizes` value for the image, meaning the image takes up 100% of the entire viewport width. -2. What is the container's maximum width? We can set that to a fixed `width` for everything else. +1. At what size does the main column (or the container for the image) stop growing? Within that viewport width range, we can use `100vw` in the `sizes` attribute for the image to take up the entire viewport width. +2. What is the maximum width that the container will achieve? We can set this fixed `width` for all other parts. -For example, if your answer to the first step is 700 pixels and your answer to the second step is 800 pixels, you can use the following `sizes` attribute: +If your answers were 700px for 1, and 800px for 2, then you can use the following `sizes` attribute: ```html - + ``` -> You might think the browser can handle all these calculations for us nicely based on CSS. Unfortunately, browsers are too eager to *prefetch* the image URL before they download the style sheet. So, we have to do the calculations ourselves, and blame them if we get it wrong. +> You might think the browser can handle all of these calculations nicely based on the CSS. Unfortunately, the browser eagerly chooses the image URL before the style sheets are downloaded. So, we have to do these calculations ourselves and if we can’t handle them perfectly, then so be it. ===================== Content prompt used: @@ -49,7 +48,7 @@ Also carefully translate the title and description for the article; do not use & 1. Breakpoints & images 2. Why some (but not all) breakpoints matter for your images -Metadata returned1. 断点和图像 +Metadata returned1. 断点与图像 2. 为什么您的图像会受到某些（但不是全部）断点的影响 diff --git a/src/content/docs/zh/_roundtrip_browser-picks-srcset.txt b/src/content/docs/zh/_roundtrip_browser-picks-srcset.txt index 40b2f43..0af52ec 100644 --- a/src/content/docs/zh/_roundtrip_browser-picks-srcset.txt +++ b/src/content/docs/zh/_roundtrip_browser-picks-srcset.txt @@ -1,14 +1,17 @@ --- -title: How Browsers Choose Images -description: How browsers choose images in the `srcset` attribute -taskInputHash: 4f3d39e70c9edd79 +title: How Browsers Choose +description: How browsers choose images from a list in the `srcset` attribute +taskInputHash: 20629ee8e7bb7636 lang: en +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -How do browsers choose images in the `srcset` attribute? Here is a step-by-step explanation, including examples for width and density specifications based on devices and viewport. +How do browsers choose images from a list provided in the `srcset` attribute? Here's a step-by-step explanation that includes examples for both width and density specifications, as well as how browsers make decisions based on devices and viewports. -- When using the `srcset` attribute in HTML, the browser uses a set of rules to choose the most appropriate image from the provided list of sources. These rules depend on the display characteristics of the device (resolution, pixel density) and viewport size. 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 take a look at each case with examples. +- When using the `srcset` attribute in HTML, browsers use a series of rules to choose the most appropriate image from the provided source list. These rules depend on the device's display characteristics (resolution, pixel density) and the viewport size. 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 look at examples for each case. -1. Width descriptor (`w`): +1. Width Descriptor (`w`): Assuming we have the following `srcset` attribute: @@ -18,11 +21,11 @@ Assuming we have the following `srcset` attribute: ``` -The browser will follow these steps: +The browser will perform the following steps: -a. Determine the DPR (device pixel ratio) of the device. For example, the DPR for a standard display is 1, while the DPR for high-resolution (Retina) displays is 2 or higher. +a. Determine the device's DPR (device pixel ratio). For example, a standard display has a DPR of 1, while high-resolution (Retina) displays have a DPR of 2 or higher. -b. Calculate the effective width of each image in the `srcset`. Multiply the width descriptor by the DPR. For a device with DPR of 1: +b. Calculate the effective width for each image in the `srcset`. Multiply the width descriptor by the DPR. For devices with a DPR of 1: - example-small.jpg: 400 * 1 = 400px @@ -30,9 +33,9 @@ b. Calculate the effective width of each image in the `srcset`. Multiply the wid - example-large.jpg: 1600 * 1 = 1600px -c. Compare the effective width 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`. +c. Compare the effective width to the viewport width. Assuming a viewport width of 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`. -2. Pixel density descriptor (`x`): +2. Pixel Density Descriptor (`x`): Assuming we have the following `srcset` attribute: @@ -42,11 +45,11 @@ Assuming we have the following `srcset` attribute: ``` -The browser will follow these steps: +The browser will perform the following steps: -a. Determine the DPR of the device. For example, the DPR for a standard display is 1, while the DPR for high-resolution (Retina) displays is 2 or higher. +a. Determine the device's DPR. For example, a standard display has a DPR of 1, while high-resolution (Retina) displays have 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 device's DPR to the `x` descriptor in the `srcset`. In this case, we have three images with the following descriptors: - example-1x.jpg: 1x @@ -54,9 +57,9 @@ b. Compare the device's DPR with the `x` descriptors in the `srcset`. In this ca - example-3x.jpg: 3x -c. Choose the image with the `x` descriptor closest to the device's DPR. For a device with DPR of 1, the browser will choose `example-1x.jpg`. For a device with DPR of 2, it will choose `example-2x.jpg` and so on. +c. Choose the image with an `x` descriptor closest to the device's DPR. 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. -Note that you can also use the `sizes` attribute in conjunction with the `srcset` attribute to provide more information on how images should be displayed at different viewport widths. This is particularly useful when using the width descriptor (`w`). Here is an example: +Note that you can also use the `sizes` attribute in conjunction with the `srcset` attribute to provide more information about how the images should be displayed at different viewport widths. This is especially useful when using the width descriptor (`w`). Here's an example: ```html @@ -75,8 +78,8 @@ Also carefully translate the title and description for the article; do not use & 1. How the browser chooses 2. How the browser chooses between images listed in the srcset attribute -Metadata returned1. 浏览器如何选择图像 -2. 浏览器如何在`srcset`属性中选择图片 +Metadata returned1. 浏览器如何选择 +2. 浏览器如何在`srcset`属性中选择列表中的图像 Roundtrip (isolated) prompt used: diff --git a/src/content/docs/zh/_roundtrip_density-descriptors.txt b/src/content/docs/zh/_roundtrip_density-descriptors.txt index 0718fc6..619ae54 100644 --- a/src/content/docs/zh/_roundtrip_density-descriptors.txt +++ b/src/content/docs/zh/_roundtrip_density-descriptors.txt @@ -1,37 +1,36 @@ --- -title: Density Descriptors and srcset -description: Example usage of density descriptors in `srcset` -taskInputHash: b82d9308b6826856 +title: Density Descriptors and Srcset +description: Example use of density descriptors in `srcset` +taskInputHash: 5b1dfe8091bb672a lang: en -ignore: '/* cSpell:locale zh,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 way to provide the most appropriate image for each user's device, improving performance and user experience. This guide will walk you through using srcset with density descriptors and provide you with markup examples. +Srcset and density descriptors provide a simple and effective way to serve the most appropriate image to each user's device, improving performance and user experience. This guide will introduce you to the basics of using srcset with density descriptors and provide markup examples. ## What is Srcset with Density Descriptors? -Srcset is an HTML attribute designed to allow you to specify multiple image sources for a single `` element. Density descriptors (`x`) are used in conjunction with srcset to provide images of different resolutions based on the user's display pixel density. +Srcset is an HTML attribute designed to allow you to specify multiple image sources for a single `` element. Density descriptors (`x`) are used with srcset to provide images of different resolutions according to the pixel density of the user's display. ## When to Use Srcset with Density Descriptors -Srcset with density descriptors is especially useful in the following scenarios: +Srcset with density descriptors are particularly useful when you want to: -1. Providing high-resolution images for high-DPI displays such as Retina displays, while providing low-resolution images for standard displays. -2. Improving page performance by providing the most suitable image size for each user's device. +1. provide high-resolution images to high-DPI displays (such as retina displays) while also providing low-resolution images to standard displays. +2. improve page performance by serving the most appropriate image size to each user's device. ## Implementing Srcset with Density Descriptors To use srcset with density descriptors, follow these steps: -1. Prepare your images at different resolutions. -2. Add the `srcset` attribute to the `` element, including the image sources and their corresponding density descriptors. -3. (Optional) Add the `sizes` attribute to specify how the image will be displayed on the screen. +1. Prepare images of different resolutions. +2. Add the `srcset` attribute to your `` element, including image sources and their corresponding density descriptors. +3. Add the `sizes` attribute (optional) to specify the size that the image should be displayed on the screen. ### Markup Example -Here is an example of how to implement srcset with density descriptors in your markup: +Here's an example of how to use srcset with density descriptors in markup: ```html sizes -description: Efficient and subjective guide to responsive images in 2023 -taskInputHash: ff8b517c77f33d91 +title: srcset and size +description: An efficient and insightful 2023 responsive image guide +taskInputHash: 508db0f0818d638b lang: en -ignore: '/* cSpell:locale zh,en*/' sidebar_sort_priority: 1000 -date_published: '2023-03-23' -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' --- -**Efficient and subjective guide to images in 2023** - -For an in-depth understanding, check out the sidebar. This is a quick reference for upgrading those `` tags to handle various sizes and pixel densities of modern devices. You should [know that pixels aren't pixels](/en/pixels-not-pixels), and that `devicePixelRatio` is more likely to be 3.875 than 1:1. Modern phones pretend to be between 320-428px wide (in CSS pixels) for legibility, but many device pixels support each CSS pixel. - -> If your image will never change size no matter how narrow the browser window is, use [density descriptors](/en/density-descriptors) instead. This usually applies to logos, icons, and buttons. - -Do you know your [breakpoints](/en/breakpoints)? You need these numbers to fine-tune the solutions below - at minimum the viewport width breakpoint where the main content area stops growing. - - -### Simple - -```html - -dog riding bike - - - - +**An efficient and insightful 2023 image guide** + +See the sidebar for a deeper dive. This is a quick reference for upgrading `` tags that adapt to modern devices and their myriad sizes and pixel densities. You should [know that pixels != pixels](/en/pixels-not-pixels), and `devicePixelRatio` is more likely to be 3.875 than 1:1. Modern phones pretend to be 320-428 pixels wide in CSS pixels for legibility but have many device pixels for each CSS pixel. + +> If your images will never change size no matter how much the browser window is shrunk, you should use [density descriptors](/en/density-descriptors). This is usually appropriate for logos, icons, and buttons. + +Do you know what your [breakpoints](/en/breakpoints) are? You'll need those numbers to fine-tune the solutions below – at least the viewport width breakpoint where the main content area stops growing. + + +### Simple method + +```html + +Dog riding a bike + + + + ``` ===================== @@ -48,8 +47,8 @@ Also carefully translate the title and description for the article; do not use & 1. srcset & sizes 2. An Efficient and Opinionated Guide to Responsive Images for 2023 -Metadata returned1. srcset 和 sizes -2. 2023 年响应式图像的高效且主观的指南 +Metadata returned1. srcset 和大小 +2. 一个高效且有见解的2023年响应式图像指南 Roundtrip (isolated) prompt used: diff --git a/src/content/docs/zh/_roundtrip_lighthouse-performance-test.txt b/src/content/docs/zh/_roundtrip_lighthouse-performance-test.txt index a0c51f3..10a93fc 100644 --- a/src/content/docs/zh/_roundtrip_lighthouse-performance-test.txt +++ b/src/content/docs/zh/_roundtrip_lighthouse-performance-test.txt @@ -1,28 +1,27 @@ --- title: Testing Website Performance with Lighthouse -description: Steps for testing website performance using Lighthouse -taskInputHash: 2da1cc6b426bea24 +description: Steps for testing website performance with Lighthouse +taskInputHash: e3a6a4766e302363 lang: en -ignore: '/* cSpell:locale zh,en*/' -date_published: '2023-03-24' -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' --- -How to test your website performance using Lighthouse? +How to Test Website Performance with Lighthouse? -> Lighthouse is a tool for measuring website performance, accessibility, and other aspects. To use Lighthouse to test your website's performance, follow these steps: +> Lighthouse is a tool that can be used to measure website performance, accessibility, and other aspects. To test your website's performance with Lighthouse, follow these steps: > > 1. Open the Google Chrome web browser and go to the page you want to test. > -> 2. Click the three dots in the top right corner of the browser window and select "More tools" and then "Developer tools" or use the keyboard shortcut "Ctrl+Shift+I" (Windows, Linux) or "Command+Option+I" (macOS). +> 2. Click on the three dots in the upper right corner of the browser window, then select "More tools" and then "Developer tools," or use the keyboard shortcut "Ctrl+Shift+I" (Windows, Linux) or "Command+Option+I" (macOS). > -> 3. In the Developer Tools panel, click the Lighthouse icon on the left-hand side of the panel, or press "Ctrl+Shift+P" (Windows, Linux) or "Command+Shift+P" (macOS) to open the command menu, then type "Lighthouse" and select "Generate report". +> 3. In the developer tools panel, click on the Lighthouse icon located on the left side of the panel, or use the keyboard shortcut "Ctrl+Shift+P" (Windows, Linux) or "Command+Shift+P" (macOS) to open the command menu, then type "Lighthouse" and select "Generate report." > -> 4. In the Lighthouse dialog box, select the performance and other relevant options you want to test, and click "Generate report". +> 4. In the Lighthouse dialog box, select the performance and other relevant options you want to test, and then click on "Generate report." > -> 5. Once Lighthouse has finished analyzing, you will see a report that includes suggestions and ratings for improving your website's performance, accessibility, and other areas. +> 5. When Lighthouse completes its analysis, you will see a report that includes scores and suggestions on how to improve your website's performance, accessibility, and more. > -> By following these steps, you can use Lighthouse to test and optimize your website's performance, which can help improve its user experience and search engine rankings. +> By following these steps, you can use Lighthouse to test and optimize your website's performance, helping to improve user experience and search engine rankings. ===================== Content prompt used: @@ -35,7 +34,7 @@ Also carefully translate the title and description for the article; do not use & 1. Test performance with Lighthouse 2. Steps on how to test a website's performance using Lighthouse -Metadata returned1. 通过 Lighthouse 测试性能 +Metadata returned1. 使用 Lighthouse 测试性能 2. 使用 Lighthouse 测试网站性能的步骤 diff --git a/src/content/docs/zh/_roundtrip_picture-examples.txt b/src/content/docs/zh/_roundtrip_picture-examples.txt index 30c6c97..ee65b84 100644 --- a/src/content/docs/zh/_roundtrip_picture-examples.txt +++ b/src/content/docs/zh/_roundtrip_picture-examples.txt @@ -1,10 +1,13 @@ --- -title: Examples of using the element -description: Examples of using the element for responsive images, art direction, and different image formats. -taskInputHash: 84ee999fd4dc56dc +title: Example of using the Element +description: Provides examples of using the element, covering responsive images, art direction, and different image formats. +taskInputHash: 948d982e0b7ea61f lang: en +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Here are some examples of using the `` element and their explanations: +Here are a few examples of using the `` element and their explanations: 1. Example of responsive images: @@ -12,42 +15,45 @@ Here are some examples of using the `` element and their explanations: - An image + an image ``` -Explanation: In this example, the `` element is used to provide different image sources for different screen sizes. The `` element uses the `srcset` and `media` attributes to specify different image sources and the conditions for using each source. When the conditions specified in the `` element are not met, the `` element is used as a fallback image for older browsers. +Explanation: In this example, the `` element is used to provide different image sources for different screen sizes. The `` element uses the `srcset` and `media` attributes to specify different image sources and the conditions under which each source should be used. The `` element is used as a fallback option for old browsers or when the conditions specified in the `` element are not met. 2. Example of art direction: ```html - An image + + an image ``` -Explanation: In this example, the `` element is used to provide different image sources based on the device orientation. The `` element uses the `media` attribute and sets it to `(orientation: landscape)` to provide a landscape-oriented image source, while the `` element provides a portrait-oriented image source. +Explanation: In this example, the `` element provides different image sources based on the device's orientation. The `` element with the `media` attribute set to `(orientation: landscape)` specifies the image source to use for wide screens, while the `` element specifies the image source to use for portrait screens. 3. Example of different image formats: ```html + - An image + + an image ``` -Explanation: In this example, the `` element is used to provide different image sources for different image formats. The `` element uses the `srcset` and `type` attributes to specify different image sources and their image formats, while the `` element is used as a fallback image for older browsers that do not support the `` element. +Explanation: In this example, the `` element is used to provide different image sources for different image formats. The `` element uses the `srcset` and `type` attributes to specify different image source types. The `` element is used as a fallback option for old browsers that do not support the `` element. ## Breakpoints -In responsive design, breakpoints are used to define how the layout of a website or application should change as the viewport size changes. Breakpoints are usually defined using media queries in CSS and apply different styles based on screen width. These breakpoints can be combined with the `` element to provide different image sources for different screen sizes. +In responsive design, breakpoints are used to define when a website or application should change its layout based on viewport size. Media queries in CSS are typically used to define breakpoints, which apply different styles depending on screen width. These breakpoints can be used in conjunction with the `` element to provide different image sources for different screen sizes. -For example, in the first example above, we used the `media` attribute to specify screen width and therefore specified which screen width should use each source. When the screen width is greater than or equal to 768 pixels, the `image-large.jpg` source will be used; when the screen width is greater than or equal to 480 pixels but less than 768 pixels, the `image-medium.jpg` source will be used; and when the screen width is less than 480 pixels, the `image-small.jpg` source will be used. These operations can provide appropriately sized images for each device, reducing page load times and improving user experience. +For example, in the first example above, we use the `media` attribute to specify which source should be used at each screen width. When the screen width is greater than or equal to 768 pixels, the "image-large.jpg" source will be used; when it is greater than or equal to 480 pixels but less than 768 pixels, the "image-medium.jpg" source will be used; and when it is less than 480 pixels, the "image-small.jpg" source will be used. This allows us to provide appropriately sized images for each device, reducing page load times and improving user experience. -Breakpoints can be defined for any screen size and multiple breakpoints can be used to create layouts that respond to a wide range of devices. By combining breakpoints with the `` element, flexible and responsive designs can be created that look great on any device. +Breakpoints can be defined at any screen size, and multiple breakpoints can be used to create layouts that are responsive to a variety of devices. By combining breakpoints with the `` element, flexible and responsive designs can be created that perform well on any device. ===================== Content prompt used: @@ -60,8 +66,8 @@ Also carefully translate the title and description for the article; do not use & 1. Examples using element 2. Provides examples using the element, for responsive images, art direction and different image formats -Metadata returned1. 使用 元素的例子 -2. 提供使用 元素的示例，用于可响应式图片、艺术向导和不同的图片格式。 +Metadata returned1. 使用元素的示例 +2. 提供使用元素的示例，涵盖响应式图片、艺术指导和不同图像格式。 Roundtrip (isolated) prompt used: diff --git a/src/content/docs/zh/_roundtrip_pixels-not-pixels.txt b/src/content/docs/zh/_roundtrip_pixels-not-pixels.txt index 2290d12..3087523 100644 --- a/src/content/docs/zh/_roundtrip_pixels-not-pixels.txt +++ b/src/content/docs/zh/_roundtrip_pixels-not-pixels.txt @@ -1,23 +1,22 @@ --- -title: px ≠ Pixels -description: Device Pixels ≠ Browser Pixels ≠ Image Pixels -taskInputHash: af021fc2c7e6641e +title: px ≠ Pixel +description: Device Pixel ≠ Browser Pixel ≠ Image Pixel +taskInputHash: 48e3945f4c04c8a4 lang: en -ignore: '/* cSpell:locale zh,en*/' sidebar_sort_priority: 900 -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' --- -### Device Pixels ≠ Browser Pixels ≠ Image Pixels +### Device Pixel ≠ Browser Pixel ≠ Image Pixel -Thanks to Apple, CSS and HTML Pixels (`px`) **map to multiple device/printer pixels almost every time**. My phone's device pixel ratio is 3.875; [what's yours?](https://www.mydevice.io/) +Thanks to Apple, CSS and HTML pixels (`px`) **almost always map to multiple device/printer pixels**. My phone has a `devicePixelRatio` of 3.875; [what's yours?](https://www.mydevice.io/) -My desktop's device pixel ratio changes with browser zoom, but is by default 1.5 (after all, my `System > Display > Scale` is set to 150%). +On my desktop, my `devicePixelRatio` changes when I zoom in/out of my browser, but it's usually around 1.5 (since my `System > Display > Scale` is set to 150%). -Image files (excluding SVG) decode into pixel grids. **It's hard to get image pixels to display at a 1:1 ratio on device pixels, but `srcset` gets you pretty close to perfect**. If you do have a legitimate reason for a perfect mapping, some JavaScript can adjust HTML element sizes after loading, but we won't get into the details of this black art here. +Image files (except for SVGs) are decoded into a pixel grid. **Making image pixels display perfectly at a 1:1 ratio with device pixels is extremely difficult, but using `srcset` can give you a *close enough* ratio**, and if you really need a perfect mapping, you can adjust the size of HTML elements through some Javascript after they're loaded. Although these are considered forbidden black magic, this article won't discuss that part. -> Other absolute units (such as in, pc, pt, mm, cm, Q) are represented with a number of CSS pixels, pretending that everything is 96dpi. Developers will avoid absolute units as it's usually better to use units derived from font size or viewport/container size. Mismatched units can break layouts if the user adjusts their `Accessibility > Text Size` multiplier, zooms in the browser, or rotates their device. Needless to say, you should test all of these before launching your site. +> Other absolute length units (`in, pc, pt, mm, cm, Q`) are defined in terms of a number of CSS pixels and assume a 96dpi display. Developers should avoid using absolute units, as units derived from font size or viewport/container size are usually better. Mismatches in units may break layouts if the user adjusts their `Accessibility > Text Size` multiplier, zooms the browser, or rotates their device. Needless to say, you should perform all of these operations before publishing your site. ===================== Content prompt used: @@ -31,7 +30,7 @@ Also carefully translate the title and description for the article; do not use & 2. Device px ≠ browser px ≠ image px Metadata returned1. px ≠ 像素 -2. 设备像素 ≠ 浏览器像素 ≠ 图像像素 +2. 设备像素 ≠ 浏览器像素 ≠ 图片像素 Roundtrip (isolated) prompt used: diff --git a/src/content/docs/zh/_roundtrip_specify-width-height.txt b/src/content/docs/zh/_roundtrip_specify-width-height.txt index 3839cef..69b0b22 100644 --- a/src/content/docs/zh/_roundtrip_specify-width-height.txt +++ b/src/content/docs/zh/_roundtrip_specify-width-height.txt @@ -1,20 +1,19 @@ --- -title: Using Width and Height Attributes -description: Benefits of using width and height attributes in HTML code -taskInputHash: 0c2998c00c21d9e0 +title: Using Width and Height +description: Benefits of using the width and height attributes in HTML code +taskInputHash: e73418bc853d298b lang: en -ignore: '/* cSpell:locale zh,en*/' -date_published: '2023-03-24' -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' --- -Why should you set width and height in HTML? - -> It is recommended to set the width and height attributes of images in HTML code because it allows web browsers to know the size of the image before it is fully loaded. This allows the browser to reserve the appropriate space for the image on the webpage, thereby preventing content from jumping around while the image loads. -> -> Additionally, specifying the width and height attributes of an image can help improve the overall performance of a webpage. When the browser knows the size of the image beforehand, it can more accurately calculate the space needed to display the image and avoid unnecessary reflow or repaint. -> -> Overall, using width and height attributes for images in HTML code can enhance the user experience, make content load faster, and reduce visual disruptions. +Why should you set width and height in HTML code? + +> It is recommended to set the width and height attributes for images in HTML code because this helps web browsers know the size of the image before it fully loads. This allows the browser to reserve appropriate space on the webpage for the image, preventing content from jumping when the image loads. +> +> Additionally, specifying width and height attributes for images can also help improve overall webpage performance. When the browser knows the dimensions of the image beforehand, it can more accurately calculate the space needed to display the image and prevent unnecessary reordering or repainting of content during loading. +> +> Overall, using width and height attributes in HTML code can improve user experience by speeding up content loading and reducing visual glitches. ===================== Content prompt used: diff --git a/src/content/docs/zh/_roundtrip_when-to-use-picture.txt b/src/content/docs/zh/_roundtrip_when-to-use-picture.txt index 78c0f77..f54daf1 100644 --- a/src/content/docs/zh/_roundtrip_when-to-use-picture.txt +++ b/src/content/docs/zh/_roundtrip_when-to-use-picture.txt @@ -1,26 +1,25 @@ --- -title: When to Use the `` Element -description: Explains specific cases when the `` element should be used -taskInputHash: 671b0d063b76a959 +title: When to Use the Element +description: Explains when to use the Element +taskInputHash: b6307fed6c50d53f lang: en -ignore: '/* cSpell:locale zh,en*/' -date_published: '2023-03-27' -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' --- -The `picture` element is used to provide multiple versions of an image and determine which version to display based on specific conditions. It is particularly useful for optimizing images for different screen sizes and resolutions and is commonly used in responsive web design. +The `picture` element is used to provide multiple versions of an image and determine which version to display based on specific conditions. It's particularly useful for optimizing images for different screen sizes and resolutions and commonly used in responsive web design. -Here are some specific cases when you may want to use the `picture` element: +Here are some specific scenarios in which you might want to use the `picture` element: -* **Retina Displays:** High-density screens, such as Apple's Retina display, have a higher pixel density, which means that images may appear blurry or pixelated if they are not optimized for high resolution. With the `picture` element, you can provide a version of the image with twice the normal pixel density, so that it appears clear and crisp on Retina displays. +* **Retina Displays:** High-density screens, such as Apple's Retina display, have a higher pixel density, which means images may appear blurry or pixelated if not optimized for high resolution. By using the `picture` element, you can provide an image version with twice the number of pixels to make it look crisp and clear on Retina displays. -* **Different Aspect Ratios:** If you have a site that needs to display images with different aspect ratios, such as landscape versus portrait, you can use the `picture` element to provide different versions of the image optimized for each aspect ratio. +* **Different Aspect Ratios:** If you're designing a website that needs to display images with different aspect ratios (such as landscape vs. portrait), you can use the `picture` element to optimize different versions of the image for each aspect ratio. -* **Bandwidth Limitations:** Images can be large files that take up a lot of bandwidth, especially on mobile devices. With the `picture` element, you can provide smaller versions of the image for devices with smaller screens or slower internet connections, helping to reduce page load times. +* **Bandwidth Limitations:** Images can be large files that occupy a lot of bandwidth, especially on mobile devices. By using the `picture` element, you can provide smaller versions of images for devices with smaller screens or slower internet connections, which can help reduce page loading times. -* **Art Direction Layout:** Sometimes you may want to display images in a specific way based on the layout of the rest of the page. For example, you may want to show a close-up of a person's face on a mobile device, but a wider shot on desktop devices. The `picture` element allows you to provide different versions of the image optimized for different layouts. +* **Art-directed Layouts:** Sometimes, you may want to present an image in a certain way based on the layout of the rest of the page. For example, you may want to show a close-up of a person's face on a mobile device, but a wider shot on a desktop device. The `picture`element allows you to provide optimized image versions for different layouts. -Overall, the `picture` element is a powerful tool for optimizing images for a variety of use cases and ensuring they look great no matter what device or screen size they are viewed on. +Overall, the `picture` element is a powerful tool that can help you optimize your images to fit various use cases and ensure they look great no matter what device or screen size they're viewed on. ===================== Content prompt used: @@ -33,8 +32,8 @@ Also carefully translate the title and description for the article; do not use & 1. When to use element 2. Explains in which situations you should use the element -Metadata returned1. 何时使用``元素 -2. 解释何时应使用``元素的特定情况 +Metadata returned1. 何时使用 元素 +2. 说明应在哪些情况下使用 元素 Roundtrip (isolated) prompt used: diff --git a/src/content/docs/zh/_roundtrip_width-density.txt b/src/content/docs/zh/_roundtrip_width-density.txt index 68f736e..d6b4070 100644 --- a/src/content/docs/zh/_roundtrip_width-density.txt +++ b/src/content/docs/zh/_roundtrip_width-density.txt @@ -1,21 +1,21 @@ --- -title: Width and Pixel Density Descriptors -description: Example usage of width and pixel density descriptors in `srcset` -taskInputHash: 43b724a74c26793e +title: Width and Density Descriptors +description: 'Examples of using width and density descriptors in `srcset`' +taskInputHash: cb9466618b61758c lang: en -ignore: '/* cSpell:locale zh,en*/' -date_published: '2023-03-24' -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' --- -Learn about width (`w`) and pixel density (`x`) descriptors in `srcset`. Use examples and Markdown. +Learn about width (`w`) and density (`x`) descriptors in `srcset`. Includes examples and Markdown. ->`srcset` is an HTML attribute that allows developers to provide multiple image sources with different resolutions or pixel densities, and let the browser select the appropriate image based on the display characteristics of the device. The `srcset` attribute uses a combination of `URL` and `w` or `x` descriptors to specify the image. -## Width (`w`) Descriptor +>`srcset` is an HTML attribute that allows developers to provide multiple image source files with different resolutions or pixel densities and choose the appropriate image based on the device's display characteristics. The `srcset` attribute uses a combination of `URL` and `w` or `x` descriptors to specify images. ->The `w` descriptor is used to specify the width of the image in pixels. It is used when we want to provide the browser with dimensions for the image that can fit the available screen space. +## Width (`w`) Descriptors ->The syntax for using the `w` descriptor in `srcset` is as follows: +> The `w` descriptor is used to specify the width of an image in pixels. We use it when we want to provide the size of the image so that the browser can choose the appropriate image. + +> The syntax for using `w` descriptors in `srcset` is as follows: ```html Example Image ``` +> In the above example, we provide three images and their corresponding pixel widths. The browser will choose the image closest to the available screen space. +## Density (`x`) Descriptors ->In the above example, we have provided the browser with three images and their respective widths in pixels. The browser will select the image that is closest to the available screen space. -## Pixel Density (`x`) Descriptor - ->The `x` descriptor is used to specify the pixel density of the image, which is the ratio of physical pixels to CSS pixels. It is used when we want to provide the browser with different versions of the same image with different pixel densities. +> The `x` descriptor is used to specify the pixel density of an image, that is, the ratio of physical pixels to CSS pixels. We use it when we want to provide different versions of the same image with different pixel densities. ->The syntax for using the `x` descriptor in `srcset` is as follows: +> The syntax for using `x` descriptors in `srcset` is as follows: ```html Example Image ``` +> In the above example, we provide three images and their corresponding pixel densities. The browser will choose the image closest to the device screen's pixel density. ->In the above example, we have provided the browser with three images and their respective pixel densities. The browser will select the image with the pixel density that is closest to the device screen. - ->Note that the `w` and `x` descriptors can be used together in the same `srcset` attribute to provide more choices to the browser. +>Note that the `w` and `x` descriptors can be used together in the same `srcset` attribute to provide more choices for the browser to choose from. ===================== Content prompt used: @@ -58,8 +56,8 @@ Also carefully translate the title and description for the article; do not use & 1. Width and density descriptors 2. Examples of using width and density descriptors in `srcset` -Metadata returned1. 宽度和像素密度描述符 -2. 在`srcset`中使用宽度和像素密度描述符的示例 +Metadata returned1. 宽度和密度描述符 +2. `srcset` 中使用宽度和密度描述符的示例 Roundtrip (isolated) prompt used: diff --git a/src/content/docs/zh/breakpoints.md b/src/content/docs/zh/breakpoints.md index ac75e99..04e7b64 100644 --- a/src/content/docs/zh/breakpoints.md +++ b/src/content/docs/zh/breakpoints.md @@ -1,41 +1,38 @@ --- -title: 断点和图像 +title: 断点与图像 description: 为什么您的图像会受到某些（但不是全部）断点的影响 -taskInputHash: e220f548add04019 +taskInputHash: 32b3202b064608d3 lang: zh -ignore: '/* cSpell:locale zh,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`和`sizes`，我们需要知道布局在什么时候改变。 +小屏幕和大监视器需要不同的布局。为了 `srcset` 和 `sizes` 的目的，我们需要知道布局何时改变。 -Web开发人员必须决定在较小的屏幕上收缩、隐藏或重新定位什么内容，或者更常见的是，在较大的屏幕上扩展、揭示或添加什么内容。 然而，他们拥有的信息非常少。用户是在平板上、手机横屏模式还是小型浏览器窗口上？ +Web 开发人员必须决定在较小屏幕上缩小、隐藏或重新安置什么，或者更常见的情况是在较大屏幕上扩展、显示或添加什么。他们也几乎没有任何信息可供参考。用户使用平板还是手机横向模式，或者使用小型浏览器窗口？ -我们必须选择一个任意的视口宽度，其中布局发生更改。这被称为**断点**。它是一个CSS像素的任意数量（[不是设备像素](/zh-cn/pixels-not-pixels)）。Polypane有一篇[很棒的文章](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023) ，讲述了常用的断点。 +我们必须选择一个任意的视口宽度来改变布局。这就是所谓的 **断点**。它是基于 CSS 像素的任意数量（[不是设备像素](/zh-CN/pixels-not-pixels)）。Polypane 在其[博客文章](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023)中讨论了常用的断点。 -一些图片（如标志、图标或按钮）可能会免于这些断点引起的布局移位（并且可以使用[srcset密度描述符](/zh-cn/density-descriptors)）。 +某些图像（如徽标、图标或按钮）可能不受这些断点引起的布局移位影响（并且可以使用 [srcset 密度描述符](/zh-CN/density-descriptors)）。 -主要内容图像将受到其容器大小的限制。通常，页面的主要内容区域在最大屏幕上会限制为某个宽度，即`max-width`，但在小屏幕上，主要内容区域将填满整个视口。 +主要内容图像将受到其容器大小的限制。通常，页面的主要内容区域在最大屏幕上会限制为某个宽度，即 `max-width`，但在小屏幕上，主要内容区域将填充整个视口。 -如果在某些断点上有多列，则计算有效的大小规则将变得更加困难，因为图片所占视口宽度的百分比将发生变化。 +如果在某些断点上有多列，则计算有效的大小规则就会变得更加困难，因为图像占用的视口宽度百分比将发生变化。 ### 简单方法 -话虽如此，不要过分思考。您可能对以下近似值非常满意： +话说回来，不要过分考虑这个问题。您可能会得到以下近似值： -1. 主列（或图像容器）停止增长的尺寸是多少？ 在此视口宽度范围内，我们可以使用`100vw`作为图像的`sizes`属性，表示该图像占用整个视口宽度的100%。 -2. 容器的最大宽度是多少？ 我们可以将其设置为其余所有内容的固定`width`。 +1. 主列（或图像的容器）在哪个尺寸停止增长？在该视口宽度范围内，我们可以在图像的 `sizes` 属性中使用 `100vw` 来表示该图像占用整个视口宽度。 +2. 容器实现的最大宽度是多少？我们可以将其设置为固定的 `width`，用于其他所有部分。 -例如，如果你的第一步答案是700像素，第二步答案是800像素，则可以使用以下`sizes`属性： +如果您的答案为 1 是 700px，而 2 是 800px，则可以使用以下 `sizes` 属性： ```html - + -``` +``` - - -> 您可能认为浏览器可以根据CSS为我们很好地处理所有这些计算。不幸的是，浏览器过于热衷于在样式表下载之前*优先*选择图像URL。因此，我们必须自己进行计算，如果我们搞不清楚，那就该怪它们了。 +> 您可能认为浏览器可以根据 CSS 对所有这些计算进行良好处理。不幸的是，在样式表下载之前，浏览器会主动急切地选择图像 URL。因此，我们必须自己进行计算，如果我们不能完美处理，那就让它们自认倒霉吧。 diff --git a/src/content/docs/zh/browser-picks-srcset.md b/src/content/docs/zh/browser-picks-srcset.md index ab96ac9..75bef05 100644 --- a/src/content/docs/zh/browser-picks-srcset.md +++ b/src/content/docs/zh/browser-picks-srcset.md @@ -1,18 +1,17 @@ --- title: 浏览器如何选择 -description: 浏览器如何在`srcset`属性中选择图片 -taskInputHash: bee7d600f9a7bbb2 +description: 浏览器如何在`srcset`属性中选择列表中的图像 +taskInputHash: 20629ee8e7bb7636 lang: zh -ignore: '/* cSpell:locale zh,en*/' -date_published: '2023-03-24' -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`属性中选择图片？以下是一步一步的说明，包括宽度和精度规范，并根据设备和视口决定如何选择。 +浏览器如何在`srcset`属性提供的图像列表中进行选择？以下是一步一步的说明，包括宽度和密度规格以及浏览器如何根据设备和视口进行决策的示例。 -- 在HTML中使用`srcset`属性时，浏览器使用一组规则从提供的源列表中选择最合适的图像。这些规则取决于设备的显示特性（分辨率，像素密度）和视口大小。 `srcset`属性允许您根据宽度（使用`w`描述符）或像素密度（使用`x`描述符）指定不同的图像。让我们通过每个示例进行演示。 +- 在HTML中使用`srcset`属性时，浏览器使用一组规则从提供的源列表中选择最合适的图像。这些规则取决于设备的显示特性（分辨率、像素密度）和视口大小。`srcset`属性允许您基于宽度（使用`w`描述符）或像素密度（使用`x`描述符）指定不同的图像。我们来看看每种情况的例子。 -1.宽度描述符（`w`）： +1. 宽度描述符（`w`）： 假设我们有以下`srcset`属性： @@ -24,9 +23,9 @@ date_updated: '2023-03-31' 浏览器将执行以下步骤： -a.确定设备的DPR（设备像素比）。例如，标准显示器的DPR为1，而高分辨率（Retina）显示器的DPR为2或更高。 +a. 确定设备的DPR（设备像素比）。例如，标准显示器的DPR为1，而高分辨率（Retina）显示器的DPR为2或更高。 -b.为`srcset`中的每个图像计算有效宽度。将宽度描述符乘以DPR。对于DPR为1的设备： +b. 计算`srcset`中每个图像的有效宽度。将宽度描述符乘以DPR。对于DPR为1的设备： - example-small.jpg：400 * 1 = 400px @@ -34,9 +33,9 @@ b.为`srcset`中的每个图像计算有效宽度。将宽度描述符乘以DPR - example-large.jpg：1600 * 1 = 1600px -c.将有效宽度与视口宽度进行比较。假设视口宽度为420px。浏览器将选择具有大于或等于视口宽度的最小有效宽度的图像。在本例中，它将选择`example-medium.jpg`。 +c. 将有效宽度与视口宽度进行比较。假设视口宽度为420px。浏览器将选择有效宽度大于或等于视口宽度的最小图像。在这种情况下，它将选择`example-medium.jpg`。 -2.像素密度描述符（`x`）： +2. 像素密度描述符（`x`）： 假设我们有以下`srcset`属性： @@ -48,9 +47,9 @@ c.将有效宽度与视口宽度进行比较。假设视口宽度为420px。浏 浏览器将执行以下步骤： -a.确定设备的DPR（设备像素比）。例如，标准显示器的DPR为1，而高分辨率（Retina）显示器的DPR为2或更高。 +a. 确定设备的DPR（设备像素比）。例如，标准显示器的DPR为1，而高分辨率（Retina）显示器的DPR为2或更高。 -b.将设备的DPR与`srcset`中的`x`描述符进行比较。在这种情况下，我们有三个具有以下描述符的图像： +b. 将设备的DPR与`srcset`中的`x`描述符进行比较。在这种情况下，我们有三个具有以下描述符的图像： - example-1x.jpg：1x @@ -58,9 +57,9 @@ b.将设备的DPR与`srcset`中的`x`描述符进行比较。在这种情况下 - example-3x.jpg：3x -c.选择最接近设备DPR的带有`x`描述符的图像。对于DPR为1的设备，浏览器将选择`example-1x.jpg`。对于DPR为2的设备，它将选择`example-2x.jpg`，依此类推。 +c. 选择与设备的DPR最接近的`x`描述符的图像。对于DPR为1的设备，浏览器将选择`example-1x.jpg`。对于DPR为2的设备，它将选择`example-2x.jpg`，依此类推。 -重要的是要注意，您还可以将`sizes`属性与`srcset`属性结合使用，以提供有关在不同视口宽度下如何显示图像的更多信息。在使用宽度描述符（`w`）时，这尤其有用。以下是一个例子： +需要注意的是，您还可以结合`srcset`属性使用`sizes`属性，以提供有关图像在不同视口宽度下如何显示的更多信息。这在使用宽度描述符（`w`）时特别有用。以下是示例： ```html diff --git a/src/content/docs/zh/density-descriptors.md b/src/content/docs/zh/density-descriptors.md index 74573d4..c5d8966 100644 --- a/src/content/docs/zh/density-descriptors.md +++ b/src/content/docs/zh/density-descriptors.md @@ -1,43 +1,40 @@ --- -title: 密度描述符与srcset +title: 密度描述符和srcset description: 在`srcset`中使用密度描述符的示例 -taskInputHash: b82d9308b6826856 +taskInputHash: 5b1dfe8091bb672a lang: zh -ignore: '/* cSpell:locale zh,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（带密度描述符的Srcset）提供了一种简单而有效的方法，为每个用户的设备提供最合适的图像，提高了性能和用户体验。本指南将引导您了解如何使用带密度描述符的srcset，并为您提供标记示例。 -## 什么是带密度描述符的Srcset？ +Srcset与密度描述符提供了一种简单有效的方法，可以向每个用户的设备提供最适合的图像，从而提高性能和用户体验。本指南将为您介绍使用具有密度描述符的srcset的基本要点，并为您提供标记示例。 +## 什么是带有密度描述符的Srcset？ -Srcset是一种HTML属性，旨在让您为单个``元素指定多个图像源。密度描述符(`x`)与srcset结合使用，根据用户显示器的像素密度提供不同分辨率的图像。 -## 何时使用带密度描述符的Srcset +Srcset是一个HTML属性，旨在允许您为单个``元素指定多个图像源。密度描述符（`x`）与srcset一起使用，根据用户显示器的像素密度提供不同分辨率的图像。 +## 何时使用带有密度描述符的Srcset -在以下情况下，使用带密度描述符的srcset尤其有用： -1. 为高DPI显示器（例如Retina显示器）提供高分辨率图像，同时为标准显示器提供低分辨率图像。 -2. 通过为每个用户的设备提供最适合的图像大小，提高页面性能。 -## 实现带密度描述符的Srcset +使用具有密度描述符的srcset特别有用，当您想要： +1. 向高DPI显示器（例如Retina显示器）提供高分辨率图像，同时向标准显示器提供低分辨率图像。 +2. 通过向每个用户的设备提供最合适的图像大小来提高页面性能。 +## 实现具有密度描述符的Srcset -要使用带密度描述符的srcset，请按照以下步骤操作： -1. 以不同的分辨率准备图像。 -2. 向``元素添加`srcset`属性，包括图像源和相应的密度描述符。 -3. （可选）添加`sizes`属性以指定图像在屏幕上显示的大小。 +要使用带有密度描述符的srcset，请按照以下步骤进行操作： +1. 准备不同分辨率的图像。 +2. 将`srcset`属性添加到``元素中，包括图像源和相应的密度描述符。 +3. 添加`sizes`属性（可选），以指定图像在屏幕上显示的大小。 ### 标记示例 -以下是如何在您的标记中实现带密度描述符的srcset的示例： +以下是如何在标记中使用具有密度描述符的srcset的示例： ```html An example image + alt="一个示例图像"> ``` +这个标记示例包括： +- **src** ：默认的图像源，如果浏览器不支持srcset，则显示。 +- **srcset** ：图像源及其密度描述符列表（1x，2x，3x）。浏览器将根据用户的显示器选择最合适的图像。 +- **alt** ：图像的描述，用于无障碍目的。 - -此标记示例包括： -- **src**: 默认的图像源，如果浏览器不支持srcset则显示。 -- **srcset**: 图像源和其密度描述符（1x，2x，3x）的列表。根据用户显示器选择最适合的图像。 -- **alt**: 图像的说明，用于无障碍目的。 - -就是这样！您已成功实现了带密度描述符的srcset，提高了网站的性能和用户体验。 +那就这些了！ 您已经成功实现了带有密度描述符的srcset，提高了您网站的性能和用户体验。 diff --git a/src/content/docs/zh/introduction.md b/src/content/docs/zh/introduction.md index 5340a77..dea1002 100644 --- a/src/content/docs/zh/introduction.md +++ b/src/content/docs/zh/introduction.md @@ -1,21 +1,20 @@ --- -title: srcset 和 sizes -description: 2023 年响应式图像的高效且主观的指南 -taskInputHash: ff8b517c77f33d91 +title: srcset 和大小 +description: 一个高效且有见解的2023年响应式图像指南 +taskInputHash: 508db0f0818d638b lang: zh -ignore: '/* cSpell:locale zh,en*/' sidebar_sort_priority: 1000 -date_published: '2023-03-23' -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' --- -**2023 年图像高效且主观的指南** +**一个高效且有见解的2023年图像指南** -查看侧边栏进行深入了解。这是快速参考，用于升级那些 `` 标签以处理现代设备的各种尺寸和像素密度。您应该[知道像素不等于像素](/zh/pixels-not-pixels)，而 `devicePixelRatio` 更有可能是 3.875，而不是 1:1。现代手机为了可读性会假装宽度为 320-428px（在 CSS 像素中），但是有许多设备像素支持每个 CSS 像素。 +查看侧边栏进行深入了解。这是快速参考，以升级那些适应现代设备及其各种大小和像素密度的``标签。您应该[知道像素!=像素](/zh/pixels-not-pixels)，并且`devicePixelRatio`更有可能是3.875而非1:1。现代手机在CSS像素中为了可读性而假装为320-428像素宽，但每个CSS像素都有许多设备像素。 -> 如果您的图像永远不会更改大小，无论您将浏览器窗口缩小到多窄，您应该使用[分辨率描述符](/zh/density-descriptors)代替。这通常适用于徽标、图标和按钮。 +> 如果您的图像永远不会更改大小，无论缩小浏览器窗口多少，您应该使用[密度描述符](/zh/density-descriptors)。这通常适用于徽标，图标和按钮。 -您知道您的[断点](/zh/breakpoints)是什么吗？您需要这些数字来微调以下解决方案-至少是主内容区域停止增长的视口宽度断点。 +您知道您的[断点](/zh/breakpoints)是什么吗？您需要这些数字来微调以下解决方案 - 至少是主内容区域停止增长的视口宽度断点。 ### 简单方法 @@ -31,8 +30,7 @@ date_updated: '2023-03-31' sizes="(max-width: 700px) 100vw, 800px" alt="狗骑自行车" /> - + - + ``` diff --git a/src/content/docs/zh/lighthouse-performance-test.md b/src/content/docs/zh/lighthouse-performance-test.md index ae8f4eb..60437b4 100644 --- a/src/content/docs/zh/lighthouse-performance-test.md +++ b/src/content/docs/zh/lighthouse-performance-test.md @@ -1,25 +1,24 @@ --- -title: 通过 Lighthouse 测试性能 +title: 使用 Lighthouse 测试性能 description: 使用 Lighthouse 测试网站性能的步骤 -taskInputHash: 2da1cc6b426bea24 +taskInputHash: e3a6a4766e302363 lang: zh -ignore: '/* cSpell:locale zh,en*/' -date_published: '2023-03-24' -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' --- -如何使用 Lighthouse 测试您的网站性能？ +如何使用 Lighthouse 测试网站性能？ -> Lighthouse 是一款用于测量网站性能、可访问性和其他方面的工具。要使用 Lighthouse 测试您的网站性能，请按照以下步骤进行： +> Lighthouse 是一个可以用来衡量网站性能、可访问性和其他方面的工具。要使用 Lighthouse 测试您网站的性能，请按照以下步骤操作： > -> 1. 打开 Google Chrome 网络浏览器并转到要测试的页面。 +> 1\. 打开 Google Chrome 网页浏览器并转到要测试的页面。 > -> 2. 点击浏览器窗口右上角的三个点，然后选择“更多工具”，然后选择“开发者工具”，或者直接使用键盘快捷键 “Ctrl+Shift+I”（Windows，Linux）或 “Command+Option+I”（macOS）。 +> 2\. 单击浏览器窗口右上角的三个点，然后选择“更多工具”，再选择“开发者工具”，或者直接使用键盘快捷键“Ctrl+Shift+I”（Windows，Linux）或“Command+Option+I”（macOS）。 > -> 3. 在开发者工具面板中，单击位于面板左侧的 Lighthouse 图标，或按 “Ctrl+Shift+P”（Windows，Linux）或 “Command+Shift+P”（macOS）打开命令菜单，然后输入 "Lighthouse" 并选择 “Generate report”。 +> 3\. 在开发者工具面板中，单击位于面板左侧的 Lighthouse 图标，或按“Ctrl+Shift+P”（Windows，Linux）或“Command+Shift+P”（macOS）打开命令菜单，然后输入“Lighthouse”并选择“生成报告”。 > -> 4. 在 Lighthouse 对话框中，选择您要测试的性能和其他相关选项，然后单击 “Generate report”。 +> 4\. 在 Lighthouse 对话框中，选择您想要测试的性能和其他相关选项，然后单击“生成报告”。 > -> 5. Lighthouse 完成分析后，您将看到一份报告，其中包括改进您的网站性能、可访问性和其他区域的建议和评分。 +> 5\. 当 Lighthouse 完成分析后，您将看到一个报告，其中包含有关如何改进您网站的性能、可访问性和其他方面的得分和建议。 > -> 遵循这些步骤，就可以使用 Lighthouse 来测试和优化您的网站性能，这有助于提高其用户体验和搜索引擎排名。 +> 遵循这些步骤，您可以使用 Lighthouse 测试和优化您网站的性能，从而帮助提高用户体验和搜索引擎排名。 diff --git a/src/content/docs/zh/picture-examples.md b/src/content/docs/zh/picture-examples.md index 15bc82d..9f0ba32 100644 --- a/src/content/docs/zh/picture-examples.md +++ b/src/content/docs/zh/picture-examples.md @@ -1,54 +1,56 @@ --- -title: 使用 元素的示例 -description: 提供使用 元素的示例，包括响应式图片、艺术指导和不同的图片格式。 -taskInputHash: 14b6f48db8e81c85 +title: 使用元素的示例 +description: 提供使用元素的示例，涵盖响应式图片、艺术指导和不同图像格式。 +taskInputHash: 948d982e0b7ea61f lang: zh -ignore: '/* cSpell:locale zh,en*/' -date_published: '2023-03-24' -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' --- -以下是使用``元素的一些示例和它们的解释： - -1. 响应式图片示例: - -```html - - - - 一张图片 - -``` - -解释：在这个例子中，``元素用于为不同的屏幕尺寸提供不同的图像源。``元素使用`"srcset"`属性和`"media"`属性来指定在哪些条件下使用每个源。当``元素中指定的条件未达成时，``元素将作为一个回退选项呈现给旧的浏览器。 - -2. 艺术指导示例： - -```html - - - 一张图片 - -``` - -解释：在这个例子中，``元素被用于根据设备的屏幕方向提供不同的图像源。``元素中的`"media"`属性指定横屏宽屏幕的图像源，而``元素则指定竖屏设备的图像源。 - -3. 不同图片格式的示例： - -```html - - - - 一张图片 - -``` - -解释：在这个例子中，``元素用于为不同的图片格式提供不同的图像源。``元素使用`"srcset"`属性和`"type"`属性来指定图片格式。``元素则作为``元素在旧的浏览器中的回退选项。 - -## 断点 - -在响应式设计中，断点被用于定义当视口尺寸改变时网站或应用程序的布局应该如何改变。断点通常使用CSS中的媒体查询进行定义，这些查询基于屏幕宽度应用不同的样式。这些断点可以与``元素相结合，为不同的屏幕尺寸提供不同的图像源。 - -例如，在上面的第一个示例中，我们使用了`media`属性来指定每个来源应在哪个屏幕宽度下使用。当屏幕宽度大于或等于768像素时，将使用`image-large.jpg`源；当屏幕宽度大于或等于480像素但小于768像素时，将使用`image-medium.jpg`源；当屏幕宽度小于480像素时，将使用`image-small.jpg`源。这样可以为每个设备提供适当尺寸的图像，减少页面加载时间，提高用户体验。 - -断点可以在任何屏幕尺寸下定义，并且可以使用多个断点创建响应多种设备的布局。通过将断点与``元素相结合，您可以创建灵活的、响应式的设计，它们可以在任何设备上呈现出色。 +以下是使用 `` 元素的几个示例及其解释： + +1\. 响应式图片的示例： + +```html + + + + 一张图片 + +``` + +解释：在此示例中，`` 元素用于为不同屏幕大小提供不同的图像源。 `` 元素使用 "srcset" 属性和 "media" 属性指定不同的图像源，并指定在应使用每个源的条件。`` 元素用作旧浏览器或未满足 `` 元素中指定条件时的回退选项。 + +2\. 艺术指导示例： + +```html + + + + 一张图片 + +``` + +解释：在此示例中，`` 元素根据设备的方向提供不同的图像源。设置了 "media" 属性为 "(orientation: landscape)" 的``元素指定用于宽屏幕的图像源，而 `` 元素指定用于纵向屏幕的图像源。 + +3\. 不同图像格式的示例： + +```html + + + + + + 一张图片 + +``` + +解释：在此示例中，`` 元素用于为不同图像格式提供不同的图像源。`` 元素使用 "srcset" 属性和 "type" 属性指定不同的图像源类型。` ` 元素用作不支持 `` 元素的旧浏览器的回退选项。 + +## 断点 + +在响应式设计中，断点用于定义网站或应用程序基于视口大小应何时更改布局。通常使用 CSS 中的媒体查询来定义断点，其根据屏幕宽度应用不同的样式。这些断点可与 `` 元素结合使用，以为不同的屏幕大小提供不同的图像源。 + +例如，在上面的第一个示例中，我们使用 `media` 属性指定应在哪个屏幕宽度下使用每个源。当屏幕宽度大于或等于 768 像素时，将使用“image-large.jpg”源； 当屏幕宽度大于或等于 480 像素但小于 768 像素时，将使用“image-medium.jpg”源； 当屏幕宽度小于 480 像素时，将使用“image-small.jpg”源。这使我们可以为每个设备提供适当大小的图像，从而减少页面加载时间并改善用户体验。 + +断点可以在任何屏幕大小下定义，并且可以使用多个断点来创建响应各种设备并响应的布局。通过将断点与 `` 元素相结合，可以创建灵活且响应的设计，使其在任何设备上都表现出色。 diff --git a/src/content/docs/zh/pixels-not-pixels.md b/src/content/docs/zh/pixels-not-pixels.md index eb192de..697fa54 100644 --- a/src/content/docs/zh/pixels-not-pixels.md +++ b/src/content/docs/zh/pixels-not-pixels.md @@ -1,20 +1,19 @@ --- title: px ≠ 像素 -description: 设备像素 ≠ 浏览器像素 ≠ 图像像素 -taskInputHash: af021fc2c7e6641e +description: 设备像素 ≠ 浏览器像素 ≠ 图片像素 +taskInputHash: 48e3945f4c04c8a4 lang: zh -ignore: '/* cSpell:locale zh,en*/' sidebar_sort_priority: 900 -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' --- -### 设备像素 ≠ 浏览器像素 ≠ 图像像素 +### 设备像素 ≠ 浏览器像素 ≠ 图片像素 -感谢苹果，CSS 和 HTML 的像素 (`px`) **几乎总是映射到多个设备/打印机像素上**。我的手机设备像素比是 3.875；[你的是多少？](https://www.mydevice.io/) +多亏了 Apple，CSS 和 HTML 像素 (`px`) **几乎总是映射为多个设备/打印机像素**。我的手机上 `devicePixelRatio` 是 3.875；[你的是多少？](https://www.mydevice.io/) -我的台式机的设备像素比在浏览器缩放时会改变，但默认为 1.5（毕竟我的 `系统 > 显示 > 缩放` 设为 150%）。 +我的桌面设备在浏览器缩放时 `devicePixelRatio` 会改变，但默认为 1.5 （毕竟我的 `System > Display > Scale` 设为了 150%）。 -图像文件（不包括 SVG）解码为像素网格。**让图像像素以 1:1 比例完美显示在设备像素上非常困难，但通过 `srcset`，你可以得到足够接近于完美的比例**。如果你确实有需要完美映射的正当理由，一些 JavaScript 可以在加载后调整 HTML 元素大小，但此处不会透露此禁忌艺术的细节。 +图像文件（SVG 除外）被解码为像素网格。**让图像像素在 1:1 比例下与设备像素完美地显示起来是非常困难的，但是使用 `srcset` 您可以获得一个*足够接近*的比例**，如果你真的有正当的理由需要完美的映射，则可以在加载后通过一些 Javascript 调整 html 元素的大小。尽管这些被视为被禁止的黑科技，但本文不会讨论该部分内容。 -> 其他绝对单位（如 in、pc、pt、mm、cm、Q）是用 CSS 像素数表示的，假装一切都是 96dpi。开发人员会避免使用绝对单位，因为通常最好使用从字体大小或视口/容器尺寸派生的单位。如果用户调整了他们的 `辅助功能 > 文本大小` 倍数，缩放浏览器或旋转他们的设备，不匹配的单位可能会破坏布局。不必说，你应该在发布网站之前执行所有这些操作。 +> 其他绝对长度单位（`in, pc, pt, mm, cm, Q`）是以 CSS 像素数量为单位定义的，并将所有内容都假定为 96dpi。开发人员应避免使用绝对单位，因为使用从字体大小或视口/容器尺寸派生的单位通常更好。如果用户调整其 `Accessibility > Text Size` 倍增器、缩放浏览器或旋转设备，则不匹配的单位可能会破坏布局。不用说，在发布您的网站之前，您应该执行所有这些操作。 diff --git a/src/content/docs/zh/specify-width-height.md b/src/content/docs/zh/specify-width-height.md index da28c72..5434e08 100644 --- a/src/content/docs/zh/specify-width-height.md +++ b/src/content/docs/zh/specify-width-height.md @@ -1,17 +1,16 @@ --- title: 使用宽度和高度 description: 在HTML代码中使用宽度和高度属性的好处 -taskInputHash: 0c2998c00c21d9e0 +taskInputHash: e73418bc853d298b lang: zh -ignore: '/* cSpell:locale zh,en*/' -date_published: '2023-03-24' -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' --- -你为什么应该在HTML中设置宽度和高度？ +为什么应该在HTML中设置宽度和高度？ -> 建议在HTML代码中为图像设置宽度和高度属性，因为它可以帮助Web浏览器在完全加载图像之前知道图像的大小。这使得浏览器可以为图像在网页上预留适当的空间，从而防止内容在图像加载时跳动。 -> -> 此外，为图像指定宽度和高度属性还可以帮助提高网页的整体性能。当浏览器事先知道图像的大小时，它可以更准确地计算显示图像所需的空间，并避免不必要的回流或重绘内容。 -> -> 总的来说，通过在HTML代码中为图像使用宽度和高度属性可以提高用户体验，使内容加载更快，减少视觉故障。 +> 建议在HTML代码中为图像设置宽度和高度属性，因为这有助于Web浏览器在完全加载图像之前知道图像的尺寸。这使得浏览器可以为图像在网页上保留合适的空间，从而防止图像加载时内容跳动。 +> +> 此外，对于图像指定宽度和高度属性还可以帮助提高网页的整体性能。当浏览器事先知道图像的大小时，它可以更准确地计算显示图像所需的空间，并避免内容在加载时不必要的重新排列或重绘。 +> +> 总的来说，在HTML代码中使用宽度和高度属性可通过加快内容加载速度并减少视觉故障来提高用户体验。 diff --git a/src/content/docs/zh/when-to-use-picture.md b/src/content/docs/zh/when-to-use-picture.md index c1dcde4..b7107da 100644 --- a/src/content/docs/zh/when-to-use-picture.md +++ b/src/content/docs/zh/when-to-use-picture.md @@ -1,23 +1,22 @@ --- -title: 何时使用``元素 -description: 解释何时应使用``元素的特定情况 -taskInputHash: 671b0d063b76a959 +title: 何时使用 元素 +description: 说明应在哪些情况下使用 元素 +taskInputHash: b6307fed6c50d53f lang: zh -ignore: '/* cSpell:locale zh,en*/' -date_published: '2023-03-27' -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' --- -`picture`元素用于提供多个图像版本，并根据特定条件确定显示哪个版本的图像。它特别适用于针对不同的屏幕尺寸和分辨率优化图像，并常用于响应式网页设计。 +`picture`元素用于提供多个版本的图像，并根据特定条件确定显示哪个版本的图像。它特别适用于为不同的屏幕尺寸和分辨率优化图像，并常用于响应式 Web 设计。 -以下是一些你可能想要使用`picture`元素的特定情况： +以下是一些特定情况下你可能想要使用 `picture` 元素的场景： -* **视网膜显示器：** 高密度屏幕（如苹果的Retina显示器）具有更高的像素密度，这意味着如果它们未经过高分辨率优化，则图像可能会变得模糊或像素化。使用`picture`元素，您可以提供一个具有正常版本两倍像素的图像版本，因此在Retina显示器上看起来清晰明了。 +* **Retina 显示屏：**高密度屏幕，如 Apple 的 Retina 显示屏具有更高的像素密度，这意味着如果没有为高分辨率进行优化，则图像可能会看起来模糊或有锯齿。使用 `picture` 元素，您可以提供一个具有两倍像素数的图像版本，以便在 Retina 显示屏上看起来清晰明晰。 -* **不同的纵横比：** 如果您设计需要显示不同纵横比（如横向对比纵向）的图像的站点，可以使用`picture`元素提供针对每个纵横比进行优化的不同版本的图像。 +* **不同的纵横比例：**如果你正在设计需要显示具有不同长宽比（如横屏 vs. 竖屏）的图像的网站，可以使用 `picture` 元素为每个长宽比优化的不同版本的图像。 -* **带宽限制：** 图像可以是大文件，占用大量带宽，尤其是在移动设备上。使用`picture`元素，您可以为具有较小屏幕或较慢互联网连接的设备提供较小的图像版本，从而有助于减少页面加载时间。 +* **带宽限制：**图像可以是占用大量带宽的大文件，特别是在移动设备上。使用 `picture` 元素，您可以为具有较小屏幕或较慢互联网连接的设备提供较小版本的图像，这可以帮助减少页面加载时间。 -* **美术指导布局：** 有时您可能希望根据页面其余部分的布局以某种特定方式呈现图像。例如，您可能希望在移动设备上展示某个人的面部特写，但在桌面设备上展示更广阔的景象。`picture`元素允许您提供针对不同布局进行优化的不同图像版本。 +* **艺术指导的布局：**有时，根据页面其余部分的布局，您可能希望以某种方式呈现图像。例如，您可能想在移动设备上显示一个人脸的特写，但在桌面设备上显示更宽的画面。 `picture` 元素允许您为不同的布局提供优化的图像版本。 -总的来说，`picture`元素是一个功能强大的工具，可以帮助您优化图像，以适应各种用例，并确保无论在什么设备或屏幕尺寸上查看，它们都看起来很棒。 +总体而言，`picture`元素是一个强大的工具，可以帮助你优化你的图像，以适应各种用例，并确保无论在哪种设备或屏幕大小下查看，它们都能看起来很棒。 diff --git a/src/content/docs/zh/width-density.md b/src/content/docs/zh/width-density.md index 912dab0..723b7a5 100644 --- a/src/content/docs/zh/width-density.md +++ b/src/content/docs/zh/width-density.md @@ -1,21 +1,21 @@ --- -title: 宽度和像素密度描述符 -description: 在`srcset`中使用宽度和像素密度描述符的示例 -taskInputHash: 43b724a74c26793e +title: 宽度和密度描述符 +description: '`srcset` 中使用宽度和密度描述符的示例' +taskInputHash: cb9466618b61758c lang: zh -ignore: '/* cSpell:locale zh,en*/' -date_published: '2023-03-24' -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`中的宽度（w）和像素密度（x）描述符。使用示例并使用Markdown。 +了解 `srcset` 中的宽度（`w`）和密度（`x`）描述符。包括示例和 Markdown。 + +>`srcset` 是一个 HTML 属性，允许开发人员提供包含不同分辨率或像素密度的多个图像源文件，并根据设备的显示特征选择适当的图像。 `srcset` 属性使用 `URL` 和 `w` 或`x` 描述符的组合来指定图像。 ->`srcset`是一个HTML属性，允许开发人员提供具有不同分辨率或像素密度的多个图像源，并让浏览器根据设备的显示特性选择适当的图像。`srcset`属性使用`URL`和`w`或`x`描述符的组合来指定图像。 ## 宽度（`w`）描述符 ->`w`描述符用于指定图像的宽度，以像素为单位。当我们想要提供浏览器可以选择适合可用屏幕空间的图像的维度时，就会使用它。 +> `w` 描述符用于以像素为单位指定图像的宽度。当我们想要提供图像的尺寸以便于浏览器可以选择适当的图像时，我们会使用它。 ->在`srcset`中使用`w`描述符的语法如下： +> 在 `srcset` 中使用 `w` 描述符的语法如下： ```html 在上面的例子中，我们已经向浏览器提供了三个图像及其相应的宽度（以像素为单位）。浏览器将选择最接近可用屏幕空间的图像。 -## 像素密度（`x`）描述符 +> 在上述示例中，我们提供了三个图像及其相应的像素宽度。浏览器将选择最接近可用屏幕空间的图像。 + +## 密度（`x`）描述符 ->`x`描述符用于指定图像的像素密度，即物理像素与CSS像素的比率。 当我们想要向浏览器提供具有不同像素密度的相同图像的不同版本时，我们会使用它。 +> `x` 描述符用于指定图像的像素密度，即实际像素与 CSS 像素的比率。当我们希望为同一图像提供具有不同像素密度的不同版本时，我们会使用它。 ->在`srcset`中使用`x`描述符的语法如下： +>在 `srcset` 中使用 `x` 描述符的语法如下： ```html 在上面的例子中，我们已经向浏览器提供了三个图像及其相应的像素密度。浏览器将选择最接近设备屏幕的像素密度的图像。 +> 在上述示例中，我们提供了三个图像及其相应的像素密度。浏览器将选择最接近设备屏幕的像素密度的图像。 ->请注意，`w`和`x`描述符可以同时在同一个`srcset`属性中使用，以便向浏览器提供更多的选择。 +>请注意，`w` 和 `x` 描述符可以在同一 `srcset` 属性中一起使用，以提供更多选择供浏览器选择。 diff --git a/src/content/imgstyle/de/_roundtrip_create-a-carousel.txt b/src/content/imgstyle/de/_roundtrip_create-a-carousel.txt index ead1233..e11a6d1 100644 --- a/src/content/imgstyle/de/_roundtrip_create-a-carousel.txt +++ b/src/content/imgstyle/de/_roundtrip_create-a-carousel.txt @@ -1,23 +1,22 @@ --- -title: Create a Carousel +title: Creating a Carousel description: How to create a carousel on a website -taskInputHash: 230c6ecf771bf3cb +taskInputHash: a04b23b21eb4f8de lang: en -ignore: '/* cSpell:locale de,en*/' -date_published: '2023-03-29' -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' --- Here are the general steps to create an image carousel on a website: 1. Create a new HTML file for your image carousel. You can name it, for example, "carousel.html". -2. Add the HTML structure to your file. This usually includes the head section with a title and any necessary CSS stylesheets, as well as the body section where you'll add the actual carousel. -3. Create a container for your carousel using a `
` tag. Give it an ID or class so you can style it later. -4. Inside the container, add individual image files using the `` tag. You can set the source code to the image file path or URL and add alt text or captions as needed. -5. Add navigation buttons to your carousel using `