From bbf1ed4bdc03d48378d9ffeaf2ce1fba1433fe6c Mon Sep 17 00:00:00 2001 From: lilith Date: Sun, 2 Apr 2023 06:58:50 +0000 Subject: [PATCH] Update translations --- .../docs/de/_roundtrip_breakpoints.txt | 39 ++--- .../de/_roundtrip_browser-picks-srcset.txt | 48 +++--- .../de/_roundtrip_density-descriptors.txt | 51 +++--- .../docs/de/_roundtrip_introduction.txt | 58 +++---- ..._roundtrip_lighthouse-performance-test.txt | 31 ++-- .../docs/de/_roundtrip_picture-examples.txt | 112 ++++++------ .../docs/de/_roundtrip_pixels-not-pixels.txt | 17 +- .../de/_roundtrip_specify-width-height.txt | 14 +- .../de/_roundtrip_when-to-use-picture.txt | 29 ++-- .../docs/de/_roundtrip_width-density.txt | 43 +++-- src/content/docs/de/breakpoints.md | 35 ++-- src/content/docs/de/browser-picks-srcset.md | 128 +++++++------- src/content/docs/de/density-descriptors.md | 55 +++--- src/content/docs/de/introduction.md | 36 ++-- .../docs/de/lighthouse-performance-test.md | 23 ++- src/content/docs/de/picture-examples.md | 33 ++-- src/content/docs/de/pixels-not-pixels.md | 19 +-- src/content/docs/de/specify-width-height.md | 17 +- src/content/docs/de/when-to-use-picture.md | 27 ++- src/content/docs/de/width-density.md | 35 ++-- 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 | 32 ++-- .../es/_roundtrip_browser-picks-srcset.txt | 57 ++++--- .../es/_roundtrip_density-descriptors.txt | 40 ++--- .../docs/es/_roundtrip_introduction.txt | 46 +++-- ..._roundtrip_lighthouse-performance-test.txt | 33 ++-- .../docs/es/_roundtrip_picture-examples.txt | 34 ++-- .../docs/es/_roundtrip_pixels-not-pixels.txt | 21 ++- .../es/_roundtrip_specify-width-height.txt | 26 ++- .../es/_roundtrip_when-to-use-picture.txt | 30 ++-- .../docs/es/_roundtrip_width-density.txt | 27 ++- src/content/docs/es/breakpoints.md | 33 ++-- src/content/docs/es/browser-picks-srcset.md | 125 +++++++------- src/content/docs/es/density-descriptors.md | 43 +++-- src/content/docs/es/introduction.md | 36 ++-- .../docs/es/lighthouse-performance-test.md | 27 ++- 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 | 19 +-- src/content/docs/es/when-to-use-picture.md | 27 ++- src/content/docs/es/width-density.md | 31 ++-- .../docs/fr/_roundtrip_breakpoints.txt | 35 ++-- .../fr/_roundtrip_browser-picks-srcset.txt | 49 +++--- .../fr/_roundtrip_density-descriptors.txt | 39 ++--- .../docs/fr/_roundtrip_introduction.txt | 40 ++--- ..._roundtrip_lighthouse-performance-test.txt | 23 ++- .../docs/fr/_roundtrip_picture-examples.txt | 34 ++-- .../docs/fr/_roundtrip_pixels-not-pixels.txt | 23 ++- .../fr/_roundtrip_specify-width-height.txt | 23 ++- .../fr/_roundtrip_when-to-use-picture.txt | 21 ++- .../docs/fr/_roundtrip_width-density.txt | 33 ++-- src/content/docs/fr/breakpoints.md | 35 ++-- src/content/docs/fr/browser-picks-srcset.md | 57 +++---- src/content/docs/fr/density-descriptors.md | 32 ++-- src/content/docs/fr/introduction.md | 31 ++-- .../docs/fr/lighthouse-performance-test.md | 19 +-- src/content/docs/fr/picture-examples.md | 31 ++-- src/content/docs/fr/pixels-not-pixels.md | 21 ++- src/content/docs/fr/specify-width-height.md | 19 +-- src/content/docs/fr/when-to-use-picture.md | 23 ++- src/content/docs/fr/width-density.md | 32 ++-- .../docs/it/_roundtrip_breakpoints.txt | 44 ++--- .../it/_roundtrip_browser-picks-srcset.txt | 37 ++-- .../it/_roundtrip_density-descriptors.txt | 52 +++--- .../docs/it/_roundtrip_introduction.txt | 61 ++++--- ..._roundtrip_lighthouse-performance-test.txt | 45 +++-- .../docs/it/_roundtrip_picture-examples.txt | 22 +-- .../docs/it/_roundtrip_pixels-not-pixels.txt | 25 ++- .../it/_roundtrip_specify-width-height.txt | 26 +-- .../it/_roundtrip_when-to-use-picture.txt | 29 ++-- .../docs/it/_roundtrip_width-density.txt | 28 +-- src/content/docs/it/breakpoints.md | 39 ++--- src/content/docs/it/browser-picks-srcset.md | 35 ++-- src/content/docs/it/density-descriptors.md | 62 +++---- src/content/docs/it/introduction.md | 69 ++++---- .../docs/it/lighthouse-performance-test.md | 41 +++-- src/content/docs/it/picture-examples.md | 35 ++-- 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 | 24 +-- src/content/docs/it/width-density.md | 51 +++--- .../docs/ja/_roundtrip_breakpoints.txt | 42 +++-- .../ja/_roundtrip_browser-picks-srcset.txt | 46 +++-- .../ja/_roundtrip_density-descriptors.txt | 52 +++--- .../docs/ja/_roundtrip_introduction.txt | 57 +++---- ..._roundtrip_lighthouse-performance-test.txt | 33 ++-- .../docs/ja/_roundtrip_picture-examples.txt | 40 +++-- .../docs/ja/_roundtrip_pixels-not-pixels.txt | 25 ++- .../ja/_roundtrip_specify-width-height.txt | 25 ++- .../ja/_roundtrip_when-to-use-picture.txt | 31 ++-- .../docs/ja/_roundtrip_width-density.txt | 39 +++-- src/content/docs/ja/breakpoints.md | 35 ++-- src/content/docs/ja/browser-picks-srcset.md | 128 +++++++------- src/content/docs/ja/density-descriptors.md | 50 +++--- src/content/docs/ja/introduction.md | 68 ++++---- .../docs/ja/lighthouse-performance-test.md | 29 ++-- src/content/docs/ja/picture-examples.md | 42 ++--- 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 | 27 ++- src/content/docs/ja/width-density.md | 37 ++-- .../docs/sv/_roundtrip_breakpoints.txt | 31 ++-- .../sv/_roundtrip_browser-picks-srcset.txt | 42 +++-- .../sv/_roundtrip_density-descriptors.txt | 49 +++--- .../docs/sv/_roundtrip_introduction.txt | 82 ++++----- ..._roundtrip_lighthouse-performance-test.txt | 28 ++- .../docs/sv/_roundtrip_picture-examples.txt | 32 ++-- .../docs/sv/_roundtrip_pixels-not-pixels.txt | 21 ++- .../sv/_roundtrip_specify-width-height.txt | 27 ++- .../sv/_roundtrip_when-to-use-picture.txt | 30 ++-- .../docs/sv/_roundtrip_width-density.txt | 49 +++--- src/content/docs/sv/breakpoints.md | 34 ++-- src/content/docs/sv/browser-picks-srcset.md | 119 ++++++------- src/content/docs/sv/density-descriptors.md | 54 +++--- src/content/docs/sv/introduction.md | 36 ++-- .../docs/sv/lighthouse-performance-test.md | 27 ++- src/content/docs/sv/picture-examples.md | 31 ++-- 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 | 27 ++- src/content/docs/sv/width-density.md | 38 ++--- .../docs/zh/_roundtrip_breakpoints.txt | 41 +++-- .../zh/_roundtrip_browser-picks-srcset.txt | 41 ++--- .../zh/_roundtrip_density-descriptors.txt | 54 +++--- .../docs/zh/_roundtrip_introduction.txt | 66 ++++---- ..._roundtrip_lighthouse-performance-test.txt | 43 +++-- .../docs/zh/_roundtrip_picture-examples.txt | 39 +++-- .../docs/zh/_roundtrip_pixels-not-pixels.txt | 26 +-- .../zh/_roundtrip_specify-width-height.txt | 29 ++-- .../zh/_roundtrip_when-to-use-picture.txt | 31 ++-- .../docs/zh/_roundtrip_width-density.txt | 46 +++-- src/content/docs/zh/breakpoints.md | 39 ++--- src/content/docs/zh/browser-picks-srcset.md | 37 ++-- src/content/docs/zh/density-descriptors.md | 53 +++--- src/content/docs/zh/introduction.md | 30 ++-- .../docs/zh/lighthouse-performance-test.md | 37 ++-- src/content/docs/zh/picture-examples.md | 42 ++--- src/content/docs/zh/pixels-not-pixels.md | 21 ++- src/content/docs/zh/specify-width-height.md | 19 +-- src/content/docs/zh/when-to-use-picture.md | 27 ++- src/content/docs/zh/width-density.md | 40 +++-- .../de/_roundtrip_create-a-carousel.txt | 31 ++-- .../de/_roundtrip_create-a-gallery.txt | 33 ++-- .../de/_roundtrip_css-effects-and-borders.txt | 30 ++-- src/content/imgstyle/de/_roundtrip_faq.txt | 41 +++-- .../de/_roundtrip_full-css-reference.txt | 42 ++--- .../imgstyle/de/_roundtrip_introduction.txt | 145 ++-------------- .../imgstyle/de/_roundtrip_pad-an-image.txt | 47 +++--- .../de/_roundtrip_tailwindCSS-img-helpers.txt | 39 +++-- .../de/_roundtrip_view-full-screen-image.txt | 46 ++--- src/content/imgstyle/de/create-a-carousel.md | 22 +-- src/content/imgstyle/de/create-a-gallery.md | 30 ++-- .../imgstyle/de/css-effects-and-borders.md | 43 +++-- src/content/imgstyle/de/faq.md | 48 +++--- src/content/imgstyle/de/full-css-reference.md | 29 ++-- src/content/imgstyle/de/introduction.md | 17 +- src/content/imgstyle/de/pad-an-image.md | 46 +++-- .../imgstyle/de/tailwindCSS-img-helpers.md | 33 ++-- .../imgstyle/de/view-full-screen-image.md | 35 ++-- 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 | 28 +-- .../es/_roundtrip_create-a-gallery.txt | 26 ++- .../es/_roundtrip_css-effects-and-borders.txt | 31 ++-- src/content/imgstyle/es/_roundtrip_faq.txt | 39 +++-- .../es/_roundtrip_full-css-reference.txt | 51 +++--- .../imgstyle/es/_roundtrip_introduction.txt | 122 ++++++++++---- .../imgstyle/es/_roundtrip_pad-an-image.txt | 40 +++-- .../es/_roundtrip_tailwindCSS-img-helpers.txt | 32 ++-- .../es/_roundtrip_view-full-screen-image.txt | 55 +++--- src/content/imgstyle/es/create-a-carousel.md | 24 ++- src/content/imgstyle/es/create-a-gallery.md | 42 +++-- .../imgstyle/es/css-effects-and-borders.md | 42 +++-- src/content/imgstyle/es/faq.md | 69 ++++---- src/content/imgstyle/es/full-css-reference.md | 57 +++---- src/content/imgstyle/es/introduction.md | 17 +- src/content/imgstyle/es/pad-an-image.md | 40 +++-- .../imgstyle/es/tailwindCSS-img-helpers.md | 33 ++-- .../imgstyle/es/view-full-screen-image.md | 84 ++++----- .../fr/_roundtrip_create-a-carousel.txt | 21 ++- .../fr/_roundtrip_create-a-gallery.txt | 26 +-- .../fr/_roundtrip_css-effects-and-borders.txt | 24 +-- src/content/imgstyle/fr/_roundtrip_faq.txt | 81 +++++---- .../fr/_roundtrip_full-css-reference.txt | 19 +-- .../imgstyle/fr/_roundtrip_introduction.txt | 95 ++++++----- .../imgstyle/fr/_roundtrip_pad-an-image.txt | 46 ++--- .../fr/_roundtrip_tailwindCSS-img-helpers.txt | 34 ++-- .../fr/_roundtrip_view-full-screen-image.txt | 44 ++--- src/content/imgstyle/fr/create-a-carousel.md | 26 ++- src/content/imgstyle/fr/create-a-gallery.md | 31 ++-- .../imgstyle/fr/css-effects-and-borders.md | 29 ++-- src/content/imgstyle/fr/faq.md | 75 +++++---- src/content/imgstyle/fr/full-css-reference.md | 21 ++- src/content/imgstyle/fr/introduction.md | 19 +-- src/content/imgstyle/fr/pad-an-image.md | 40 ++--- .../imgstyle/fr/tailwindCSS-img-helpers.md | 31 ++-- .../imgstyle/fr/view-full-screen-image.md | 61 ++++--- .../it/_roundtrip_create-a-carousel.txt | 30 ++-- .../it/_roundtrip_create-a-gallery.txt | 30 ++-- .../it/_roundtrip_css-effects-and-borders.txt | 37 ++-- src/content/imgstyle/it/_roundtrip_faq.txt | 66 ++++---- .../it/_roundtrip_full-css-reference.txt | 41 ++--- .../imgstyle/it/_roundtrip_introduction.txt | 62 +++++-- .../imgstyle/it/_roundtrip_pad-an-image.txt | 42 ++--- .../it/_roundtrip_tailwindCSS-img-helpers.txt | 30 ++-- .../it/_roundtrip_view-full-screen-image.txt | 40 +++-- src/content/imgstyle/it/create-a-carousel.md | 31 ++-- src/content/imgstyle/it/create-a-gallery.md | 29 ++-- .../imgstyle/it/css-effects-and-borders.md | 34 ++-- src/content/imgstyle/it/faq.md | 75 +++++---- src/content/imgstyle/it/full-css-reference.md | 24 ++- src/content/imgstyle/it/introduction.md | 19 +-- src/content/imgstyle/it/pad-an-image.md | 41 +++-- .../imgstyle/it/tailwindCSS-img-helpers.md | 27 ++- .../imgstyle/it/view-full-screen-image.md | 71 ++++---- .../ja/_roundtrip_create-a-carousel.txt | 35 ++-- .../ja/_roundtrip_create-a-gallery.txt | 33 ++-- .../ja/_roundtrip_css-effects-and-borders.txt | 22 ++- src/content/imgstyle/ja/_roundtrip_faq.txt | 71 ++++---- .../ja/_roundtrip_full-css-reference.txt | 50 +++--- .../imgstyle/ja/_roundtrip_introduction.txt | 21 ++- .../imgstyle/ja/_roundtrip_pad-an-image.txt | 37 ++-- .../ja/_roundtrip_tailwindCSS-img-helpers.txt | 37 ++-- .../ja/_roundtrip_view-full-screen-image.txt | 45 ++--- src/content/imgstyle/ja/create-a-carousel.md | 35 ++-- src/content/imgstyle/ja/create-a-gallery.md | 46 ++--- .../imgstyle/ja/css-effects-and-borders.md | 27 +-- src/content/imgstyle/ja/faq.md | 72 ++++---- src/content/imgstyle/ja/full-css-reference.md | 62 ++++--- src/content/imgstyle/ja/introduction.md | 17 +- src/content/imgstyle/ja/pad-an-image.md | 37 ++-- .../imgstyle/ja/tailwindCSS-img-helpers.md | 34 ++-- .../imgstyle/ja/view-full-screen-image.md | 50 +++--- .../sv/_roundtrip_create-a-carousel.txt | 32 ++-- .../sv/_roundtrip_create-a-gallery.txt | 29 ++-- .../sv/_roundtrip_css-effects-and-borders.txt | 28 ++- src/content/imgstyle/sv/_roundtrip_faq.txt | 44 ++--- .../sv/_roundtrip_full-css-reference.txt | 39 +++-- .../imgstyle/sv/_roundtrip_introduction.txt | 126 +++++++------- .../imgstyle/sv/_roundtrip_pad-an-image.txt | 43 ++--- .../sv/_roundtrip_tailwindCSS-img-helpers.txt | 38 ++--- .../sv/_roundtrip_view-full-screen-image.txt | 43 +++-- src/content/imgstyle/sv/create-a-carousel.md | 24 ++- src/content/imgstyle/sv/create-a-gallery.md | 27 ++- .../imgstyle/sv/css-effects-and-borders.md | 28 ++- src/content/imgstyle/sv/faq.md | 44 ++--- src/content/imgstyle/sv/full-css-reference.md | 100 ++++++----- src/content/imgstyle/sv/introduction.md | 17 +- src/content/imgstyle/sv/pad-an-image.md | 39 +++-- .../imgstyle/sv/tailwindCSS-img-helpers.md | 33 ++-- .../imgstyle/sv/view-full-screen-image.md | 82 +++++---- .../zh/_roundtrip_create-a-carousel.txt | 32 ++-- .../zh/_roundtrip_create-a-gallery.txt | 29 ++-- .../zh/_roundtrip_css-effects-and-borders.txt | 26 ++- src/content/imgstyle/zh/_roundtrip_faq.txt | 69 ++++---- .../zh/_roundtrip_full-css-reference.txt | 159 +++++++++--------- .../imgstyle/zh/_roundtrip_introduction.txt | 106 ++---------- .../imgstyle/zh/_roundtrip_pad-an-image.txt | 33 ++-- .../zh/_roundtrip_tailwindCSS-img-helpers.txt | 31 ++-- .../zh/_roundtrip_view-full-screen-image.txt | 44 ++--- src/content/imgstyle/zh/create-a-carousel.md | 43 +++-- src/content/imgstyle/zh/create-a-gallery.md | 44 ++--- .../imgstyle/zh/css-effects-and-borders.md | 27 ++- src/content/imgstyle/zh/faq.md | 75 ++++----- src/content/imgstyle/zh/full-css-reference.md | 153 +++++++++-------- src/content/imgstyle/zh/introduction.md | 19 +-- src/content/imgstyle/zh/pad-an-image.md | 37 ++-- .../imgstyle/zh/tailwindCSS-img-helpers.md | 27 ++- .../imgstyle/zh/view-full-screen-image.md | 32 ++-- 285 files changed, 5393 insertions(+), 5647 deletions(-) diff --git a/src/content/docs/de/_roundtrip_breakpoints.txt b/src/content/docs/de/_roundtrip_breakpoints.txt index d2d48bc..ff9ffd4 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 +description: Why some (but not all) breakpoints matter for your images +taskInputHash: 82a3b7247c32f7a5 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- ### Background -Small screens and big monitors require different layouts. For `srcset` and `sizes`, we need to know when the layout changes. +Small screens and large monitors require different layouts. For `srcset` and `sizes`, we need to know at what point the layout changes. -Web developers need to decide what should be scaled down, hidden, or moved on smaller screens - or decide what should be expanded, revealed, or added on larger screens. They also have very little information available. Is the user on a tablet or phone in landscape mode or in a small browser window? +Web developers have to decide what shrinks, disappears, or moves on smaller screens - or what expands, reveals, or adds on larger screens. They also have very little information available. Is the device a tablet or a phone in landscape mode - or a small browser window? -We have to choose an arbitrary viewport width at which the layout changes. This is called a **breakpoint**. It can be any number of CSS pixels ([not device pixels](/en/pixels-not-pixels)). Polypane has a [great article](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023) on commonly used breakpoints. +We have to choose an arbitrary viewport width at which the layout changes. This is called a **breakpoint**. 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 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) might be immune to the layout shifts caused by these breakpoints (and are fine using [density descriptors in srcset](/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, a page's main content area is limited to a specific width, a `max-width`, on the largest screens. However, on small screens, the main content area fills the entire viewport. -When you have more than one column at some breakpoints, it becomes difficult to compute the effective size rules because the percentage of viewport width taken up by the image changes. +If you have more than one column at some breakpoints, it becomes harder to calculate effective sizing rules because the percentage of viewport width 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 said, don't worry too much about it. You'll probably 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 viewport width, we can use `100vw` for the image's `sizes` attribute to indicate that the image takes up 100% of the viewport width. +2. What is the largest 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 answer to 1 was 700px and your answer to 2 was 800px, 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 take care of all these calculations for us nicely based on CSS. Unfortunately, browsers are very eager to choose an image URL *before* downloading stylesheets. Therefore, we need to do the calculations ourselves, and they're okay with it if we don't get it perfect. ===================== 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..0070d61 100644 --- a/src/content/docs/de/_roundtrip_browser-picks-srcset.txt +++ b/src/content/docs/de/_roundtrip_browser-picks-srcset.txt @@ -1,28 +1,31 @@ --- -title: How the Browser selects -description: How the browser selects between images listed in the "srcset" attribute -taskInputHash: 21fa78dd27583003 +title: How Browsers Choose +description: How the browser chooses between images listed in the srcset attribute +taskInputHash: 267a70a857d78c03 lang: en +date_published: '2023-04-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -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 choose between images listed in the srcset attribute? Here is a step-by-step guide with examples for both width and density specifications and how the browser decides based on device and viewport. -- When using the "srcset" attribute in HTML, the browser uses a set of rules to select the most suitable image from a list of provided sources. These rules depend on both the display characteristics of the device (resolution, pixel density) and the size of the viewport. The "srcset" attribute allows you to specify different images based on width (using the "w" descriptor) or pixel density (using the "x" descriptor). Let's go through examples for both cases. +- When using the `srcset` attribute in HTML, the browser uses a set of rules to select the most appropriate image from a list of provided sources. These rules depend on the display properties 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 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 -Example image +example image ``` -The browser will perform the following steps: +The browser proceeds as follows: -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 device pixel ratio (DPR) 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 +33,23 @@ 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 to 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, `example-medium.jpg` is selected. -2. Density descriptor ("x"): +2. Density Descriptor (`x`): -Assuming we have the following "srcset" attribute: +Suppose we have the following `srcset` attribute: ```html -Example image +example image ``` -The browser will perform the following steps: +The browser proceeds as follows: -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 device pixel ratio (DPR) 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 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 +57,15 @@ 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 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 conjunction with the `srcset` attribute to provide additional information on how the image is displayed at different viewport widths. This is particularly useful with the width descriptor (`w`). Here is an example: ```html ` 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 screen. +## When should Srcset with Density Descriptors be used? -Srcset is an HTML attribute that allows you to specify multiple image sources for a single `` 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. +Using Srcset with density descriptors is particularly useful when you want to: +1. Provide high-resolution images to high-DPI displays (e.g. Retina displays) while delivering lower-resolution images to standard displays. +2. Improve page efficiency by delivering the most suitable image size to each user's device. +## Implementing 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. - -## Implementing srcset with density descriptors - -To use srcset with density descriptors, follow these steps: +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. Optionally, add the `sizes` attribute to set the size of the image on the screen. - -### Markup example +2. Add the "srcset" attribute to the `` element and specify the image sources and corresponding density descriptors. +3. Add the "sizes" attribute (optional) to specify the size of the image as it will appear 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 implement Srcset with Density Descriptors in your markup: ```html sizes -description: An efficient and definitive guide to responsive images until 2023 -taskInputHash: f8e7c31ccf577572 +title: srcset & Sizes +description: >- + An Efficient and Opinionated Guide to Responsive Images for 2023 +taskInputHash: 3c54d728637cc134 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -**An efficient and definitive guide to images until 2023** +**An Efficient and Opinionated Guide to Responsive Images for 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. +Please refer to the sidebar for a detailed explanation. This is a quick overview for updating `` tags to support modern devices in all their various sizes and pixel densities. You should [know that pixels aren't equal](/en/pixels-not-pixels) and `devicePixelRatio` is more likely to be 3.875 than 1:1. Modern phones pretend to be 320-428px wide for 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 the width of 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](/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. - -### The easy method +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 stops growing. +### The Simple Method ```html -dog riding on a bike - - - - +Dog riding bike + + + + ``` + +{{Note that "opinionated" here means having a strong viewpoint and not necessarily being factual.}} ===================== Content prompt used: @@ -48,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 und sizes - 2. Ein effizienter und dezidierter Leitfaden für responsive Bilder bis 2023 +Metadata returned1. srcset & Größen +2. Ein effizienter und Meinungen enthältlicher Leitfaden zu responsiven Bildern für 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..1e01972 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 +description: Steps to test a website's performance using Lighthouse +taskInputHash: 8d5b31624be45e35 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -How do you test your website's performance using Lighthouse? +How to Test Your Website's Performance Using 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. To test your website's performance using Lighthouse, follow these steps: > -> 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 that 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 located at the top right corner of the browser window, then select "More tools", and then select "Developer Tools" or 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\. Click on the Lighthouse icon on the left side of the Developer Tools 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 that you want to test and then click on "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 its analysis, a report featuring ratings and recommendations for improving your website's performance, accessibility, and other areas will be displayed. > -> 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 Testung der Leistung einer Website mit 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..c37ad62 100644 --- a/src/content/docs/de/_roundtrip_picture-examples.txt +++ b/src/content/docs/de/_roundtrip_picture-examples.txt @@ -1,54 +1,60 @@ ---- -title: Examples for usage of element -description: >- - Provides examples for the usage of the element for responsive images, art direction, and various image formats. -taskInputHash: aace1b3e0a9751e5 -lang: en ---- -Here are a few examples for the usage of 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` 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. - -2. Example for 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. - -3. Example for various 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. - -## 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 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. - -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. +--- +title: Examples of using the element +description: >- + Provides examples of using the element for responsive images, art direction, and different image formats +taskInputHash: 47a2e40ff73b4dd2 +lang: en +date_published: '2023-04-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' +--- +Here are some examples of using the `` element and their explanations: + +1. Example for responsive images: + +```html + + + + An image + +``` + +Explanation: This example uses the `` element 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 determine the conditions under which each source should be used. The `` element is used as a fallback for older browsers or if the conditions in the `` elements are not met. + +2. Example for art direction: + +```html + + + + An image + +``` + +Explanation: This example uses the `` element 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: This example uses the `` element to provide different image sources for different image formats. The `` elements specify different image sources using the "srcset" attribute and the "type" attribute to indicate 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 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 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 load appropriately sized images for each device, reducing page load times and improving the user experience. + +Breakpoints can be defined for each 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. ===================== Content prompt used: @@ -61,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. 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. +Metadata returned1. Beispiele zur Verwendung des Elements +2. Bietet Beispiele für die Verwendung des Elements für reaktionsfähige Bilder, Art Direction und verschiedene 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..c84f65e 100644 --- a/src/content/docs/de/_roundtrip_pixels-not-pixels.txt +++ b/src/content/docs/de/_roundtrip_pixels-not-pixels.txt @@ -1,23 +1,22 @@ --- title: px ≠ Pixel description: Device Pixels ≠ Browser Pixels ≠ Image Pixels -taskInputHash: 6bf2840ae3339b2e +taskInputHash: afcf72abda0fc043 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- ### Device Pixels ≠ Browser Pixels ≠ Image Pixels -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 never correspond to individual device or 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). +The `devicePixelRatio` on my desktop changes when I scale the browser and is set to 1.5 by default (my `System > Display > Scale` is 150%, after all). -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 for SVG) decode to a raster of pixels. **It is frustratingly difficult to display image pixels perfectly in 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 have really good reasons for a perfect match, though that forbidden art 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 in relation to the number of CSS pixels and behave as if everything is 96dpi. Developers avoid absolute units as it's generally better to use units derived from font size or viewport/container dimensions. Mismatched units can break a layout if the user changes their `System Preferences > Accessibility > Display > Text size` multiplier, zooms the browser or rotates their device. You should try all of these things before publishing your site. ===================== Content 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..7df3afd 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 specify width and height in HTML? + +> It is recommended to specify width and height attributes in the HTML code for 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 webpage for the image, preventing the content from jumping while the image is loading. +> +> Additionally, specifying the width and height attributes for images can also help improve the overall performance of the webpage. 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, avoiding unnecessary rebuilds or updates of the content during loading. +> +> Overall, by using width and height attributes in the HTML code for images, the user experience can be improved by loading content faster and reducing visual errors. ===================== Content 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..60cbb08 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 +description: Explains in which situations you should use the element +taskInputHash: 943b7bfb79d0e435 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -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 commonly used in responsive web design. -Here are some specific scenarios in which you would want to use the `picture` element: +Here are some specific scenarios in which you will 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:** High-resolution screens like 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 a version of the image that has twice as many pixels as the normal version so that it appears sharp and clear 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 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 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, 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. +* **Layouts with Specific Designs:** 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 show a close-up of a face on mobile devices but a wider view on desktop devices. The `picture` element allows you to provide different versions of the image 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 can help you optimize your images for a variety of use cases and ensure that they look great regardless of the device or screen size. ===================== 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. Wann man das -Element verwenden sollte -2. Erklärt, in welchen Situationen das -Element verwendet werden sollte. +Metadata returned1. Wann das -Element verwendet werden sollte. +2. Erklärt in welchen Situationen du das -Element verwenden solltest. 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..4577ea0 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: 0521ef35faa90867 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -Understanding width (`w`) and density (`x`) adapters 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 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 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 `w` or `x` descriptors to specify 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 `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 screen space. -> 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 selects the image with the nearest width to the available screen space. -## 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 `x` descriptor is used to specify the pixel density of an image, which represents 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-` 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 selects the image with the nearest 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` property to give the browser 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 für die 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..41e53b5 100644 --- a/src/content/docs/de/breakpoints.md +++ b/src/content/docs/de/breakpoints.md @@ -1,41 +1,40 @@ --- 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: 82a3b7247c32f7a5 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- ### 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. Für `srcset` und `sizes` müssen wir wissen, ab welchem Punkt das Layout geändert wird. -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:innen müssen entscheiden, was auf kleineren Bildschirmen verkleinert, ausgeblendet oder verschoben wird - oder was auf größeren Bildschirmen erweitert, aufgedeckt oder hinzugefügt wird. Sie haben auch sehr wenig Informationen zur Verfügung. Ist das Gerät eine Tablette oder ein Telefon im Querformat - oder ein kleines 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 beliebige Viewport-Breite wählen, bei der das Layout geändert wird. Dies nennt man **Breakpoint**. Es handelt sich um eine willkürliche Anzahl von CSS-Pixeln ([nicht Gerätepixeln](/de/pixels-not-pixels)). Polypane hat einen [hervorragenden 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) sind möglicherweise immun gegen die Layoutverschiebungen, die durch diese Breakpoints verursacht werden (und sind mit [Dichtebeschreibungen von srcset](/de/density-descriptors) in Ordnung). -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. +Hauptinhalt-Bilder 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`. Auf kleinen Bildschirmen füllt der Hauptinhaltbereich jedoch den gesamten Viewport 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 wirksamen Größenregeln zu berechnen, da sich der Prozentsatz der Viewportbreite ä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: +Davon abgesehen, denken Sie nicht zu viel darüber nach. Sie werden wahrscheinlich mit der folgenden Annäherung sehr gut zurechtkommen: -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. -2. Was ist die maximale Breite, die der Container jemals erreicht? Wir können das als festgelegte `width` für alles andere setzen. +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 für das `sizes`-Attribut des Bildes `100vw` verwenden, um anzugeben, dass das Bild 100 % der Viewportbreite einnimmt. +2. Was ist die maximale Breite, die der Container jemals erreicht? Wir können das als feste `width` für alles andere festlegen. -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 war 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 könnte denken, dass der Browser alle diese Berechnungen anhand von CSS schön für uns übernehmen könnte. Leider sind Browser äußerst bestrebt, eine Bild-URL *vor* dem Herunterladen von 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..342f6a0 100644 --- a/src/content/docs/de/browser-picks-srcset.md +++ b/src/content/docs/de/browser-picks-srcset.md @@ -1,70 +1,68 @@ --- title: Wie der Browser wählt -description: Wie der Browser zwischen in srcset aufgelisteten Bildern wählt -taskInputHash: 565e2cc4a65e54bd +description: Wie der Browser zwischen den im srcset-Attribut aufgelisteten Bildern wählt +taskInputHash: 267a70a857d78c03 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -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 - -Beispielbild + +``` + +Der Browser geht wie folgt vor: + +a. Ermitteln Sie die DPR (Gerätepixelverhältnis) des Geräts. Zum Beispiel hat ein Standarddisplay eine DPR von 1, während ein hochauflösendes (Retina-) Display 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 dem DPR. Für ein Gerät mit einem 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 Sichtfensterbreite. Nehmen Sie an, dass die Sichtfensterbreite 420px beträgt. Der Browser wählt das kleinste Bild mit einer effektiven Breite aus, die größer oder gleich der Sichtfensterbreite ist. In diesem Fall wird `example-medium.jpg` ausgewählt. + +2\. Pixeldichte-Deskriptor (`x`): + +Angenommen, wir haben das folgende `srcset`-Attribut: + +```html + +Beispielbild + +``` + +Der Browser geht wie folgt vor: + +a. Ermitteln Sie die DPR (Gerätepixelverhältnis) des Geräts. Zum Beispiel hat ein Standarddisplay eine DPR von 1, während ein hochauflösendes (Retina-) Display 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 der DPR des Geräts am nächsten liegt. 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 usw. + +Es ist wichtig zu beachten, dass Sie das `sizes`-Attribut auch in Kombination mit dem `srcset`-Attribut verwenden können, um weitere Informationen darüber zu geben, wie das Bild bei unterschiedlichen Sichtfensterbreiten angezeigt wird. Dies ist besonders nützlich bei Verwendung des Breiten-Deskriptors (`w`). Hier ist ein Beispiel: + +```html + +`-Element hinzu und geben Sie die Bildquellen und entsprechenden Density-Deskriptoren an. +3. Fügen Sie das Attribut "sizes" (optional) hinzu, um die Größe des Bildes anzugeben, wie es auf dem Bildschirm angezeigt wird. +### Markup-Beispiel -Hier ist ein Beispiel, wie Sie srcset mit Density Descriptors in Ihrem Markup implementieren: +Hier ist ein Beispiel, wie Sie Srcset mit Density-Deskriptoren in Ihrem Markup implementieren können: ```html -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 Standardbildquelle, die angezeigt wird, wenn der Browser Srcset nicht unterstützt. +- **srcset**: Die Liste der Bildquellen und ihrer Density-Deskriptoren (1x, 2x, 3x). Der Browser wählt das am besten geeignete Bild basierend auf der Anzeige des Benutzers aus. +- **alt**: Eine Beschreibung des Bildes für Barrierefreiheitszwecke. -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 erfolgreich Srcset mit Density-Deskriptoren implementiert und 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..49ecc98 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 Meinungen enthältlicher Leitfaden zu responsiven Bildern + für 2023 +taskInputHash: 3c54d728637cc134 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -**Ein effizienter und dezidierter Leitfaden für Bilder bis 2023** +**Ein effizienter und Meinungen enthältlicher Leitfaden zu Bildern für 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. +Schauen Sie in die Seitenleiste für eine ausführliche Erklärung. Dies ist eine schnelle Übersicht zur Aktualisierung dieser ``-Tags, um moderne Geräte in all ihren verschiedenen Größen und Pixel-Dichten zu unterstützen. Sie sollten [wissen, dass Pixel nicht gleich Pixel sind](/de/pixels-not-pixels) und `devicePixelRatio` wahrscheinlicher bei 3,875 als bei 1:1 ist. Moderne Telefone geben vor, 320-428px breit zu sein, um die Lesbarkeit zu verbessern (in CSS-Pixeln), haben jedoch 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 niemals seine Größe ändert, unabhängig von der Breite des Browserfensters, sollten Sie stattdessen einen [Dichte-Deskriptor verwenden](/de/density-descriptors). Dies ist oft geeignet für Logos, Icons und Schaltflächen. + +Wissen Sie, was Ihre [Breakpoints](/de/breakpoints) sind? Sie benötigen diese Zahlen, um die Lösung unten feinabzustimmen - und mindestens den Viewport-Brechpunkt, 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 fährt Fahrrad" /> - + - + ``` diff --git a/src/content/docs/de/lighthouse-performance-test.md b/src/content/docs/de/lighthouse-performance-test.md index b794f4e..cee6dbe 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 Testung der Leistung einer Website mit Lighthouse +taskInputHash: 8d5b31624be45e35 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- Wie testen Sie 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, Barrierefreiheit und anderer Aspekte einer Website verwendet werden kann. Um die Leistung Ihrer Website mit Lighthouse zu testen, befolgen Sie diese Schritte: > > 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 oben rechts im Browserfenster und wählen Sie dann "Weitere Tools" und anschließend "Entwicklertools" oder verwenden Sie 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 Entwicklertools-Panel auf das Lighthouse-Symbol auf der linken Seite des Panels oder drücken Sie "Strg+Shift+P" (Windows, Linux) oder "Command+Shift+P" (macOS), um das Befehlsmenü zu öffnen, tippen Sie dann "Lighthouse" 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". +> 4\. Wählen Sie im Lighthouse-Dialogfeld die Leistungs- 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 Bewertungen und Empfehlungen zur Verbesserung der Leistung, Barrierefreiheit 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. diff --git a/src/content/docs/de/picture-examples.md b/src/content/docs/de/picture-examples.md index 018820d..8b6a4bb 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 zur Verwendung des Elements description: >- - Beispiele zur Verwendung des -Elements für responsive Bilder, Art - Direction und unterschiedliche Bildformate -taskInputHash: d2a1e2234ca5c46c + Bietet Beispiele für die Verwendung des Elements für reaktionsfähige + Bilder, Art Direction und verschiedene Bildformate +taskInputHash: 47a2e40ff73b4dd2 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -Hier sind ein paar Beispiele für die Verwendung des `` Elements und deren Erklärungen: +Hier sind einige Beispiele für die Verwendung des `` Elements und deren Erklärungen: -1\. Beispiel für Responsive Bilder: +1\. Beispiel für reaktionsfähige 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 unterschiedlichen 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,9 +33,9 @@ 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 Portraitbildschirme angibt. -3\. Beispiel für unterschiedliche Bildformate: +3\. Beispiel für verschiedene Bildformate: ```html @@ -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 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. ## 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 der responsiven Gestaltung werden Breakpoints verwendet, um zu definieren, wann sich das Layout einer Website oder Anwendung basierend auf der Größe des Viewports ändern soll. Breakpoints werden in der Regel mithilfe von Media Queries in CSS definiert, die verschiedene Stile je nach Bildschirmbreite 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 obigen ersten Beispiel das `media` Attribut verwendet, um die Bildschirmbreite festzulegen, unter der jede Quelle verwendet werden soll. Wenn die Bildschirmbreite größer oder gleich 768 Pixeln ist, wird die Quelle `image-large.jpg` verwendet; wenn die Bildschirmbreite größer oder gleich 480 Pixeln, 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 entsprechend dimensionierte Bilder zu laden, 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 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 Sie flexible und responsiv gestaltete Designs erstellen, 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..0f84d76 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 +taskInputHash: afcf72abda0fc043 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -### Gerätepixel ≠ Browser px ≠ Bild px +### Gerätepixel ≠ Browser-Pixel ≠ Bildpixel -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 nie einzelnen Geräte- oder Drucker-Pixeln**. Das devicePixelRatio auf meinem Telefon beträgt 3,875; [wie hoch ist dein Wert?](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%). +Die devicePixelRatio meines Desktops ändert sich beim Skalieren des Browsers und ist standardmäßig auf 1,5 eingestellt (mein `System > Display > Skalierung` beträgt 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 (mit Ausnahme von SVG) dekodieren zu einem Raster von Pixeln. **Es ist ärgerlich schwierig, Bildpixel perfekt im Verhältnis 1:1 zu Gerätepixeln anzuzeigen - aber mit `srcset` können Sie *nah genug* kommen**, und ein wenig Javascript kann die Größe des HTML-Elements nach dem Laden anpassen, wenn Sie wirklich gute Gründe für eine perfekte Zuordnung haben, obwohl diese verbotene Kunst hier nicht enthüllt wird. -> 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 in Bezug auf die Anzahl der CSS-Pixel definiert und tun so, als ob alles 96dpi hat. Entwickler vermeiden absolute Einheiten, da es im Allgemeinen besser ist, Einheiten zu verwenden, die von der Schriftgröße oder den Abmessungen des viewport/Containers abgeleitet sind. Nicht übereinstimmende Einheiten können ein Layout brechen, wenn der Benutzer ihren `Systemeinstellungen > Bedienungshilfen > Textgröße`-Multiplikator ändert, den Browser zoomt oder ihr Gerät dreht. Sie sollten all diese Dinge ausprobieren, bevor Sie Ihre Website veröffentlichen. diff --git a/src/content/docs/de/specify-width-height.md b/src/content/docs/de/specify-width-height.md index 06c16be..6dc0329 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 +taskInputHash: 9c6713f57f98907d 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -Warum sollten Sie Breite und Höhe in HTML einfügen? +Warum sollten Sie Breite und Höhe im HTML angeben? -> 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, weil es dem Webbrowser hilft, die Größe des Bildes zu kennen, bevor es vollständig geladen ist. Dadurch kann der Browser den entsprechenden Platz auf der Webseite für das Bild reservieren, was verhindert, dass der Inhalt springt, während das Bild geladen wird. > -> 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. +> Darüber hinaus kann das Angeben der Breite und Höhe Attribute für Bilder auch dazu beitragen, die Gesamtperformance 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 Neuaufbauten oder Aktualisierungen des Inhalts beim Laden 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 durch die Verwendung von Breite und Höhe Attributen im HTML-Code für Bilder die Benutzererfahrung verbessert werden, indem der Inhalt schneller geladen wird und visuelle Fehler 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..f02e21e 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 +title: Wann das -Element verwendet werden sollte. +description: Erklärt in welchen Situationen du das -Element verwenden solltest. +taskInputHash: 943b7bfb79d0e435 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -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 werden soll. 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 eingesetzt. -Hier sind einige konkrete Szenarien, in denen Sie das `picture`-Element verwenden möchten: +Hier sind einige konkrete Szenarien, in denen du das `picture`-Element verwenden möchtest: -* **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:** 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ösung optimiert sind. Mit dem `picture`-Element kannst du eine Version des Bildes bereitstellen, die doppelt so viele Pixel wie die normale Version hat, damit es auf Retina-Displays scharf und klar 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. +* **Verschiedene Seitenverhältnisse:** Wenn du eine Website gestaltest, die Bilder mit verschiedenen Seitenverhältnissen anzeigen muss (wie Querformat vs. Hochformat), kannst du 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 benötigen, insbesondere auf mobilen Geräten. Mit dem `picture`-Element kannst du kleinere Versionen des Bildes für Geräte mit kleineren Bildschirmen oder langsameren Internetverbindungen bereitstellen, was dazu beitragen kann, die Ladezeiten der Seite zu reduzieren. -* **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. +* **Layouts mit bestimmten Designs:** Manchmal möchten Sie ein Bild auf eine bestimmte Weise präsentieren, abhängig vom Layout des Restes der Seite. Beispielsweise möchten Sie auf mobilen Geräten eine Nahaufnahme eines Gesichts zeigen, auf Desktopgeräten jedoch eine breitere Ansicht. Das `picture`-Element ermöglicht es Ihnen, verschiedene Versionen des Bildes bereitzustellen, die für unterschiedliche 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, das dir helfen kann, deine Bilder für eine Vielzahl von Anwendungsfällen zu optimieren und sicherzustellen, dass sie unabhängig vom Gerät oder der 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..85797a9 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 für die Verwendung von Breiten- und Dichtedescriptoren in `srcset` +taskInputHash: 0521ef35faa90867 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -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 verschiedenen Auflösungen oder Pixeldichten bereitzustellen und den Browser je nach Anzeigeeigenschaften des Geräts das entsprechende Bild auswählen zu lassen. Das `srcset`-Attribut verwendet eine Kombination aus `URL` und `w` oder `x` Descriptoren, 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 `w` Descriptor 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 entsprechende Bild für den verfügbaren Bildschirmraum 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` lautet 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. +> Im obigen Beispiel haben wir dem Browser drei Bilder und ihre entsprechenden Breiten in Pixeln bereitgestellt. Der Browser wählt das Bild mit der nächstgelegenen Breite zum verfügbaren Bildschirmraum aus. -## Dichteadapter (`x`) +## Dichten- (`x`) Descriptor -> 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. +> Der `x` Descriptor wird verwendet, um die Pixeldichte eines Bildes anzugeben, welche das Verhältnis von physischen Pixeln zu CSS-Pixeln darstellt. 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-`Adapters in `srcset` sieht wie folgt aus: +> Die Syntax für die Verwendung des `x` Descriptors in `srcset` lautet 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 bereitgestellt. Der Browser wählt das Bild mit der nächstgelegenen Pixeldichte zum Bildschirm des Geräts aus. -> 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` Descriptoren in derselben `srcset`-Eigenschaft zusammen verwendet werden können, um dem Browser mehr Optionen zur Auswahl zu geben. diff --git a/src/content/docs/en/breakpoints.md b/src/content/docs/en/breakpoints.md index ad658c5..3990cf0 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-02' +date_modified: '2023-04-02' --- ### Background diff --git a/src/content/docs/en/browser-picks-srcset.md b/src/content/docs/en/browser-picks-srcset.md index 43ecbc0..c82b758 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-02' +date_modified: '2023-04-02' --- 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..57b16de 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-02' +date_modified: '2023-04-02' --- 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..84b25ad 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-02' +date_modified: '2023-04-02' --- **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..93d9648 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-02' +date_modified: '2023-04-02' --- 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..6ecb40a 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-02' +date_modified: '2023-04-02' --- 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..318b03a 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-02' +date_modified: '2023-04-02' --- ### 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..95cdf86 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-02' +date_modified: '2023-04-02' --- 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..ccf64e7 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-02' +date_modified: '2023-04-02' --- 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..5de1d57 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-02' +date_modified: '2023-04-02' --- 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..1dd8ac0 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: 134608dedf99da13 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- ### 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 and big screens need different designs. For the purpose of `srcset` and `sizes`, we need to know at what point 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 need to decide what to reduce, hide, or relocate on smaller screens, or more commonly, what to expand, reveal, or add on larger screens. They also have very little information. Is the user on a tablet or on a phone in landscape mode, or on 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 need to choose an arbitrary viewport width at which the design change occurs. This is called a **breakpoint**. It's an arbitrary number of CSS pixels ([not device pixels](https://www.html5rocks.com/en/mobile/high-dpi/#toc-pixels-in-css-vs.-pixels-in-devices)). 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 (such as logos or 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#Resolution_switching_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 limited by the size of their container. 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 whole 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 multiple columns at some breakpoints, it'll be harder to calculate the effective sizing rules since the percentage of viewport width the image occupies will change. -### The Easy Method +### The Simple Method That being said, don't overcomplicate things. You'll probably be just 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. +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 `sizes` attribute to indicate 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. 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 appropriately handle all this math based on the CSS. Unfortunately, browsers are eager to choose an image URL *before* downloading the stylesheets. So we have to do the calculations ourselves, and it serves them well if we don't do it perfectly. ===================== Content prompt used: @@ -51,7 +49,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. Breakpoints e imágenes +Metadata returned1. Puntos de interrupción e imágenes 2. Por qué algunos (pero no todos) los puntos de interrupción son importantes para tus imágenes diff --git a/src/content/docs/es/_roundtrip_browser-picks-srcset.txt b/src/content/docs/es/_roundtrip_browser-picks-srcset.txt index 4443f64..9496c5f 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 images listed in the srcset attribute +taskInputHash: 8bf272adb1c75935 lang: en +date_published: '2023-04-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -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 examples for both width and density specifications, and how the browser decides based on the device and viewport 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 provided sources. These rules depend on both the device's screen characteristics (resolution, pixel density) and the viewport size. The `srcset` attribute allows you to specify different images according to 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`): -Suppose we have the following `srcset` attribute: +Let's 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) of the device. For example, a standard screen has a DPR of 1, whereas 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: + + - example-small.jpg: 400 * 1 = 400px -- small-example.jpg: 400 * 1 = 400 pixels + - example-medium.jpg: 800 * 1 = 800px -- medium-example.jpg: 800 * 1 = 800 pixels + - example-large.jpg: 1600 * 1 = 1600px -- large-example.jpg: 1600 * 1 = 1600 pixels +c. Compare the effective widths with the width of the viewport. Let's 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 select `example-medium.jpg`. -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`. +2. Density descriptor (`x`): -2\. Pixel density descriptor (`x`): - -Suppose we have the following `srcset` attribute: +Let's 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) of the device. For example, a standard screen has a DPR of 1, whereas 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: +b. Compare the device’s 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 that is 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. -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 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 viewport widths. This is particularly 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. +This markup example includes: + +- **src**: The default image source, which is displayed if the browser does not support srcset. +- **srcset**: The list of image sources and their density descriptors (1x, 2x, 3x). The browser selects the most appropriate image based on the user's screen. - **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. +That's it! You have successfully implemented srcset with density descriptors, improving performance and user experience on your website. ===================== Content prompt used: @@ -55,7 +57,7 @@ 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 +Metadata returned1. Descriptores de densidad y srcset 2. Ejemplos de uso de descriptores de densidad en `srcset` diff --git a/src/content/docs/es/_roundtrip_introduction.txt b/src/content/docs/es/_roundtrip_introduction.txt index 7d7d4de..9dd46ff 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 +title: srcset and sizes +description: An Efficient and Opinionated Responsive Images Guide for 2023 +taskInputHash: 92408fb14004213e 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -**An efficient and opinionated guide to images for 2023** +**An efficient and opinionated responsive images guide for 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. +Check the sidebar for more in-depth explanations. This is a quick summary of how to update your `` tags to handle modern devices with all their different sizes and pixel densities. You should [know that pixels are not 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 somewhere between 320-428 pixels wide to be more readable (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 changes size no matter how narrow you make the browser window, you should use [the density descriptor instead](/en/density-descriptors). This is often 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 fine-tune the solution below, and at minimum, the viewport width breakpoint where the main content area stops growing. -### The easy method + +### Easy Method ```html Dog riding a bicycle + srcset="img.jpg?format=webp&w=480 480w, + img.jpg?format=webp&w=800 800w, + img.jpg?format=webp&w=1200 1200w, + img.jpg?format=webp&w=1600 1600w, + img.jpg?format=webp&w=2000 2000w" + sizes="(max-width: 700px) 100vw, 800px" alt="Dog riding a bike" /> - + - ``` ===================== @@ -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 Responsivas 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..6cf383c 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 -description: Steps on how to test the performance of a website using Lighthouse -taskInputHash: d6d69f5336f685c3 +title: Test Performance with Lighthouse +description: Steps for testing a website's performance using Lighthouse +taskInputHash: c4d507b3e86e802d 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -How to test the performance of your site with Lighthouse? +How do you test a site's 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 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. +> 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). +> 2. Click on the three dots in the upper-right corner of the browser window, 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". +> 3. In the Developer tools panel, click on the Lighthouse icon located 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." > -> 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 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. +> 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. +> By following these steps, you can use Lighthouse to test and optimize your website's performance, which can help improve the 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. Prueba de rendimiento con Lighthouse -2. Pasos sobre cómo probar el rendimiento de un sitio web utilizando Lighthouse +Metadata returned1. Prueba el rendimiento con Lighthouse +2. Pasos para 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..cd20bcb 100644 --- a/src/content/docs/es/_roundtrip_picture-examples.txt +++ b/src/content/docs/es/_roundtrip_picture-examples.txt @@ -1,35 +1,39 @@ --- title: Examples using the element description: >- - Provides examples using the element for responsive images, art direction, and different image formats. -taskInputHash: aa9de5a15f947b5e + Provides examples using the element for responsive images, + art direction, and different image formats. +taskInputHash: c4a333e59e3522b1 lang: en +date_published: '2023-04-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -Here are some examples of using the `` element and their explanations: +Here are some examples of using the element and their explanations: 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 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: ```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 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 vertical screens. 3. Example for different image formats: @@ -43,15 +47,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 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 don't 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 a website or application's layout should change based on the viewport size. 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. -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 for which each source should be used. When the screen width is greater than or equal to 768 pixels, the "big-image.jpg" source will be used; when the screen width is greater than or equal to 480 pixels but less than 768 pixels, the "medium-image.jpg" source will be used; and when the screen width is less than 480 pixels, the "small-image.jpg" source will be used. This allows us to provide appropriately sized images for each device, reducing 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, 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 range of devices. By combining breakpoints with the element, you can create flexible, responsive layouts that look great on any device. ===================== Content prompt used: @@ -64,7 +68,7 @@ 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 +Metadata returned1. Ejemplos usando el elemento 2. Proporciona ejemplos utilizando el elemento para imágenes responsivas, dirección de arte y diferentes formatos de imagen. diff --git a/src/content/docs/es/_roundtrip_pixels-not-pixels.txt b/src/content/docs/es/_roundtrip_pixels-not-pixels.txt index 80ec2d2..b58a0c1 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: d9341ed4cd1f741b 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -### Device Pixels ≠ Browser Pixels ≠ Image Pixels +### Device pixels ≠ browser pixels ≠ image pixels -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**. The devicePixelRatio on my phone 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%). +The devicePixelRatio on my desktop changes when I zoom in the browser, but by default it's 1.5 (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 the image pixels to show perfectly in a 1:1 ratio with device pixels, but with `srcset` you can get close enough**, and with a little bit of JavaScript, you can adjust the size of the HTML element after it loads if you have a truly justified reason for needing that perfect mapping, though the magic won't 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/en-US/docs/Web/CSS/length) are defined in terms of the number of CSS pixels and assume everything is 96dpi. Developers avoid absolute units because it's generally better to use units that are derived from font size or viewport/container dimensions. Non-matching units can break the layout if the user adjusts the `Accessibility > Text size` multiplier, zooms the browser, or rotates their device. Needless to say, you should do all of these things 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 ≠ 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..726ce78 100644 --- a/src/content/docs/es/_roundtrip_specify-width-height.txt +++ b/src/content/docs/es/_roundtrip_specify-width-height.txt @@ -1,21 +1,19 @@ --- -title: Use Width and Height Attributes +title: Use width and height attributes description: Benefits of using width and height attributes in HTML code -taskInputHash: c1840d188c21b829 +taskInputHash: 2df3c09417a19a6a 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- +Why should you use width and height in HTML? -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 include the width and height attributes in the HTML code for 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 amount of space on the webpage for the image, which prevents content from shifting while the image is being loaded. +> +> In addition, specifying the width and height attributes for images can also help improve the overall performance of the webpage. 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 reflows or repaints of the 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: @@ -29,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. Usa ancho y altura -2. Beneficios de usar los atributos de ancho y altura en el código HTML +2. Beneficios de usar atributos de ancho y altura 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..7040b19 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,26 @@ --- -title: When to Use the Element -description: Explains in which situations you should use the element -taskInputHash: 97265d75f3229eaa +title: When to use the element +description: Explains in which situations should you use the element +taskInputHash: 946a98a4edf97518 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -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: +The `picture` element is used to provide several 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. -* **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. +Here are some specific scenarios where you may want to use the `picture` element: -* **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. +* **Retina displays:** High-density displays, such as Apple's Retina displays, have a higher pixel density, meaning 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 that has twice the pixels of the normal version, so that it looks sharp and clear on Retina displays. + +* **Different aspect ratios:** If you are designing a website that needs to display images with different aspect ratios (such as horizontal vs. vertical), 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 layouts:** 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 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 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. +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 no matter the device or screen size they're being viewed on. ===================== Content prompt used: @@ -33,8 +33,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. Cuándo usar el elemento -2. Explica en qué situaciones se debe usar el elemento +Metadata returned1. Cuándo utilizar el elemento +2. Explica en qué situaciones debería 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..e6f4fd9 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 +taskInputHash: 726729e76dc80c38 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -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 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 allow the browser to select the appropriate image according to the characteristics of the device's screen. The `srcset` attribute uses a combination of the `URL` and the `w` or `x` descriptors to specify the images. -## Width Descriptors (`w`) +## Width Descriptor (`w`) -> 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 that it can choose the appropriate image according to 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`) -> 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 more options to choose from. ===================== Content prompt used: diff --git a/src/content/docs/es/breakpoints.md b/src/content/docs/es/breakpoints.md index fe98f82..b64f1ea 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 interrupción e imágenes description: >- Por qué algunos (pero no todos) los puntos de interrupción son importantes para tus imágenes -taskInputHash: cc4be952df3fef63 +taskInputHash: 134608dedf99da13 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- ### 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 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é reducir, ocultar o reubicar en pantallas más pequeñas, o más comúnmente, qué 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 pequeña ventana del navegador? -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 **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 puntos de interrupción 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 los logotipos o los iconos o los 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 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 principales de contenido estarán limitadas por el tamaño de su contenedor. Normalmente, el área principal de contenido de una página se limitará a un ancho determinado en las pantallas más grandes, un `max-width`, pero en pantallas pequeñas, el área principal de contenido llenará 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 tienes más de una columna en algunos puntos de interrupción, será más difícil calcular las reglas de dimensionamiento efectivas, ya que el porcentaje del ancho del viewport que la imagen ocupa cambiará. -### El método fácil +### El método sencillo Dicho esto, no te compliques demasiado. Probablemente estarás 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 utilizar `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 alcanza alguna vez? Podemos fijar eso como una `width` fija 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 tu respuesta a 1 fue 700px y tu respuesta a 2 fue 800px, puedes utilizar 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 adecuadamente todos estos cálculos basados en el CSS. Desafortunadamente, los navegadores están ansiosos por elegir una URL de imagen *antes* de descargar las hojas de estilo. Así que tenemos que hacer los cálculos nosotros mismos, y les sirve bien si no lo hacemos perfectamente. diff --git a/src/content/docs/es/browser-picks-srcset.md b/src/content/docs/es/browser-picks-srcset.md index 5236618..f73ff49 100644 --- a/src/content/docs/es/browser-picks-srcset.md +++ b/src/content/docs/es/browser-picks-srcset.md @@ -1,69 +1,68 @@ --- title: Cómo el navegador elige description: Cómo el navegador elige entre imágenes listadas en el atributo srcset -taskInputHash: 49304fce4ac555da +taskInputHash: 8bf272adb1c75935 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -¿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. - -- 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. - -1\. Descriptor de ancho (`w`): - -Supongamos que tenemos el siguiente atributo `srcset`: - -```html - -Ejemplo de imagen - -``` - -El navegador seguirá los siguientes 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. - -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: - -- example-small.jpg: 400 \* 1 = 400px - -- example-medium.jpg: 800 \* 1 = 800px - -- example-large.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`. - -2\. Descriptor de densidad de píxeles (`x`): - -Supongamos que tenemos el siguiente atributo `srcset`: - -```html - -Ejemplo de imagen - -``` - -El navegador seguirá los siguientes 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. - -b. Compara la DPR del dispositivo con los descriptores `x` en `srcset`. En este caso, tenemos tres imágenes con los siguientes descriptores: - -- example-1x.jpg: 1x - -- example-2x.jpg: 2x - -- example-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. - -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: - -```html - -Imagen de ejemplo + +``` + +El navegador seguirá estos pasos: + +a. Determine la DPR (Device Pixel Ratio) 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. + +b. Calcule el ancho efectivo para cada imagen en el `srcset`. Multiplique el descriptor de ancho por la DPR. Para un dispositivo con una DPR de 1: + +- example-small.jpg: 400 * 1 = 400px + +- example-medium.jpg: 800 * 1 = 800px + +- example-large.jpg: 1600 * 1 = 1600px + +c. Compare los anchos efectivos con el ancho del viewport. Supongamos que el ancho del viewport es 420px. El navegador elegirá la imagen más pequeña con un ancho efectivo mayor o igual al ancho del viewport. En este caso, seleccionará `example-medium.jpg`. + +1. Descriptor de densidad de píxeles (`x`): + +Supongamos que tenemos el siguiente atributo `srcset`: + +```html + +Imagen de ejemplo + +``` + +El navegador seguirá estos pasos: + +a. Determine la DPR (Device Pixel Ratio) 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. + +b. Compare la 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 + +- example-2x.jpg: 2x + +- example-3x.jpg: 3x + +c. Elija la imagen con el descriptor `x` que esté más cerca de 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. + +Es importante tener en cuenta que también se 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 viewport. Esto es particularmente útil cuando se usa el descriptor de ancho (`w`). Aquí hay un ejemplo: + +```html + +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..fe6280c 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 +title: Prueba el rendimiento con Lighthouse +description: Pasos para probar el rendimiento de un sitio web usando Lighthouse +taskInputHash: c4d507b3e86e802d 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- ¿Cómo se prueba el rendimiento del sitio 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 su sitio web con Lighthouse, siga estos pasos: > -> 1\. Abre el navegador web Google Chrome y navega hasta la página que deseas probar. +> 1. Abra el navegador web Google Chrome y vaya a la página que desea 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). +> 2. Haga clic en los tres puntos en la esquina superior derecha de la ventana del navegador, seleccione "Más herramientas" y luego "Herramientas para desarrolladores" o simplemente use el atajo de 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". +> 3. En el panel de Herramientas para desarrolladores, haga clic en el icono Lighthouse ubicado en el lado izquierdo del panel o presione "Ctrl+Shift+P" (Windows, Linux) o "Command+Shift+P" (macOS) para abrir el Menú de comandos, luego escriba "Lighthouse" y seleccione "Generar informe". > -> 4\. En el cuadro de diálogo Lighthouse, selecciona el rendimiento y otras opciones relevantes que deseas probar, luego haz clic en "Generar reporte". +> 4. En el cuadro de diálogo de Lighthouse, seleccione las opciones de rendimiento y otras opciones relevantes que desea probar, luego haga 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, accesibilidad y otras áreas de tu sitio web. +> 5. Después de que Lighthouse complete su análisis, verá un informe con puntuaciones y recomendaciones para mejorar el rendimiento, accesibilidad y otras áreas de su 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. +> Siguiendo estos pasos, puede utilizar Lighthouse para probar y optimizar el rendimiento de su sitio web, lo que puede ayudar a mejorar la experiencia del usuario y las clasificaciones de 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..558e721 100644 --- a/src/content/docs/es/picture-examples.md +++ b/src/content/docs/es/picture-examples.md @@ -1,59 +1,58 @@ --- title: Ejemplos usando el elemento description: >- - Proporciona ejemplos utilizando el elemento , para imágenes + Proporciona ejemplos utilizando el elemento para imágenes responsivas, dirección de arte y diferentes formatos de imagen. -taskInputHash: 6db4516ee45090eb +taskInputHash: c4a333e59e3522b1 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -Aquí hay algunos ejemplos de cómo usar el elemento `` y sus explicaciones: +Aquí hay algunos ejemplos de uso del elemento `` y sus explicaciones: 1\. Ejemplo para imágenes responsivas: ```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, se utiliza el elemento `` para proporcionar diferentes fuentes de imagen para diferentes tamaños de pantalla. Los elementos `` especifican las diferentes fuentes de imagen usando 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 más antiguos o cuando no se cumplen las condiciones especificadas en los elementos ``. 2\. Ejemplo para 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 fuentes de imagen 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. 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 fuentes de imagen 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 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 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 del viewport. Los puntos de interrupción se definen típicamente utilizando 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 fuentes 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, utilizamos el atributo `media` para especificar el ancho de la pantalla para el cual se debe utilizar cada fuente. Cuando el ancho de la pantalla es mayor o igual a 768 píxeles, se utilizará la fuente `imagen-grande.jpg`; cuando el ancho de la pantalla es mayor o igual a 480 píxeles pero menor que 768 píxeles, se utilizará la fuente `imagen-mediana.jpg`; y cuando el ancho de la pantalla es menor que 480 píxeles, se utilizará la fuente `imagen-pequeña.jpg`. Esto nos permite proporcionar imágenes con un tamaño apropiado para cada dispositivo, reduciendo los tiempos de carga y mejorando 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 utilizar 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..de3f228 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: d9341ed4cd1f741b 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -### Píxeles de dispositivo ≠ píxeles del navegador ≠ píxeles de imagen +### Píxeles de dispositivo ≠ píxeles de navegador ≠ píxeles 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 de 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%). +El devicePixelRatio en mi computadora de escritorio cambia cuando hago zoom en el navegador, pero por defecto es de 1,5 (mi `Sistema > Pantalla > Escala` 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 molestoamente difícil lograr que los píxeles de la imagen se muestren perfectamente en una relación 1:1 con los píxeles del dispositivo, pero con `srcset` puedes acercarte lo suficiente**, y con un poco de Javascript, puedes ajustar el tamaño del elemento HTML después de la carga si tienes razones verdaderamente justificadas para necesitar ese mapeo perfecto, aunque aquí no se revelar la magia. -> 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/length) se definen en términos de número de píxeles CSS y pretenden que todo es de 96dpi. Los desarrolladores evitan las unidades absolutas porque generalmente es mejor usar unidades que se deriven del tamaño de fuente o de las dimensiones del viewport/contenedor. Las unidades no coincidentes pueden romper el diseño si el usuario ajusta el multiplicador de `Accesibilidad > Tamaño del texto`, hace zoom en el navegador o rota su dispositivo. Es innecesario decir que debes hacer todas estas cosas antes de publicar tu sitio. diff --git a/src/content/docs/es/specify-width-height.md b/src/content/docs/es/specify-width-height.md index 74d5c12..34d9387 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 +description: Beneficios de usar atributos de ancho y altura en el código HTML +taskInputHash: 2df3c09417a19a6a 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -¿Por qué deberías poner ancho y altura en el HTML? +¿Por qué deberías poner el ancho y la altura 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 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 adecuada de espacio en la página web para la imagen, lo cual evita que el contenido se mueva mientras se carga la imagen. > -> 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 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 de manera más precisa la cantidad de espacio necesaria para mostrar la imagen y evitar reflows o repintados innecesarios 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, el uso de los atributos de ancho y altura en el código HTML para las imágenes puede mejorar la experiencia del usuario al hacer que el contenido 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..0f2b105 100644 --- a/src/content/docs/es/when-to-use-picture.md +++ b/src/content/docs/es/when-to-use-picture.md @@ -1,23 +1,22 @@ --- -title: Cuándo usar el elemento -description: Explica en qué situaciones se debe usar el elemento -taskInputHash: 97265d75f3229eaa +title: Cuándo utilizar el elemento +description: Explica en qué situaciones debería utilizar el elemento +taskInputHash: 946a98a4edf97518 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -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 proporcionar varias versiones de una imagen y determinar qué versión de la imagen mostrar según ciertas condiciones. Es particularmente útil para optimizar imágenes para diferentes tamaños de pantalla y resoluciones, y se utiliza comúnmente en el diseño web receptivo. -Aquí hay algunos escenarios específicos donde podría querer utilizar el elemento `picture`: +Aquí hay algunos escenarios específicos donde es posible que desee 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 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. +* **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 están optimizadas para una alta resolución. Con el elemento `picture`, puede proporcionar una versión de la imagen que tenga el doble de píxeles que la versión normal, de modo que se vea nítida y clara en las pantallas Retina. -* **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. +* **Diferentes relaciones de aspecto:** Si está diseñando un sitio que necesita mostrar imágenes con diferentes relaciones de aspecto (como horizontal vs. vertical), 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`, 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. +* **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 a 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 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. +* **Diseños dirigidos por arte:** A veces puede que desee presentar una imagen de cierta manera dependiendo del diseño del resto de la página. Por ejemplo, puede que desee 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 ayudarlo a optimizar sus imágenes para una variedad de casos de uso y asegurarse de que se vean geniales sin importar el dispositivo o tamaño de pantalla en el que se estén viendo. diff --git a/src/content/docs/es/width-density.md b/src/content/docs/es/width-density.md index 123cd3f..05c0006 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 +taskInputHash: 726729e76dc80c38 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- Entendiendo los descriptores de ancho (w) y densidad (x) en `srcset`. Usa ejemplos y 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 adecuada según las características de la 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. +## Descriptor de 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 según el espacio de pantalla disponible. > La sintaxis para utilizar el descriptor `w` en `srcset` es la siguiente: @@ -22,14 +22,14 @@ Entendiendo los descriptores de ancho (w) y densidad (x) en `srcset`. Usa ejempl srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" - alt="Ejemplo de Imagen"> + alt="Ejemplo de imagen"> ``` +> 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 de pantalla disponible. -> 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`) +## Descriptor 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 píxeles físicos y 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: @@ -38,10 +38,9 @@ Entendiendo los descriptores de ancho (w) y densidad (x) en `srcset`. Usa ejempl srcset="small.jpg 1x, medium.jpg 2x, large.jpg 3x" - alt="Ejemplo de Imagen"> + alt="Ejemplo de imagen"> ``` +> 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. -> 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. - -> 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. +> Nota que los descriptores `w` y `x` pueden ser utilizados 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..2fb6a87 100644 --- a/src/content/docs/fr/_roundtrip_breakpoints.txt +++ b/src/content/docs/fr/_roundtrip_breakpoints.txt @@ -1,43 +1,42 @@ --- title: Breakpoints and Images description: >- - Why some breakpoints (but not all) matter for your images -taskInputHash: b9dc6c0d27d7c8b7 + Why some breakpoints (but not all) are important for your images +taskInputHash: 2da636e94352f2f4 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- ### Context -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 need to decide what to reduce, hide, or move on smaller screens - or more commonly, what to expand, reveal, or add on larger screens. They also have very little information at their disposal. Is the user using a tablet or 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 need to choose an arbitrary display port 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. -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 (such as logos, icons, or buttons) may be immune to layout changes caused by these breakpoints (and be compatible with [srcset density descriptors](/en/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. +Main content images will be limited by the size of their container. Usually, the main content area of a page 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 display port. -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 more difficult to calculate effective sizing rules, as the percentage of display port width that the image will take up will change. -### The easy way +### The Easy 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 make your life too difficult. 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 point does the main column (or image container) stop growing? Up to this display port width, we can use `100vw` for the image's `sizes` attribute to indicate that the image is taking up 100% of the display port width. +2. What is the maximum width this container can be? We can lock it all in with a `width`. -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 the first question is 700px and to the second question, 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. +> One might think that the browser could handle all of these calculations for us based on CSS. Unfortunately, browsers are very eager to choose an image URL *before* style sheets are downloaded. So we have to do the calculations ourselves, and they're well worth it if we don't do them perfectly. ===================== Content 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..1182d2f 100644 --- a/src/content/docs/fr/_roundtrip_browser-picks-srcset.txt +++ b/src/content/docs/fr/_roundtrip_browser-picks-srcset.txt @@ -1,62 +1,69 @@ --- -title: How does the browser choose between images listed in the srcset attribute +title: How the browser chooses description: How the browser chooses between images listed in the srcset attribute -taskInputHash: df517c34368094dc +taskInputHash: 5fd39ce5e4764c5f lang: en +date_published: '2023-04-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -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 is a step-by-step guide, 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 examine 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 ``` -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). 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 `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 -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`. +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`. -2. Pixel Density Descriptor (`x`): +2. Pixel density descriptor (`x`): -Assuming we have the following `srcset` attribute: +Suppose we have the following `srcset` attribute: -```html +```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). 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 `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 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 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: -```html +```html -An example image ``` -This markup example includes: -- **src**: The default image source, 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 appropriate image based on the user's display. +This example 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 will choose the most appropriate image based on the user's screen. - **alt**: A description of the image for accessibility purposes. -And there you have it! You have successfully implemented srcset with density descriptors, improving the performance and user experience of your website. +And that's it! You've successfully implemented srcset with density descriptors, improving the performance and user experience of your website. ===================== Content prompt used: diff --git a/src/content/docs/fr/_roundtrip_introduction.txt b/src/content/docs/fr/_roundtrip_introduction.txt index 1f7428d..8e56ed0 100644 --- a/src/content/docs/fr/_roundtrip_introduction.txt +++ b/src/content/docs/fr/_roundtrip_introduction.txt @@ -1,40 +1,40 @@ --- title: srcset and sizes -description: An efficient and subjective guide for responsive images in 2023 -taskInputHash: 2f3bd9fa4d308fbc +description: An efficient and subjective guide to responsive images for 2023 +taskInputHash: d6fa9de33e6044f9 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -**An efficient and subjective guide for images in 2023** +**An efficient and subjective guide to images for 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 the detailed version. This is a quick reference repository for upgrading `` 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 claim to be 320-428 pixels wide for readability (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 in size no matter how much you resize the browser window, you should use [a density descriptor instead](/en/density-descriptors). 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 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 refine the solution below - at minimum, the viewport width breakpoint where the main content area stops growing. -### The easy way + +### The easy method ```html -Dog riding bicycle + 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 capped at 800 CSS pixels --> - + ``` ===================== @@ -48,8 +48,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 les tailles des balises +2. Un guide efficace et subjectif sur les images réactives pour 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..f5d7c4c 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 +taskInputHash: 93145af1c141dd39 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -How to test your site's performance with Lighthouse? +How to test your website's performance 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: +> Lighthouse is a tool that can be used to measure a website's performance, accessibility, and other aspects. To test your website's performance using 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). +> 2\. Click the three dots in the top right of the browser window, then select "More tools", 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". +> 3\. In the Developer tools panel, 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, 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". +> 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 finishes its analysis, you will see a report with scores and recommendations for improving the performance, accessibility, and other areas of your website. +> 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 ranking in search engines. +> 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. ===================== Content prompt used: diff --git a/src/content/docs/fr/_roundtrip_picture-examples.txt b/src/content/docs/fr/_roundtrip_picture-examples.txt index 10f80e1..084aa6c 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 of using the element for screen-size sensitive images, art direction, and different image formats. +taskInputHash: 32f43bccd639d3e9 lang: en -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02 ' --- -Here are some examples of using the `` element with explanations: +Here are a few examples of using the `` element and their explanations: -1. Example for responsive images: +1\. Example for screen-size sensitive images: ```html @@ -20,9 +20,9 @@ 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 depending on the screen size. 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 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 @@ -32,9 +32,9 @@ 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 depending 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: +3\. Example for different image formats: ```html @@ -46,13 +46,13 @@ Explanation: In this example, the `` element is used to provide differe ``` -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. +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 fallback for older browsers that don't 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 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 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 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 at which each source should be used. When the screen width is equal to or greater than 768 pixels, the "image-large.jpg" source will be used; when the screen width is equal to or greater than 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, 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. ===================== @@ -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 sensibles à la taille d'écran, la direction artistique 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..4059b0f 100644 --- a/src/content/docs/fr/_roundtrip_pixels-not-pixels.txt +++ b/src/content/docs/fr/_roundtrip_pixels-not-pixels.txt @@ -1,23 +1,22 @@ --- title: px ≠ pixels -description: Screen pixels ≠ browser pixels ≠ image pixels -taskInputHash: 7dfd1c9b5c352f62 +description: Device pixels ≠ browser px ≠ image px +taskInputHash: 2ccc83a03d0252e3 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -### 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 always correspond to many device/printer pixels. 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 changes when I zoom in the browser, but is typically 1.5 (since my `System > Display > Scale` setting is 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 (except SVGs) decode to a grid of pixels. **It's surprisingly difficult to display an image's pixels at a 1:1 ratio with device pixels, but with `srcset`, you can get close enough, and a bit of JavaScript can adjust the html element size after loading if you have very good reasons for that perfect match, although these forbidden arts will not be discussed 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 in terms of a number of CSS pixels and claim that everything is 96 dpi. Developers avoid absolute units because it's generally better to use units derived from font size or viewport/container dimensions. Unmatched units can break layout if the user adjusts their `Accessibility > Text size` multiplier, zooms in the browser, or rotates their device. Needless to say, you should do all of these things before putting your site online. ===================== 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 ≠ pixels -2. Pixels d'écran ≠ pixels de navigateur ≠ pixels d'image +2. Pixels d'appareil ≠ px du navigateur ≠ px d'image 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..1a0e94c 100644 --- a/src/content/docs/fr/_roundtrip_specify-width-height.txt +++ b/src/content/docs/fr/_roundtrip_specify-width-height.txt @@ -1,21 +1,20 @@ --- -title: Using Width and Height +title: Using Width and Height Attributes description: >- - Benefits of using width and height attributes in HTML code -taskInputHash: b09c49dc5d3a4a2d + The benefits of using width and height attributes in HTML code +taskInputHash: cc7016f84f5b7857 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -Why should you include width and height in HTML? +Why should width and height be set in HTML? -> 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 set the width and height attributes in HTML code for images because it helps the web browser 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 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 the width and height attributes for images can also help improve overall webpage performance. When a browser knows the size of an image beforehand, it can more accurately calculate the amount of space needed to display the image and avoid unnecessary recalculations or redrawing of content while 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. +> Ultimately, using width and height attributes in HTML code for images can enhance the user experience by speeding up content loading and reducing visual issues. ===================== Content prompt used: @@ -29,7 +28,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. Utiliser la largeur et la hauteur -2. Avantages de l'utilisation des attributs de largeur et de hauteur dans le code HTML +2. Les avantages d'utiliser les attributs de largeur et de hauteur dans le code HTML Roundtrip (isolated) 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..3a509c9 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: cea5df557e79fd7c 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- 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: +Here are some specific scenarios where you may 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 pixel density screens like Apple's Retina displays have a higher pixel density, which means images may appear blurry or pixelated if 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 is 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 (like 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 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 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 someone'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 good 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..5bfdc09 100644 --- a/src/content/docs/fr/_roundtrip_width-density.txt +++ b/src/content/docs/fr/_roundtrip_width-density.txt @@ -1,50 +1,49 @@ --- title: Width and Density Descriptors -description: Examples of using width and density descriptors in `srcset` -taskInputHash: 569fd1065931e1e0 +description: Examples of how to use width and density descriptors in `srcset` +taskInputHash: f647323e7d05997a 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -Understanding the width (`w`) and density (`x`) descriptors in `srcset`. Use examples and Markdown. +# Understanding Width (`w`) and Density (`x`) Descriptors in `srcset`. Using 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 sources for images with different resolutions or pixel densities, and let the browser choose the appropriate image based on the device's display features. The `srcset` attribute uses a combination of 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's used when we want to provide the browser with the dimensions of an image, so that it can choose the appropriate image based on the available screen space. -> The syntax for using the `w` descriptor in `srcset` is as follows: +The syntax for using the `w` descriptor in `srcset` is as follows: ```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 select the image with the closest width to the available screen space. +In the above example, we have provided the browser with three images, along with their corresponding widths in pixels. The browser will choose 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 of physical to CSS pixels. It's 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: +The syntax for using the `x` descriptor in `srcset` is as follows: ```html Example Image + 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 closest pixel density to the device's screen. +In the above example, we have provided the browser with three images, along with their corresponding pixel densities. The browser will choose the image with the pixel density closest to the device 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 options to choose from. ===================== Content prompt used: diff --git a/src/content/docs/fr/breakpoints.md b/src/content/docs/fr/breakpoints.md index eb1cb9e..49fe093 100644 --- a/src/content/docs/fr/breakpoints.md +++ b/src/content/docs/fr/breakpoints.md @@ -3,41 +3,38 @@ title: Points de rupture et images description: >- Pourquoi certains points de rupture (mais pas tous) sont importants pour vos images -taskInputHash: b9dc6c0d27d7c8b7 +taskInputHash: 2da636e94352f2f4 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -### Contexte +### 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 `srcset` et `sizes`, nous avons besoin de 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 quoi réduire, cacher ou déplacer sur les écrans plus petits - ou plus couramment, quoi étendre, révéler ou ajouter sur les écrans plus grands. 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 port d'affichage arbitraire où la mise en page change. Cela s'appelle un **point de rupture**. C'est un nombre arbitraire de pixels CSS ([pas les pixels de l'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. -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) pourraient être immunisées contre les changements de disposition causés par ces points de rupture (et être compatibles avec les [descripteurs de densité srcset](/fr/descripteurs-de-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. Généralement, 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 port 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 du port d'affichage que prendra l'image changera. ### La méthode facile -Cela étant dit, ne pensez pas trop à cela. Vous serez probablement très bien avec la méthode d'approximation suivante : +Ceci étant dit, ne vous compliquez pas trop la vie. 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 port d'affichage, nous pouvons utiliser `100vw` pour l'attribut `sizes` de l'image pour indiquer que l'image prend 100 % de la largeur du port d'affichage. +2. Quelle est la largeur maximale que peut atteindre ce conteneur ? Nous pouvons tout fixer avec une largeur `width`. -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 première question est 700px et à la seconde question, 800px, 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. +> On pourrait penser que le navigateur pourrait gérer toutes ces calculs pour nous en fonction des CSS. Malheureusement, les navigateurs sont très désireux de choisir une URL d'image *avant* que les feuilles de style soient téléchargées. Nous devons donc faire les calculs nous-mêmes, et ils méritent bien cela si nous ne les faisons pas parfaitement. diff --git a/src/content/docs/fr/browser-picks-srcset.md b/src/content/docs/fr/browser-picks-srcset.md index 42e2dfc..98f6616 100644 --- a/src/content/docs/fr/browser-picks-srcset.md +++ b/src/content/docs/fr/browser-picks-srcset.md @@ -1,22 +1,19 @@ --- title: Comment le navigateur choisit -description: >- - Comment le navigateur choisit entre les images répertoriées dans l'attribut - srcset -taskInputHash: 1ad7279bfa827840 +description: Comment le navigateur choisit entre les images listées dans l'attribut srcset +taskInputHash: 5fd39ce5e4764c5f 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -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 listées dans l'attribut srcset ? Voici un guide étape par étape, avec des exemples pour les spécifications de largeur et de densité et comment le navigateur décide en fonction du périphérique 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 du périphérique (résolution, densité de pixels) et de la taille du viewport. L'attribut `srcset` vous permet de spécifier différentes images 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 ayons l'attribut `srcset` suivant : ```html @@ -24,23 +21,23 @@ Supposons que nous avons l'attribut `srcset` suivant : ``` -Le navigateur suivra ces étapes: +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éterminez le DPR (ratio de pixels 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. -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: +b. Calculez 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 : -- example-small.jpg: 400 \* 1 = 400px +- example-small.jpg : 400 \* 1 = 400 px -- example-medium.jpg: 800 \* 1 = 800px +- example-medium.jpg : 800 \* 1 = 800 px -- example-large.jpg: 1600 \* 1 = 1600px +- example-large.jpg : 1600 \* 1 = 1600 px -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 420 px. Le navigateur choisira l'image la plus petite avec 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 ayons l'attribut `srcset` suivant : ```html @@ -48,24 +45,24 @@ Supposons que nous avons l'attribut `srcset` suivant : ``` -Le navigateur suivra ces étapes: +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éterminez le DPR (ratio de pixels 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. -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 +- example-1x.jpg : 1x -- example-2x.jpg: 2x +- example-2x.jpg : 2x -- example-3x.jpg: 3x +- 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` 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 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 : ```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'images 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 mis en œuvre avec succès 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..abc6fe2 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 les tailles des balises +description: Un guide efficace et subjectif sur les images réactives pour 2023 +taskInputHash: d6fa9de33e6044f9 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -**Un guide efficace et subjectif pour les images en 2023** +**Un guide efficace et subjectif sur les images pour 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. +Consultez la barre latérale pour la version approfondie. Ceci est un référentiel rapide pour mettre à niveau les balises `` pour gérer les appareils modernes dans toutes leurs tailles et densités de pixels variées. Vous devez [savoir que les pixels != pixels](/fr/pixels-not-pixels) et que "devicePixelRatio" est plus susceptible d'être de 3,875 que de 1:1. Les téléphones modernes prétendent être larges de 320 à 428 pixels 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, peu importe à quel point vous réduisez la fenêtre du navigateur, vous devez utiliser un [descripteur de densité à la place](/fr/density-descriptors). Cela convient souvent aux logos, icônes et 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 viewport 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 qu'en dessous de cette largeur de viewport, cette image prend 100% de la largeur, mais + lorsque le viewport est plus grand, 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..fe09aba 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 +taskInputHash: 93145af1c141dd39 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- Comment tester les performances de votre 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. +> 1\. Ouvrez le navigateur web Google Chrome et accédez à la page que vous voulez 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). +> 2\. Cliquez sur les trois points en haut à droite de la fenêtre du navigateur, puis sélectionnez "Autres outils", puis "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". +> 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 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 pertinentes que vous souhaitez tester, puis cliquez sur "Générer un rapport". +> 4\. Dans la boîte de dialogue Lighthouse, sélectionnez les options de performance et autres options 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. +> 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..a7d5d1e 100644 --- a/src/content/docs/fr/picture-examples.md +++ b/src/content/docs/fr/picture-examples.md @@ -1,17 +1,18 @@ --- -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 + sensibles à la taille d'écran, la direction artistique et différents formats + d'image. +taskInputHash: 32f43bccd639d3e9 lang: fr -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -Voici quelques exemples d'utilisation de l'élément `` avec leurs explications : +Voici quelques exemples d'utilisation de l'élément `` et leurs explications : -1\. Exemple pour les images réactives : +1\. Exemple pour des images sensibles à la taille de l'écran : ```html @@ -21,7 +22,7 @@ Voici quelques exemples d'utilisation de l'élément `` avec leurs expl ``` -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. +Explication : Dans cet exemple, l'élément `` est utilisé pour fournir différentes sources d'images en fonction de la taille de l'é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 alternative pour les navigateurs plus anciens ou lorsque les conditions spécifiées dans les éléments `` ne sont pas remplies. 2\. Exemple pour la direction artistique : @@ -33,7 +34,7 @@ Explication : Dans cet exemple, l'élément `` est utilisé pour fourni ``` -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. +Explication : Dans cet exemple, l'élément `` est utilisé pour fournir différentes sources d'images 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 portrait. 3\. Exemple pour différents formats d'image : @@ -47,12 +48,12 @@ Explication : Dans cet exemple, l'élément `` est utilisé pour fourni ``` -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 ``. +Explication : Dans cet exemple, l'élément `` est utilisé pour fournir différentes sources d'images 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 alternative pour les navigateurs plus anciens qui ne prennent pas en charge 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. +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 vue. 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'images 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. +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, réduisant ainsi les temps de chargement de la page 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. +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 réactifs qui ont l'air superbes 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..141f5ef 100644 --- a/src/content/docs/fr/pixels-not-pixels.md +++ b/src/content/docs/fr/pixels-not-pixels.md @@ -1,20 +1,19 @@ --- title: px ≠ pixels -description: Pixels d'écran ≠ pixels de navigateur ≠ pixels d'image -taskInputHash: 7dfd1c9b5c352f62 +description: Pixels d'appareil ≠ px du navigateur ≠ px d'image +taskInputHash: 2ccc83a03d0252e3 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -### Pixels d'écran ≠ pixels de navigateur ≠ pixels d'image +### Pixels d'appareil ≠ px du navigateur ≠ px d'image -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`) correspondent **presque toujours à plusieurs pixels d'appareil/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 sur mon ordinateur de bureau change lors du zoom dans le navigateur, mais est par défaut de 1,5 (car mon paramètre `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'exception des SVG) se décodent sous la forme d'une grille de pixels. **Il est étonnamment difficile d'afficher les pixels d'une image à un rapport de 1:1 avec les pixels de l'appareil - mais grâce à `srcset`, vous pouvez vous en approcher suffisamment**, et un peu de Javascript peut ajuster la taille de l'élément html après le chargement si vous avez des raisons vraiment justifiées d'avoir cette parfaite correspondance, bien que ces arts interdits ne seront pas révélés 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. +> D'autres unités absolues [(in, pc, pt, mm, cm, Q)](https://developer.mozilla.org/fr/docs/Web/CSS/Longueur) sont définies en termes de 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 la police ou des dimensions de la fenêtre d'affichage/du conteneur. Les unités non assorties peuvent casser une mise en page si l'utilisateur ajuste son multiplicateur `Accessibilité > Taille du texte`, zoome dans le navigateur ou fait tourner son appareil. Inutile de dire que vous devriez faire toutes ces choses avant de mettre votre site en ligne. diff --git a/src/content/docs/fr/specify-width-height.md b/src/content/docs/fr/specify-width-height.md index e5da3af..6adf701 100644 --- a/src/content/docs/fr/specify-width-height.md +++ b/src/content/docs/fr/specify-width-height.md @@ -1,19 +1,18 @@ --- title: Utiliser la largeur et la hauteur description: >- - Avantages de l'utilisation des attributs de largeur et de hauteur dans le code + Les avantages d'utiliser les attributs de largeur et de hauteur dans le code HTML -taskInputHash: b09c49dc5d3a4a2d +taskInputHash: cc7016f84f5b7857 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -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 pour les 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. > -> 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 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 de manière plus précise la quantité d'espace nécessaire pour afficher l'image et éviter les recalculs ou les réaffichages inutiles du contenu pendant son chargement. > -> 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. +> En fin de compte, l'utilisation des attributs de largeur et de hauteur dans le code HTML pour les 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..f4695c4 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: cea5df557e79fd7c 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -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 de sites Web réactifs. +Voici quelques scénarios spécifiques où vous voudrez peut-être 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é de pixels tels que 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 la 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, de sorte qu'elle est 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 rapports d'aspect :** Si vous concevez un site qui doit afficher des images avec des rapports d'aspect différents (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 rapport 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 consomment 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 contribuer à réduire les temps de chargement des pages. -* **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 voudrez 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 voudrez 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 un aspect agréable, peu importe le périphérique ou la taille d'écran sur lesquels elles sont visualisées. diff --git a/src/content/docs/fr/width-density.md b/src/content/docs/fr/width-density.md index 805d0c9..096381f 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: f647323e7d05997a 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -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`. Utilisation d'exemples et de Markdown. -> `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`) +`srcset` est un attribut HTML qui permet aux développeurs de fournir plusieurs sources d'images avec des résolutions ou des densités de pixels différentes, et de laisser le navigateur choisir 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. -> 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. +## Descripteur de Largeur (`w`) -> La syntaxe pour utiliser le descripteur `w` dans `srcset` est la suivante: +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 pour qu'il puisse choisir l'image appropriée en fonction de l'espace d'écran disponible. + +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 choisira l'image avec la largeur la plus proche de l'espace d'écran 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 de pixels physiques à 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 choisira 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 de l'appareil. - -> 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. +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..6ff2698 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 (but not all) breakpoints matter for your images +taskInputHash: ffc981b87cbb1f00 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- ### 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 require different layouts. For the purpose of `srcset` and `sizes`, we need to know at which 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 need to decide what to reduce, 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 a landscape phone - or on 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 need to pick an arbitrary viewport width at which the layout 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. -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 shifting caused by these breakpoints (and that's ok with [srcset density descriptors](/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, a page's main content area 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 will be harder to calculate effective sizing rules because the percentage of viewport width the image takes up 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 being said, don't overthink this. It'll probably work just fine with the following approximation: -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 the image container) stop growing? Up to that viewport width, we can use `100vw` for the image `sizes` attribute to tell the image to take up 100% of the viewport width. +2. What is the maximum width the container ever reaches? We can set it as a fixed width for everything beyond that. -If your answer to point 1 was 700px and the answer to point 2 was 800px, you can use the following `sizes` attribute: +If your answer to point 1 was 700px and your answer to point 2 was 800px, you 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. + + +> You might think the browser could handle all these calculations for us based on the CSS. Unfortunately, browsers are aggressively eager to pick an image URL *before* stylesheets are downloaded. So we have to do the calculations ourselves, and if they don't work perfectly, it's their fault. ===================== 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..3ca35ed 100644 --- a/src/content/docs/it/_roundtrip_browser-picks-srcset.txt +++ b/src/content/docs/it/_roundtrip_browser-picks-srcset.txt @@ -1,28 +1,31 @@ --- title: How the browser chooses -description: How the browser chooses among the images listed in the srcset attribute -taskInputHash: 5f305bd3a8d992cf +description: How a browser selects from images listed in the srcset attribute +taskInputHash: a5b35f5b23fb2a5e lang: en +date_published: '2023-04-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -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 a browser choose from images listed in the "srcset" attribute? Here is a step-by-step explanation, 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 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 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 (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"): -Suppose we have the following `srcset` attribute: +Suppose we have the following "srcset" attribute: ```html -Example image +Example Image ``` The browser follows 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 actual 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 actual widths with the width of the viewport. Suppose the viewport width is 420px. The browser selects the smallest image with an actual width greater than or equal to the viewport width. In this case, it selects "example-medium.jpg". -1\. Pixel density descriptor (`x`): +2. Pixel density descriptor ("x"): -Suppose we have the following `srcset` attribute: +Suppose we have the following "srcset" attribute: ```html -Example image +Example Image ``` The browser follows 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 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 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: +Note that you can also use the "sizes" attribute in combination with the "srcset" attribute to provide further 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 diff --git a/src/content/docs/it/_roundtrip_density-descriptors.txt b/src/content/docs/it/_roundtrip_density-descriptors.txt index 85b40cf..dcd0fea 100644 --- a/src/content/docs/it/_roundtrip_density-descriptors.txt +++ b/src/content/docs/it/_roundtrip_density-descriptors.txt @@ -1,37 +1,34 @@ --- -title: Density descriptors & srcset +title: Density Descriptors and Srcset description: Examples of using density descriptors in `srcset` -taskInputHash: cf54e3343feb0a22 +taskInputHash: 59069da0d1212787 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -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 best image for 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. -## What is Srcset with density descriptors? +## What are 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 conjunction with srcset to provide images at different resolutions based on the user's display pixel density. -## 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. Provide high-resolution images to high-DPI displays (e.g. Retina displays) while still providing low-resolution images to standard displays. +2. Improve page performance by providing the best-fitting image for the 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 your images at different resolutions. +2. Add the `srcset` attribute to the `` element, including the image sources and their corresponding density descriptors. +3. Add the `sizes` attribute (optional) to specify the image size as it will be displayed on the screen. -1. Prepare images at 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. - -### Example Markup +### Markup Example -Here's an example of how to implement srcset with density descriptors in your markup: +Here is an example of how to implement Srcset with density descriptors in your markup: ```html An example image ``` -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. -- **alt**: an image description for accessibility purposes. +This markup example includes: +- **src**: The default image source, displayed if the browser does not support srcset. +- **srcset**: The list of image sources and their corresponding density descriptors (1x, 2x, 3x). The browser will choose the best-fitting 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 your website's performance and user experience. +And that's it! You have successfully implemented Srcset with density descriptors, improving the performance and user experience of your website. ===================== 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 sull'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..0387aac 100644 --- a/src/content/docs/it/_roundtrip_introduction.txt +++ b/src/content/docs/it/_roundtrip_introduction.txt @@ -1,43 +1,42 @@ --- -title: srcset and tag dimensions -description: An Efficient and Opinionated Guide to Responsive Images for 2023 -taskInputHash: 770938b4f7895424 +title: srcset and sizes tag +description: An efficient and opinionated guide to responsive images for 2023 +taskInputHash: da9533b1781c65fd 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -**An Efficient and Opinionated Guide to Images for 2023** +**An efficient and opinionated guide to images for 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 side bar for the in-depth version. This is the quick guide to updating those `` tags to handle modern devices with their varied sizes and pixel densities. You should [know that pixels != pixels](/en/pixels-arent-pixels/) and that `devicePixelRatio` is more likely to be around 3.875 rather than 1:1. Modern phones claim 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 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 squeeze the browser window, you should use a [density descriptor](/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 least the viewport width breakpoint where the primary content area stops growing. +Do you know your [breakpoints](/en/breakpoints)? You'll need those numbers to refine the solution below - and at minimum, the viewport width breakpoint at which the main content area stops growing. -### The Easy Way +### The easy method ```html - Dog riding a bicycle - - - - -``` -{{This seems to be a correctly translated technical documentation with no grammar or clumsy phrasing mistakes.}} + srcset="img.jpg?format=webp&w=480 480w, + img.jpg?format=webp&w=800 800w, + img.jpg?format=webp&w=1200 1200w, + img.jpg?format=webp&w=1600 1600w, + img.jpg?format=webp&w=2000 2000w" + sizes="(max-width: 700px) 100vw, 800px" + alt="Dog riding a bicycle" /> + + + + +``` + +{{Note that srcset and sizes attributes are tools to help give the browser more information about how to load the right-sized image for its context. `sizes` tells the browser how much space the image will take up on the page, and `srcset` provides a list of possible image sources and image sizes. This way, the browser can pick the right image source depending on the size and characteristics of the screen.}} ===================== Content prompt used: @@ -50,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 e le dimensioni delle tag -2. Una Guida Efficient and Opinionated alle Immagini Responsive per il 2023 +Metadata returned1. srcset e tag sizes +2. Una guida efficiente ed opinabile sulle 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..7f32b18 100644 --- a/src/content/docs/it/_roundtrip_lighthouse-performance-test.txt +++ b/src/content/docs/it/_roundtrip_lighthouse-performance-test.txt @@ -1,28 +1,27 @@ --- -title: Test Performance with Lighthouse -description: Steps on how to test website performance using Lighthouse -taskInputHash: 174be49cc119f58b +title: Testing Performance with Lighthouse +description: Steps for testing a website's performance using Lighthouse +taskInputHash: bb23eb7d650bace4 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -How to Test Your Website Performance with Lighthouse? +How to test your site'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: -> -> 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 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 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. -> -> 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. +> 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 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 window, click on the Lighthouse icon located on the left side of the window 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". +> +> 5. After Lighthouse completes its analysis, you will see a report with scores and recommendations for improving the performance, accessibility, and other aspects of your website. +> +> By following these steps, you can use Lighthouse to test and optimize your website's performance, which can help improve the 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. Testare la performance con Lighthouse -2. Passaggi su come testare la performance di un sito web usando Lighthouse +Metadata returned1. Testare le prestazioni con Lighthouse +2. I passaggi per testare le prestazioni 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..6426178 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: 67e18a2a038c84c3 lang: en +date_published: '2023-04-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- 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 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 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 the viewport size. Breakpoints are typically defined using media queries in CSS, which apply different styles depending on the screen width. These breakpoints can be used in combination 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 appropriately sized images to be served for each device, reducing page loading 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 work well 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 di utilizzo dell'elemento +2. Fornisce esempi di utilizzo dell'elemento per immagini responsive, art direction 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..74a22bf 100644 --- a/src/content/docs/it/_roundtrip_pixels-not-pixels.txt +++ b/src/content/docs/it/_roundtrip_pixels-not-pixels.txt @@ -1,25 +1,24 @@ --- title: px ≠ pixel -description: Device pixels ≠ browser pixels ≠ image pixels -taskInputHash: 9e3d515b23db4c50 +description: Device pixels ≠ Browser pixels ≠ Image pixels +taskInputHash: 0873ca31945232b8 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -### Device pixels ≠ browser pixels ≠ image pixels +### Device pixels ≠ Browser pixels ≠ Image pixels -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**. The devicePixelRatio on my 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). +My desktop devicePixelRatio changes during browser zoom, but is 1.5 by default (my `System > Display > Scale` is 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 SVG) are decoded as a grid of pixels. **It's irritatingly difficult to get image pixels to display perfectly at a 1:1 ratio with device pixels, but `srcset` can get you pretty close**, and a little JavaScript can adjust the html element size after load if you have a truly compelling reason for that perfect mapping, though these 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 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. +> 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 everything is 96dpi. Developers avoid absolute units because it's generally better to use units derived from character or viewport size. Mismatched units can break a layout if the user adjusts the `Accessibility > Text Size` multiplier, zooms in 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...}}. +{{Note that the term used here is not the technical term for device pixels, but rather the colloquial term for the smallest distinguishable element on a display device.}} ===================== Content prompt used: @@ -33,7 +32,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. Pixel del dispositivo ≠ pixel del browser ≠ pixel dell'immagine +2. I pixel del dispositivo ≠ i pixel del browser ≠ i pixel dell'immagine Roundtrip (isolated) prompt used: diff --git a/src/content/docs/it/_roundtrip_specify-width-height.txt b/src/content/docs/it/_roundtrip_specify-width-height.txt index a9eb002..b813b43 100644 --- a/src/content/docs/it/_roundtrip_specify-width-height.txt +++ b/src/content/docs/it/_roundtrip_specify-width-height.txt @@ -1,20 +1,10 @@ ---- -title: Using width and height -description: Benefits of using width and height attributes in HTML code -taskInputHash: 34a145dde0e451eb -lang: en -ignore: '/* cSpell:locale it,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' ---- -Why should you include width and height in HTML? - -> 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. -> -> 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. -> -> 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. +Why Should You Include Width and Height in HTML? + +It is recommended to include width and height attributes in HTML code for 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 web page for the image, preventing content from jumping around while the image loads. + +Furthermore, specifying the width and height attributes for images can also contribute to improving the overall performance of the web page. 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 refreshes or reloads of the content while it loads. + +In general, using width and height attributes in HTML code for images can enhance the user experience by loading content faster and reducing visual issues. ===================== Content prompt used: @@ -27,7 +17,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 e 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..d28ffe6 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 +description: Explains in which situations it is appropriate to use the element +taskInputHash: 5679c8e0fd233252 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -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 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. -* **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 might 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 display:** High-density screens such as Apple's Retina displays 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 that has twice the pixels of the normal version, so that 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 load 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 image on desktop devices. The `picture` element allows you to provide different versions of the image 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 on any device or screen size on which they are displayed. ===================== 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 usare l'elemento +2. Spiega in quali situazioni è opportuno 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..3a9e1dc 100644 --- a/src/content/docs/it/_roundtrip_width-density.txt +++ b/src/content/docs/it/_roundtrip_width-density.txt @@ -1,20 +1,18 @@ --- title: Width and Density Descriptors description: Examples of using width and density descriptors in `srcset` -taskInputHash: ea49fc07cb749a51 +taskInputHash: 65ef30d28059cee2 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -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. +Understanding Width (`w`) and Density (`x`) descriptors in `srcset`. Using examples and markdown. +> `srcset` is an HTML attribute that allows developers to provide multiple images with different resolutions and pixel densities and allows the browser to select the appropriate image based on the characteristics of the device's display. The `srcset` attribute uses a combination of `URL`s 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 the 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 syntax for using the `w` descriptor in `srcset` is as follows: @@ -23,14 +21,15 @@ Understanding Width (`w`) and Density (`x`) Descriptors in `srcset`. Use example srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" - alt="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 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 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, i.e. 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: @@ -39,12 +38,13 @@ Understanding Width (`w`) and Density (`x`) Descriptors in `srcset`. Use example srcset="small.jpg 1x, medium.jpg 2x, large.jpg 3x" - alt="Example image"> + 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. -> 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: diff --git a/src/content/docs/it/breakpoints.md b/src/content/docs/it/breakpoints.md index 39943b9..1711731 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: ffc981b87cbb1f00 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- ### 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 necessitano di layout diversi. Per lo scopo di `srcset` e `sizes`, dobbiamo sapere a che punto il layout cambia. -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 ridurre, nascondere o spostare su schermi più piccoli - o più comunemente, cosa espandere, rivelare o aggiungere su schermi più grandi. Hanno anche pochissime informazioni su cui basarsi. L'utente si trova su un tablet o su un telefono in modalità landscape - o su 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 device](/it/pixels-not-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 punti di interruzione comunemente utilizzati. -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 immuni dagli spostamenti del layout causati da questi punti di interruzione (e va bene con [descrittori di densità srcset](/it/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 del contenuto principale saranno limitate dalle dimensioni del loro contenitore. Tipicamente, l'area del contenuto principale di una pagina sarà limitata a una certa larghezza sui schermi più grandi, una `max-width`, ma sui piccoli schermi, l'area del 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 determinati punti di interruzione, sarà più difficile calcolare le regole di dimensionamento efficaci, poiché la percentuale di 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 ciò, non pensare troppo a questo. Probabilmente andrà molto bene con la seguente approssimazione: -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 smette di crescere la colonna principale (o il contenitore dell'immagine)? Fino a quella larghezza di viewport, possiamo utilizzare `100vw` per l'attributo `sizes` dell'immagine per dire che l'immagine occupa il 100% della larghezza di viewport. +2. Qual è la larghezza massima che il contenitore mai raggiunge? Possiamo impostarlo 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 tua risposta al punto 1 era di 700px e la tua risposta al punto 2 era di 800px, puoi 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. +> Penseresti che il browser potesse gestire tutti questi calcoli per noi sulla base del CSS. Sfortunatamente, i browser sono aggressivamente desiderosi di scegliere un URL dell'immagine *prima* che i fogli di stile vengano scaricati. Quindi dobbiamo fare noi i calcoli e se non funzionano alla perfezione, è colpa loro. diff --git a/src/content/docs/it/browser-picks-srcset.md b/src/content/docs/it/browser-picks-srcset.md index fba5b78..6ae3311 100644 --- a/src/content/docs/it/browser-picks-srcset.md +++ b/src/content/docs/it/browser-picks-srcset.md @@ -1,24 +1,23 @@ --- title: Come sceglie il browser description: Come il browser sceglie tra le immagini elencate nell'attributo srcset -taskInputHash: 0eb976f059b10502 +taskInputHash: a5b35f5b23fb2a5e 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -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 fa il browser a scegliere tra le immagini elencate nell'attributo "srcset"? Ecco una spiegazione passo-passo, con esempi sia per le specifiche di larghezza che di 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 fornito. Queste regole dipendono dalle caratteristiche di visualizzazione del dispositivo (risoluzione, densità di 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à di pixel (utilizzando il descrittore "x"). Vediamo ogni caso con degli esempi. -1\. Descrittore di larghezza (`w`): +1\. Descrittore di larghezza ("w"): -Supponiamo di avere il seguente attributo `srcset`: +Supponiamo di avere l'attributo "srcset" seguente: ```html -Example Image +Esempio Immagine ``` @@ -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,15 +33,15 @@ 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 di 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`): +2\. Descrittore di densità di pixel ("x"): -Supponiamo di avere il seguente attributo `srcset`: +Supponiamo di avere l'attributo "srcset" seguente: ```html -Example Image +Esempio Immagine ``` @@ -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 è possibile utilizzare anche l'attributo "sizes" in combinazione con l'attributo "srcset" per fornire ulteriori informazioni su come l'immagine sarà visualizzata a diverse larghezze della viewport. Ciò è 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..f69d767 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 sull'utilizzo dei descrittori di densità in `srcset` +taskInputHash: 59069da0d1212787 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -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à alla scoperta dell'essenziale nell'utilizzo di srcset con i descrittori di densità 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à +## Cosa sono Srcset con i 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 immagini 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à di pixel del display 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 utilizzare Srcset con i descrittori di densità -Ecco un esempio di come implementare srcset con descrittori di densità nel tuo markup: +L'utilizzo di srcset con i descrittori di densità è particolarmente utile quando si desidera: +1. Fornire immagini ad alta risoluzione ai display ad alta DPI (ad es. display Retina) fornendo allo stesso tempo immagini a bassa risoluzione ai display standard. +2. Migliorare le prestazioni della pagina fornendo la dimensione dell'immagine più appropriata per il dispositivo dell'utente. + +## Implementazione di Srcset con descrittori di densità + +Per utilizzare srcset con i descrittori di densità, segui questi passaggi: +1. Prepara le tue immagini in diverse risoluzioni. +2. Aggiungi l'attributo `srcset` all'elemento ``, includendo le fonti dell'immagine e i corrispondenti descrittori di densità. +3. Aggiungi l'attributo `sizes` (facoltativo) per specificare la dimensione dell'immagine come 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 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à. +Questo esempio di markup include: +- **src** : La fonte di immagine predefinita, visualizzata se il browser non supporta srcset. +- **srcset** : L'elenco di fonti di immagine e 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 ai fini dell'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 i 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..b1ed2d8 100644 --- a/src/content/docs/it/introduction.md +++ b/src/content/docs/it/introduction.md @@ -1,39 +1,40 @@ --- -title: srcset e le dimensioni delle tag -description: Una Guida Efficient and Opinionated alle Immagini Responsive per il 2023 -taskInputHash: 770938b4f7895424 +title: srcset e tag sizes +description: Una guida efficiente ed opinabile sulle immagini responsive per il 2023 +taskInputHash: da9533b1781c65fd 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -**Una Guida Efficient and Opinionated sulle Immagini per il 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. - -> 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. - -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. - -### Il metodo facile - -```html - -Cane che cavalca una bicicletta - - - - +**Una guida efficiente ed opinabile sulle immagini per il 2023** + +Controlla la barra laterale per la versione approfondita. Questa è la guida rapida per aggiornare quelle tags `` per gestire i dispositivi moderni con tutte le loro varie dimensioni e densità di pixel. Dovresti [sapere che i pixel != pixel](/it/pixel-non-sono-pixel) e che `devicePixelRatio` è più probabile che sia intorno a 3,875 invece che 1:1. I telefoni moderni pretendono di essere larghi 320-428px per la leggibilità (in CSS pixel), ma hanno molti pixel del dispositivo per CSS pixel. + + +> Se la tua immagine non cambia mai di dimensione, non importa quanto stringi la finestra del browser, dovresti usare un [descrittore di densità](/it/density-descriptors). Questo è spesso adatto per i loghi, icone e bottoni. + +Sai quali sono i tuoi [punti di interruzione](/it/breakpoints)? Avrai bisogno di quei numeri per affinare la soluzione qui sotto - e come minimo il punto di interruzione della larghezza della viewport in cui l'area del contenuto principale smette di crescere. + + +### Il metodo facile + +```html + +Cane che va in bicicletta + + + + ``` diff --git a/src/content/docs/it/lighthouse-performance-test.md b/src/content/docs/it/lighthouse-performance-test.md index 94f71a6..23a4883 100644 --- a/src/content/docs/it/lighthouse-performance-test.md +++ b/src/content/docs/it/lighthouse-performance-test.md @@ -1,25 +1,24 @@ --- -title: Testare la performance con Lighthouse -description: Passaggi su come testare la performance di un sito web usando Lighthouse -taskInputHash: 174be49cc119f58b +title: Testare le prestazioni con Lighthouse +description: I passaggi per testare le prestazioni di un sito web utilizzando Lighthouse +taskInputHash: bb23eb7d650bace4 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -Come si testa la performance del tuo sito con Lighthouse? +Come testare le prestazioni 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. -> -> 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". -> -> 4\. Nella finestra di dialogo di Lighthouse, seleziona le opzioni di performance e altre pertinenti che desideri testare, quindi fai clic 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. +> Lighthouse è uno strumento che può essere utilizzato per misurare le prestazioni, l'accessibilità e altri aspetti di un sito web. Per testare le prestazioni del tuo sito web con Lighthouse, segui questi passaggi: +> +> 1. Apri il browser web Google Chrome e naviga fino alla pagina che desideri testare. +> +> 2. Fai clic sui tre punti nell'angolo in alto a destra della finestra del browser, quindi seleziona "Altri strumenti" e poi "Strumenti per sviluppatori" o semplicemente utilizza la scorciatoia da tastiera "Ctrl+Shift+I" (Windows, Linux) o "Command+Option+I" (macOS). +> +> 3. Nella finestra Strumenti per sviluppatori, fai clic sull'icona Lighthouse situata sul lato sinistro della finestra o premi "Ctrl+Shift+P" (Windows, Linux) o "Command+Shift+P" (macOS) per aprire il menù dei comandi, quindi digita "Lighthouse" e seleziona "Genera rapporto". +> +> 4. Nella finestra di dialogo di Lighthouse, seleziona le prestazioni e le altre opzioni pertinenti che desideri testare, quindi fai clic su "Genera rapporto". +> +> 5. Dopo che Lighthouse ha completato la sua analisi, vedrai un rapporto con punteggi e raccomandazioni per migliorare le prestazioni, l'accessibilità e altri aspetti del tuo sito web. +> +> Seguendo questi passaggi, puoi utilizzare Lighthouse per testare e ottimizzare le prestazioni del tuo sito web, il che può aiutare a migliorare 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..5a94e2f 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 description: >- - Fornisce esempi di utilizzo dell'elemento , per immagini responsive, - direzione artistica e diversi formati di immagine -taskInputHash: 1eedb92f6cc7cb3e + Fornisce esempi di utilizzo dell'elemento per immagini responsive, + art direction e diversi formati di immagine. +taskInputHash: 67e18a2a038c84c3 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -Ecco alcuni esempi di utilizzo dell'elemento `` e le loro spiegazioni: +Ecco alcuni esempi di utilizzo dell'elemento `` e le relative 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 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 deve essere utilizzata ogni fonte. L'elemento `` viene utilizzato come fallback per browser più vecchi o quando le condizioni specificate negli elementi `` non sono soddisfatte. -2. Esempio per la direzione artistica: +2\. Esempio per l'art direction: ```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 immagini a seconda dell'orientamento del dispositivo. L'elemento `` con l'attributo "media" impostato su "(orientation: landscape)" specifica una fonte di immagini per schermi larghi, mentre l'elemento `` specifica una fonte di immagini per schermi in formato ritratto. -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 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 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 responsive, i breakpoints vengono utilizzati per definire quando la disposizione di un sito web o di un'applicazione dovrebbe cambiare in base alla dimensione del viewport. I breakpoints vengono tipicamente definiti utilizzando media query in CSS, che applicano stili diversi a seconda della larghezza dello schermo. Questi breakpoints possono essere utilizzati in combinazione con l'elemento `` per fornire diverse fonti di immagini 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 in cui dovrebbe essere utilizzata ogni 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". Ciò consente di servire immagini dimensionate in modo appropriato 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 in qualsiasi dimensione dello schermo e possono essere utilizzati più breakpoints per creare layout che rispondano ad una vasta gamma di dispositivi. Combinando i breakpoints con l'elemento ``, è possibile creare design flessibili e responsivi che funzionano bene 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..b59baad 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 -description: Pixel del dispositivo ≠ pixel del browser ≠ pixel dell'immagine -taskInputHash: 9e3d515b23db4c50 +description: I pixel del dispositivo ≠ i pixel del browser ≠ i pixel dell'immagine +taskInputHash: 0873ca31945232b8 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -### Pixel del dispositivo ≠ pixel del browser ≠ pixel dell'immagine +### I pixel del dispositivo ≠ i pixel del browser ≠ i pixel dell'immagine -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 dei dispositivi/stampanti**. Il devicePixelRatio sul mio telefono è 3.875; [quale è 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 mio devicePixelRatio desktop cambia durante lo zoom del browser, ma di default è 1.5 (il mio `Sistema > Display > Scale` è 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 immagine (escludendo SVG) vengono decodificati come una griglia di pixel. **È irritantemente difficile ottenere che i pixel delle immagini vengano visualizzati perfettamente a un rapporto di 1:1 con i pixel del dispositivo, ma con `srcset` puoi arrivare abbastanza vicino**, e un po' di Javascript può regolare la dimensione dell'elemento html dopo il caricamento se hai ragioni veramente giustificate per aver bisogno di quella mappatura perfetta, anche se queste 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. +> Altre unità assolute [(in, pc, pt, mm, cm, Q)](https://developer.mozilla.org/it/docs/Web/CSS/length) sono definite in termini di numero di pixel CSS e fingono che tutto sia a 96dpi. Gli sviluppatori evitano le unità assolute perché in genere è meglio usare unità derivate dalle dimensioni del carattere o del contenitore dell'area visibile. Unità non corrispondenti possono rompere un layout se l'utente regola il moltiplicatore `Accessibilità > Dimensioni testo`, fa zoom sul browser o ruota il 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..c77583b 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 e altezza description: Vantaggi dell'utilizzo degli attributi di larghezza e altezza nel codice HTML -taskInputHash: 34a145dde0e451eb +taskInputHash: 0c7121146b37b450 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- 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. +> Si consiglia di 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 saltare mentre l'immagine si carica. > -> 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, la specifica degli 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 con maggiore precisione la quantità di spazio necessario per visualizzare l'immagine e evitare raffrescamenti o ricaricamenti non necessari del contenuto mentre si carica. > -> 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. +> In generale, l'utilizzo degli attributi di larghezza e altezza nel codice HTML per le immagini può migliorare l'esperienza utente, facendo caricare i contenuti più rapidamente e riducendo i problemi 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..f6c69b3 100644 --- a/src/content/docs/it/when-to-use-picture.md +++ b/src/content/docs/it/when-to-use-picture.md @@ -1,22 +1,22 @@ --- -title: Quando utilizzare l'elemento -description: Spiega in quali situazioni si dovrebbe utilizzare l'elemento -taskInputHash: 583a9afd2e45d56a +title: Quando usare l'elemento +description: Spiega in quali situazioni è opportuno utilizzare l'elemento +taskInputHash: 5679c8e0fd233252 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -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. -* **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. +* **Differenti rapporti di aspetto:** Se stai progettando un sito che deve visualizzare immagini con diversi rapporti di aspetto (ad esempio paesaggio vs ritratto), puoi utilizzare l'elemento `picture` per fornire diverse versioni dell'immagine ottimizzate per ogni 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 grandi file 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. -* **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 guidato dall’arte:** A volte potresti voler presentare un'immagine in un certo modo a seconda del layout del resto della pagina. Ad esempio, potresti voler mostrare un primo piano del viso di una persona sui dispositivi mobili, ma un'immagine più ampia sui dispositivi desktop. L'elemento `picture` consente di fornire diverse versioni dell'immagine ottimizzate per layout diversi. -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. +Complessivamente, l'elemento `picture` è uno strumento potente che può aiutarti a ottimizzare le tue immagini per una varietà di casi d'uso e assicurarti che siano fantastiche su qualsiasi dispositivo o dimensione dello schermo su cui vengono visualizzate. diff --git a/src/content/docs/it/width-density.md b/src/content/docs/it/width-density.md index 82059f1..cb7ab03 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: 65ef30d28059cee2 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -Capire i descrittori di larghezza (w) e densità (x) in `srcset`. Usare esempi e usare Markdown. +Comprensione dei descrittori di larghezza (w) e densità (x) in `srcset`. Utilizzo di 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. -## Descrittore di larghezza (`w`) +> `srcset` è un attributo HTML che permette ai developers di fornire diverse immagini con risoluzioni e densità di pixel differenti e di consentire al browser di selezionare l'immagine appropriata basandosi sulle caratteristiche del display del dispositivo. L'attributo `srcset` utilizza una combinazione di `URL` e descrittori `w` o `x` per specificare le immagini. +## Descrittore 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. +> Il descrittore `w` viene utilizzato per specificare la larghezza dell'immagine in pixel. Viene utilizzato quando vogliamo fornire al browser le dimensioni di un'immagine in modo da poter scegliere l'immagine appropriata per lo spazio dello schermo disponibile. -> 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 +Esempio Immagine ``` -> 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. -## Descrittore di densità (`x`) +> Nell'esempio sopra, abbiamo fornito al browser tre immagini e le corrispondenti larghezze in pixel. Il browser selezionerà l'immagine con la larghezza più vicina allo spazio disponibile sullo schermo. +## Descrittore 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, ovvero il rapporto tra i pixel fisici e i CSS pixel. 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 +Esempio Immagine ``` -> 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 corrispondenti 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. +> Nota che i descrittori `w` e `x` possono essere utilizzati insieme nello stesso attributo `srcset` per fornire al browser più opzioni di scelta. diff --git a/src/content/docs/ja/_roundtrip_breakpoints.txt b/src/content/docs/ja/_roundtrip_breakpoints.txt index 588b9bd..b304df2 100644 --- a/src/content/docs/ja/_roundtrip_breakpoints.txt +++ b/src/content/docs/ja/_roundtrip_breakpoints.txt @@ -1,44 +1,42 @@ --- title: Breakpoints and Images -description: Why some (not all) breakpoints are important in images -taskInputHash: f409cdb7248e141b +description: Why some (but not all) breakpoints are related to images +taskInputHash: 9ada4b6b23ece1fc 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- ### 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. +Small screens and large monitors require different layouts. To achieve `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 which content to scale-down, hide or move on small screens, and which content to scale-up, show or add on large screens. However, there is not enough information. Is the user on a tablet, a landscape mode phone, or 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 choose any viewport width where the layout changes. This is called a **breakpoint**. This is any number of CSS pixels (not [device pixels](/en/pixels-not-pixels)). Polypane has a [great article about commonly used 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). -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`. -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. +Some images, such as logos, icons, and buttons may be immune to the layout shift caused by these breakpoints (and may benefit from the use of [srcset density descriptors](/en/density-descriptors)). -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. +Images for main content are constrained by the size of the container. Typically, the main content area of a page is constrained by `max-width`, which is equal to the largest screen, but on small screens, the main content area takes up the entire viewport. -### A Simple Way +When you have multiple columns at a breakpoint, it is more difficult to calculate effective size rules because the proportion of the viewport width that the image takes up changes. -So don't make this too complicated. You can probably get a very reasonable answer with the following approximations. +### A simple method -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. +However, don't worry too much about this - it is probably enough to use the following approximations. -If the answer to #1 is 700px and the answer to #2 is 800px, you can use the following `sizes` attribute: +1. What size does the main column (or image container) stop growing? Use the `sizes` attribute of the image with `100vw` to make the image take up 100% of the viewport width on previous viewport widths. +2. What is the maximum width that container achieves? You can set a fixed `width` on everything else. + +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. +> You might think that the browser can handle these calculations properly based on CSS. Unfortunately, the browser tends to actively choose image URLs *before* the style sheet is downloaded. So, you need to calculate it yourself, and you don't have to understand it perfectly. ===================== Content prompt used: @@ -52,7 +50,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..4c61cae 100644 --- a/src/content/docs/ja/_roundtrip_browser-picks-srcset.txt +++ b/src/content/docs/ja/_roundtrip_browser-picks-srcset.txt @@ -1,25 +1,31 @@ --- -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 Choose Images +description: 'How browsers select the appropriate image from the list of images listed in the `srcset` attribute' +taskInputHash: d53586eec9ac9fc1 lang: en +date_published: '2023-04-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -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 follow the steps below to select the appropriate image from the list specified in the `srcset` attribute. This includes both width and density descriptors and shows how the browser determines based on the device and the viewport. -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: +- When using the `srcset` attribute in HTML, the browser uses rules for choosing the most appropriate image from the provided list. These rules depend on the device display characteristics, such as resolution and pixel density, and the viewport size. With the `srcset` attribute, you can specify different images based on width (`w` descriptor) or pixel density (`x` descriptor). Let's look at examples of each. -1. Width descriptor (`w`): +1. Width descriptors (`w`): -Assume we have the following `srcset` attribute: +Assuming the following `srcset` attribute: ```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. +The browser follows these steps: + +a. Determine the device's DPR (Device Pixel Ratio). For example, standard displays have a DPR of 1, while high-resolution (Retina) displays have a DPR of 2 or higher. -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 valid widths 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 @@ -27,21 +33,23 @@ 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 valid widths to the viewport width. Assuming a viewport width of 420px, the browser selects the smallest image with a valid width equal to or larger than the viewport width. In this case, `example-medium.jpg` would be selected. -2. Density descriptor (`x`): +2. Density descriptors (`x`): -Assume we have the following `srcset` attribute: +Assuming the following `srcset` attribute: ```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. +a. Determine the device's DPR (Device Pixel Ratio). For example, standard displays have a DPR of 1, while high-resolution (Retina) displays have a DPR of 2 or higher. -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 the `x` descriptor in the `srcset` to the device's DPR. In this case, there are 3 images with the following descriptors: - example-1x.jpg: 1x @@ -49,12 +57,14 @@ 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 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 or higher, the browser would select `example-2x.jpg`. -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: +Note that when the `sizes` attribute is combined with the `srcset` attribute, detailed information about how to display images at different viewport widths can be provided. This is especially useful when using width descriptors (`w`). The following is an example: ```html + An example image ``` -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. +This example markup includes: +- **src**: The default image source that the browser displays if it does not support Srcset. +- **srcset**: A list of image sources and corresponding Density Descriptors (1x, 2x, 3x) from which the browser selects the best image for the user's display. +- **alt**: A 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` and improved the performance and user experience of your website. ===================== Content prompt used: @@ -56,8 +52,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..1ecec85 100644 --- a/src/content/docs/ja/_roundtrip_introduction.txt +++ b/src/content/docs/ja/_roundtrip_introduction.txt @@ -1,43 +1,40 @@ --- -title: '`srcset` and `sizes` for ``' -description: An Efficient and Subjective Guide to Responsive Images in 2023 -taskInputHash: fb587f981b4441f1 +title: 'Efficient and Unbiased Guide to `srcset` and `` sizing in 2023' +description: 'A quick reference for upgrading the `` tag to handle various modern sizes and pixel densities. Learn more about responsive images here.' +taskInputHash: b448b07775cee884 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -**An Efficient and Subjective Guide to Responsive Images in 2023** +**Efficient and Unbiased Guide to Responsive Images in 2023** -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. +For more details, refer to the sidebar. This is a quick reference for upgrading the `` tag to handle various modern sizes and pixel densities. You need to know that "not all pixels are equal" and that `devicePixelRatio` is likely to be around 3.875 rather than being 1:1. Modern smartphones often have a width of 320-428px in CSS pixels for readability, but there are many device pixels per CSS pixel on those screens. -> 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. +> You need to use [density descriptors](/en/density-descriptors) for logos, icons, and buttons to maintain their size regardless of how narrow the browser window becomes. -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 those numbers to fine-tune the solutions below. At a minimum, you need the breakpoint at which the main content area stops growing in viewport width. -### The Easy Solution + +### Simple Solution ```html A dog riding a bike. - - - - + srcset="img.jpg?format=webp&w=480 480w, + img.jpg?format=webp&w=800 800w, + img.jpg?format=webp&w=1200 1200w, + img.jpg?format=webp&w=1600 1600w, + img.jpg?format=webp&w=2000 2000w" + sizes="(max-width: 700px) 100vw, 800px" alt="A dog riding a bike" /> + + + + ``` - -{{The translation is complete and accurate.}} ===================== Content prompt used: @@ -50,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/ja/_roundtrip_lighthouse-performance-test.txt b/src/content/docs/ja/_roundtrip_lighthouse-performance-test.txt index 5c84db5..a1a11f5 100644 --- a/src/content/docs/ja/_roundtrip_lighthouse-performance-test.txt +++ b/src/content/docs/ja/_roundtrip_lighthouse-performance-test.txt @@ -1,28 +1,27 @@ --- -title: Testing website performance with Lighthouse -description: Steps for testing website performance using Lighthouse -taskInputHash: 7f9c623aaf7861da +title: Testing Performance with Lighthouse +description: Steps for testing a website's performance using Lighthouse +taskInputHash: b3e263b1e86dc57a 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -# How to test website performance with Lighthouse +## How to Test a Site's Performance Using Lighthouse? -`Lighthouse` is a tool used for measuring website performance, accessibility, and more. To test a website's performance with `Lighthouse`, follow these steps: +>Lighthouse is a tool for evaluating a website's performance, accessibility, and various other aspects. You can use Lighthouse to test a website's performance by following these steps: -1. Open the Google Chrome web browser and navigate 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 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 on the three dots in the top right corner of the browser window and then select "More Tools" > "Developer Tools". Alternatively, 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 then 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 on "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. Once Lighthouse completes the analysis, a report will be shown that includes the score and recommendations for improving the website's 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 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. Lighthouseによるパフォーマンスのテスト -2. Lighthouseを使用してウェブサイトのパフォーマンスをテストする手順 +Metadata returned1. Lighthouse でパフォーマンスをテストする +2. Lighthouse を使用してウェブサイトのパフォーマンスをテストする手順 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..74d582b 100644 --- a/src/content/docs/ja/_roundtrip_picture-examples.txt +++ b/src/content/docs/ja/_roundtrip_picture-examples.txt @@ -1,53 +1,59 @@ --- -title: Examples of using the `` element -description: Provides examples of using the `` element for responsive images, art direction, and different image formats. -taskInputHash: 4cec70ff1dc4182d +title: 'Example usage of the `` element' +description: Provides examples of using the `` element for responsive images, art direction, and different image formats +taskInputHash: 4e3aa444814c033f lang: en +date_published: '2023-04-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -Below are examples and explanations for using the `` element: +Below are some examples and explanations of using the `` element: -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 specifies different image sources using the "srcset" attribute, and specifies the condition for which each source is used using the "media" attribute. The `` element is used as a fallback for older browsers or when the conditions specified by the `` element are not met. -2. Example of art direction: +2. Example of art direction for images: ```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 based on the device's orientation. The `` element specifies image source for wider screens using the "media" attribute, and the `` element specifies image source for portrait orientation. 3. Example of different image formats: ```html + - 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 specifies different image formats using the "srcset" and "type" attributes. The `` element is used as a fallback for older browsers that don't 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 define when the layout of a website or application changes based on the viewport's size. Breakpoints are defined using CSS media queries and 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. -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 for which each source is used. If the screen width is above 768 pixels, 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 below 480 pixels, the `image-small.jpg` source is used. This allows for providing images of appropriate size for each device, reducing page load times and improving the user experience. -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. +Breakpoints can be defined for any screen size, and multiple breakpoints can be used to create layouts that are suited for 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: @@ -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/ja/_roundtrip_pixels-not-pixels.txt b/src/content/docs/ja/_roundtrip_pixels-not-pixels.txt index 3786304..8c63120 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 -description: Device px ≠ Browser px ≠ Image px -taskInputHash: 73be94d33f113c9c +title: px ≠ Pixels +description: Device pixels ≠ browser pixels ≠ image pixels +taskInputHash: 02d6e1ce4c04f04e 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -### Device pixels ≠ Browser pixels ≠ Image pixels +### Device pixels ≠ browser pixels ≠ image pixels -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 mapped to multiple device/printer pixels in most cases. My mobile device has a devicePixelRatio of 3.875. [What about yours?](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 of my desktop varies with browser zoom but it is 1.5 by default (because my `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. +An image file (except for SVG) is decoded into a grid of pixels. **Perfectly displaying image pixels at a 1:1 ratio with device pixels is not easy. However, using `srcset` can provide a** sufficiently close **display. Also, if there is a need for a perfectly accurate mapping, developers can use secret business techniques to adjust the size of html elements after loading. (This forbidden technique will not be revealed 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 based on the number of CSS pixels as if they were all 96dpi. Developers generally avoid absolute units as it is common to use units derived from font size or viewport/container dimensions. If users adjust the multiplier of `Accessibility> Text Size`, zoom the browser, or rotate the device, the mismatch of units can cause layout problems. You should also do all of these to check before releasing 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. デバイスpx ≠ ブラウザpx ≠ 画像px +2. デバイスのピクセル ≠ ブラウザの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..73873c0 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 +title: Specifying Width and Height in HTML +description: The advantages of using the width and height attributes in HTML code. +taskInputHash: 85b3f8cd76c7b5f1 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -Why is it necessary to specify width and height in HTML code? +Why should we input 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 HTML code so that the web browser can know the size of an image before it is fully loaded. This reserves the proper space for the image on the webpage and prevents content from jumping around when the image is loaded. > -> 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 of an image can improve the overall performance of the webpage. If the browser knows the size of the image beforehand, it can more accurately calculate the space needed to display the image, preventing unnecessary reflow during 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, specifying the width and height of an image in HTML code can speed up content loading, reduce visual glitches, 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..8b3744d 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: Explanation of when to use the element +taskInputHash: e299732340fa68bf 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -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 `picture` element is used to provide different versions of an image and display them based on specific conditions. It is especially useful for creating images optimized for various screen sizes and resolutions, and is commonly used in 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. +The following are specific scenarios in which the `picture` 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 displays:** High-density screens, such as Apple's Retina display, can make images appear blurry or pixelated if not optimized for high resolution due to their high pixel density. By using the `picture` element, versions of images with twice the normal number of pixels can be provided, resulting in clear and sharp display 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:** When designing a site that needs to display images with different aspect ratios, such as landscape and portrait, the `picture` element can be used to provide different versions of images optimized for each aspect ratio. -* **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 and can consume a lot of bandwidth, especially on mobile devices. By using the `picture` element, smaller versions of images can be provided for devices with small screens or slow internet connections, reducing 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 times when you want to display images in a specific way depending on the rest of the page layout. For example, you may want to display a close-up of a person's face on a mobile device and a wide-angle view on a desktop device. By using the `picture` element, different versions of images optimized for different layouts can be provided. + +Overall, the `picture` element is a powerful tool for optimizing images for a diverse range of use cases, and achieving excellent appearance regardless of the device or screen size being used. ===================== 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..e409d80 100644 --- a/src/content/docs/ja/_roundtrip_width-density.txt +++ b/src/content/docs/ja/_roundtrip_width-density.txt @@ -1,22 +1,21 @@ --- -title: Width and Density Descriptor -description: 'An example of using the "srcset" attribute with width and density descriptors' -taskInputHash: 85e0a3c7357342e1 +title: Metrics of Width and Density +description: 'Examples of use of width and density metrics in `srcset`.' +taskInputHash: e4dc882579a76d0f 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -Understand the width (w) and density (x) descriptors in `srcset`, using examples and Markdown. +Understanding the width (`w`) and density (`x`) metrics in `srcset`. We will explain it with examples. -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 multiple image sources with different resolutions and pixel densities, so that the browser can select the appropriate image based on the display characteristics of the device. The `srcset` attribute specifies the image using a combination of a URL and either a `w` or `x` descriptor. -## Width (w) Descriptor +## Width (`w`) Descriptor -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 `w` descriptor is used to specify the width of the image in pixels. It is used when the dimensions of the image need to be provided to the browser, so that it can select the appropriate image based on the available space on the screen. -The syntax for using the `w` descriptor in `srcset` is as follows: +>The syntax for using the `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. +> In the above example, we provide the browser with three images and their respective widths in pixels. The browser will select the image with the width closest to the available space on the screen. -## Density (x) Descriptor +## 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 providing different versions of the same image with different pixel densities to the browser. +>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 the browser needs to be provided with 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 the `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, we provide the browser with three images and their respective pixel densities. The browser will select the image with the pixel density closest to that of the device's screen. -Both `w` and `x` descriptors can be used together within the same `srcset` attribute, providing the browser with choices. +>By using the `w` and `x` descriptors together in the `srcset` attribute, developers can provide the browser with choices. ===================== 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. 幅と密度のディスクリプタ -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..f7a5ae2 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: 9ada4b6b23ece1fc 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- ### 背景 -小さなスクリーンと大きなモニターには異なるレイアウトが必要です。 `srcset` と `sizes` の目的のために、レイアウトが変更されるポイントを知る必要があります。 +小さなスクリーンと大きなモニターは異なるレイアウトが必要です。 `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密度記述子](/ja/density-descriptors)を使用すると良い場合があります）。 -メインコンテンツの画像は、そのコンテナのサイズに制限されます。通常、ページのメインコンテンツ領域は、最大のスクリーンである特定の幅に制限されます。つまり、 `max-width` が指定されますが、小さなスクリーンでは、メインコンテンツ領域がビューポート全体を占めます。 +メインコンテンツの画像は、コンテナのサイズに制限されます。通常、ページのメインコンテンツ領域は、最大のスクリーンである `max-width` で制限されますが、小さなスクリーンでは、メインコンテンツ領域はビューポート全体を占めます。 -いくつかのブレークポイントで複数の列がある場合、画像が占めるビューポート幅の割合が変わるため、有効なサイズ指定ルールを計算することがより困難になります。 +ブレークポイントで複数の列を持つ場合、画像が占めるビューポート幅の割合が変わるため、効果的なサイズルールを計算するのがより困難になります。 ### 簡単な方法 -それでは、これを過度に複雑にしたりしないでください。おそらく次の近似値で非常に妥当な答えが得られます。 +とはいえ、これについて考えすぎないようにしてください。おそらく、以下の近似値で十分です。 -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..39fdf97 100644 --- a/src/content/docs/ja/browser-picks-srcset.md +++ b/src/content/docs/ja/browser-picks-srcset.md @@ -1,70 +1,68 @@ --- title: ブラウザが選択する方法 -description: '`srcset`属性にリストされた画像からブラウザが選択する方法' -taskInputHash: 4ad7cdb54859d445 +description: '`srcset` 属性にリストされた画像の中からブラウザが選択する方法' +taskInputHash: d53586eec9ac9fc1 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -ブラウザは、`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 (Device Pixel Ratio) を決定します。たとえば、標準ディスプレイの 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` が選択されます。 + +注目すべき点は、`srcset` 属性と `sizes` 属性を組み合わせて、異なるビューポート幅での画像の表示方法に関する詳細情報を提供できることです。これは、幅記述子 (`w`) を使用する場合に特に役立ちます。以下は例です。 + +```html + +An example image ``` -このマークアップ例には次のものが含まれます。 - -- **src** ：ブラウザがsrcsetをサポートしていない場合に表示されるデフォルトの画像ソース。 -- **srcset** ：画像ソースとその密度指定子（1x、2x、3x）のリスト。ブラウザは、ユーザーのディスプレイに基づいて最適な画像を選択します。 -- **alt** ：アクセシビリティの目的で画像の説明。 +このマークアップ例には、以下が含まれています。 +- **src**: ブラウザが Srcset をサポートしていない場合に表示される、デフォルトの画像ソース。 +- **srcset**: 画像ソースとそれに対応する密度記述子（1x、2x、3x）のリスト。ブラウザは、ユーザーのディスプレイに最適な画像を選択します。 +- **alt**: アクセシビリティのために画像の説明。 -以上です！ これで、密度指定子を使用したSrcsetを正常に実装し、Webサイトのパフォーマンスとユーザーエクスペリエンスを向上させました。 +以上です。これで、 `Srcset with Density Descriptors` を正常に実装し、あなたのウェブサイトのパフォーマンスとユーザーエクスペリエンスを向上させました。 diff --git a/src/content/docs/ja/introduction.md b/src/content/docs/ja/introduction.md index 721670b..d11c947 100644 --- a/src/content/docs/ja/introduction.md +++ b/src/content/docs/ja/introduction.md @@ -1,39 +1,39 @@ --- -title: '`srcset` と `` の `sizes`' -description: 2023年のレスポンシブイメージの効率的で主観的なガイド -taskInputHash: fb587f981b4441f1 +title: '`srcset`および``サイズ' +description: 2023年のレスポンシブ画像に関する、効率的で偏見のないガイド +taskInputHash: b448b07775cee884 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -**2023年のイメージに関する効率的で主観的なガイド** - -深堀りについてはサイドバーを参照してください。これは、現代の様々なサイズとピクセル密度に対応するために、`` タグをアップグレードするクイックリファレンスです。pixels != pixels であることを[知っておくべきです](/ja/pixels-not-pixels)。そして、`devicePixelRatio` は1:1よりも3.875程度の方が多いです。現代のスマートフォンは、CSSピクセル単位で320-428pxの幅になるように見せかけますが、CSSピクセル単位あたりの多数のデバイスピクセルがあります。 - -> ブラウザウィンドウをどんなに狭くしても、画像のサイズが変わらない場合は、[density descriptor](/ja/density-descriptors) を使用する必要があります。これは、ロゴ、アイコン、ボタンなどに適しています。 - -あなたの[ブレークポイント](/ja/breakpoints)を知っていますか？以下のソリューションを微調整するためにこれらの数値が必要になります-最小限に、メインコンテンツ領域が成長を止めるビューポート幅のブレークポイントが必要です。 - -### 簡単な方法 - -```html - -犬が自転車に乗っている画像 - - - - +**2023年の画像に関する効率的で偏見のないガイド** + +詳細についてはサイドバーを確認してください。これは、現代の様々なサイズとピクセル密度を扱うための``タグをアップグレードするためのクイックリファレンスです。[ピクセルがピクセルであるわけではない](/ja/pixels-not-pixels)ことを知っておく必要があり、`devicePixelRatio`は1：1ではなく、3.875くらいである可能性が高いことも知っておく必要があります。モダンなスマートフォンは、可読性のためにCSSピクセルで320-428px幅になっていることが多いですが、CSSピクセルあたりの多くのデバイスピクセルがあります。 + +> ブラウザウィンドウをどれだけ狭くしてもサイズが変わらず、ロゴ、アイコン、ボタンには[density descriptor] (/ja/density-descriptors)を使用する必要があります。 + +あなたの[ブレークポイント](/ja/breakpoints)を知っていますか？この下のソリューションを微調整するために、これらの番号が必要になります。少なくとも、メインコンテンツ領域が成長を停止するビューポート幅のブレークポイントが必要です。 + + +### 簡単な方法 + +```html + +自転車に乗る犬 + + + + ``` diff --git a/src/content/docs/ja/lighthouse-performance-test.md b/src/content/docs/ja/lighthouse-performance-test.md index 1214cb4..c197e16 100644 --- a/src/content/docs/ja/lighthouse-performance-test.md +++ b/src/content/docs/ja/lighthouse-performance-test.md @@ -1,25 +1,24 @@ --- -title: Lighthouseによるパフォーマンスのテスト -description: Lighthouseを使用してウェブサイトのパフォーマンスをテストする手順 -taskInputHash: 7f9c623aaf7861da +title: Lighthouse でパフォーマンスをテストする +description: Lighthouse を使用してウェブサイトのパフォーマンスをテストする手順 +taskInputHash: b3e263b1e86dc57a 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -# Lighthouseを使ってサイトのパフォーマンスをテストする方法 +## Lighthouse を使ってサイトのパフォーマンスをテストするには？ -`Lighthouse`は、ウェブサイトのパフォーマンス、アクセシビリティなどを測定するためのツールです。ウェブサイトのパフォーマンスを `Lighthouse`でテストするためには、次の手順を実行します。 +>Lighthouse は、ウェブサイトのパフォーマンス、アクセシビリティやその他諸々の面を評価するツールです。以下の手順に従って、Lighthouse を使用してウェブサイトのパフォーマンスをテストすることができます： -1. Google Chromeウェブブラウザを開き、テストしたいページに移動します。 +>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 ダイアログボックスで、テストしたいパフォーマンスとその他の関連オプションを選択し、"Generate report" をクリックします。 -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..986a6d9 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 +title: '``要素を使用した例' +description: レスポンシブ画像、アートディレクション、異なる画像形式に対して``要素を使用した例を提供します +taskInputHash: 4e3aa444814c033f 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -以下は、`` 要素を使用した例とその説明です。 +以下は、``要素を使用したいくつかの例とその説明です。 -1. レスポンシブイメージの例: +1. レスポンシブ画像の例： ```html - An image + 画像 ``` -説明: この例では、`` 要素を使用して、画面サイズに応じて異なる画像リソースを提供しています。`` 要素は、「srcset」属性を使用して異なる画像リソースを指定し、「media」属性を使用して各リソースを使用する条件を指定します。`` 要素は、古いブラウザー用の代替方法であり、また `` 要素で指定された条件が満たされない場合にも使用されます。 +説明：この例では、``要素は、異なる画面サイズに対して異なる画像ソースを提供するために使用されます。``要素は、"srcset"属性を使用して異なる画像ソースを指定し、"media"属性を使用して各ソースが使用される条件を指定します。``要素は、古いブラウザーまたは``要素で指定された条件が満たされない場合に、フォールバックとして使用されます。 -2. アートディレクションの例: +2. 画像のアートディレクションの例： ```html - An image + + 画像 ``` -説明: この例では、デバイスの向きに応じて、異なる画像リソースを提供するために、`` 要素が使用されています。`` 要素は、「media」属性を `(orientation: landscape)` に設定して、ワイドスクリーン用の画像リソースを指定していますが、`` 要素はポートレートスクリーン用の画像リソースを指定しています。 +説明：この例では、``要素は、デバイスの向きに応じて異なる画像ソースを提供するために使用されます。``要素に"media"属性を設定して、広い画面向けの画像ソースを指定し、``要素は縦画面向けの画像ソースを指定します。 -3. 異なる画像フォーマットの例: +3. 異なる画像フォーマットの例： ```html + - An image + + 画像 ``` -説明: この例では、`` 要素を使用して、異なる画像フォーマット用の異なる画像リソースを提供します。`` 要素は、「srcset」属性と「type」属性を使用して、異なる画像フォーマットを指定した異なる画像リソースを指定します。`` 要素は、`` 要素をサポートしていない古いブラウザーの代替品として使用されます。 +説明：この例では、``要素は、異なる画像形式のために異なる画像ソースを提供するために使用されます。``要素は、"srcset"属性と"type"属性を使用して、異なる画像形式を指定します。``要素は、``要素をサポートしていない古いブラウザーのフォールバックとして使用されます。 ## ブレークポイント -レスポンシブデザインでは、ビューポートのサイズに基づいてウェブサイトやアプリケーションのレイアウトが変更されるタイミングを定義するために、ブレークポイントが使用されます。ブレークポイントは、通常、CSSのメディアクエリを使用して定義され、画面幅に応じて異なるスタイルが適用されます。これらのブレークポイントは、`` 要素と組み合わせて、異なる画面サイズに対して異なる画像リソースを提供するために使用することができます。 +レスポンシブデザインでは、ブレークポイントを使用して、ビューポートのサイズに基づいてウェブサイトやアプリケーションのレイアウトを変更するよう定義されます。ブレークポイントは、CSSのメディアクエリを使用して定義され、スクリーン幅に応じて異なるスタイルが適用されます。これらのブレークポイントは、``要素と組み合わせて、異なる画面サイズに対して異なる画像ソースを提供するために使用できます。 -たとえば、最初の例では、`media` 属性を使用して、各リソースが使用されるスクリーン幅を指定しました。スクリーン幅が 768 ピクセル以上の場合、`image-large.jpg` リソースが使用されます。スクリーン幅が 480 ピクセル以上 768 ピクセル未満の場合、`image-medium.jpg` リソースが使用されます。スクリーン幅が 480 ピクセル未満の場合は、`image-small.jpg` リソースが使用されます。これにより、各デバイスに適切なサイズの画像を提供できるため、ページの読み込み時間が短縮され、ユーザー体験が向上します。 +たとえば、上記の最初の例では、`media`属性を使用して、各ソースが使用されるスクリーン幅を指定しました。スクリーン幅が768ピクセル以上の場合は`image-large.jpg`ソースが使用されます。スクリーン幅が768ピクセル以上480ピクセル未満の場合は、`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..bd2bfbb 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 +taskInputHash: 02d6e1ce4c04f04e 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -### デバイスピクセル ≠ ブラウザ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`を使用すると、**十分に近い**表示ができます。また、完全に正確なマッピングが必要な理由がある場合には、ビジネス上の秘密のテクニックを使用してhtml要素のサイズを載入後に調整することができます。（この禁断の術はここでは明かされませんが） -> 他の絶対単位（in、pc、pt、mm、cm、Q）は、CSSピクセルの数とすべてが96dpiであると想定されています。開発者は絶対単位を避けます。なぜなら、フォントサイズまたはビューポート/コンテナの寸法から派生した単位を使用する方が一般的には良いからです。ユーザーが `Accessibility > Text Size` の乗数を調整、ブラウザーズーム、またはデバイスを回転させると、ミスマッチした単位がレイアウトを壊す可能性があります。言うまでもなく、サイトを出荷する前にこれらすべてのことを行う必要があります。 +> 他の絶対単位（in、pc、pt、mm、cm、Q）は、すべてが96dpiであるかのように数値のCSSピクセルに基づいて定義されています。 開発者は、フォントサイズまたはビューポート/コンテナの寸法から派生した単位を使用することが一般的に良いため、絶対単位を回避します。 ユーザーが `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..5dd7d47 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: 85b3f8cd76c7b5f1 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -なぜHTMLに幅と高さを指定する必要があるのでしょうか？ +なぜHTMLに幅と高さを入力すべきでしょうか？ -> 画像のHTMLコードに幅と高さの属性を指定することが推奨されています。これは、ウェブブラウザーが画像のサイズを完全に読み込む前に画像の大きさを知ることを助けるためです。これにより、ブラウザーは画像に適切なスペースをウェブページに予約でき、画像が読み込まれる際にコンテンツがジャンプするのを防ぐことができます。 +> Webブラウザが画像のサイズを完全に読み込む前にそのサイズを知ることができるように、HTMLコード内に幅と高さ属性を指定することが推奨されます。これにより、ブラウザは画像の適切なスペースを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..1938a7e 100644 --- a/src/content/docs/ja/when-to-use-picture.md +++ b/src/content/docs/ja/when-to-use-picture.md @@ -1,22 +1,21 @@ --- -title: '``要素の使用方法' -description: '``要素を使用すべき状況について説明します。' -taskInputHash: 09553a05f76abc73 +title: 要素を使用するタイミング +description: どのような状況で要素を使用すべきか解説 +taskInputHash: e299732340fa68bf 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -`picture`要素は、複数のバージョンの画像を提供し、特定の条件に基づいて表示するために使用されます。異なる画面サイズや解像度に最適化するために役立ち、レスポンシブWebデザインで一般的に使用されます。 -ここでは、`picture`要素を使用する特定のシナリオをいくつか紹介します。 +`picture`要素は、画像の複数バージョンを提供し、特定の条件に基づいて表示するために使用されます。特に、さまざまな画面サイズや解像度に最適化された画像を作成するために役立ち、レスポンシブWebデザインでよく使用されます。 +以下は、`picture`要素を使用する特定のシナリオです： -* **Retinaディスプレイ：** AppleのRetinaディスプレイのような高密度なスクリーンは、高解像度に最適化されていない場合、画像がぼやけたり、ピクセル化したりする可能性があります。 `picture`要素を使用すると、通常のバージョンの2倍のピクセルを持つ画像のバージョンを提供して、Retinaディスプレイでクリアで鮮明な表示を実現できます。 +- **Retinaディスプレイ：** AppleのRetinaディスプレイのような高密度スクリーンは、ピクセル密度が高いため、高解像度に最適化されていないと画像がぼやけたりピクセル化したりすることがあります。 `picture`要素を使用すると、通常のバージョンよりも2倍のピクセルを持つ画像のバージョンを提供して、Retinaディスプレイでクリアで鮮明な表示が可能です。 -* **異なるアスペクト比：** 横長と縦長のような異なるアスペクト比を持つ画像を表示する必要があるサイトを設計している場合、 `picture`要素を使用して、各アスペクト比に最適化された異なるバージョンの画像を提供できます。 +- **異なるアスペクト比：** ランドスケープとポートレートなど、異なるアスペクト比の画像を表示する必要があるサイトを設計している場合、`picture`要素を使用して、各アスペクト比に最適化された画像の異なるバージョンを提供できます。 -* **帯域制限：** 画像は大きなファイルで、特にモバイルデバイスでは多くのバンド幅を占有する可能性があります。 `picture`要素を使用すると、画面サイズが小さいデバイスまたはインターネット接続が遅いデバイス向けに、より小さいバージョンの画像を提供できます。これによりページの読み込み時間を短縮できます。 +- **帯域幅の制限：** 画像は大きなファイルであり、特にモバイルデバイスでは多くの帯域幅を消費します。`picture`要素を使用すると、画面が小さいデバイスや遅いインターネット接続を持つデバイス向けに、画像の小さなバージョンを提供して、ページのロード時間を短縮することができます。 -* **アートディレクションによるレイアウト：** ページの他の部分のレイアウトに応じて、画像を特定の方法で表示したい場合があります。たとえば、モバイルデバイスでは人物の顔のアップを表示したい場合がありますが、デスクトップデバイスでは広角を表示したい場合があります。 `picture`要素を使用すると、異なるレイアウトに最適化された異なるバージョンの画像を提供できます。 +- **アートディレクションのレイアウト：** ページの残りのレイアウトに応じて画像を特定の方法で表示したい場合があります。例えば、モバイルデバイスで人物の顔のアップを表示したい場合と、デスクトップデバイスで広角の表示をしたい場合があります。 `picture`要素を使用すると、異なるレイアウトに最適化された画像の異なるバージョンを提供できます。 -全体的に、`picture`要素は様々なユースケースに最適化された画像を提供するのに役立つ強力なツールであり、どのデバイスや画面サイズでも素晴らしい表示を実現できます。 +全体として、`picture`要素は多様なユースケースに画像を最適化し、どのデバイスや画面サイズで閲覧されているかにかかわらず、優れた外観を実現するための強力なツールです。 diff --git a/src/content/docs/ja/width-density.md b/src/content/docs/ja/width-density.md index c61bc38..55766fe 100644 --- a/src/content/docs/ja/width-density.md +++ b/src/content/docs/ja/width-density.md @@ -1,22 +1,21 @@ --- -title: 幅と密度のディスクリプタ -description: '`srcset`で幅と密度のディスクリプタを使用する例' -taskInputHash: 85e0a3c7357342e1 +title: 幅と密度の指標 +description: '`srcset`での幅と密度の指標の使用例' +taskInputHash: e4dc882579a76d0f 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -`srcset`の中のwidth(w)とdensity(x)ディスクリプタを理解する。例を用いて説明しMarkdownを使用する。 +`srcset`における幅(`w`)と密度(`x`)の指標の理解。例を用いて説明します。 -`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`)指標 -`srcset`で`x`ディスクリプタを使用する構文は次のようになります。 +>`x`指標は、物理ピクセルとCSSピクセルの比率である画像のピクセル密度を指定するために使用されます。同じ画像の異なるピクセル密度を持つバージョンをブラウザに提供する必要がある場合に使用されます。 + +>`srcset`で`x`指標を使用するための構文は以下のようになります。 ```html Example Image ``` -上記の例では、3つの画像とそれぞれのピクセル密度をブラウザに提供しています。ブラウザはデバイスの画面に最も近いピクセル密度の画像を選択します。 -`w`および`x`ディスクリプタは、同じ`srcset`属性の中で一緒に使用することができ、ブラウザに選択肢を提供できます。 +> 上記の例では、3つの画像とそれぞれのピクセル密度をブラウザに提供しています。ブラウザは、デバイスの画面に最も近いピクセル密度を持つ画像を選択します。 + +>`w`指標と`x`指標を`srcset`属性で一緒に使用して、ブラウザに選択肢を提供できます。 diff --git a/src/content/docs/sv/_roundtrip_breakpoints.txt b/src/content/docs/sv/_roundtrip_breakpoints.txt index bd6f1e5..f56ce57 100644 --- a/src/content/docs/sv/_roundtrip_breakpoints.txt +++ b/src/content/docs/sv/_roundtrip_breakpoints.txt @@ -1,42 +1,41 @@ --- title: Breakpoints & Images description: Why some (but not all) breakpoints matter for your images -taskInputHash: 93c856b4f6a02850 +taskInputHash: 72316cb28b71d8b2 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- ### Background Small screens and large screens require different layouts. For `srcset` and `sizes`, we need to know at what 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 need to decide what should be shrunk, hidden, or moved around on smaller screens--or more commonly, what should be expanded, revealed, or added on larger screens. They also have very little information to go on. Is the user on a tablet or phone in landscape mode--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 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. -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 (such as logos, icons, or buttons) may be immune to layout shifts caused by these breakpoints (and look fine 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. +Main content images will be constrained by the size of their container. Typically, the main content area on a page will be limited to a certain width on the largest 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 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 will be harder to calculate effective sizing rules, since the percentage of 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 said, don't overthink this. You'll probably be just fine with the following rough estimate: -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 image's container) stop growing? Up to that 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's the maximum width the container will ever reach? 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: +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 for us based on the CSS. Unfortunately, browsers are aggressively eager to pick a image URL *before* stylesheets are downloaded. So we have to do the calculations ourselves, and it serves them right if we don't get it exactly right. ===================== Content 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..c7d19f4 100644 --- a/src/content/docs/sv/_roundtrip_browser-picks-srcset.txt +++ b/src/content/docs/sv/_roundtrip_browser-picks-srcset.txt @@ -1,28 +1,29 @@ --- title: How the browser chooses description: How the browser chooses between images listed in the srcset attribute -taskInputHash: 3fd2b41750391cb2 +taskInputHash: cbe04aa61cb35a33 lang: en +date_published: '2023-04-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -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 listed in the srcset attribute? Here's a step-by-step guide with examples for both width and pixel density specifications and how the browser determines based on device and viewport 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 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 select the most appropriate image from a list of provided sources. These rules depend on both the device's display properties (resolution, pixel density) and viewport size. The srcset attribute allows you to specify different images based on width (using "w" descriptor) or pixel density (using "x" descriptor). Let's go through each case with examples. -1. Width descriptor (`w`): +1. Width descriptor ("w"): -Assume that we have the following `srcset` attribute: +Assume 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 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 the srcset. Multiply the width descriptor by DPR. For a device with a DPR of 1: - example-small.jpg: 400 * 1 = 400px @@ -30,23 +31,21 @@ b. Calculate the effective width for each image in the sources. Multiply the wid - 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 that is greater than or equal to the viewport width. In this case, it chooses "example-medium.jpg". -2. Pixel density descriptor (`x`): +2. Pixel density descriptor ("x"): -Assume that we have the following `srcset` attribute: +Assume 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 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. 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's 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,15 +53,14 @@ 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 that is closest to the device's DPR. For a device with a DPR of 1, the browser chooses "example-1x.jpg". For a device with a DPR of 2, 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 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 - An example image + alt="An example of an image"> ``` -This markup example includes: -- **src**: Default image source displayed if the browser does not support srcset. -- **srcset**: List of image sources and their density descriptors (1x, 2x, 3x). The browser selects the most appropriate image based on the user's screen. +This branding example includes: +- **src**: The default image source, displayed if the browser doesn't support srcset. +- **srcset**: A list of image sources and their density descriptors (1x, 2x, 3x). The browser selects the most suitable image based on the user's screen. - **alt**: A description of the image for accessibility purposes. -And that's it! You have successfully implemented srcset with density descriptors, improving your website's performance and user experience. - -{{Note that the term "density descriptor" is not commonly used in English-speaking regions, and "pixel density descriptor" or simply "descriptor" may be more appropriate. The guide's language could be further simplified by using simpler words like "image size qualifier."}} +And that's it! You've successfully implemented srcset with density descriptors and improved your website's performance and user experience. ===================== Content prompt used: @@ -57,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. Densitetsdescriptors och srcset -2. Exempel på att använda densitetsdescriptors i `srcset` +Metadata returned1. Densitetsbeskrivare & srcset +2. Exempel på att använda densitetsbeskrivare i `srcset` Roundtrip (isolated) prompt used: diff --git a/src/content/docs/sv/_roundtrip_introduction.txt b/src/content/docs/sv/_roundtrip_introduction.txt index bee8e25..15a9642 100644 --- a/src/content/docs/sv/_roundtrip_introduction.txt +++ b/src/content/docs/sv/_roundtrip_introduction.txt @@ -1,43 +1,43 @@ ---- -title: srcset and sizes -description: An efficient and clear guide to responsive images for 2023 -taskInputHash: 87881becd1c9192b -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' ---- -**An efficient and definite 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. - ->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. - -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. - -### The simple method - -```html -Dog riding a bike - - - - +--- +title: srcset & sizes +description: An Effective and Selfish Guide to Responsive Images for 2023 +taskInputHash: 9c032707040342d3 +lang: en +sidebar_sort_priority: 1000 +date_published: '2023-04-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' +--- +**An Effective and Selfish Guide to Images for 2023** + +See the sidebar for a deep dive. This is a quick reference to upgrade the `` tags that can handle modern devices with varying sizes and pixel densities. You should [know that a pixel is not a pixel](/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](/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 fine-tune the solution below—and at least the breakpoint of the viewport width at which the main content area stops growing. + + +### The Simplest Solution + +```html + +A dog riding a bike + + + + ``` - ===================== Content prompt used: @@ -50,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 och sizes -2. En effektiv och tydlig guide till responsiva bilder för 2023 +Metadata returned1. srcset & sizes +2. En Effektiv och Egennyttig Guide för Responsiva Bilder till 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..9fb0d0b 100644 --- a/src/content/docs/sv/_roundtrip_lighthouse-performance-test.txt +++ b/src/content/docs/sv/_roundtrip_lighthouse-performance-test.txt @@ -1,27 +1,25 @@ --- -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: Steps on how to test website performance using Lighthouse +taskInputHash: f4d114a6274dad8b 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- How do you test your website's performance with 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 performance, accessibility, and other aspects of a website. To test your website's performance with Lighthouse, follow these steps: > -> 1\. Open Google Chrome browser and navigate to the page you want to test. +> 1. Open the 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 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 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 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". +> 4. In the Lighthouse dialog box, select performance 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 your website's performance, accessibility, and other areas. +> 5. After Lighthouse has completed its 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 help improve its user experience and search engine ranking. ===================== @@ -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 hur du testar en webbplats prestanda med hjälp av 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..75ef742 100644 --- a/src/content/docs/sv/_roundtrip_picture-examples.txt +++ b/src/content/docs/sv/_roundtrip_picture-examples.txt @@ -1,12 +1,15 @@ --- -title: Example with the Element +title: Example with the element description: >- - Provides examples using the element for responsive images, art direction, - and different image formats. -taskInputHash: 3b4e429f7eb84ce2 + Shows examples of how the element can be used for responsive images, + art direction, and different image formats. +taskInputHash: 75c6960041822dbb lang: en +date_published: '2023-04-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -Here are some examples of how to use the `` element and their explanations: +Here are some examples of how the `` element can be used and their explanations: 1. Example for responsive images: @@ -18,41 +21,38 @@ Here are some examples of how to use the `` element and their explanati ``` -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. +Explanation: In this example, the `` element is used to provide different image sources for different screen sizes. The `` elements specify the different image sources with the "srcset" attribute and the "media" attribute to indicate 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. +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 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. +Explanation: In this example, the `` element is used to provide different image sources for different image formats. The `` elements specify different image sources with the "srcset" attribute and the "type" attribute to indicate 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. +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. -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. +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 is used, when the screen width is greater than or equal to 480 pixels but less than 768 pixels, the "image-medium.jpg" source is used, and when the screen width is less than 480 pixels, the "image-small.jpg" source is used. This allows us to serve appropriately scaled images for each device, reducing page load time and improving 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 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, you can create flexible and responsive designs that look great on any device. ===================== Content prompt used: @@ -65,8 +65,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. Visar exempel på hur -elementet kan användas för responsiva bilder, konstnärlig riktning 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..bcca4cf 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: Unit pixels ≠ browser pixels ≠ image pixels +taskInputHash: b85e64d4f12dd430 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- ### Unit 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`) map **almost always to multiple device/screen pixels**. The devicePixelRatio on my 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%). +My desktop's devicePixelRatio changes with browser zoom, but defaults to 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 ratio with device pixels, but `srcset` can get you close enough**, and a little Javascript can adjust the size of the HTML element after loading if you truly have compelling reasons for needing perfect mapping, although such forbidden methods won't be disclosed 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/sv-SE/docs/Web/CSS/length) are defined in terms of CSS pixels pretending everything is 96dpi. Developers avoid absolute units because it's usually better to use units derived from font size or viewport/container dimensions. Mismatched 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 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äsarpixlar ≠ bildpixlar 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..92e0fcd 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 +description: Benefits of using width and height attributes in HTML code +taskInputHash: 3387b634d8193713 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -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 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 is fully loaded. This allows the browser to reserve the correct amount of space on the webpage for the image, preventing content from jumping around as the image loads. +> +> Additionally, specifying width and height attributes for images can also help improve the overall performance of the webpage. 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 relayouts or repaints of the content while it loads. +> +> Overall, using width and height attributes in HTML code for images can enhance the user experience by making the content load faster and reducing visual glitches. ===================== 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ördelar med att använda bredd och höjd attribut 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..3ce7baf 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 +description: Explains in which scenarios you should use the element +taskInputHash: c0ea8ed13128c2bb 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -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 `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. -* **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 `picture` 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 displays, 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 `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. -* **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 (like landscape vs portrait), you can use the `picture` 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 restrictions:** 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. -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 direction:** 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 desktops. The `picture` element allows you to provide different versions of the image that are optimized for different layouts. + +In summary, 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 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..f51c884 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 +title: Width and Density Descriptions +description: Examples of how to use width and density descriptions in `srcset` +taskInputHash: 988387e8e0306901 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -Understanding width (`w`) and density (`x`) descriptors in `srcset`. Use examples and markdown. +Understanding width (w) and density (x) in `srcset`. Use examples and use 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 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 +>`srcset` is an HTML attribute that enables developers to provide multiple image sources with different resolutions or pixel densities and allows the browser to choose the appropriate image based on the device's display characteristics. The `srcset` attribute uses a combination of `URL` and `w` or `x` descriptions to specify the images. -> 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. +## Width (`w`) description -> The syntax for using the `w` descriptor in `srcset` looks like this: +> The `w` description is used to specify the width of an image in pixels. It's used when we want to give the browser the dimensions of an image so that it can choose the appropriate image for the available screen space. -````html +> The syntax for using the `w` description in `srcset` is as follows: + +```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 with the closest width to the available screen space. +## Density (`x`) description ->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. - -## Density (`x`) Descriptor +> The `x` description is used to specify the density of the image, which is the ratio between physical pixels and CSS pixels. It's 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 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` description in `srcset` is as follows: ```html Example Image + alt="Example image"> ``` +>In the example above, 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 the `w` and `x` descriptions can be used together in the same `srcset` attribute to give the browser more options to choose from. ===================== Content prompt used: @@ -59,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. Bredd- och densitetsbeskrivare -2. Exempel på användning av bredd- och densitetsbeskrivare i `srcset` +Metadata returned1. Bredd- och densitetsbeskrivningar +2. Exempel på hur man använder bredd- och densitetsbeskrivningar i `srcset` Roundtrip (isolated) prompt used: diff --git a/src/content/docs/sv/breakpoints.md b/src/content/docs/sv/breakpoints.md index f3dc527..4059717 100644 --- a/src/content/docs/sv/breakpoints.md +++ b/src/content/docs/sv/breakpoints.md @@ -1,39 +1,39 @@ --- title: Brytpunkter & bilder description: Varför vissa (men inte alla) brytpunkter är viktiga för dina bilder -taskInputHash: 93c856b4f6a02850 +taskInputHash: 72316cb28b71d8b2 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- ### 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 bildskärmar behö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 mer vanligt, vad som ska utökas, avslöjas eller läggas till på större bildskärmar. De har också väldigt lite information att gå på. Är användaren på en surfplatta eller telefon i landskapslä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 visningsport bredd där layouten ändras. Detta kallas en **brytpunkt**. Det är ett godtyckligt antal CSS-pixlar ([inte enhetspixlar](/sv/pixels-not-pixels)). Polypane har en [utmärkt 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 vanligtvis använda brytpunkter. -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, ikoner eller knappar) kan vara immuna mot layoutskift som orsakas av dessa brytpunkter (och vara fina med [srcset-densitybeskrivningar](/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. +Huvudinnehållsbilder kommer att begränsas av storleken på deras container. Vanligtvis kommer huvudinnehållsområdet på en sida att vara begränsad 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 visningsporten. -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 vid vissa brytpunkter kommer det att bli svårare att beräkna effektiva dimensioneringsregler, eftersom procentandelen av visningsportens bredd som bilden tar upp kommer att ändras. ### Det enkla 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 att 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 container) att växa? Upp till den visningsportens bredd kan vi använda `100vw` för bildens `sizes`-attribut för att säga att bilden tar upp 100% av visningsbredden. +2. Vad är den maximala bredden som containern någonsin uppnår? Vi kan ställa in det som en fast `width` 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. + +> Man skulle tro att webbläsaren kunde hantera alla dessa beräkningar åt oss baserat på CSS. Tyvärr är webbläsare aggressivt ivriga att välja en bild-URL *innan* stilmallarna är nedladdade. Så vi måste göra beräkningarna själva, och det tjänar dem rätt 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..88db424 100644 --- a/src/content/docs/sv/browser-picks-srcset.md +++ b/src/content/docs/sv/browser-picks-srcset.md @@ -1,69 +1,62 @@ --- title: Hur webbläsaren väljer description: Hur webbläsaren väljer mellan bilder som listas i srcset-attributet -taskInputHash: ca195aa8819f20d7 +taskInputHash: cbe04aa61cb35a33 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -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 - -Exempelbild +``` + +Webbläsaren kommer att följa dessa steg: + +a. Bestäm enhetens DPR (Device Pixel Ratio). Till exempel har en standarddisplay 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 breddbeskrivningen 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 viewportbredden. Antag att viewportbredden är 420px. Webbläsaren kommer att välja den minsta bilden med en effektiv bredd som är större än eller lika med viewportbredden. I detta fall väljer den "example-medium.jpg". + +2. Pixel-täthetsbeskrivning ("x"): + +Antag att vi har följande srcset-attribut: + +```html +Exempelbild +``` + +Webbläsaren kommer att följa dessa steg: + +a. Bestäm enhetens DPR (Device Pixel Ratio). Till exempel har en standarddisplay 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" beskrivningarna i srcset-attributet. I detta fall har vi tre bilder med följande beskrivningar: + +- example-1x.jpg: 1x + +- example-2x.jpg: 2x + +- example-3x.jpg: 3x + +c. Välj bilden med "x" beskrivningen 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 tillhandahålla mer information om hur bilden visas vid olika viewportbredder. Detta är särskilt användbart när du använder breddbeskrivningen ("w"). Här är ett exempel: + +```html +En exempelbild + alt="Ett exempel på en bild"> ``` - - -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. +Detta märkesexempel inkluderar: +- **src**: Standardbildkällan, visas om webbläsaren inte stöder srcset. +- **srcset**: En lista över bildkällor och deras densitetsbeskrivare (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 allt! Du har framgångsrikt genomfört srcset med densitetsbeskrivare och förbättrat din webbplats prestanda och användarupplevelse. diff --git a/src/content/docs/sv/introduction.md b/src/content/docs/sv/introduction.md index 272c473..dd66fb3 100644 --- a/src/content/docs/sv/introduction.md +++ b/src/content/docs/sv/introduction.md @@ -1,23 +1,23 @@ --- -title: srcset och sizes -description: En effektiv och tydlig guide till responsiva bilder för 2023 -taskInputHash: 87881becd1c9192b +title: srcset & sizes +description: En Effektiv och Egennyttig Guide för Responsiva Bilder till 2023 +taskInputHash: 9c032707040342d3 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -**En effektiv och bestämd guide till bilder för 2023** +**En Effektiv och Egennyttig Guide för Bilder till 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. +Se sidofältet för en djupdykning. Detta är en snabbreferens för att uppgradera de ``-taggar som kan hantera moderna enheter med olika storlekar och pixeltätheter. Du bör [veta att pixel inte är pixel](/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-pixel), 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 ändras i storlek, oavsett hur smal du gör webbläsarfönstret, bör du använda en [density descriptor istället](/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 [breakpoints](/sv/breakpoints) är? Du kommer att behöva dessa nummer för att finjustera lösningen nedan - och åtminstone brytpunkten av vybredden där huvudinnehållsområdet slutar växa. -### Den enkla metoden + +### Det enkla sättet ```html @@ -28,12 +28,12 @@ Vet du vad dina breakpoints är? Du kommer att behöva dessa nummer för att fin img.jpg?format=webp&w=1600 1600w, img.jpg?format=webp&w=2000 2000w" - sizes="(max-width: 700px) 100vw, 800px" alt="Hund som cyklar" /> + sizes="(max-width: 700px) 100vw, 800px" alt="Hund som åker cykel" /> - + - + ``` diff --git a/src/content/docs/sv/lighthouse-performance-test.md b/src/content/docs/sv/lighthouse-performance-test.md index 5c1e8f3..1e1c341 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 hur du testar en webbplats prestanda med hjälp av Lighthouse +taskInputHash: f4d114a6274dad8b 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- 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. +> 1\. Öppna Google Chrome-webbläsaren och navigera till den sida 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 översta högra hörnet av webbläsarfönstret och välj sedan "Fler verktyg" och sedan "Utvecklareverktyg" eller använd helt enkelt tangentbordsgenvägen "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 klickar du på Lighthouse-ikonen som är placerad på vänster sida av panelen eller trycker på "Ctrl+Shift+P" (Windows, Linux) eller "Command+Shift+P" (macOS) för att öppna Kommandomenyn, skriv sedan "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äljer du prestanda och andra relevanta alternativ som 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\. Efter att Lighthouse har slutfört sin analys visas 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ökmotorrankning. diff --git a/src/content/docs/sv/picture-examples.md b/src/content/docs/sv/picture-examples.md index 0b07de6..4a10fca 100644 --- a/src/content/docs/sv/picture-examples.md +++ b/src/content/docs/sv/picture-examples.md @@ -1,18 +1,17 @@ --- title: Exempel med -elementet description: >- - Ger exempel på användning av -elementet för responsiva bilder, - konstnärlig riktning och olika bildformat -taskInputHash: d2042ff600a5ac1a + Visar exempel på hur -elementet kan användas för responsiva bilder, + konstnärlig riktning och olika bildformat. +taskInputHash: 75c6960041822dbb 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -Här är några exempel på hur man använder ``-elementet och deras förklaringar: +Här är några exempel på hur ``-elementet kan användas och deras förklaringar: -1\. Exempel på responsiva bilder: +1\. Exempel för responsiva bilder: ```html @@ -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 detta exempel används ``-elementet för att tillhandahålla olika bildkällor för olika skärmstorlekar. ``-elementen specificerar de olika bildkällorna med "srcset"-attributet och "media"-attributet för att ange villkoren under vilka varje källa ska användas. ``-elementet används som ett reservalternativ för äldre webbläsare eller när villkoren specificerade i ``-elementen inte uppfylls. -2\. Exempel på konstnärlig riktning: +2\. Exempel för konstnärlig riktning: ```html @@ -34,7 +33,7 @@ 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 detta exempel används ``-elementet för att tillhandahålla olika bildkällor beroende på enhetens orientering. ``-elementet med "media"-attributet inställt på "(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: @@ -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 detta exempel används ``-elementet för att tillhandahålla olika bildkällor för olika bildformat. ``-elementen specificerar olika bildkällor med "srcset"-attributet och "type"-attributet för att ange bildformatet. ``-elementet används som ett reservalternativ för äldre webbläsare som inte stöder ``-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å vyporten. 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. +Till exempel använde vi i det första exemplet ovan `media`-attributet 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 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 sidans hämtningshastighet 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 för 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å 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..e8b74ad 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äsarpixlar ≠ bildpixlar +taskInputHash: b85e64d4f12dd430 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -### Enhet pixlar ≠ webbläsare px ≠ bild px +### Enhet pixlar ≠ webbläsarpixlar ≠ bildpixlar -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 till flera enhets-/skrivar-pixlar**. devicePixelRatio på min telefon ä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%). +Mitt stationära devicePixelRatio ändras vid webbläsarzoom, men är förvalt till 1,5 (mitt `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 en pixel-rutnät. **Det är irriterande svårt att få bildpixlar att visas perfekt i förhållande 1:1 med enhetspixel - men med `srcset` kan du komma tillräckligt nära**, och lite Javascript kan justera html-elementets storlek efter inläsning om du har verkligen godtagbara skäl för att behöva den perfekta kartläggningen, även om sådana förbjudna metoder 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 antalet CSS-pixlar och låtsas att allt är 96dpi. Utvecklare undviker absoluta enheter eftersom det vanligtvis är bättre att använda enheter som härleds från teckenstorleken eller vyportens/containerdimensioner. Omatchade enheter kan bryta en layout om användaren justerar sin `Accessibility > Text Size`-multiplikator, zoomar webbläsaren eller vrider sin enhet. Onödigt att säga 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..9325b51 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ördelar med att använda bredd och höjd attribut i HTML-koden +taskInputHash: 3387b634d8193713 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -Varför ska man lägga till bredd och höjd i HTML-koden? +Varför ska du lägga till bredd och höjd i HTMLen? -> 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 lägga till bredd och höjd attribut i HTML-koden till bilder eftersom det hjälper webbläsaren att känna till bildens storlek innan den är helt laddad. Detta gör det möjligt för webbläsaren att 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öjd attribut för bilder också hjälpa till att förbättra totalets prestanda för webbsidan. När en webbläsare känner till storleken på en bild i förväg kan den mer exakt beräkna utrymmet som behövs för att visa bilden och undvika onödiga omläggningar eller omålningar av innehållet medan 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öjd attribut i HTML-koden för bilder förbättra användarupplevelsen genom att göra innehållet laddas snabbare och minska visuella glitches. diff --git a/src/content/docs/sv/when-to-use-picture.md b/src/content/docs/sv/when-to-use-picture.md index 30d4794..b97455d 100644 --- a/src/content/docs/sv/when-to-use-picture.md +++ b/src/content/docs/sv/when-to-use-picture.md @@ -1,22 +1,21 @@ --- -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: c0ea8ed13128c2bb 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -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 `picture` används för att tillhandahålla flera versioner av en bild och bestämmer vilken version 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 kanske vill använda elementet `picture`: -* **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. +* **Retina-skärmar:** Skärmar med hög densitet, som Apple's Retina-skärmar, har en högre pixeldensitet vilket betyder att bilder kan se suddiga eller pixlade ut om de inte är optimerade för hög upplösning. Med elementet `picture` kan du tillhandahålla en version av bilden som har dubbelt så många pixlar som den vanliga versionen, så den ser skarp och tydlig ut på Retina-skärmar. -* **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. +* **Olika bildformat:** Om du designar en webbplats som behöver visa bilder med olika bildformat (som landskap vs porträtt), kan du använda elementet `picture` för att tillhandahålla olika versioner av bilden som är optimerade för varje bildformat. -* **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. +* **Bandbreddsgränser:** Bilder kan vara stora filer som tar upp mycket bandbredd, särskilt på mobila enheter. Med elementet `picture` kan du tillhandahålla mindre versioner av bilden för enheter med mindre skärmar eller långsammare internetuppkopplingar, vilket kan bidra till att minska sidlastningstiderna. -* **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. +* **Art-direction:** Ibland vill du kanske visa en bild på ett visst sätt beroende på layouten av resten av sidan. Till exempel kan du vilja visa en närbild av en persons ansikte på mobila enheter, men en bredare bild på datorer. Elementet `picture` gör det möjligt att tillhandahålla olika versioner av bilden som är optimerade för olika layouter. -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å. +Sammanfattningsvis är elementet `picture` ett kraftfullt verktyg som kan hjälpa dig att optimera dina bilder för en rad olika användningsområden och se till att de ser fantastiska 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..b4f3f6e 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 +title: Bredd- och densitetsbeskrivningar +description: Exempel på hur man använder bredd- och densitetsbeskrivningar i `srcset` +taskInputHash: 988387e8e0306901 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -Förståelse för bredd (w) och densitet (x) deskriptorer i `srcset`. Använd exempel och använd markdown. +Förståelse för bredd (w) och densitet (x) i `srcset`. Använd exempel och använd Markdown. -> `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 +>`srcset` är en HTML-egenskap som gör det möjligt för utvecklare att tillhandahålla flera bildkällor med olika upplösningar eller pixel densiteter, och låter webbläsaren välja lämplig bild baserat på enhetens displayegenskaper. Egenskapen `srcset` använder en kombination av `URL` och `w` eller `x` beskrivningar för att specificera bilderna. -> 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. +## Bredd (`w`) beskrivning -> Syntaxen för att använda beskrivaren `w` i `srcset` ser ut som följer: +> Beskrivningen `w` används för att specificera bredden av en bild i pixlar. Den används när vi vill ge webbläsaren dimensionerna av en bild så att den kan välja lämplig bild för tillgängligt skärmutrymme. -````html +> Syntaxen för att använda `w` beskrivningen i `srcset` är enligt följande: + +```html 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. +>I exemplet ovan har vi tillhandahållit webbläsaren tre bilder och deras motsvarande pixeldensiteter. Webbläsaren kommer att välja den bild med närmaste pixeldensitet 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` beskrivningarna kan användas tillsammans i samma `srcset`-egenskap för att ge 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..6a8921f 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 +description: Why some (but not all) breakpoints matter for your images +taskInputHash: 2d686a8c1ae06f76 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- ### Background -Small screens and large screens require different layouts. To use `srcset` and `sizes`, we need to know when the layout changes. +Different layouts are required for small screens and large screens. In order to use `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 have to decide what to shrink, hide, or reposition on small screens or, more commonly, what to expand, reveal or add on large screens. They have almost no information to go on. Is the user on a tablet or in landscape mode on their phone, or inside 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 have to choose an arbitrary viewport width at which the layout changes. This is called a **breakpoint**. It's an arbitrary number of CSS pixels ([not device pixels](/en/pixels-not-pixels)). Polypane has a [great article](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023) on common breakpoints. -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, like logos, icons, or buttons, may not be affected by layout changes caused by these breakpoints (and can use [srcset density descriptors](/en/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 constrained by the size of their container. Typically, the main content area of a page will be constrained to some width, i.e., `max-width`, on the largest screens, but fill the whole viewport on small 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, calculating effective sizing rules will become more challenging, because the percentage of the viewport width occupied by images will change. -### A simple approach +### A Simple Approach -That being said, don't overthink it. You might be perfectly happy with these approximations: +That being said, don't overthink things. You'll probably be perfectly happy with the following approximations: -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 image container) stop growing? At this viewport width, we can use `100vw` for the image's `sizes` attribute, meaning the image takes up 100% of the viewport width. +2. What is the maximum width of the container? We can set it to a fixed `width`. -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 answer to question 1 is 700px and your answer to question 2 is 800px, 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 that the browser could handle all these calculations based on the CSS just fine. Unfortunately, browsers are so eager to choose the image URL before the stylesheet is downloaded that we have to do the calculations ourselves, and if we're not perfect, that's on them. ===================== Content prompt used: @@ -50,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. 断点和图像 -2. 为什么您的图像会受到某些（但不是全部）断点的影响 +2. 为什么某些（但并非全部）断点对您的图像很重要 Roundtrip (isolated) prompt used: diff --git a/src/content/docs/zh/_roundtrip_browser-picks-srcset.txt b/src/content/docs/zh/_roundtrip_browser-picks-srcset.txt index 40b2f43..5ba93f6 100644 --- a/src/content/docs/zh/_roundtrip_browser-picks-srcset.txt +++ b/src/content/docs/zh/_roundtrip_browser-picks-srcset.txt @@ -1,16 +1,19 @@ --- title: How Browsers Choose Images -description: How browsers choose images in the `srcset` attribute -taskInputHash: 4f3d39e70c9edd79 +description: How browsers choose from list of images specified in the srcset attribute +taskInputHash: db37b7c626128c24 lang: en +date_published: '2023-04-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -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 in the srcset attribute? Here's a step-by-step breakdown including examples of width and density specifications and browser 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, the browser uses a set of rules to choose the most appropriate image from the provided list of sources depending on 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 each case with examples. -1. Width descriptor (`w`): +1. Width descriptor ("w"): -Assuming we have the following `srcset` attribute: +Assume we have the following srcset attribute: ```html @@ -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, standard displays have 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 srcset. Multiply the width descriptor by the DPR. For devices with a DPR of 1: - example-small.jpg: 400 * 1 = 400px @@ -30,11 +33,11 @@ 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 with the viewport width. Assuming a viewport width of 420px, the browser will select the image with the smallest effective width that is 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: +Assume we have the following srcset attribute: ```html @@ -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 (device pixel ratio). For example, standard displays have 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 with the x descriptors in 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 the closest x descriptor to the device's DPR. For devices with a DPR of 1, the browser will choose example-1x.jpg. For devices 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 provide more information about how the images should be displayed at different viewport widths by combining the sizes attribute with the srcset attribute. This is particularly 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..e3831a5 100644 --- a/src/content/docs/zh/_roundtrip_density-descriptors.txt +++ b/src/content/docs/zh/_roundtrip_density-descriptors.txt @@ -1,37 +1,34 @@ --- -title: Density Descriptors and srcset -description: Example usage of density descriptors in `srcset` -taskInputHash: b82d9308b6826856 +title: Density Descriptors and Srcset +description: Example of using density descriptors in `srcset` +taskInputHash: 28f0cf1d0ee71b34 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -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 deliver the most suitable image to each user's device, improving performance and user experience. This guide will introduce you to using Srcset and density descriptors, and provide markup examples for reference. -## What is Srcset with Density Descriptors? +## What are Srcset and 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 based on the pixel density of the user's display. -## When to Use Srcset with Density Descriptors +## When to use Srcset and density descriptors -Srcset with density descriptors is especially useful in the following scenarios: +Srcset and density descriptors are particularly useful for: +1. Providing high-resolution images for high-DPI displays (like Retina displays) while providing low-resolution images for standard displays. +2. Improving page performance by delivering the best-suited image size for each user's device. -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. +## Implementing Srcset and density descriptors -## Implementing Srcset with Density Descriptors +To use Srcset and density descriptors, follow these steps: +1. Prepare images of different resolutions. +2. Add the `srcset` attribute to the `` element, including image sources and their corresponding density descriptors. +3. Add a `sizes` attribute (optional) to specify the size of the image on the screen. -To use srcset with density descriptors, follow these steps: +### Markup example -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. - -### Markup Example - -Here is an example of how to implement srcset with density descriptors in your markup: +Here's an example of using Srcset and density descriptors in markup: ```html sizes -description: Efficient and subjective guide to responsive images in 2023 -taskInputHash: ff8b517c77f33d91 +title: '`srcset` and `` sizes' +description: Efficient and Insightful Guide to Responsive Images in 2023 +taskInputHash: 9638525519dd94ce 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -**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 - - - - +**Efficient and Insightful Guide to Responsive Images in 2023** + +Click the sidebar for the in-depth details. This is a quick reference to upgrade your `` tags to handle modern devices of all sizes and pixel densities. You should [know that a pixel is not a pixel](/en/pixels-not-pixels) and that `devicePixelRatio` is more likely to be 3.875 than 1:1. Modern phones pretend to be 320-428 pixels wide (in CSS pixels) for readability, but each CSS pixel corresponds to multiple physical pixels. + +> If your image doesn't change size no matter how narrow the browser window, you should use [density descriptors](/en/density-descriptors). This usually applies to logos, icons, and buttons. + +Do you know your [breakpoints](/en/breakpoints)? You'll need these numbers to fine-tune the solutions below, at minimum the viewport width breakpoint where the main content area stops growing. + +### Simple Method + +```html +Dog Riding Bike + + + + ``` ===================== @@ -48,8 +44,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..7b558b1 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 +title: Testing Performance with Lighthouse +description: Steps to test website performance using Lighthouse +taskInputHash: e5ba970e56697a59 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -How to test your website performance using Lighthouse? +How to test your website's performance using 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: -> -> 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). -> -> 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". -> -> 4. In the Lighthouse dialog box, select the performance and other relevant options you want to test, and click "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. -> -> 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. +> Lighthouse is a tool that can be used to measure website performance, accessibility, and other aspects. To use Lighthouse to test your website's performance, follow these steps: +> +> 1. Open the 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 and select "More tools," then select "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 panel, or open the command menu by pressing "Ctrl+Shift+P" (Windows, Linux) or "Command+Shift+P" (macOS), 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." +> +> 5. Once Lighthouse completes its analysis, you will see a report with scores and recommendations on how to improve your website's performance, accessibility, and other aspects. +> +> 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 ranking. ===================== 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..de2b785 100644 --- a/src/content/docs/zh/_roundtrip_picture-examples.txt +++ b/src/content/docs/zh/_roundtrip_picture-examples.txt @@ -1,53 +1,56 @@ --- -title: Examples of using the element -description: Examples of using the element for responsive images, art direction, and different image formats. -taskInputHash: 84ee999fd4dc56dc +title: Element Examples +description: Provides examples of using the element, including responsive images, styles, and different image formats. +taskInputHash: b258bce0adfc2a7e lang: en +date_published: '2023-04-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -Here are some examples of using the `` element and their explanations: +Below are some examples of using the `` element and their explanations: -1. Example of responsive images: +1\. Responsive image example: ```html - 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. Different image sources and their conditions of usage are specified by the "srcset" attribute and the "media" attribute on the `` element. The `` element is used as a fallback option for older browsers or when the conditions specified on `` elements are not met. -2. Example of art direction: +2\. Style example: ```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 is used to provide different image sources based on device orientation. The `` element with the "media" attribute set to "(orientation: landscape)" specifies the source for wide screens, while the `` element specifies the source for portrait screens. -3. Example of different image formats: +3\. Different image format example: ```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. Different image sources and their formats are specified by the "srcset" attribute and the "type" attribute on the `` element. The `` element is used as a fallback option for older browsers to 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 the layout of a website or application should change based on viewport size. Breakpoints are usually defined in media queries in CSS, which apply different styles based on screen width. These breakpoints can be combined 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: the `image-large.jpg` source is used when the screen width is greater than or equal to 768 pixels, the `image-medium.jpg` source is used when the screen width is greater than or equal to 480 pixels but less than 768 pixels, and the `image-small.jpg` source is used when the screen width is less than 480 pixels. This provides appropriately-sized images for each device, reduces page loading times, and improves 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. Combining breakpoints with the `` element can create flexible, responsive designs that look great on any device. ===================== Content prompt used: @@ -60,8 +63,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..15fe4f2 100644 --- a/src/content/docs/zh/_roundtrip_pixels-not-pixels.txt +++ b/src/content/docs/zh/_roundtrip_pixels-not-pixels.txt @@ -1,23 +1,25 @@ --- title: px ≠ Pixels -description: Device Pixels ≠ Browser Pixels ≠ Image Pixels -taskInputHash: af021fc2c7e6641e +description: Device pixels ≠ Browser px ≠ Image px +taskInputHash: 4e839a695e06043b 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -### Device Pixels ≠ Browser Pixels ≠ Image Pixels +### Physical Pixels ≠ Browser px ≠ Image px -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's efforts, CSS and HTML pixels (`px`) almost always map to multiple device/printer pixels. My phone has a device pixel ratio 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%). +My desktop has a device pixel ratio that changes with browser zoom, but is 1.5 by default (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 (excluding SVGs) decode to a pixel grid. **It's extremely difficult to get image pixels to display at a 1:1 ratio with device pixels, but `srcset` can get you pretty close**, and if you absolutely need perfect mapping, some JavaScript can adjust the size of HTML elements after loading, but these taboo techniques won't be discussed here. + +> Other absolute units (in, pc, pt, mm, cm, Q) define everything based on a CSS pixel count and pretend everything is 96dpi. Developers should avoid using absolute units since it's usually better to use units based on font size or viewport/container size. Mismatched units can break layouts when users adjust their `Accessibility>Text Size` magnifier or zoom the browser or rotate their device. Needless to say, you should go through all of these motions before deploying a website. + + {{Note that the term used here is not the technical term for "pixels" but rather the commonly used term.}} -> 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. ===================== 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 ≠ 像素 -2. 设备像素 ≠ 浏览器像素 ≠ 图像像素 +2. 设备像素 ≠ 浏览器 px ≠ 图像 px 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..d5f6590 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: The Benefits of Using Width and Height Attributes in HTML +taskInputHash: 239f84692046a122 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -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 place width and height in your HTML? + +> It's recommended to set the width and height attributes for images in your HTML code because this helps the web browser know the image size before it's fully loaded. This allows the browser to reserve the proper amount of space to display the image on the webpage, preventing content from jumping around when the image loads. +> +> Additionally, specifying width and height attributes for images can also help improve the overall performance of the webpage. When the browser knows the image size ahead of time, it can more accurately calculate the space needed to display the image and avoid unnecessary reflow or repaint during loading. +> +> Overall, using width and height attributes in your HTML code can improve the user experience by speeding up content loading times and reducing visual glitches. ===================== 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. 使用宽度和高度 -2. 在HTML代码中使用宽度和高度属性的好处 +2. 在 HTML 代码中使用宽度和高度属性的好处 Roundtrip (isolated) 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..dc4d782 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 `picture` Element +description: Explains when to use the `picture` element. +taskInputHash: 86ef4b728bb72dbf 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -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 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 cases when you may want to use the `picture` element: +Here are some specific situations where you may 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 (like Apple's Retina displays) 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 that is twice the normal pixel density, so it looks 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 are designing a website that needs to display images with different aspect ratios (such as landscape and portrait), you can use the `picture` element to provide different versions of the image 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, helping to reduce page load times. +* **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 helps to reduce page load 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 face on a mobile device, but a wider shot on a desktop device. The `picture` element allows you to provide different versions of the image optimized 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 images for a variety of use cases and ensure that they look great on any device or screen size. ===================== 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. 何时使用 `picture` 元素 +2. 解释了在哪些情况下应该使用 `picture` 元素。 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..9dddb77 100644 --- a/src/content/docs/zh/_roundtrip_width-density.txt +++ b/src/content/docs/zh/_roundtrip_width-density.txt @@ -1,51 +1,47 @@ --- -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: 4ccd395f6be4b2ab 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -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`. 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 `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 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 URLs and `w` or `x` descriptors to specify the images. +## Width (w) Descriptors ->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. +>The `w` descriptor is used to specify the pixel width of an image. We use it when we want to provide the browser with the size of the image for it to choose the appropriate image based on the available screen space. ->The syntax for using the `w` descriptor in `srcset` is as follows: +>This is the syntax to use the `w` descriptor in `srcset`: ```html Example Image + alt="Example image"> ``` +>In the example above, we provide three images and their corresponding pixel widths. The browser will choose the image that is closest to the available screen space. +## Density (x) Descriptors +>The `x` descriptor is used to specify the pixel density, i.e., the ratio of physical pixels to CSS pixels, of an image. We use it when we want to provide the browser with different versions of the same image with different pixel densities. ->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 syntax for using the `x` descriptor in `srcset` is as follows: +>This is the syntax to use the `x` descriptor in `srcset`: ```html Example Image + alt="Example image"> ``` +>In the example above, we provide three images and their corresponding pixel densities. The browser will choose the image with the pixel density closest to the device screen. ->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 it is possible to use both `w` and `x` descriptors in the same `srcset` attribute to provide more options for the browser to choose from. ===================== Content prompt used: @@ -58,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/zh/breakpoints.md b/src/content/docs/zh/breakpoints.md index ac75e99..4adeb65 100644 --- a/src/content/docs/zh/breakpoints.md +++ b/src/content/docs/zh/breakpoints.md @@ -1,41 +1,38 @@ --- title: 断点和图像 -description: 为什么您的图像会受到某些（但不是全部）断点的影响 -taskInputHash: e220f548add04019 +description: 为什么某些（但并非全部）断点对您的图像很重要 +taskInputHash: 2d686a8c1ae06f76 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- ### 背景 -小屏幕和大屏幕需要不同的布局。为了使用`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/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/density-descriptors)）。 -主要内容图像将受到其容器大小的限制。通常，页面的主要内容区域在最大屏幕上会限制为某个宽度，即`max-width`，但在小屏幕上，主要内容区域将填满整个视口。 +主要内容图像将受到其容器大小的限制。通常，页面的主要内容区域在最大的屏幕上将限制在某个宽度上，即 `max-width`，但在小屏幕上，主要内容区域将填满整个视口。 -如果在某些断点上有多列，则计算有效的大小规则将变得更加困难，因为图片所占视口宽度的百分比将发生变化。 +如果在某些断点处有多个列，计算有效的大小规则将变得更加困难，因为图像占据的视口宽度百分比将发生变化。 ### 简单方法 -话虽如此，不要过分思考。您可能对以下近似值非常满意： +话虽如此，不要想得太多。您可能会非常满意以下近似值： -1. 主列（或图像容器）停止增长的尺寸是多少？ 在此视口宽度范围内，我们可以使用`100vw`作为图像的`sizes`属性，表示该图像占用整个视口宽度的100%。 -2. 容器的最大宽度是多少？ 我们可以将其设置为其余所有内容的固定`width`。 +1. 主列（或图像容器）在哪个尺寸停止增长？在此视口宽度上，我们可以使用 `100vw` 作为图像的 `sizes` 属性，表示图像占据了整个视口宽度的 100%。 +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..884e4cf 100644 --- a/src/content/docs/zh/browser-picks-srcset.md +++ b/src/content/docs/zh/browser-picks-srcset.md @@ -1,20 +1,19 @@ --- title: 浏览器如何选择 -description: 浏览器如何在`srcset`属性中选择图片 -taskInputHash: bee7d600f9a7bbb2 +description: 浏览器如何在srcset属性中选择列出的图像 +taskInputHash: db37b7c626128c24 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -浏览器如何在`srcset`属性中选择图片？以下是一步一步的说明，包括宽度和精度规范，并根据设备和视口决定如何选择。 +浏览器如何在srcset属性中选择图片？以下是逐步说明，包括宽度和密度规格以及基于设备和视口的浏览器决策的示例。 -- 在HTML中使用`srcset`属性时，浏览器使用一组规则从提供的源列表中选择最合适的图像。这些规则取决于设备的显示特性（分辨率，像素密度）和视口大小。 `srcset`属性允许您根据宽度（使用`w`描述符）或像素密度（使用`x`描述符）指定不同的图像。让我们通过每个示例进行演示。 +- 在HTML中使用srcset属性时，浏览器使用一组规则从提供的源列表中选择最合适的图像。这些规则取决于设备的显示特性（分辨率、像素密度）和视口大小。srcset属性允许您基于宽度（使用w描述符）或像素密度（使用x描述符）指定不同的图像。让我们通过示例来逐个了解每种情况。 -1.宽度描述符（`w`）： +1. 宽度描述符（w）： -假设我们有以下`srcset`属性： +假设我们有以下srcset属性： ```html @@ -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,11 +33,11 @@ b.为`srcset`中的每个图像计算有效宽度。将宽度描述符乘以DPR - example-large.jpg：1600 * 1 = 1600px -c.将有效宽度与视口宽度进行比较。假设视口宽度为420px。浏览器将选择具有大于或等于视口宽度的最小有效宽度的图像。在本例中，它将选择`example-medium.jpg`。 +c. 将有效宽度与视口宽度进行比较。假设视口宽度为420px。浏览器将选择具有大于或等于视口宽度的最小有效宽度的图像。在这种情况下，它将选择example-medium.jpg。 -2.像素密度描述符（`x`）： +2. 像素密度描述符（x）： -假设我们有以下`srcset`属性： +假设我们有以下srcset属性： ```html @@ -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`）时，这尤其有用。以下是一个例子： +需要注意的是，您还可以结合sizes属性和srcset属性提供有关图像在不同视口宽度下如何显示的更多信息。当使用宽度描述符（w）时，这特别有用。以下是一个例子： ```html diff --git a/src/content/docs/zh/density-descriptors.md b/src/content/docs/zh/density-descriptors.md index 74573d4..beaa636 100644 --- a/src/content/docs/zh/density-descriptors.md +++ b/src/content/docs/zh/density-descriptors.md @@ -1,31 +1,34 @@ --- -title: 密度描述符与srcset +title: 密度描述符和Srcset description: 在`srcset`中使用密度描述符的示例 -taskInputHash: b82d9308b6826856 +taskInputHash: 28f0cf1d0ee71b34 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -Srcset with density descriptors（带密度描述符的Srcset）提供了一种简单而有效的方法，为每个用户的设备提供最合适的图像，提高了性能和用户体验。本指南将引导您了解如何使用带密度描述符的srcset，并为您提供标记示例。 -## 什么是带密度描述符的Srcset？ +Srcset与密度描述符提供了一种简单有效的方法，可以向每个用户的设备传递最合适的图片，提高性能和用户体验。本指南将为您介绍如何使用Srcset与密度描述符，并提供标记示例以供参考。 -Srcset是一种HTML属性，旨在让您为单个``元素指定多个图像源。密度描述符(`x`)与srcset结合使用，根据用户显示器的像素密度提供不同分辨率的图像。 -## 何时使用带密度描述符的Srcset +## Srcset与密度描述符是什么？ -在以下情况下，使用带密度描述符的srcset尤其有用： -1. 为高DPI显示器（例如Retina显示器）提供高分辨率图像，同时为标准显示器提供低分辨率图像。 -2. 通过为每个用户的设备提供最适合的图像大小，提高页面性能。 -## 实现带密度描述符的Srcset +Srcset是一个HTML属性，旨在允许您为单个``元素指定多个图像源。密度描述符(`x`)与Srcset结合使用，根据用户显示器的像素密度提供不同分辨率的图像。 + +## 何时使用Srcset与密度描述符 + +使用Srcset与密度描述符特别有用的情况包括： +1. 在向高DPI显示器(如Retina显示器)提供高分辨率图像的同时为标准显示器提供低分辨率图像。 +2. 通过向每个用户的设备传递最合适的图像大小来提高页面性能。 + +## 实现Srcset与密度描述符 + +要使用Srcset与密度描述符，请按照以下步骤操作： +1. 准备不同分辨率的图像。 +2. 在``元素中添加`srcset`属性，包括图像源和相应的密度描述符。 +3. 添加`sizes`属性（可选）以指定图像在屏幕上显示的大小。 -要使用带密度描述符的srcset，请按照以下步骤操作： -1. 以不同的分辨率准备图像。 -2. 向``元素添加`srcset`属性，包括图像源和相应的密度描述符。 -3. （可选）添加`sizes`属性以指定图像在屏幕上显示的大小。 ### 标记示例 -以下是如何在您的标记中实现带密度描述符的srcset的示例： +以下是如何在标记中使用Srcset与密度描述符的示例： ```html `元素指定多个图像 alt="An example image"> ``` +此标记示例包括： +- **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..c620373 100644 --- a/src/content/docs/zh/introduction.md +++ b/src/content/docs/zh/introduction.md @@ -1,38 +1,34 @@ --- -title: srcset 和 sizes -description: 2023 年响应式图像的高效且主观的指南 -taskInputHash: ff8b517c77f33d91 +title: '`srcset`和``尺寸' +description: 2023年响应式图片的高效且有见解的指南 +taskInputHash: 9638525519dd94ce 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -**2023 年图像高效且主观的指南** +**高效和有见解的2023年图片指南** -查看侧边栏进行深入了解。这是快速参考，用于升级那些 `` 标签以处理现代设备的各种尺寸和像素密度。您应该[知道像素不等于像素](/zh/pixels-not-pixels)，而 `devicePixelRatio` 更有可能是 3.875，而不是 1:1。现代手机为了可读性会假装宽度为 320-428px（在 CSS 像素中），但是有许多设备像素支持每个 CSS 像素。 +单击侧边栏进行深入了解。这是快速参考，可升级那些``标记以处理各种大小和像素密度的现代设备。你应该[知道像素并不等于像素](/zh/pixels-not-pixels)，`devicePixelRatio`更有可能是3.875，而不是1：1。现代手机为了易读性而假装宽度为320-428像素（在CSS像素中），但每个CSS像素有多个实际像素。 -> 如果您的图像永远不会更改大小，无论您将浏览器窗口缩小到多窄，您应该使用[分辨率描述符](/zh/density-descriptors)代替。这通常适用于徽标、图标和按钮。 - -您知道您的[断点](/zh/breakpoints)是什么吗？您需要这些数字来微调以下解决方案-至少是主内容区域停止增长的视口宽度断点。 +> 如果您的图像不管浏览器窗口多窄都不改变大小，您应该使用[density descriptor](/zh/density-descriptors)。这通常适用于徽标、图标和按钮。 +您知道[断点](/zh/breakpoints)是多少吗？您需要这些数字来微调下面的解决方案，至少需要主内容区域停止增长的视口宽度断点。 ### 简单方法 ```html - 狗骑自行车 - + - + ``` diff --git a/src/content/docs/zh/lighthouse-performance-test.md b/src/content/docs/zh/lighthouse-performance-test.md index ae8f4eb..cf8c4e6 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: e5ba970e56697a59 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- 如何使用 Lighthouse 测试您的网站性能？ -> Lighthouse 是一款用于测量网站性能、可访问性和其他方面的工具。要使用 Lighthouse 测试您的网站性能，请按照以下步骤进行： -> -> 1. 打开 Google Chrome 网络浏览器并转到要测试的页面。 -> -> 2. 点击浏览器窗口右上角的三个点，然后选择“更多工具”，然后选择“开发者工具”，或者直接使用键盘快捷键 “Ctrl+Shift+I”（Windows，Linux）或 “Command+Option+I”（macOS）。 -> -> 3. 在开发者工具面板中，单击位于面板左侧的 Lighthouse 图标，或按 “Ctrl+Shift+P”（Windows，Linux）或 “Command+Shift+P”（macOS）打开命令菜单，然后输入 "Lighthouse" 并选择 “Generate report”。 -> -> 4. 在 Lighthouse 对话框中，选择您要测试的性能和其他相关选项，然后单击 “Generate report”。 -> -> 5. Lighthouse 完成分析后，您将看到一份报告，其中包括改进您的网站性能、可访问性和其他区域的建议和评分。 -> -> 遵循这些步骤，就可以使用 Lighthouse 来测试和优化您的网站性能，这有助于提高其用户体验和搜索引擎排名。 +> Lighthouse 是一种工具，可以用于测量网站的性能、可访问性和其他方面。要使用 Lighthouse 测试您的网站性能，请按照以下步骤操作： +> +> 1\. 打开 Google Chrome 浏览器，然后导航到您想要测试的页面。 +> +> 2\. 单击浏览器窗口右上角的三点，然后选择“更多工具”，然后选择“开发者工具”，或者使用键盘快捷键“Ctrl+Shift+I”（Windows、Linux）或“Command+Option+I”（macOS）。 +> +> 3\. 在开发者工具面板中，单击位于左侧面板上的 Lighthouse 图标，或按“Ctrl+Shift+P”（Windows、Linux）或“Command+Shift+P”（macOS）打开命令菜单，然后输入“Lighthouse”并选择“生成报告”。 +> +> 4\. 在 Lighthouse 对话框中，选择您想要测试的性能和其他相关选项，然后单击“生成报告”。 +> +> 5\. Lighthouse 完成分析后，您将看到一份报告，其中包含有关如何改进您的网站性能、可访问性和其他方面的分数和建议。 +> +> 按照这些步骤，您可以使用 Lighthouse 测试和优化您的网站性能，从而有助于改善用户体验和搜索引擎排名。 diff --git a/src/content/docs/zh/picture-examples.md b/src/content/docs/zh/picture-examples.md index 15bc82d..6fcbaf1 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: b258bce0adfc2a7e 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -以下是使用``元素的一些示例和它们的解释： +以下是使用 `` 元素的一些示例及其说明： -1. 响应式图片示例: +1\. 响应式图像示例： ```html - 一张图片 + 一个图片 ``` -解释：在这个例子中，``元素用于为不同的屏幕尺寸提供不同的图像源。``元素使用`"srcset"`属性和`"media"`属性来指定在哪些条件下使用每个源。当``元素中指定的条件未达成时，``元素将作为一个回退选项呈现给旧的浏览器。 +说明：在此示例中，`` 元素用于为不同的屏幕尺寸提供不同的图片来源。通过在 `` 元素上使用 "srcset" 属性和 "media" 属性来指定不同的图片源以及应使用每个源的条件。`` 元素用于旧版浏览器或未满足 `` 元素指定条件时的回退选项。 -2. 艺术指导示例： +2\. 样式示例： ```html - 一张图片 + + 一个图片 ``` -解释：在这个例子中，``元素被用于根据设备的屏幕方向提供不同的图像源。``元素中的`"media"`属性指定横屏宽屏幕的图像源，而``元素则指定竖屏设备的图像源。 +说明：在此示例中，`` 元素用于根据设备方向提供不同的图像源。将 "media" 属性设置为“(orientation: landscape)” 的 `` 元素指定宽屏幕的图像源，而 `` 元素则指定纵向屏幕的图像源。 -3. 不同图片格式的示例： +3\. 不同图像格式示例： ```html + - 一张图片 + + 一个图片 ``` -解释：在这个例子中，``元素用于为不同的图片格式提供不同的图像源。``元素使用`"srcset"`属性和`"type"`属性来指定图片格式。``元素则作为``元素在旧的浏览器中的回退选项。 +说明：在此示例中，`` 元素用于为不同的图像格式提供不同的图像源。`` 元素使用 "srcset" 属性和 "type" 属性来指定不同的图像源和图像格式。`` 元素用于旧版浏览器中，以便支持 `` 元素。 ## 断点 -在响应式设计中，断点被用于定义当视口尺寸改变时网站或应用程序的布局应该如何改变。断点通常使用CSS中的媒体查询进行定义，这些查询基于屏幕宽度应用不同的样式。这些断点可以与``元素相结合，为不同的屏幕尺寸提供不同的图像源。 +在响应式设计中，断点用于根据视口大小定义网站或应用程序的布局何时应该更改。断点通常在 CSS 的 media 查询中定义，根据屏幕宽度应用不同的样式。这些断点可以与 `` 元素结合使用，为不同的屏幕尺寸提供不同的图像源。 -例如，在上面的第一个示例中，我们使用了`media`属性来指定每个来源应在哪个屏幕宽度下使用。当屏幕宽度大于或等于768像素时，将使用`image-large.jpg`源；当屏幕宽度大于或等于480像素但小于768像素时，将使用`image-medium.jpg`源；当屏幕宽度小于480像素时，将使用`image-small.jpg`源。这样可以为每个设备提供适当尺寸的图像，减少页面加载时间，提高用户体验。 +例如，在上面第一个示例中，我们使用 `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..92a2ae5 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: 设备像素 ≠ 浏览器 px ≠ 图像 px +taskInputHash: 4e839a695e06043b 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -### 设备像素 ≠ 浏览器像素 ≠ 图像像素 +### 物理像素 ≠ 浏览器 px ≠ 图像 px -感谢苹果，CSS 和 HTML 的像素 (`px`) **几乎总是映射到多个设备/打印机像素上**。我的手机设备像素比是 3.875；[你的是多少？](https://www.mydevice.io/) +由于苹果公司的努力，CSS 和 HTML 像素 (`px`) 几乎总是映射到多个设备/打印机像素上。我的手机设备像素比是 3.875，[你的呢？](https://www.mydevice.io/) -我的台式机的设备像素比在浏览器缩放时会改变，但默认为 1.5（毕竟我的 `系统 > 显示 > 缩放` 设为 150%）。 +我的台式机设备像素比因浏览器缩放而改变，但默认为 1.5 （毕竟我的 `系统 > 显示 > 缩放` 是 150%）。 -图像文件（不包括 SVG）解码为像素网格。**让图像像素以 1:1 比例完美显示在设备像素上非常困难，但通过 `srcset`，你可以得到足够接近于完美的比例**。如果你确实有需要完美映射的正当理由，一些 JavaScript 可以在加载后调整 HTML 元素大小，但此处不会透露此禁忌艺术的细节。 +图像文件（SVG 除外）解码成像素网格。**令人非常困扰的是，很难让图像像素以与设备像素的 1:1 比例完美显示，但借助 `srcset` 可以得到足够接近的效果**，如果你确实有必要需要完美映射，一些 JavaScript 可以在加载后调整 HTML 元素的大小，但此类禁忌技巧不会在此公开。 -> 其他绝对单位（如 in、pc、pt、mm、cm、Q）是用 CSS 像素数表示的，假装一切都是 96dpi。开发人员会避免使用绝对单位，因为通常最好使用从字体大小或视口/容器尺寸派生的单位。如果用户调整了他们的 `辅助功能 > 文本大小` 倍数，缩放浏览器或旋转他们的设备，不匹配的单位可能会破坏布局。不必说，你应该在发布网站之前执行所有这些操作。 +> 其他绝对单位（英寸、派卡、磅、毫米、厘米、Q）都是以 CSS 像素数量为基础进行定义，并假装一切都是 96dpi。开发者避免使用绝对单位，因为通常最好使用基于字体大小或视口/容器尺寸导出的单位。不匹配的单位可能会在用户调整 `辅助功能 > 文本大小` 倍增器、缩放浏览器或旋转设备时破坏布局。无需多说，在发布网站之前，您应进行所有这些操作。 diff --git a/src/content/docs/zh/specify-width-height.md b/src/content/docs/zh/specify-width-height.md index da28c72..0250b37 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 +description: 在 HTML 代码中使用宽度和高度属性的好处 +taskInputHash: 239f84692046a122 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -你为什么应该在HTML中设置宽度和高度？ +为什么应该在 HTML 中放置宽度和高度？ -> 建议在HTML代码中为图像设置宽度和高度属性，因为它可以帮助Web浏览器在完全加载图像之前知道图像的大小。这使得浏览器可以为图像在网页上预留适当的空间，从而防止内容在图像加载时跳动。 +> 建议在 HTML 代码中为图像设置宽度和高度属性，因为这样帮助Web浏览器在完全加载图像之前就知道图像的大小。这使浏览器可以在网页上保留适当大小的空间以显示图像，从而防止图像加载时内容跳动。 > -> 此外，为图像指定宽度和高度属性还可以帮助提高网页的整体性能。当浏览器事先知道图像的大小时，它可以更准确地计算显示图像所需的空间，并避免不必要的回流或重绘内容。 +> 此外，为图像指定宽度和高度属性还可以帮助提高网页的整体性能。当浏览器提前知道图像的大小时，它可以更准确地计算需要显示图像的空间，并避免在加载期间不必要地重新流动或重绘内容。 > -> 总的来说，通过在HTML代码中为图像使用宽度和高度属性可以提高用户体验，使内容加载更快，减少视觉故障。 +> 总体而言，在 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..20b767a 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: 何时使用 `picture` 元素 +description: 解释了在哪些情况下应该使用 `picture` 元素。 +taskInputHash: 86ef4b728bb72dbf 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -`picture`元素用于提供多个图像版本，并根据特定条件确定显示哪个版本的图像。它特别适用于针对不同的屏幕尺寸和分辨率优化图像，并常用于响应式网页设计。 +`picture` 元素用于提供多个图像版本，并根据某些条件确定显示哪个版本的图像。它特别适用于为不同的屏幕大小和分辨率优化图像，并常用于响应式网页设计。 -以下是一些你可能想要使用`picture`元素的特定情况： +以下是一些你可能需要使用 `picture` 元素的具体情况: -* **视网膜显示器：** 高密度屏幕（如苹果的Retina显示器）具有更高的像素密度，这意味着如果它们未经过高分辨率优化，则图像可能会变得模糊或像素化。使用`picture`元素，您可以提供一个具有正常版本两倍像素的图像版本，因此在Retina显示器上看起来清晰明了。 +* **Retina 显示器:** 高密度屏幕（如 Apple 的 Retina 显示器）具有更高的像素密度，这意味着如果它们没有针对高分辨率进行优化，图像可能会看起来模糊或像素化。使用 `picture` 元素，你可以提供一个像素是正常版本的两倍的图像版本，所以它在 Retina 显示器上看起来清晰而清晰。 -* **不同的纵横比：** 如果您设计需要显示不同纵横比（如横向对比纵向）的图像的站点，可以使用`picture`元素提供针对每个纵横比进行优化的不同版本的图像。 +* **不同的纵横比:** 如果你正在设计一个需要显示具有不同纵横比的图像的网站（如横向与纵向），则可以使用 `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..553ae7d 100644 --- a/src/content/docs/zh/width-density.md +++ b/src/content/docs/zh/width-density.md @@ -1,48 +1,46 @@ --- -title: 宽度和像素密度描述符 -description: 在`srcset`中使用宽度和像素密度描述符的示例 -taskInputHash: 43b724a74c26793e +title: 宽度和密度描述符 +description: 在 `srcset` 中使用宽度和密度描述符的示例 +taskInputHash: 4ccd395f6be4b2ab 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- -了解在`srcset`中的宽度（w）和像素密度（x）描述符。使用示例并使用Markdown。 +了解在 `srcset` 中的宽度 (w) 和密度 (x) 描述符。使用示例并使用 Markdown。 ->`srcset`是一个HTML属性，允许开发人员提供具有不同分辨率或像素密度的多个图像源，并让浏览器根据设备的显示特性选择适当的图像。`srcset`属性使用`URL`和`w`或`x`描述符的组合来指定图像。 -## 宽度（`w`）描述符 +>`srcset` 是一个 HTML 属性，允许开发者提供具有不同分辨率或像素密度的多个图像源，让浏览器根据设备的显示特征选择适当的图像。`srcset` 属性使用 URL 和 `w` 或 `x` 描述符的组合来指定图像。 +## 宽度 (w) 描述符 ->`w`描述符用于指定图像的宽度，以像素为单位。当我们想要提供浏览器可以选择适合可用屏幕空间的图像的维度时，就会使用它。 +>`w` 描述符用于指定图像的像素宽度。当我们希望提供浏览器图像的尺寸，使其根据可用的屏幕空间选择适当的图片时，我们会使用它。 ->在`srcset`中使用`w`描述符的语法如下： +>在 `srcset` 中使用 `w` 描述符的语法如下： ```html Example Image + alt="示例图片"> ``` +>在上面的示例中，我们提供了三个图像和它们对应的像素宽度。浏览器将选择离可用屏幕空间最接近的图像。 +## 密度 (x) 描述符 ->在上面的例子中，我们已经向浏览器提供了三个图像及其相应的宽度（以像素为单位）。浏览器将选择最接近可用屏幕空间的图像。 -## 像素密度（`x`）描述符 +>`x` 描述符用于指定图像的像素密度，即物理像素与 CSS 像素的比例。当我们希望为浏览器提供具有不同像素密度的同一图像的不同版本时，我们会使用它。 ->`x`描述符用于指定图像的像素密度，即物理像素与CSS像素的比率。 当我们想要向浏览器提供具有不同像素密度的相同图像的不同版本时，我们会使用它。 - ->在`srcset`中使用`x`描述符的语法如下： +>在 `srcset` 中使用 `x` 描述符的语法如下： ```html Example Image + alt="示例图片"> ``` ->在上面的例子中，我们已经向浏览器提供了三个图像及其相应的像素密度。浏览器将选择最接近设备屏幕的像素密度的图像。 +>在上面的示例中，我们提供了三个图像及其对应的像素密度。浏览器将选择与设备屏幕最接近的像素密度的图像。 ->请注意，`w`和`x`描述符可以同时在同一个`srcset`属性中使用，以便向浏览器提供更多的选择。 +>请注意，可以在同一个 `srcset` 属性中同时使用 `w` 和 `x` 描述符，以提供更多选择给浏览器选择。 diff --git a/src/content/imgstyle/de/_roundtrip_create-a-carousel.txt b/src/content/imgstyle/de/_roundtrip_create-a-carousel.txt index ead1233..d34cddb 100644 --- a/src/content/imgstyle/de/_roundtrip_create-a-carousel.txt +++ b/src/content/imgstyle/de/_roundtrip_create-a-carousel.txt @@ -1,25 +1,24 @@ --- -title: Create a Carousel +title: Creating a Carousel description: How to create a carousel on a website -taskInputHash: 230c6ecf771bf3cb +taskInputHash: d14f6b96e2a0258a 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-02' +date_modified: '2023-04-02' +date_updated: '2023-04-02' --- 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 `