From 65f85c768ad2b3136994aa52f8a8229b1c62c43b Mon Sep 17 00:00:00 2001 From: lilith Date: Mon, 3 Apr 2023 03:24:28 +0000 Subject: [PATCH] Update translations --- .../docs/de/_roundtrip_breakpoints.txt | 37 ++-- .../de/_roundtrip_browser-picks-srcset.txt | 63 +++--- .../de/_roundtrip_density-descriptors.txt | 53 +++-- .../docs/de/_roundtrip_introduction.txt | 44 +++-- ..._roundtrip_lighthouse-performance-test.txt | 47 +++-- .../docs/de/_roundtrip_picture-examples.txt | 113 ++++++----- .../docs/de/_roundtrip_pixels-not-pixels.txt | 20 +- .../de/_roundtrip_specify-width-height.txt | 10 +- .../de/_roundtrip_when-to-use-picture.txt | 27 ++- .../docs/de/_roundtrip_width-density.txt | 43 ++-- src/content/docs/de/breakpoints.md | 35 ++-- src/content/docs/de/browser-picks-srcset.md | 52 ++--- src/content/docs/de/density-descriptors.md | 53 +++-- src/content/docs/de/introduction.md | 33 ++-- .../docs/de/lighthouse-performance-test.md | 39 ++-- src/content/docs/de/picture-examples.md | 31 ++- src/content/docs/de/pixels-not-pixels.md | 21 +- src/content/docs/de/specify-width-height.md | 19 +- src/content/docs/de/when-to-use-picture.md | 25 ++- src/content/docs/de/width-density.md | 37 ++-- src/content/docs/en/breakpoints.md | 4 +- src/content/docs/en/browser-picks-srcset.md | 4 +- src/content/docs/en/density-descriptors.md | 4 +- src/content/docs/en/introduction.md | 4 +- .../docs/en/lighthouse-performance-test.md | 4 +- src/content/docs/en/picture-examples.md | 4 +- src/content/docs/en/pixels-not-pixels.md | 4 +- src/content/docs/en/specify-width-height.md | 4 +- src/content/docs/en/when-to-use-picture.md | 4 +- src/content/docs/en/width-density.md | 4 +- .../docs/es/_roundtrip_breakpoints.txt | 40 ++-- .../es/_roundtrip_browser-picks-srcset.txt | 55 +++--- .../es/_roundtrip_density-descriptors.txt | 36 ++-- .../docs/es/_roundtrip_introduction.txt | 55 +++--- ..._roundtrip_lighthouse-performance-test.txt | 25 ++- .../docs/es/_roundtrip_picture-examples.txt | 32 +-- .../docs/es/_roundtrip_pixels-not-pixels.txt | 21 +- .../es/_roundtrip_specify-width-height.txt | 28 +-- .../es/_roundtrip_when-to-use-picture.txt | 27 ++- .../docs/es/_roundtrip_width-density.txt | 29 ++- src/content/docs/es/breakpoints.md | 41 ++-- src/content/docs/es/browser-picks-srcset.md | 51 +++-- src/content/docs/es/density-descriptors.md | 46 ++--- src/content/docs/es/introduction.md | 33 ++-- .../docs/es/lighthouse-performance-test.md | 25 ++- src/content/docs/es/picture-examples.md | 31 ++- src/content/docs/es/pixels-not-pixels.md | 21 +- src/content/docs/es/specify-width-height.md | 21 +- src/content/docs/es/when-to-use-picture.md | 28 ++- src/content/docs/es/width-density.md | 37 ++-- .../docs/fr/_roundtrip_breakpoints.txt | 41 ++-- .../fr/_roundtrip_browser-picks-srcset.txt | 55 +++--- .../fr/_roundtrip_density-descriptors.txt | 46 ++--- .../docs/fr/_roundtrip_introduction.txt | 65 ++++--- ..._roundtrip_lighthouse-performance-test.txt | 25 ++- .../docs/fr/_roundtrip_picture-examples.txt | 30 +-- .../docs/fr/_roundtrip_pixels-not-pixels.txt | 25 ++- .../fr/_roundtrip_specify-width-height.txt | 19 +- .../fr/_roundtrip_when-to-use-picture.txt | 25 ++- .../docs/fr/_roundtrip_width-density.txt | 21 +- src/content/docs/fr/breakpoints.md | 37 ++-- src/content/docs/fr/browser-picks-srcset.md | 125 ++++++------ src/content/docs/fr/density-descriptors.md | 39 ++-- src/content/docs/fr/introduction.md | 30 ++- .../docs/fr/lighthouse-performance-test.md | 27 ++- src/content/docs/fr/picture-examples.md | 32 +-- src/content/docs/fr/pixels-not-pixels.md | 21 +- src/content/docs/fr/specify-width-height.md | 17 +- src/content/docs/fr/when-to-use-picture.md | 23 ++- src/content/docs/fr/width-density.md | 34 ++-- .../docs/it/_roundtrip_breakpoints.txt | 44 +++-- .../it/_roundtrip_browser-picks-srcset.txt | 35 ++-- .../it/_roundtrip_density-descriptors.txt | 45 +++-- .../docs/it/_roundtrip_introduction.txt | 40 ++-- ..._roundtrip_lighthouse-performance-test.txt | 46 ++--- .../docs/it/_roundtrip_picture-examples.txt | 19 +- .../docs/it/_roundtrip_pixels-not-pixels.txt | 21 +- .../it/_roundtrip_specify-width-height.txt | 27 ++- .../it/_roundtrip_when-to-use-picture.txt | 31 +-- .../docs/it/_roundtrip_width-density.txt | 35 ++-- src/content/docs/it/breakpoints.md | 39 ++-- src/content/docs/it/browser-picks-srcset.md | 41 ++-- src/content/docs/it/density-descriptors.md | 49 ++--- src/content/docs/it/introduction.md | 37 ++-- .../docs/it/lighthouse-performance-test.md | 43 ++-- src/content/docs/it/picture-examples.md | 33 ++-- src/content/docs/it/pixels-not-pixels.md | 19 +- src/content/docs/it/specify-width-height.md | 23 ++- src/content/docs/it/when-to-use-picture.md | 27 ++- src/content/docs/it/width-density.md | 42 ++-- .../docs/ja/_roundtrip_breakpoints.txt | 41 ++-- .../ja/_roundtrip_browser-picks-srcset.txt | 50 ++--- .../ja/_roundtrip_density-descriptors.txt | 50 +++-- .../docs/ja/_roundtrip_introduction.txt | 56 +++--- ..._roundtrip_lighthouse-performance-test.txt | 33 ++-- .../docs/ja/_roundtrip_picture-examples.txt | 42 ++-- .../docs/ja/_roundtrip_pixels-not-pixels.txt | 28 +-- .../ja/_roundtrip_specify-width-height.txt | 31 +-- .../ja/_roundtrip_when-to-use-picture.txt | 31 +-- .../docs/ja/_roundtrip_width-density.txt | 41 ++-- src/content/docs/ja/breakpoints.md | 37 ++-- src/content/docs/ja/browser-picks-srcset.md | 56 +++--- src/content/docs/ja/density-descriptors.md | 46 +++-- src/content/docs/ja/introduction.md | 35 ++-- .../docs/ja/lighthouse-performance-test.md | 29 ++- src/content/docs/ja/picture-examples.md | 36 ++-- src/content/docs/ja/pixels-not-pixels.md | 21 +- src/content/docs/ja/specify-width-height.md | 23 ++- src/content/docs/ja/when-to-use-picture.md | 28 +-- src/content/docs/ja/width-density.md | 37 ++-- .../docs/sv/_roundtrip_breakpoints.txt | 37 ++-- .../sv/_roundtrip_browser-picks-srcset.txt | 46 +++-- .../sv/_roundtrip_density-descriptors.txt | 39 ++-- .../docs/sv/_roundtrip_introduction.txt | 57 +++--- ..._roundtrip_lighthouse-performance-test.txt | 30 ++- .../docs/sv/_roundtrip_picture-examples.txt | 31 +-- .../docs/sv/_roundtrip_pixels-not-pixels.txt | 25 ++- .../sv/_roundtrip_specify-width-height.txt | 29 ++- .../sv/_roundtrip_when-to-use-picture.txt | 26 +-- .../docs/sv/_roundtrip_width-density.txt | 45 ++--- src/content/docs/sv/breakpoints.md | 39 ++-- src/content/docs/sv/browser-picks-srcset.md | 45 +++-- src/content/docs/sv/density-descriptors.md | 54 +++--- src/content/docs/sv/introduction.md | 67 ++++--- .../docs/sv/lighthouse-performance-test.md | 27 ++- src/content/docs/sv/picture-examples.md | 27 ++- src/content/docs/sv/pixels-not-pixels.md | 23 ++- src/content/docs/sv/specify-width-height.md | 19 +- src/content/docs/sv/when-to-use-picture.md | 26 +-- src/content/docs/sv/width-density.md | 45 ++--- .../docs/zh/_roundtrip_breakpoints.txt | 41 ++-- .../zh/_roundtrip_browser-picks-srcset.txt | 37 ++-- .../zh/_roundtrip_density-descriptors.txt | 43 ++-- .../docs/zh/_roundtrip_introduction.txt | 70 +++---- ..._roundtrip_lighthouse-performance-test.txt | 40 ++-- .../docs/zh/_roundtrip_picture-examples.txt | 29 +-- .../docs/zh/_roundtrip_pixels-not-pixels.txt | 19 +- .../zh/_roundtrip_specify-width-height.txt | 27 ++- .../zh/_roundtrip_when-to-use-picture.txt | 31 ++- .../docs/zh/_roundtrip_width-density.txt | 42 ++-- src/content/docs/zh/breakpoints.md | 37 ++-- src/content/docs/zh/browser-picks-srcset.md | 45 +++-- src/content/docs/zh/density-descriptors.md | 54 +++--- src/content/docs/zh/introduction.md | 42 ++-- .../docs/zh/lighthouse-performance-test.md | 27 ++- src/content/docs/zh/picture-examples.md | 36 ++-- src/content/docs/zh/pixels-not-pixels.md | 17 +- src/content/docs/zh/specify-width-height.md | 23 ++- src/content/docs/zh/when-to-use-picture.md | 28 ++- src/content/docs/zh/width-density.md | 39 ++-- .../de/_roundtrip_create-a-carousel.txt | 32 ++- .../de/_roundtrip_create-a-gallery.txt | 27 ++- .../de/_roundtrip_css-effects-and-borders.txt | 29 ++- src/content/imgstyle/de/_roundtrip_faq.txt | 49 ++--- .../de/_roundtrip_full-css-reference.txt | 24 +-- .../imgstyle/de/_roundtrip_introduction.txt | 183 ++++++++---------- .../imgstyle/de/_roundtrip_pad-an-image.txt | 39 ++-- .../de/_roundtrip_tailwindCSS-img-helpers.txt | 31 ++- .../de/_roundtrip_view-full-screen-image.txt | 36 ++-- src/content/imgstyle/de/create-a-carousel.md | 31 ++- src/content/imgstyle/de/create-a-gallery.md | 29 ++- .../imgstyle/de/css-effects-and-borders.md | 42 ++-- src/content/imgstyle/de/faq.md | 53 +++-- src/content/imgstyle/de/full-css-reference.md | 30 +-- src/content/imgstyle/de/introduction.md | 17 +- src/content/imgstyle/de/pad-an-image.md | 51 +++-- .../imgstyle/de/tailwindCSS-img-helpers.md | 35 ++-- .../imgstyle/de/view-full-screen-image.md | 41 ++-- 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 | 24 +-- .../es/_roundtrip_create-a-gallery.txt | 25 ++- .../es/_roundtrip_css-effects-and-borders.txt | 29 ++- src/content/imgstyle/es/_roundtrip_faq.txt | 43 ++-- .../es/_roundtrip_full-css-reference.txt | 41 ++-- .../imgstyle/es/_roundtrip_introduction.txt | 127 ++++++++---- .../imgstyle/es/_roundtrip_pad-an-image.txt | 36 ++-- .../es/_roundtrip_tailwindCSS-img-helpers.txt | 29 ++- .../es/_roundtrip_view-full-screen-image.txt | 43 ++-- src/content/imgstyle/es/create-a-carousel.md | 21 +- src/content/imgstyle/es/create-a-gallery.md | 42 ++-- .../imgstyle/es/css-effects-and-borders.md | 40 ++-- src/content/imgstyle/es/faq.md | 50 ++--- src/content/imgstyle/es/full-css-reference.md | 71 +++---- src/content/imgstyle/es/introduction.md | 19 +- src/content/imgstyle/es/pad-an-image.md | 40 ++-- .../imgstyle/es/tailwindCSS-img-helpers.md | 36 ++-- .../imgstyle/es/view-full-screen-image.md | 40 ++-- .../fr/_roundtrip_create-a-carousel.txt | 18 +- .../fr/_roundtrip_create-a-gallery.txt | 34 ++-- .../fr/_roundtrip_css-effects-and-borders.txt | 21 +- src/content/imgstyle/fr/_roundtrip_faq.txt | 76 ++++---- .../fr/_roundtrip_full-css-reference.txt | 17 +- .../imgstyle/fr/_roundtrip_introduction.txt | 70 +++---- .../imgstyle/fr/_roundtrip_pad-an-image.txt | 44 ++--- .../fr/_roundtrip_tailwindCSS-img-helpers.txt | 27 ++- .../fr/_roundtrip_view-full-screen-image.txt | 30 +-- src/content/imgstyle/fr/create-a-carousel.md | 19 +- src/content/imgstyle/fr/create-a-gallery.md | 29 ++- .../imgstyle/fr/css-effects-and-borders.md | 43 ++-- src/content/imgstyle/fr/faq.md | 72 +++---- 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 | 33 ++-- .../imgstyle/fr/view-full-screen-image.md | 33 ++-- .../it/_roundtrip_create-a-carousel.txt | 35 ++-- .../it/_roundtrip_create-a-gallery.txt | 28 ++- .../it/_roundtrip_css-effects-and-borders.txt | 28 +-- src/content/imgstyle/it/_roundtrip_faq.txt | 71 +++---- .../it/_roundtrip_full-css-reference.txt | 46 ++--- .../imgstyle/it/_roundtrip_introduction.txt | 44 +++-- .../imgstyle/it/_roundtrip_pad-an-image.txt | 47 ++--- .../it/_roundtrip_tailwindCSS-img-helpers.txt | 40 ++-- .../it/_roundtrip_view-full-screen-image.txt | 39 ++-- src/content/imgstyle/it/create-a-carousel.md | 32 ++- src/content/imgstyle/it/create-a-gallery.md | 24 ++- .../imgstyle/it/css-effects-and-borders.md | 30 +-- src/content/imgstyle/it/faq.md | 51 ++--- src/content/imgstyle/it/full-css-reference.md | 30 ++- src/content/imgstyle/it/introduction.md | 15 +- src/content/imgstyle/it/pad-an-image.md | 43 ++-- .../imgstyle/it/tailwindCSS-img-helpers.md | 37 ++-- .../imgstyle/it/view-full-screen-image.md | 33 ++-- .../ja/_roundtrip_create-a-carousel.txt | 38 ++-- .../ja/_roundtrip_create-a-gallery.txt | 27 ++- .../ja/_roundtrip_css-effects-and-borders.txt | 25 +-- src/content/imgstyle/ja/_roundtrip_faq.txt | 99 +++++----- .../ja/_roundtrip_full-css-reference.txt | 52 +++-- .../imgstyle/ja/_roundtrip_introduction.txt | 21 +- .../imgstyle/ja/_roundtrip_pad-an-image.txt | 35 ++-- .../ja/_roundtrip_tailwindCSS-img-helpers.txt | 44 ++--- .../ja/_roundtrip_view-full-screen-image.txt | 45 +++-- src/content/imgstyle/ja/create-a-carousel.md | 39 ++-- src/content/imgstyle/ja/create-a-gallery.md | 42 ++-- .../imgstyle/ja/css-effects-and-borders.md | 21 +- src/content/imgstyle/ja/faq.md | 96 ++++----- src/content/imgstyle/ja/full-css-reference.md | 47 +++-- src/content/imgstyle/ja/introduction.md | 17 +- src/content/imgstyle/ja/pad-an-image.md | 38 ++-- .../imgstyle/ja/tailwindCSS-img-helpers.md | 35 ++-- .../imgstyle/ja/view-full-screen-image.md | 50 ++--- .../sv/_roundtrip_create-a-carousel.txt | 24 ++- .../sv/_roundtrip_create-a-gallery.txt | 28 +-- .../sv/_roundtrip_css-effects-and-borders.txt | 24 ++- src/content/imgstyle/sv/_roundtrip_faq.txt | 76 ++++---- .../sv/_roundtrip_full-css-reference.txt | 31 ++- .../imgstyle/sv/_roundtrip_introduction.txt | 120 ++++-------- .../imgstyle/sv/_roundtrip_pad-an-image.txt | 40 ++-- .../sv/_roundtrip_tailwindCSS-img-helpers.txt | 32 +-- .../sv/_roundtrip_view-full-screen-image.txt | 43 ++-- src/content/imgstyle/sv/create-a-carousel.md | 21 +- src/content/imgstyle/sv/create-a-gallery.md | 32 +-- .../imgstyle/sv/css-effects-and-borders.md | 34 ++-- src/content/imgstyle/sv/faq.md | 67 ++++--- src/content/imgstyle/sv/full-css-reference.md | 57 ++++-- src/content/imgstyle/sv/introduction.md | 17 +- src/content/imgstyle/sv/pad-an-image.md | 41 ++-- .../imgstyle/sv/tailwindCSS-img-helpers.md | 35 ++-- .../imgstyle/sv/view-full-screen-image.md | 55 +++--- .../zh/_roundtrip_create-a-carousel.txt | 33 ++-- .../zh/_roundtrip_create-a-gallery.txt | 34 ++-- .../zh/_roundtrip_css-effects-and-borders.txt | 23 ++- src/content/imgstyle/zh/_roundtrip_faq.txt | 65 ++++--- .../zh/_roundtrip_full-css-reference.txt | 50 ++--- .../imgstyle/zh/_roundtrip_introduction.txt | 107 ++++------ .../imgstyle/zh/_roundtrip_pad-an-image.txt | 35 ++-- .../zh/_roundtrip_tailwindCSS-img-helpers.txt | 28 +-- .../zh/_roundtrip_view-full-screen-image.txt | 42 ++-- src/content/imgstyle/zh/create-a-carousel.md | 44 ++--- src/content/imgstyle/zh/create-a-gallery.md | 29 ++- .../imgstyle/zh/css-effects-and-borders.md | 23 ++- src/content/imgstyle/zh/faq.md | 57 +++--- src/content/imgstyle/zh/full-css-reference.md | 60 +++--- src/content/imgstyle/zh/introduction.md | 17 +- src/content/imgstyle/zh/pad-an-image.md | 34 ++-- .../imgstyle/zh/tailwindCSS-img-helpers.md | 33 ++-- .../imgstyle/zh/view-full-screen-image.md | 29 ++- 285 files changed, 5030 insertions(+), 5323 deletions(-) diff --git a/src/content/docs/de/_roundtrip_breakpoints.txt b/src/content/docs/de/_roundtrip_breakpoints.txt index d2d48bc..9b2a4f6 100644 --- a/src/content/docs/de/_roundtrip_breakpoints.txt +++ b/src/content/docs/de/_roundtrip_breakpoints.txt @@ -1,35 +1,34 @@ --- title: Breakpoints & Images -description: Why some (but not all) breakpoints are important for your images -taskInputHash: 57ab72e7e951b197 +description: Why some (but not all) breakpoints matter for your images +taskInputHash: a740eb96e1b2103c lang: en -ignore: '/* cSpell:locale de,en*/' -date_published: '2023-03-26' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- ### Background -Small screens and big monitors require different layouts. For `srcset` and `sizes`, we need to know when the layout changes. +Small and large screens require different layouts. For `srcset` and `sizes`, we need to know at which resolution to change the layout. -Web developers need to decide what should be scaled down, hidden, or moved on smaller screens - or decide what should be expanded, revealed, or added on larger screens. They also have very little information available. Is the user on a tablet or phone in landscape mode or in a small browser window? +Web developers need to decide what to shrink, hide, or move on smaller screens—or, more often, what to expand, show, or add on larger screens. But they have very little information available. Is the user on a tablet or a phone in landscape mode, or on a small browser window? -We have to choose an arbitrary viewport width at which the layout changes. This is called a **breakpoint**. It can be any number of CSS pixels ([not device pixels](/en/pixels-not-pixels)). Polypane has a [great article](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023) on commonly used breakpoints. +We need to choose an arbitrary viewport width at which to change the layout. 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) about 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, icons, or buttons) may be immune to the layout shifts caused by these breakpoints (and work well with [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 limited by the size of their container. Typically, a page's main content area is constrained to a certain width, a `max-width`, on the largest screens, but on small screens, the main content area will fill 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 compute effective size rules, since the percentage of viewport width that the image occupies 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: +Still, don't think too hard. You will likely be happy 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 until that viewport width, we can use `100vw` for the image's `sizes` attribute, to say that the image takes up 100% of the viewport width. +2. What's the largest size the container will ever be? 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 @@ -38,7 +37,7 @@ If your answer to 1 is 700px and your answer to 2 is 800px, you can use the foll -> You would think that the browser could kindly do all these calculations for us based on the CSS. Unfortunately, browsers are aggressively trying to choose an image URL *before* downloading stylesheets. So we have to do the calculations ourselves. And if we're not perfect, that's their problem. +> You might think the browser could handle all these computations nicely for us, based on the CSS. Sadly, browsers are aggressively keen to choose an image URL *before* downloading stylesheets. That's why we need to make the computations ourselves, and they'll forgive us if we don't do it perfectly. ===================== Content prompt used: @@ -52,7 +51,7 @@ Also carefully translate the title and description for the article; do not use & 2. Why some (but not all) breakpoints matter for your images Metadata returned1. 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..89d3274 100644 --- a/src/content/docs/de/_roundtrip_browser-picks-srcset.txt +++ b/src/content/docs/de/_roundtrip_browser-picks-srcset.txt @@ -1,67 +1,68 @@ --- -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 browsers choose between images listed in the srcset attribute +taskInputHash: 09ab2b098b259019 lang: en +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -How does the browser select between images listed in the "srcset" attribute? Here is a step-by-step guide with examples for both width and density descriptors and how the browser decides based on the device and viewport. +How do browsers choose between the 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 the `srcset` attribute is used in HTML, the browser uses a set of rules to select the most appropriate image from a list of provided sources. These rules depend on both the display properties of the device (resolution, pixel density) and the size of the viewport. The `srcset` attribute allows you to specify different images based on width (using the `w` descriptor) or pixel density (using the `x` descriptor). Let's go through each case with examples. -1. Width descriptor ("w"): +1. Width descriptor (`w`): -Assuming we have the following "srcset" attribute: +Assuming we have the following `srcset` attribute: ```html - Example image - ``` -The browser will perform the following steps: +The browser will perform the following steps: -a. Determine the DPR (Device Pixel Ratio) of the device. For instance, a standard display has a DPR of 1, while a high-resolution (Retina) display has a DPR of 2 or higher. +a. Determine the DPR (Device Pixel Ratio) of the device. For example, a standard display has a DPR of 1, while a high-resolution (Retina) display has a DPR of 2 or higher. -b. Calculate the effective width for each image in the "srcset". Multiply the width descriptor by the DPR. For a device with a DPR of 1: +b. Calculate the effective width for each image in the `srcset`. Multiply the width descriptor by the DPR. For a device with a DPR of 1: -- example-small.jpg: 400 * 1 = 400px +- example-small.jpg: 400 * 1 = 400px -- example-medium.jpg: 800 * 1 = 800px +- example-medium.jpg: 800 * 1 = 800px -- example-large.jpg: 1600 * 1 = 1600px +- example-large.jpg: 1600 * 1 = 1600px -c. Compare the effective widths to the viewport width. Assuming the viewport width is 420px, the browser selects the smallest image whose effective width is greater than or equal to the viewport width. In this case, "example-medium.jpg" is selected. +c. Compare the effective widths with the viewport width. Assume the viewport width is 420px. The browser selects the smallest image with an effective width that is greater than or equal to the viewport width. In this case, `example-medium.jpg` will be chosen. -2. Density descriptor ("x"): +2. Density descriptor (`x`): -Assuming we have the following "srcset" attribute: +Assuming we have the following `srcset` attribute: ```html - Example image - ``` -The browser will perform the following steps: +The browser will perform the following steps: -a. Determine the DPR (Device Pixel Ratio) of the device. For instance, a standard display has a DPR of 1, while a high-resolution (Retina) display has a DPR of 2 or higher. +a. Determine the DPR (Device Pixel Ratio) of the device. For example, a standard display has a DPR of 1, while a high-resolution (Retina) display has a DPR of 2 or higher. -b. Compare the device's DPR with the "x" descriptors in the "srcset". In this case, we have three images with the following descriptors: +b. Compare the device's DPR with the `x` descriptors in the `srcset`. In this case, we have three images with the following descriptors: -- example-1x.jpg: 1x +- example-1x.jpg: 1x -- example-2x.jpg: 2x +- example-2x.jpg: 2x -- example-3x.jpg: 3x +- example-3x.jpg: 3x -c. Select the image with the "x" descriptor closest to the device's DPR. For a device with a DPR of 1, the browser selects "example-1x.jpg". For a device with a DPR of 2, it selects "example-2x.jpg", and so on. +c. Select the image with the `x` descriptor that is closest to the device's DPR. For a device with a DPR of 1, the browser will select `example-1x.jpg`. For a device with a DPR of 2, it will select `example-2x.jpg`, and so on. -It is important to note that you can also use the "sizes" attribute in combination with the "srcset" attribute to provide further information on how the image should display at different viewport widths. This is particularly useful when using the width descriptor ("w"). Here is an example: +It is important to note that you can also use the `sizes` attribute in combination with the `srcset` attribute to provide additional information on how the image should be displayed at different viewport widths. This is especially useful when using the width descriptor (`w`). Here is an example: ```html - ` element. Density descriptors (`x`) are used in conjunction with srcset to provide images at different resolutions based on the pixel density of the user's display. +Srcset is an HTML attribute that enables you to specify multiple image sources for a single `` element. Density descriptors (`x`) are used in conjunction with Srcset to provide images with different resolutions based on the pixel density of the user's display. -## When to use srcset with density descriptors? +## When to Use Srcset with Density Descriptors? -Using srcset with density descriptors is especially useful when you: -1. Want to provide high resolution images for high DPI displays (e.g. Retina displays) while using lower resolutions for standard displays. -2. Want to improve page rendering by providing the most appropriate image size for each user's device. +You should use Srcset with density descriptors particularly in the following scenarios: +1. If you want to provide high-resolution images on high-DPI devices (such as retina displays) while providing lower-resolution images on standard displays. +2. If you want to improve the page's performance by delivering the best-suited image size for each user's device. -## Implementing srcset with density descriptors +## Implementing Srcset with Density Descriptors -To use srcset with density descriptors, follow these steps: +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. +2. Add the `srcset` attribute to the `` element, including the image sources and their corresponding density descriptors. +3. Add the `sizes` attribute (optionally) to set the size at which the image is displayed on the screen. -### Markup example +### Example Markup -Here is an example of how to implement srcset with density descriptors in your markup: +Here's an example of how you can implement Srcset with density descriptors in your markup: ```html An example image ``` -This markup example includes: -- **src**: The default image source to be displayed when the browser does not support srcset. -- **srcset**: The list of image sources and their density descriptors (1x, 2x, 3x). The browser chooses the most appropriate image based on the user's display. -- **alt**: A description of the image for accessibility purposes. +This example markup includes: +- **src**: The default image source that shows if the browser doesn't support Srcset. +- **srcset**: The list of image sources and their density descriptors (1x, 2x, 3x). The browser selects the most suitable image based on the user's display. +- **alt**: A description of the image for accessibility. -And that's it! You have successfully implemented srcset with density descriptors, improving the performance and user experience of your website. +And that's it! You've successfully implemented Srcset with density descriptors and improved your website's performance and user experience. ===================== Content prompt used: @@ -55,8 +54,8 @@ Also carefully translate the title and description for the article; do not use & 1. Density descriptors & srcset 2. Examples of using density descriptors in `srcset` -Metadata returned1. Density-Descriptoren und Srcset -2. Beispiele für die Verwendung von Density-Descriptoren in `srcset` +Metadata returned1. Density-Descriptors & Srcset +2. Beispiele für die Verwendung von Density-Descriptors in `Srcset` Roundtrip (isolated) prompt used: diff --git a/src/content/docs/de/_roundtrip_introduction.txt b/src/content/docs/de/_roundtrip_introduction.txt index a15f270..a6226b6 100644 --- a/src/content/docs/de/_roundtrip_introduction.txt +++ b/src/content/docs/de/_roundtrip_introduction.txt @@ -1,41 +1,43 @@ --- -title: srcset and sizes -description: An efficient and definitive guide to responsive images until 2023 -taskInputHash: f8e7c31ccf577572 +title: '`srcset` and `` sizes' +description: An efficient and definitive guide to responsive images for 2023 +taskInputHash: dc8c8594bdd45d91 lang: en -ignore: '/* cSpell:locale de,en*/' sidebar_sort_priority: 1000 -date_published: '2023-03-23' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -**An efficient and definitive guide to images until 2023** +**An Efficient and Definitive Guide to 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. +Check the sidebar for details. This is a quick reference for updating `` tags to handle modern devices in all their various sizes and pixel densities. You should [understand that Pixel ≠ Pixel](/en/pixel-not-pixel) and that `devicePixelRatio` is likely to be closer to 3.875 than to 1:1. Modern phones pretend to be 320-428px wide (in CSS pixels) for legibility 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 its size, regardless of the size of the browser window, you should use a [density descriptor](/en/density-descriptors) instead. This is often suitable for logos, icons, and buttons. -Do you know what your [breakpoints](/en/breakpoints) are? You’ll need those numbers to fine-tune the solution below – and at least the viewport breakpoint where the main content area stops growing. +Do you know what your [breakpoints](/en/breakpoints) are? You will need these numbers to fine-tune the solution below -- and at least the viewport width breakpoint at which the main content stops growing. -### The easy method +### The Simple Method ```html + dog riding on a bike - + sizes="(max-width: 700px) 100vw, 800px" alt="Dog riding a bike" /> + + - + ``` + +{{Note that the symbol "&" in the `srcset` attribute should be replaced with "&" to be valid HTML.}} ===================== Content prompt used: @@ -48,8 +50,8 @@ Also carefully translate the title and description for the article; do not use & 1. srcset & sizes 2. An Efficient and Opinionated Guide to Responsive Images for 2023 -Metadata returned1. srcset und sizes - 2. Ein effizienter und dezidierter Leitfaden für responsive Bilder bis 2023 +Metadata returned1. `srcset` und `` Größen +2. Ein effizienter und entschiedener Leitfaden für responsive Bilder 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..323b713 100644 --- a/src/content/docs/de/_roundtrip_lighthouse-performance-test.txt +++ b/src/content/docs/de/_roundtrip_lighthouse-performance-test.txt @@ -1,28 +1,27 @@ --- -title: Testing Performance with Lighthouse -description: Steps for testing a website's performance using Lighthouse -taskInputHash: ec9606eee206cc98 +title: Test Performance with Lighthouse +description: Steps to test a website's performance using Lighthouse +taskInputHash: 26eb06d37d959148 lang: en -ignore: '/* cSpell:locale de,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -How do you test your website's performance using Lighthouse? - -> 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: -> -> 1. Open the Google Chrome web browser and navigate to the page you wish 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 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." -> -> 4. In the Lighthouse dialog box, select the performance and other relevant options you wish to test, then click "Generate report." -> -> 5. Once Lighthouse completes its analysis, you will see a report with scores and recommendations for improving your website's performance, accessibility, and other areas. -> -> 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. +How to 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: + +>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 and then select "More Tools" and then "Developer Tools" or simply use the keyboard shortcut "Ctrl+Shift+I" (Windows, Linux) or "Command+Option+I" (macOS). + +>3. In the Developer Tools window, click on the Lighthouse icon on the left side of the window or press "Ctrl+Shift+P" (Windows, Linux) or "Command+Shift+P" (macOS) to open the command menu, 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 then click "Generate report." + +>5. After Lighthouse has completed its analysis, you'll see a report with ratings and recommendations to improve the performance, accessibility, and other areas of your website. + +>By following these steps, you can use Lighthouse to test and optimize 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. 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 zum Testen der Leistung einer Website mithilfe von Lighthouse Roundtrip (isolated) prompt used: diff --git a/src/content/docs/de/_roundtrip_picture-examples.txt b/src/content/docs/de/_roundtrip_picture-examples.txt index b3a5396..82fed81 100644 --- a/src/content/docs/de/_roundtrip_picture-examples.txt +++ b/src/content/docs/de/_roundtrip_picture-examples.txt @@ -1,54 +1,61 @@ ---- -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: b441f3138e70c382 +lang: en +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' +--- +Here are a few examples of using 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 specify the conditions under which each source should be used. The `` element is used as a fallback for older browsers or when the conditions specified in the `` elements are not met. + +2. Example for art direction: + +```html + + + + An image + +``` + +Explanation: In this example, the `` element is used to provide different image sources 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 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" attribute and the "type" attribute to specify the image format. The `` element is used as a fallback for older browsers that do not support the `` element. + +## Breakpoints + +In responsive design, breakpoints are used to determine 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. + +In the first example above, for instance, we used the `media` attribute to specify 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 it's 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 provide appropriately sized images for each device, reducing website 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 variety of devices. By combining breakpoints with the `` element, flexible and responsive designs can be created that look great on any device. ===================== Content prompt used: @@ -61,8 +68,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 unter Verwendung des -Elements für responsive Bilder, Art Direction und unterschiedliche Bildformate. Roundtrip (isolated) prompt used: diff --git a/src/content/docs/de/_roundtrip_pixels-not-pixels.txt b/src/content/docs/de/_roundtrip_pixels-not-pixels.txt index 0055c57..9f4ad20 100644 --- a/src/content/docs/de/_roundtrip_pixels-not-pixels.txt +++ b/src/content/docs/de/_roundtrip_pixels-not-pixels.txt @@ -1,23 +1,23 @@ --- title: px ≠ Pixel description: Device Pixels ≠ Browser Pixels ≠ Image Pixels -taskInputHash: 6bf2840ae3339b2e +taskInputHash: b857216a5693bfeb lang: en -ignore: '/* cSpell:locale de,en*/' sidebar_sort_priority: 900 -date_published: '2023-03-26' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- ### Device Pixels ≠ Browser Pixels ≠ Image Pixels -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, 1 CSS/HTML pixel (`px`) corresponds **almost always to multiple device/printer pixels**. The `devicePixelRatio` on my phone is 3.875; [what is it on 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). +My desktop's `devicePixelRatio` changes with browser zoom, but the standard is 1.5 (my `System > Display > Scale` is set to 150%). -Image files (except for SVG) decode to a grid of pixels. **Unfortunately, it is difficult to display image pixels perfectly at a 1:1 ratio with device pixels -- but with `srcset`, you can get *close enough*, and some JavaScript can adjust the size of the HTML element after it loads if you have a really compelling reason for perfect parity, though such black arts will not be revealed here.** +Image files (excluding SVGs) are decoded as a raster of pixels. **It's extremely difficult to display image pixels perfectly in a 1:1 ratio with device pixels, but with `srcset` you can get *close* to it**, and a little bit of JavaScript can adjust the size of the HTML element after loading if you have very important reasons for a perfect match, but those forbidden arts will not be disclosed here. + +> Other absolute [units (in, pc, pt, mm, cm, Q)](https://developer.mozilla.org/de/docs/Web/CSS/L%C3%A4ngenangaben) are defined in terms of the number of CSS pixels, acting as if everything is 96 dpi. Developers avoid absolute units because it's generally better to use units derived from font size or viewport/container dimensions. Mismatching units can break layout when the user adjusts the `Accessibility > Text size` multiplier, zooms the program window, or rotates the device. You should take care of all this before launching your website, which goes without saying. -> 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. ===================== Content prompt used: @@ -31,7 +31,7 @@ Also carefully translate the title and description for the article; do not use & 2. Device px ≠ browser px ≠ image px Metadata returned1. px ≠ Pixel -2. Geräte-Pixel ≠ Browser-Pixel ≠ Bild-Pixel +2. Geräte-Pixel ≠ Browserpixel ≠ Bildpixel Roundtrip (isolated) prompt used: diff --git a/src/content/docs/de/_roundtrip_specify-width-height.txt b/src/content/docs/de/_roundtrip_specify-width-height.txt index 1e1616b..890f30f 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? +Why should you specify width and height in HTML code? -> 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. +> It is recommended to use width and height attributes in HTML code for images as this 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 to prevent content from shifting when loading the image. > -> 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. +> In addition, specifying width and height attributes for images can also 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 while 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. +> 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 disruptions. ===================== Content prompt used: @@ -18,7 +18,7 @@ Also carefully translate the title and description for the article; do not use & 2. Benefits of using width and height attributes in HTML code Metadata returned1. Verwendung von Breite und Höhe -2. Vorteile der Verwendung von Breite und Höhe Attributen im HTML-Code +2. Vorteile der Verwendung von Breiten- und Höhenattributen im HTML-Code Roundtrip (isolated) prompt used: diff --git a/src/content/docs/de/_roundtrip_when-to-use-picture.txt b/src/content/docs/de/_roundtrip_when-to-use-picture.txt index 508508a..2620362 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: 73c0c55c4704b344 lang: en -ignore: '/* cSpell:locale de,en*/' -date_published: '2023-03-27' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -The `picture` element is used to provide multiple versions of an image and choose which version of the image to display based on certain conditions. It is especially useful for optimizing images for different screen sizes and resolutions and is commonly used in responsive web design. +The `picture` element is used to provide multiple versions of an image and determine which version of the image should be displayed 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 should 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 displays such as Apple's Retina displays 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 as many pixels as the normal version, making it appear 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:** If you are designing a page that needs to display images with different aspect ratios (such as landscape vs portrait), you can use the `picture` element to provide different versions of the image that are optimized for each aspect ratio. -* **Bandwidth limitations:** Images can be large files that require a lot of bandwidth, especially on mobile devices. With the `picture` element, you can provide smaller versions of the image for devices with smaller screens or slower internet connections, to reduce website load times. +* **Bandwidth 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. +* **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 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 allows you to optimize your images for a variety of use cases and ensure they look great regardless of the device or screen size. +Overall, the `picture` element is a powerful tool that allows you to optimize your images for a variety of use cases and ensure that they look great regardless of the device or screen size. ===================== Content prompt used: @@ -34,7 +33,7 @@ Also carefully translate the title and description for the article; do not use & 2. Explains in which situations you should use the element Metadata returned1. Wann man das -Element verwenden sollte -2. Erklärt, in welchen Situationen das -Element verwendet werden sollte. +2. Erklärt, in welchen Situationen 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..f91af97 100644 --- a/src/content/docs/de/_roundtrip_width-density.txt +++ b/src/content/docs/de/_roundtrip_width-density.txt @@ -1,50 +1,49 @@ --- -title: Width and Density Adapters -description: Examples of using width and density adapters in `srcset` -taskInputHash: 2171ff4767b5d45d +title: Width and Density Descriptors +description: Examples of using width and density descriptors in `srcset` +taskInputHash: ecf3cb15eb544dea lang: en -ignore: '/* cSpell:locale de,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Understanding width (`w`) and density (`x`) adapters in `srcset`. Use examples and markdown. +Understanding width (w) and density descriptors (x) 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 select the appropriate image based on the device's display properties. The `srcset` attribute uses a combination of the `URL` and the `w` or `x` descriptors to specify the images. -## Width (`w`) Adapter +## Width (w) Descriptor -> The `w-` adapter is used to indicate the width of an image in pixels. It is used when we want to provide image dimensions to the browser so that it can choose the appropriate image for the available screen space. +> The `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 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. -## Density (`x`) Adapter +## Density Descriptor (`x`) -> 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 corresponds to 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 at 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 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 display. -> Note that the `w-` and `x-` adapters can be used in the same `srcset` attribute to provide the browser with more options to choose from. +> Note that the `w` and `x` descriptors can be used together in the same `srcset` attribute to provide the browser with more options to choose from. ===================== Content prompt used: @@ -57,8 +56,8 @@ Also carefully translate the title and description for the article; do not use & 1. Width and density descriptors 2. Examples of using width and density descriptors in `srcset` -Metadata returned1. Breiten- und Dichteadapter -2. Beispiele für die Verwendung von Breiten- und Dichteadaptern in `srcset` +Metadata returned1. Breiten- und Dichtedeskriptoren +2. Beispiele für die Verwendung von Breiten- und Dichtedeskriptoren in `srcset` Roundtrip (isolated) prompt used: diff --git a/src/content/docs/de/breakpoints.md b/src/content/docs/de/breakpoints.md index 98ebd65..7014dda 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: a740eb96e1b2103c lang: de -ignore: '/* cSpell:locale de,en*/' -date_published: '2023-03-26' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- ### Hintergrund -Kleine Bildschirme und große Monitore benötigen unterschiedliche Layouts. Für `srcset` und `sizes` müssen wir wissen, wann das Layout geändert wird. +Kleine und große Bildschirme erfordern unterschiedliche Layouts. Für `srcset` und `sizes` müssen wir wissen, bei welcher Auflösung das Layout geändert werden soll. -Webentwickler müssen entscheiden, was auf kleineren Bildschirmen verkleinert, ausgeblendet oder verschoben werden soll - oder sie müssen entscheiden, was auf größeren Bildschirmen erweitert, aufgedeckt oder hinzugefügt werden soll. Sie haben auch sehr wenig Informationen zur Verfügung. Befindet sich der Benutzer auf einem Tablet oder Telefon im Landscape-Modus oder in einem kleinen Browserfenster? +Webentwickler müssen entscheiden, was auf kleineren Bildschirmen verkleinert, ausgeblendet oder verschoben werden soll - oder häufiger, was bei größeren Bildschirmen erweitert, angezeigt oder hinzugefügt werden soll. Sie haben jedoch nur sehr wenige Informationen zur Verfügung. Befindet sich der Benutzer auf einem Tablet oder einem Telefon im Querformat oder auf einem kleinen Browserfenster? -Wir müssen eine beliebige Viewport-Breite wählen, an der das Layout geändert wird. Dies wird als **Breakpoint** bezeichnet. Es handelt sich um eine beliebige Anzahl von CSS-Pixeln ([nicht Gerätepixeln](/de/pixels-not-pixels)). Polypane hat einen [großartigen Artikel](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023) über gebräuchliche Breakpoints. +Wir müssen eine willkürliche Viewport-Breite wählen, bei der das Layout geändert wird. Dies wird als **Breakpoint** bezeichnet. Es handelt sich um eine willkürliche Anzahl von CSS-Pixeln ([keine Gerätepixel](/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. -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, Icons oder Schaltflächen) sind möglicherweise immun gegen die Layoutverschiebungen, die diese Breakpoints verursachen (und funktionieren gut mit [Dichtedescriptoren von `srcset`](/de/density-descriptors)). -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 sind begrenzt durch die Größe ihres Containers. In der Regel wird der Hauptinhaltbereich einer Seite auf den größten Bildschirmen auf eine bestimmte Breite begrenzt, eine `max-width`, aber auf kleinen Bildschirmen wird der Hauptinhaltbereich den gesamten Viewport ausfüllen. -Wenn Sie bei einigen Breakpoints mehr als eine Spalte haben, wird es schwieriger, die effektiven Größenregeln zu berechnen, da sich der Prozentsatz der Viewport-Breite, den das Bild einnimmt, ändert. +Wenn Sie bei einigen Breakpoints mehr als eine Spalte haben, wird es schwieriger, die effektiven 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: +Trotzdem sollten Sie nicht zu viel darüber nachdenken. Sie werden wahrscheinlich mit der folgenden Näherung sehr zufrieden sein: -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 `100vw` für das `sizes`-Attribut des Bildes verwenden, um zu sagen, 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 einstellen. -Wenn Ihre Antwort auf 1 700px und Ihre Antwort auf 2 800px lautet, können Sie das folgende `sizes`-Attribut verwenden: +Wenn Ihre Antwort auf 1 700px und Ihre Antwort auf 2 800px war, können Sie das folgende `sizes`-Attribut verwenden: ```html - + ``` -> Man würde denken, dass der Browser all diese Berechnungen netterweise für uns basierend auf dem CSS übernehmen könnte. Leider sind Browser aggressiv darum bemüht, eine Bild-URL *vor* dem Herunterladen von Stylesheets zu wählen. Also müssen wir die Berechnungen selbst durchführen. Und wenn wir nicht perfekt sind, ist es ihr Problem. +> Man würde denken, dass der Browser alle diese Berechnungen auf Basis des CSS schön für uns handhaben könnte. Leider sind Browser aggressiv bestrebt, eine Bild-URL *vor* dem Herunterladen der Stylesheets zu wählen. Deshalb müssen wir die Berechnungen selbst durchführen, und es sei 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..548e403 100644 --- a/src/content/docs/de/browser-picks-srcset.md +++ b/src/content/docs/de/browser-picks-srcset.md @@ -1,18 +1,19 @@ --- title: Wie der Browser wählt -description: Wie der Browser zwischen in srcset aufgelisteten Bildern wählt -taskInputHash: 565e2cc4a65e54bd +description: >- + Wie der Browser zwischen Bildern auswählt, die im srcset-Attribut aufgelistet + sind +taskInputHash: 09ab2b098b259019 lang: de -ignore: '/* cSpell:locale de,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Wie wählt der Browser zwischen den in srcset angegebenen Bildern? Hier sind die Schritte mit Beispielen für sowohl Width- als auch Density-Spezifikationen und wie der Browser basierend auf Gerät und Viewport entscheidet: +Wie wählt der Browser zwischen den Bildern aus, die im srcset-Attribut aufgelistet sind? Hier ist eine schrittweise Anleitung mit Beispielen für sowohl Width- als auch Density-Spezifikationen und wie der Browser auf der Grundlage von 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. +Wenn das `srcset`-Attribut in HTML verwendet wird, verwendet der Browser eine Reihe von Regeln, um das geeignetste Bild aus einer Liste bereitgestellter Quellen auszuwählen. Diese Regeln hängen sowohl von den Anzeigeeigenschaften des Geräts (Auflösung, Pixeldichte) als auch von der Größe des Viewports ab. Das `srcset`-Attribut ermöglicht es Ihnen, unterschiedliche Bilder je nach Breite (unter Verwendung von `w`-Deskriptor) oder Pixeldichte (unter Verwendung von `x`-Deskriptor) festzulegen. Lassen Sie uns jeden Fall mit Beispielen durchgehen. -1\. Width-Beschreibung (`w`): +1\. Breitendeskriptor (`w`): Angenommen, wir haben das folgende `srcset`-Attribut: @@ -22,22 +23,21 @@ Angenommen, wir haben das folgende `srcset`-Attribut: ``` -Der Browser wird die folgenden Schritte ausführen: +Der Browser wird folgende 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. +a. Bestimmen Sie das DPR (Device Pixel Ratio) des Geräts. Ein Standard-Display hat beispielsweise 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 die Breiten-Beschreibung mit der DPR. Für ein Gerät mit einem DPR von 1: +b. Berechnen Sie die effektive Breite für jedes Bild im `srcset`. Multiplizieren Sie den Breitendeskriptor mit der DPR. Für ein Gerät mit einem DPR von 1: -- Beispiel-small.jpg: 400 * 1 = 400px +- example-small.jpg: 400 \* 1 = 400 px -- Beispiel-medium.jpg: 800 * 1 = 800px +- example-medium.jpg: 800 \* 1 = 800 px -- Beispiel-large.jpg: 1600 * 1 = 1600px +- example-large.jpg: 1600 \* 1 = 1600 px -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`. +c. Vergleichen Sie die effektiven Breiten mit der Viewport-Breite. Nehmen Sie an, dass die Viewport-Breite 420px beträgt. Der Browser wählt das kleinste Bild mit einer effektiven Breite aus, die größer oder gleich der Viewport-Breite ist. In diesem Fall wird `example-medium.jpg` ausgewählt. - -2\. Pixeldichte-Beschreibung (`x`): +2\. Pixeldichtedeskriptor (`x`): Angenommen, wir haben das folgende `srcset`-Attribut: @@ -47,21 +47,21 @@ Angenommen, wir haben das folgende `srcset`-Attribut: ``` -Der Browser wird die folgenden Schritte ausführen: +Der Browser wird folgende 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. +a. Bestimmen Sie das DPR (Device Pixel Ratio) des Geräts. Ein Standard-Display hat beispielsweise 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`-Beschreibungen im `srcset`. In diesem Fall haben wir drei Bilder mit den folgenden Beschreibungen: +b. Vergleichen Sie das DPR des Geräts mit den `x`-Deskriptoren im `srcset`. In diesem Fall haben wir drei Bilder mit den folgenden Deskriptoren: -- Beispiel-1x.jpg: 1x +- example-1x.jpg: 1x -- Beispiel-2x.jpg: 2x +- example-2x.jpg: 2x -- Beispiel-3x.jpg: 3x +- example-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. +c. Wählen Sie das Bild mit dem `x`-Deskriptor aus, der dem 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 wird er `example-2x.jpg` wählen 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: +Es ist wichtig zu beachten, dass Sie auch das `sizes`-Attribut in Kombination mit dem `srcset`-Attribut verwenden können, um weitere Informationen darüber bereitzustellen, wie das Bild bei verschiedenen Viewport-Breiten angezeigt wird. Dies ist besonders nützlich bei Verwendung des Breitendeskriptors (`w`). Hier ist ein Beispiel: ```html diff --git a/src/content/docs/de/density-descriptors.md b/src/content/docs/de/density-descriptors.md index 0ae2d51..1ee480f 100644 --- a/src/content/docs/de/density-descriptors.md +++ b/src/content/docs/de/density-descriptors.md @@ -1,35 +1,30 @@ --- -title: Density-Descriptoren und Srcset -description: Beispiele für die Verwendung von Density-Descriptoren in `srcset` -taskInputHash: 0a85d4f28fee785a +title: Density-Descriptors & Srcset +description: Beispiele für die Verwendung von Density-Descriptors in `Srcset` +taskInputHash: bb5fed05291ed4a0 lang: de -ignore: '/* cSpell:locale de,en*/' -date_published: '2023-03-26' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Srcset mit Density Descriptors bietet eine einfache und effektive Methode für die Bereitstellung des am besten geeigneten Bildes für jedes Gerät des Benutzers und verbessert die Leistung und die Benutzererfahrung. Diese Anleitung führt Sie durch die Grundlagen der Verwendung von Srcset mit Density Descriptors und bietet Markup-Beispiele für Ihre Bequemlichkeit. +Srcset mit Density-Descriptors bietet eine einfache und effektive Methode, um für jedes Gerät des Benutzers das am besten geeignete Bild zu liefern, was die Leistung und Benutzererfahrung verbessert. In dieser Anleitung werden die Grundlagen der Verwendung von Srcset mit Density-Descriptors erläutert und Beispiele für die Markierung bereitgestellt. +## Was ist Srcset mit Density-Descriptors? -## Was ist Srcset mit Density Descriptors? +Srcset ist ein HTML-Attribut, das es Ihnen ermöglicht, mehrere Bildquellen für ein einzelnes ``-Element anzugeben. Density-Descriptors (`x`) werden in Verbindung mit Srcset verwendet, um Bilder mit unterschiedlichen Auflösungen basierend auf der Pixeldichte des Displays des Benutzers bereitzustellen. +## Wann sollte man Srcset mit Density-Descriptors verwenden? -Srcset ist ein HTML-Attribut, das es ermöglicht, mehrere Bildquellen für ein einzelnes ``-Element anzugeben. Density Descriptors (`x`) werden in Verbindung mit srcset verwendet, um Bilder in unterschiedlicher Auflösung basierend auf der Pixeldichte des Displays des Benutzers bereitzustellen. +Die Verwendung von Srcset mit Density-Descriptors ist besonders nützlich, wenn Sie: +1. Hochauflösende Bilder auf Geräten mit hoher DPI (z.B. Retina-Displays) bereitstellen möchten, während Sie für Standard-Displays Bilder mit niedrigerer Auflösung bereitstellen möchten. +2. Die Leistung der Seite verbessern möchten, indem Sie die am besten geeignete Bildgröße für jedes Gerät des Benutzers bereitstellen. +## Implementierung von Srcset mit Density-Descriptors -## Wann soll man Srcset mit Density Descriptors verwenden? - -Die Verwendung von srcset mit Density Descriptors ist besonders nützlich, wenn Sie: -1. Hochauflösende Bilder für hohe DPI-Displays (z.B. Retina-Displays) bereitstellen möchten, während Sie für Standard-Displays niedrigere Auflösungen verwenden. -2. Die Seitenausführung durch die Bereitstellung der am besten geeigneten Bildgröße für jedes Gerät des Benutzers verbessern möchte. - -## Implementierung von Srcset mit Density Descriptors - -Um srcset mit Density Descriptors zu verwenden, befolgen Sie diese Schritte: +Um Srcset mit Density-Descriptors zu verwenden, befolgen Sie diese Schritte: 1. Bereiten Sie Ihre Bilder in verschiedenen Auflösungen vor. -2. Fügen Sie das `srcset`-Attribut zum ``-Element hinzu, einschließlich der Bildquellen und entsprechenden Density Descriptors. -3. Fügen Sie das `sizes`-Attribut optional hinzu, um die Größe des Bildes auf dem Bildschirm festzulegen. - -### Markup Beispiel +2. Fügen Sie das `srcset`-Attribut zum ``-Element hinzu, einschließlich der Bildquellen und entsprechenden Density-Descriptors. +3. Fügen Sie (optional) das `sizes`-Attribut hinzu, um die Größe des Bildes festzulegen, wie es auf dem Bildschirm angezeigt wird. +### Beispielmarkierung -Hier ist ein Beispiel, wie Sie srcset mit Density Descriptors in Ihrem Markup implementieren: +Hier ist ein Beispiel dafür, wie Sie Srcset mit Density-Descriptors in Ihre Markierung 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. +Diese Beispielmarkierung enthält: +- **src**: Die Standard-Bildquelle, die angezeigt wird, wenn der Browser kein Srcset 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 der Anzeige des Benutzers aus. +- **alt**: Eine Beschreibung des Bildes für Barrierefreiheit. -Und das war es schon! Sie haben srcset mit Density Descriptors erfolgreich implementiert und damit die Leistung und Benutzererfahrung Ihrer Website verbessert. +Und das war's! Sie haben erfolgreich Srcset mit Density-Descriptors 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..10fcb5b 100644 --- a/src/content/docs/de/introduction.md +++ b/src/content/docs/de/introduction.md @@ -1,21 +1,20 @@ --- -title: srcset und sizes -description: Ein effizienter und dezidierter Leitfaden für responsive Bilder bis 2023 -taskInputHash: f8e7c31ccf577572 +title: '`srcset` und `` Größen' +description: Ein effizienter und entschiedener Leitfaden für responsive Bilder für 2023 +taskInputHash: dc8c8594bdd45d91 lang: de -ignore: '/* cSpell:locale de,en*/' sidebar_sort_priority: 1000 -date_published: '2023-03-23' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -**Ein effizienter und dezidierter Leitfaden für Bilder bis 2023** +**Ein effizienter und entschiedener Leitfaden für Bilder 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. +Überprüfen Sie die Seitenleiste für die Details. Dies ist eine schnelle Referenz für die Aktualisierung von ``-Tags, um moderne Geräte in all ihren verschiedenen Größen und Pixeldichten zu handhaben. Sie sollten [wissen, dass Pixel ≠ Pixel](/de/pixel-nicht-pixel) und `devicePixelRatio` wahrscheinlicher bei 3,875 als bei 1:1 liegen wird. Moderne Telefone geben vor, für die Lesbarkeit 320-428px breit zu sein (in CSS-Pixel), haben aber viele Gerätepixel pro CSS-Pixel. -> Wenn Ihr Bildgröße sich niemals ändert, unabhängig davon, wie eng Sie das Browserfenster machen, sollten Sie stattdessen einen [Density Descriptor](/de/density-descriptors) verwenden. Dies ist oft geeignet für Logos, Icons und Schaltflächen. +> Wenn Ihr Bild unabhängig von der Größe des Browserfensters nie seine Größe ändert, sollten Sie stattdessen einen [Dichte-Deskriptor](/de/density-descriptors) verwenden. Dies eignet sich oft für Logos, Symbole und Schaltflächen. -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. +Wissen Sie, was Ihre [Breakpoints](/de/breakpoints) sind? Sie benötigen diese Zahlen, um die Lösung unten feinzutunen - und mindestens den Ansichtsfensterbreiten-Breakpoint, an dem der Hauptinhalt aufhört zu wachsen. ### Die einfache Methode @@ -28,12 +27,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 auf einem Fahrrad fahren" /> - + - + ``` diff --git a/src/content/docs/de/lighthouse-performance-test.md b/src/content/docs/de/lighthouse-performance-test.md index b794f4e..e501cdc 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 zum Testen der Leistung einer Website mithilfe von Lighthouse +taskInputHash: 26eb06d37d959148 lang: de -ignore: '/* cSpell:locale de,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- Wie testen Sie die Leistung Ihrer Website mit Lighthouse? -> 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: -> -> 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). -> -> 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". -> -> 4\. Wählen Sie im Lighthouse-Dialogfeld die Leistung und andere relevante Optionen aus, die Sie testen möchten, und klicken Sie dann auf "Bericht generieren". -> -> 5\. Nach Abschluss der Analyse durch Lighthouse sehen Sie einen Bericht mit Scores und Empfehlungen zur Verbesserung der Leistung, Zugänglichkeit und anderer Bereiche Ihrer Website. -> -> 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. +>Lighthouse ist ein Tool, das zur Messung der Leistung, Zugänglichkeit und anderer Aspekte einer Website verwendet werden kann. Um die Leistung Ihrer Website mit Lighthouse zu testen, folgen Sie diesen Schritten: + +>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 "Entwickler Tools" oder verwenden Sie einfach die Tastenkombination "Strg+Shift+I" (Windows, Linux) oder "Befehlstaste + Option + I" (macOS). + +>3. Im Entwicklertools-Fenster klicken Sie auf das Lighthouse-Symbol auf der linken Seite des Fensters oder drücken Sie "Strg+Shift+P" (Windows, Linux) oder "Befehlstaste + Shift + P" (macOS), um das Befehlsmenü zu öffnen, geben Sie dann "Lighthouse" ein und wählen Sie "Bericht generieren". + +>4. Im Lighthouse-Dialogfeld wählen Sie die Leistung und andere relevante Optionen aus, die Sie testen möchten, und klicken Sie dann auf "Bericht generieren". + +>5. Nachdem Lighthouse seine Analyse abgeschlossen hat, sehen Sie einen Bericht mit Bewertungen und Empfehlungen zur Verbesserung der Leistung, Zugänglichkeit und anderer Bereiche Ihrer Website. + +>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..886695b 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 description: >- - Beispiele zur Verwendung des -Elements für responsive Bilder, Art - Direction und unterschiedliche Bildformate -taskInputHash: d2a1e2234ca5c46c + Bietet Beispiele unter Verwendung des -Elements für responsive + Bilder, Art Direction und unterschiedliche Bildformate. +taskInputHash: b441f3138e70c382 lang: de -ignore: '/* cSpell:locale de,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Hier sind ein paar Beispiele für die Verwendung des `` Elements und deren Erklärungen: +Hier sind ein paar Beispiele für die Verwendung des ``-Elements und ihre Erklärungen: -1\. Beispiel für Responsive Bilder: +1\. Beispiel für responsive Bilder: ```html @@ -22,7 +21,7 @@ Hier sind ein paar Beispiele für die Verwendung des `` Elements und de ``` -Erklärung: In diesem Beispiel wird das `` Element verwendet, um verschiedene Bildquellen für verschiedene Bildschirmgrößen bereitzustellen. Die `` Elemente geben die verschiedenen Bildquellen mit dem Attribut "srcset" und dem Attribut "media" an, um die Bedingungen festzulegen, unter denen jede Quelle verwendet werden soll. Das `` Element wird als Fallback für ältere Browser oder wenn die Bedingungen in den `` Elementen nicht erfüllt sind verwendet. +Erklärung: In diesem Beispiel wird das ``-Element verwendet, um verschiedene Bildquellen für verschiedene Bildschirmgrößen bereitzustellen. Die ``-Elemente geben die verschiedenen Bildquellen mit dem "srcset"-Attribut und dem "media"-Attribut 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, die in den ``-Elementen festgelegt sind, 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 je nach Ausrichtung des Geräts verschiedene Bildquellen bereitzustellen. Das ``-Element mit dem "media"-Attribut, das auf "(orientation: landscape)" eingestellt ist, gibt eine Bildquelle für breite Bildschirme an, während das ``-Element eine Bildquelle für Hochformatbildschirme angibt. -3\. Beispiel für unterschiedliche Bildformate: +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 verschiedene Bildquellen für verschiedene Bildformate bereitzustellen. Die ``-Elemente geben verschiedene Bildquellen mit dem "srcset"-Attribut und dem "type"-Attribut an, um das Bildformat festzulegen. Das ``-Element wird als Fallback für ältere Browser verwendet, die das ``-Element nicht unterstützen. ## Breakpoints -In Responsive Design werden Breakpoints verwendet, um festzulegen, wann das Layout einer Website oder Anwendung basierend auf der Größe des Viewports geändert werden sollte. Breakpoints werden typischerweise mit Medienabfragen in CSS definiert, die je nach Bildschirmbreite unterschiedliche Stile anwenden. Diese Breakpoints können in Verbindung mit dem `` Element verwendet werden, um verschiedene Bildquellen für verschiedene Bildschirmgrößen bereitzustellen. +Im Responsive Design werden Breakpoints verwendet, um festzulegen, wann sich das Layout einer Website oder Anwendung basierend auf der Größe der Ansicht ändern sollte. Breakpoints werden in der Regel mit Media Queries in CSS definiert, die abhängig von der Bildschirmbreite unterschiedliche Stile anwenden. Diese Breakpoints können in Verbindung mit dem ``-Element verwendet werden, um verschiedene Bildquellen für unterschiedliche 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. +In dem ersten Beispiel oben haben wir z.B. das `media`-Attribut verwendet, um die Bildschirmbreite festzulegen, unter der jede Quelle verwendet werden soll. Wenn die Bildschirmbreite größer oder gleich 768 Pixel ist, wird die Quelle `image-large.jpg` verwendet. Wenn sie größer oder gleich 480 Pixel, aber kleiner als 768 Pixel ist, wird die Quelle `image-medium.jpg` verwendet. Und wenn die Bildschirmbreite kleiner als 480 Pixel ist, wird die Quelle `image-small.jpg` verwendet. Dadurch können wir für jedes Gerät passend dimensionierte Bilder bereitstellen, was die Ladezeiten der Website verkürzt und die Benutzererfahrung verbessert. -Breakpoints können für jede Bildschirmgröße definiert werden und mehrere Breakpoints können verwendet werden, um Layouts zu erstellen, die auf eine breite Palette von Geräten reagieren. Durch die Kombination von Breakpoints mit dem `` Element können flexible und reaktionsschnelle Designs erstellt werden, die auf jedem Gerät gut aussehen. +Breakpoints können bei jeder Bildschirmgröße definiert werden, und mehrere Breakpoints können verwendet werden, um Layouts zu erstellen, die auf eine Vielzahl 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 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..35ef7b6 100644 --- a/src/content/docs/de/pixels-not-pixels.md +++ b/src/content/docs/de/pixels-not-pixels.md @@ -1,20 +1,19 @@ --- title: px ≠ Pixel -description: Geräte-Pixel ≠ Browser-Pixel ≠ Bild-Pixel -taskInputHash: 6bf2840ae3339b2e +description: Geräte-Pixel ≠ Browserpixel ≠ Bildpixel +taskInputHash: b857216a5693bfeb lang: de -ignore: '/* cSpell:locale de,en*/' sidebar_sort_priority: 900 -date_published: '2023-03-26' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -### Gerätepixel ≠ Browser px ≠ Bild px +### Gerätepixel ≠ Browserpx ≠ Bildpx -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 entspricht 1 CSS/HTML Pixel (`px`) **fast immer mehreren Geräte-/Drucker-Pixeln**. Der devicePixelRatio auf meinem Handy beträgt 3,875; [wie sieht es bei dir aus?](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%). +Mein Desktop-DevicePixelRatio ändert sich bei Browserzoom, aber Standard ist 1.5 (meine `System > Display > Scale` ist schließlich 150%). -Bilddateien (mit Ausnahme von SVG) entschlüsseln zu einem Raster von Pixeln. **Es ist ärgerlicherweise schwer, Bildpixel perfekt mit Gerätepixeln im Verhältnis 1:1 anzuzeigen - aber mit `srcset` kann man *nahe genug* kommen**, und etwas Javascript kann die Größe des HTML-Elements nach dem Laden anpassen, wenn man wirklich triftige Gründe für eine perfekte Zuordnung hat, obwohl solche verbotenen Künste hier nicht enthüllt werden. +Bilddateien (ausgenommen SVG) werden als Raster von Pixeln dekodiert. **Es ist äußerst schwierig, die Bildpixel perfekt im Verhältnis 1:1 zu den Gerätepixeln darzustellen - aber mit `srcset` kannst du *annähernd* dahin kommen**, und ein bisschen JavaScript kann nach dem Laden die Größe des html-Elements anpassen, wenn du wirklich wichtige Gründe für eine perfekte Abbildung hast, doch solche verbotenen Künste werden hier nicht verraten. -> 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/L%C3%A4ngenangaben) werden in Bezug auf die Anzahl an CSS-Pixeln definiert und tun so, als ob alles 96 dpi hätte. Entwickler meiden absolute Einheiten, weil es im Allgemeinen besser ist, Einheiten zu verwenden, die von der Schriftgröße oder den Abmessungen des Viewports/Containers abgeleitet sind. Nicht übereinstimmende Einheiten können das Layout zerstören, wenn der Benutzer den Multiplikator für `Barrierefreiheit > Textgröße` anpasst, das Programmfenster zoomt oder das Gerät dreht. Du solltest das alles vor dem Start deiner Webseite einstellen, versteht sich von selbst. diff --git a/src/content/docs/de/specify-width-height.md b/src/content/docs/de/specify-width-height.md index 06c16be..fec931d 100644 --- a/src/content/docs/de/specify-width-height.md +++ b/src/content/docs/de/specify-width-height.md @@ -1,17 +1,16 @@ --- title: Verwendung von Breite und Höhe -description: Vorteile der Verwendung von Breite und Höhe Attributen im HTML-Code -taskInputHash: fd9dcf8cf97a201b +description: Vorteile der Verwendung von Breiten- und Höhenattributen im HTML-Code +taskInputHash: 6e6638bf3441e838 lang: de -ignore: '/* cSpell:locale de,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Warum sollten Sie Breite und Höhe in HTML einfügen? +Warum sollte man Breite und Höhe 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, Breiten- und Höhenangaben im HTML-Code für Bilder zu verwenden, da dies dem Webbrowser hilft, die Größe des Bildes zu kennen, bevor es vollständig geladen ist. Dies ermöglicht es dem Browser, den entsprechenden Platz auf der Webseite für das Bild zu reservieren, um zu verhindern, dass sich der Inhalt beim Laden des Bildes verschiebt. > -> 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 durch das Angeben der Breiten- und Höhenattribute für Bilder auch die Gesamtperformance der Webseite verbessert werden. Wenn ein Browser die Größe eines Bildes im Voraus kennt, kann er genauer berechnen, wie viel Platz zur Anzeige des Bildes benötigt wird und unnötige Reflows oder Repaints 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 Breiten- und Höhenangaben im HTML-Code für Bilder die Benutzererfahrung verbessert werden, indem der Inhalt schneller geladen wird und visuelle Störungen verringert 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..5ef4ef4 100644 --- a/src/content/docs/de/when-to-use-picture.md +++ b/src/content/docs/de/when-to-use-picture.md @@ -1,23 +1,22 @@ --- title: Wann man das -Element verwenden sollte -description: 'Erklärt, in welchen Situationen das -Element verwendet werden sollte.' -taskInputHash: 0d098655c456a3e4 +description: 'Erklärt, in welchen Situationen du das -Element verwenden solltest.' +taskInputHash: 73c0c55c4704b344 lang: de -ignore: '/* cSpell:locale de,en*/' -date_published: '2023-03-27' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Das `picture`-Element wird verwendet, um mehrere Versionen eines Bildes bereitzustellen und anhand bestimmter Bedingungen zu entscheiden, welche Version des Bildes angezeigt werden soll. Es ist besonders nützlich, um Bilder für verschiedene Bildschirmgrößen und Auflösungen zu optimieren und wird häufig in responsivem Webdesign verwendet. +Das `picture`-Element wird verwendet, um mehrere Versionen eines Bildes bereitzustellen und basierend auf bestimmten Bedingungen zu bestimmen, welche Version des Bildes angezeigt wird. Es ist besonders nützlich, um Bilder für verschiedene Bildschirmgrößen und Auflösungen zu optimieren 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 spezifische 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, sodass sie 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. +* **Unterschiedliche Seitenverhältnisse:** Wenn du eine Seite gestaltest, die Bilder mit unterschiedlichen Seitenverhältnissen anzeigen muss (wie Querformat gegenüber Portrait), 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. +* **Kunstregie-Layouts:** Manchmal möchtest du ein Bild auf bestimmte Weise präsentieren, abhängig vom Layout des restlichen Teils der Seite. Zum Beispiel möchtest du auf mobilen Geräten eine Nahaufnahme des Gesichts einer Person zeigen, auf Desktop-Geräten jedoch eine breitere Aufnahme. Das `picture`-Element ermöglicht es dir, unterschiedliche Versionen des Bildes bereitzustellen, die für verschiedene Layouts optimiert sind. -Insgesamt ist das `picture`-Element ein leistungsstarkes Werkzeug, mit dem Sie Ihre Bilder für eine Vielzahl von Anwendungsfällen optimieren und sicherstellen können, dass sie unabhängig vom Gerät oder der Bildschirmgröße großartig aussehen. +Insgesamt ist das `picture`-Element ein leistungsstarkes Tool, mit dem du deine Bilder für eine Vielzahl von Anwendungsfällen optimieren und sicherstellen kannst, 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..70b6f75 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 Dichtedeskriptoren +description: Beispiele für die Verwendung von Breiten- und Dichtedeskriptoren in `srcset` +taskInputHash: ecf3cb15eb544dea lang: de -ignore: '/* cSpell:locale de,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Verständnis für Breiten- (w) und Dichteadapter (x) in `srcset`. Verwenden Sie Beispiele und Markdown. +Verständnis von Breiten- (w) und Dichtedeskriptoren (x) in `srcset` verwenden. 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 Pixel-Dichten 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 der `URL` und den `w` oder `x` Deskriptoren, um die Bilder zu spezifizieren. -## Breiten- (`w`) Adapter +## Breiten- (w) Deskriptor -> 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` Deskriptor wird verwendet, um die Breite eines Bildes in Pixeln anzugeben. Es wird verwendet, wenn wir dem Browser die Abmessungen eines Bildes bereitstellen möchten, damit er das geeignete Bild für den verfügbaren Bildschirmplatz 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` Deskriptors in `srcset` ist wie folgt: ```html Beispielbild ``` -> Im obigen Beispiel haben wir dem Browser drei Bilder und ihre entsprechenden Breiten in Pixeln zur Verfügung gestellt. Der Browser wählt das Bild mit der nächstliegenden Breite zum verfügbaren Bildschirmplatz. -## Dichteadapter (`x`) -> Der `x-`Adapter wird verwendet, um die Pixel-Dichte eines Bildes anzugeben, was das Verhältnis von physischen Pixeln zu CSS-Pixeln ist. Er wird verwendet, wenn wir dem Browser verschiedene Versionen desselben Bildes mit unterschiedlichen Pixeldichten zur Verfügung stellen wollen. +> In dem oben genannten Beispiel haben wir dem Browser drei Bilder und ihre entsprechenden Breiten in Pixeln zur Verfügung gestellt. Der Browser wird das Bild mit der nächstgelegenen Breite zum verfügbaren Bildschirmplatz auswählen. -> Die Syntax für die Verwendung des `x-`Adapters in `srcset` sieht wie folgt aus: +## Dichtedeskriptor (`x`) + +> Der `x` Deskriptor wird verwendet, um die Pixeldichte eines Bildes anzugeben, was dem Verhältnis von physischen Pixeln zu CSS-Pixeln entspricht. Er wird verwendet, wenn wir dem Browser verschiedene Versionen desselben Bildes mit verschiedenen Pixeldichten zur Verfügung stellen möchten. + +> Die Syntax für die Verwendung des `x` Deskriptors in `srcset` ist wie folgt: ```html Beispielbild ``` -> Im obigen Beispiel haben wir dem Browser drei Bilder und ihre entsprechenden Pixeldichten zur Verfügung gestellt. Der Browser wählt das Bild mit der nächstgelegenen Pixeldichte für den Gerätebildschirm aus. +> In dem oben genannten Beispiel haben wir dem Browser drei Bilder und ihre entsprechenden Pixeldichten zur Verfügung gestellt. Der Browser wird das Bild mit der nächstgelegenen Pixeldichte zum Bildschirm des Geräts auswählen. -> Beachten Sie, dass die `w-` und `x-`Adapter in derselben `srcset`-Attribut verwendet werden können, um dem Browser mehr Optionen zur Auswahl zu geben. +> Beachten Sie, dass die `w`- und `x`-Deskriptoren in demselben `srcset` Attribut zusammen verwendet werden können, um dem Browser mehr Optionen zur Auswahl zu bieten. diff --git a/src/content/docs/en/breakpoints.md b/src/content/docs/en/breakpoints.md index ad658c5..e503687 100644 --- a/src/content/docs/en/breakpoints.md +++ b/src/content/docs/en/breakpoints.md @@ -1,8 +1,8 @@ --- title: Breakpoints & images description: Why some (but not all) breakpoints matter for your images -date_published: '2023-03-26' -date_modified: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' --- ### Background diff --git a/src/content/docs/en/browser-picks-srcset.md b/src/content/docs/en/browser-picks-srcset.md index 43ecbc0..d9d53aa 100644 --- a/src/content/docs/en/browser-picks-srcset.md +++ b/src/content/docs/en/browser-picks-srcset.md @@ -1,8 +1,8 @@ --- title: How the browser chooses description: How the browser chooses between images listed in the srcset attribute -date_published: '2023-03-24' -date_modified: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' --- How does the browser choose between images listed in the srcset attribute? Here's a step-by-step, with examples for both width and density specifications and how the browser decides based on device and viewport. diff --git a/src/content/docs/en/density-descriptors.md b/src/content/docs/en/density-descriptors.md index e72dabd..58e809d 100644 --- a/src/content/docs/en/density-descriptors.md +++ b/src/content/docs/en/density-descriptors.md @@ -1,8 +1,8 @@ --- title: Density descriptors & srcset description: Examples of using density descriptors in `srcset` -date_published: '2023-03-26' -date_modified: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' --- Srcset with density descriptors provides a simple and effective method for delivering the most suitable image to each user's device, improving performance and user experience. This guide will walk you through the essentials of using srcset with density descriptors and provide markup examples for your convenience. diff --git a/src/content/docs/en/introduction.md b/src/content/docs/en/introduction.md index c529f64..0a24255 100644 --- a/src/content/docs/en/introduction.md +++ b/src/content/docs/en/introduction.md @@ -2,8 +2,8 @@ title: 'srcset & sizes ' description: An Efficient and Opinionated Guide to Responsive Images for 2023 sidebar_sort_priority: 1000 -date_published: '2023-03-23' -date_modified: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' --- **An Efficient and Opinionated Guide to Images for 2023** diff --git a/src/content/docs/en/lighthouse-performance-test.md b/src/content/docs/en/lighthouse-performance-test.md index 04fb5b5..323dc99 100644 --- a/src/content/docs/en/lighthouse-performance-test.md +++ b/src/content/docs/en/lighthouse-performance-test.md @@ -1,8 +1,8 @@ --- title: Test performance with Lighthouse description: Steps on how to test a website's performance using Lighthouse -date_published: '2023-03-24' -date_modified: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' --- How do you test your site’s performance with Lighthouse? diff --git a/src/content/docs/en/picture-examples.md b/src/content/docs/en/picture-examples.md index 3d3b6d8..2adae70 100644 --- a/src/content/docs/en/picture-examples.md +++ b/src/content/docs/en/picture-examples.md @@ -3,8 +3,8 @@ title: Examples using element description: >- Provides examples using the element, for responsive images, art direction and different image formats -date_published: '2023-03-24' -date_modified: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' --- Here are a few examples of using the `` element and their explanations: diff --git a/src/content/docs/en/pixels-not-pixels.md b/src/content/docs/en/pixels-not-pixels.md index e4c638f..f36c9d5 100644 --- a/src/content/docs/en/pixels-not-pixels.md +++ b/src/content/docs/en/pixels-not-pixels.md @@ -2,8 +2,8 @@ title: px ≠ pixels description: Device px ≠ browser px ≠ image px sidebar_sort_priority: 900 -date_published: '2023-03-26' -date_modified: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' --- ### Device pixels ≠ browser px ≠ image px diff --git a/src/content/docs/en/specify-width-height.md b/src/content/docs/en/specify-width-height.md index 1eb09b0..2cc2947 100644 --- a/src/content/docs/en/specify-width-height.md +++ b/src/content/docs/en/specify-width-height.md @@ -1,8 +1,8 @@ --- title: Use width and height description: Benefits of using width and height attributes in HTML code -date_published: '2023-03-24' -date_modified: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' --- Why should you put width and height in the HTML? diff --git a/src/content/docs/en/when-to-use-picture.md b/src/content/docs/en/when-to-use-picture.md index 66e7244..6fc6f0b 100644 --- a/src/content/docs/en/when-to-use-picture.md +++ b/src/content/docs/en/when-to-use-picture.md @@ -1,8 +1,8 @@ --- title: When to use element description: Explains in which situations you should use the element -date_published: '2023-03-27' -date_modified: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' --- The `picture` element is used to provide multiple versions of an image and determines which version of the image to display based on certain conditions. It is particularly useful for optimizing images for different screen sizes and resolutions, and is commonly used in responsive web design. Here are some specific scenarios where you might want to use the `picture` element: diff --git a/src/content/docs/en/width-density.md b/src/content/docs/en/width-density.md index 1e00293..02739c5 100644 --- a/src/content/docs/en/width-density.md +++ b/src/content/docs/en/width-density.md @@ -1,8 +1,8 @@ --- title: Width and density descriptors description: Examples of using width and density descriptors in `srcset` -date_published: '2023-03-24' -date_modified: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' --- Understanding width (w) and density (x) descriptors in `srcset`. Use examples and use Markdown. diff --git a/src/content/docs/es/_roundtrip_breakpoints.txt b/src/content/docs/es/_roundtrip_breakpoints.txt index 186ad39..c6af468 100644 --- a/src/content/docs/es/_roundtrip_breakpoints.txt +++ b/src/content/docs/es/_roundtrip_breakpoints.txt @@ -1,44 +1,44 @@ --- title: Breakpoints and Images description: >- - Why some (but not all) breakpoints matter for your images -taskInputHash: cc4be952df3fef63 + Why some breakpoints (but not all) are important for your images? +taskInputHash: d63995938314e702 lang: en -ignore: '/* cSpell:locale es,en*/' -date_published: '2023-03-26' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- ### Background -Small screens and large monitors need different designs. For the purpose of `srcset` and `sizes`, we need to know at what point the design changes. +Small and large screens require different designs. In order to use `srcset` and `sizes`, we need to know when the layout changes. -Web developers must decide what shrinks, hides, or relocates on smaller screens - or more commonly, what expands, reveals, or adds on larger screens. They also have very little information to work with. Is the user on a tablet or on a horizontally oriented phone - or in a small browser window? +Web developers must decide what to shrink, hide, or relocate on smaller screens, or more commonly, what to expand, reveal or add on larger screens. Moreover, they have very little information. Is the user on a tablet or a phone in landscape mode, or a small browser window? -We have to choose an arbitrary viewport width where the design changes. This is called a **breakpoint**. It is an arbitrary number of CSS pixels ([not device pixels](/en/pixels-not-pixels)). Polypane has a [great article](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023) on commonly used breakpoints. +We have to choose an arbitrary viewport width where the 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) about commonly used breakpoints. -Some images (like logos, icons, or buttons) might be immune to design changes caused by these breakpoints (and be fine with [srcset density descriptors](/en/density-descriptors)). +Some images (like logos, icons, or buttons) might be immune to layout changes caused by these breakpoints (and be fine with [srcset density descriptors](/en/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. 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 take up the entire viewport. -If you have multiple columns at some breakpoints, it will be harder to calculate effective size rules, as the percentage of the viewport width the image takes up will change. +If you have more than one column at some breakpoints, it will be more difficult to calculate effective sizing rules, as the percentage of the 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: +That being said, don’t obsess over this. You’re most likely fine with the following approach: -1. At what size does the main column (or the image container) stop growing? Up to that viewport width, we can use `100vw` for the image `sizes` attribute to indicate the image takes up the full width of the viewport. -2. What is the maximum width the container ever reaches? We can set that as a fixed `width` for everything else. +1. What width does the main column (or image container) stop growing at? Up to that viewport width, we can use `100vw` for the image’s `sizes` attribute to indicate the image takes up 100% of the viewport width. +2. What is the maximum width the container will reach? We can set that as a fixed `width` value for everything else. -If your answer to 1 was 700px and your answer to 2 was 800px, you can use the following `sizes` attribute: +If your answer to question 1 was 700px and your answer to question 2 was 800px, you can use the following `sizes` attribute: ```html ``` -> You'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. + +> We might think the browser could easily handle all these calculations based on the CSS. Unfortunately, browsers are eager to choose an image URL *before* style sheets are downloaded. So we have to do the calculations ourselves, and they deserve it if we don’t get it perfect. ===================== Content prompt used: @@ -51,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. Breakpoints e imágenes -2. Por qué algunos (pero no todos) los puntos de interrupción son importantes para tus imágenes +Metadata returned1. Puntos de quiebre e imágenes +2. ¿Por qué algunos puntos de quiebre (pero no todos) son importantes para tus imágenes? Roundtrip (isolated) prompt used: diff --git a/src/content/docs/es/_roundtrip_browser-picks-srcset.txt b/src/content/docs/es/_roundtrip_browser-picks-srcset.txt index 4443f64..934d0cf 100644 --- a/src/content/docs/es/_roundtrip_browser-picks-srcset.txt +++ b/src/content/docs/es/_roundtrip_browser-picks-srcset.txt @@ -1,44 +1,48 @@ --- -title: How browsers choose -description: How browsers choose between images listed in the srcset attribute -taskInputHash: 5d7773a8c6385fd7 +title: How the browser chooses +description: How the browser chooses between the images listed in the srcset attribute +taskInputHash: 78ffb2179558549b lang: en +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -How do browsers choose between images listed in the `srcset` attribute? Here we explain the steps, with examples for both width and density specifications, and how the browser decides according to the device and screen size. +How does the browser choose between the images listed in the `srcset` attribute? Here's a step-by-step guide, with 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 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 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 the width (using the `w` descriptor) or pixel density (using the `x` descriptor). We'll explain each case with examples. -1\. Width descriptor (`w`): +1. Width descriptor (`w`): -Suppose we have the following `srcset` attribute: +Assuming we have the following `srcset` attribute: ```html -Example Image +Example image ``` The browser will follow these steps: -a. Determine the DPR (Device Pixel Ratio) of the device. For example, a standard screen has a DPR of 1, while a high-resolution (Retina) screen has a DPR of 2 or higher. +a. Determine the DPR (Device Pixel Ratio). For example, a standard screen has a DPR of 1, while a high-resolution (Retina) screen has a DPR of 2 or 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: -- small-example.jpg: 400 * 1 = 400 pixels +- example-small.jpg: 400 * 1 = 400px + +- 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\. Pixel density descriptor (`x`): +2. Pixel density descriptor (`x`): -Suppose we have the following `srcset` attribute: +Assuming we have the following `srcset` attribute: ```html -Example Image +Example image ``` @@ -48,21 +52,22 @@ a. Determine the DPR (Device Pixel Ratio). For example, a standard screen has a b. Compare the device DPR with the `x` descriptors in the `srcset`. In this case, we have three images with the following descriptors: -- 1x-example.jpg: 1x +- example-1x.jpg: 1x -- 2x-example.jpg: 2x +- example-2x.jpg: 2x -- 3x-example.jpg: 3x +- example-3x.jpg: 3x -c. Choose the image with the `x` descriptor closest to the device DPR. For a device with a DPR of 1, the browser will select `1x-example.jpg`. For a device with a DPR of 2, it will choose `2x-example.jpg`, and so on. +c. Choose the image with the `x` descriptor that is closest to the device 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's important to note that the `sizes` attribute can also be used in combination with the `srcset` attribute to provide more information on how the image will be displayed at different viewport widths. This is particularly useful when using the width descriptor (`w`). Here's an example: ```html - ``` -This sample markup includes: +This markup example 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. +- **srcset**: The list of image sources and their density descriptors (1x, 2x, 3x). The browser will choose the most suitable image based on the user's 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 +55,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 & 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..2660650 100644 --- a/src/content/docs/es/_roundtrip_introduction.txt +++ b/src/content/docs/es/_roundtrip_introduction.txt @@ -1,41 +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 attributes of the tag +description: A concise, opinionated guide to responsive images for 2023 +taskInputHash: a764c357741581bc lang: en -ignore: '/* cSpell:locale es,en*/' sidebar_sort_priority: 1000 -date_published: '2023-03-23' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -**An efficient and opinionated guide to images for 2023** +**A concise, opinionated guide to responsive images 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 a more detailed explanation. This is a quick reference to update `` tags to be responsive to modern devices with their various resolutions and screen sizes. You should [know that pixels aren't equal](/en/pixels-not-pixels) and that `devicePixelRatio` is likely to be 3.875 rather than 1:1. Modern phones simulate having between 320 and 428 pixels wide for easier reading (in CSS pixels), but have several 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 regardless of how narrow the browser window gets, you should use [density descriptors](/en/density-descriptors) instead of what's shown below. This is often appropriate for logos, icons, and buttons. -Do you know your [breakpoints](/en/breakpoints)? You'll need those numbers to adjust the solution below — at minimum, the viewport width breakpoint where the main content area stops growing. +Do you know your [breakpoints](/en/breakpoints)? You'll need those numbers to adjust the solution shown below – at least the breakpoint for the viewport width where the main content area stops growing. -### The easy method -```html +### The Easy Way +```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 bike" /> + + + + ``` ===================== @@ -49,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 y tamaños de -2. Una guía eficiente y con opiniones sobre imágenes responsivas para 2023 +Metadata returned1. srcset y tamaños de la etiqueta +2. Una guía eficiente y con opinión 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..25fbf48 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: Testing Performance with Lighthouse +description: Steps on how to test a website's performance using Lighthouse +taskInputHash: f77d81584d57a9a3 lang: en -ignore: '/* cSpell:locale es,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -How to test the performance of your site with Lighthouse? +How do you test your 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 the performance, accessibility, and other aspects of a website. To test a 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). +> 2\. Click on the three dots in the upper right corner of the browser window, then select "More tools" and then "Developer tools" or simply use the keyboard shortcut "Ctrl+Shift+I" (Windows, Linux) or "Command+Option+I" (macOS). > -> 3\. In the Developer Tools panel, click on the Lighthouse icon located on the left side of the panel or press "Ctrl + Shift + P" (Windows, Linux) or "Command + Shift + P" (macOS) to open the command menu, type "Lighthouse", and select "Generate report". +> 3\. In the Developer tools panel, click on the Lighthouse icon located on the left side of the panel or press "Ctrl+Shift+P" (Windows, Linux) or "Command+Shift+P" (macOS) to open the Command menu, then type "Lighthouse" and select "Generate report". > > 4\. In the Lighthouse dialog box, select the performance and other relevant options you want to test, then click "Generate report". > > 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,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. Prueba de rendimiento con Lighthouse +Metadata returned1. Probar el rendimiento con Lighthouse 2. Pasos sobre cómo probar el rendimiento de un sitio web utilizando Lighthouse diff --git a/src/content/docs/es/_roundtrip_picture-examples.txt b/src/content/docs/es/_roundtrip_picture-examples.txt index 9103a02..edf9e19 100644 --- a/src/content/docs/es/_roundtrip_picture-examples.txt +++ b/src/content/docs/es/_roundtrip_picture-examples.txt @@ -1,13 +1,17 @@ --- 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: b566d36d33874c9e lang: en +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Here are some examples of using the `` element and their explanations: +Here are some examples of how to use the `` element and their explanations: -1. Example for responsive images: +1\. Example for responsive images: ```html @@ -17,9 +21,9 @@ Here are some examples of using the `` element and their explanations: ``` -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 an fallback option 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 @@ -29,9 +33,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 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 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: +3\. Example for different image formats: ```html @@ -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 fallback option for older browsers that do not support the `` element. ## Breakpoints -In responsive design, breakpoints are used to define when the layout of a website or application should change based on the size of the viewport. Breakpoints are typically defined using media queries in CSS, which apply different styles based on the screen width. These breakpoints can be used in conjunction with the `` element to provide different image sources for different screen sizes. +In responsive design, breakpoints are used to define when 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 use the "media" attribute to specify the screen width at which each source should be used. When the screen width is greater than or equal to 768 pixels, the `image-large.jpg` source will be used; when the screen width is greater than or equal to 480 pixels but less than 768 pixels, the `image-medium.jpg` source will be used; and when the screen width is less than 480 pixels, the `image-small.jpg` source will be used. This allows us to provide appropriately-sized images for each device, reducing page load time 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 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, responsive designs can be created that look great on any device. ===================== Content prompt used: @@ -64,8 +68,8 @@ Also carefully translate the title and description for the article; do not use & 1. Examples using element 2. Provides examples using the element, for responsive images, art direction and different image formats -Metadata returned1. Ejemplos utilizando el elemento -2. Proporciona ejemplos utilizando el elemento para imágenes responsivas, dirección de arte y diferentes formatos de imagen. +Metadata returned1. Ejemplos usando el elemento +2. Proporciona ejemplos usando el elemento para imágenes responsivas, dirección de arte y diferentes formatos de imagen. Roundtrip (isolated) prompt used: diff --git a/src/content/docs/es/_roundtrip_pixels-not-pixels.txt b/src/content/docs/es/_roundtrip_pixels-not-pixels.txt index 80ec2d2..b6fb9be 100644 --- a/src/content/docs/es/_roundtrip_pixels-not-pixels.txt +++ b/src/content/docs/es/_roundtrip_pixels-not-pixels.txt @@ -1,23 +1,22 @@ --- title: px ≠ pixels description: Device pixels ≠ browser pixels ≠ image pixels -taskInputHash: a6f6575dc9ddbf59 +taskInputHash: f879e185cc72444b lang: en -ignore: '/* cSpell:locale es,en*/' sidebar_sort_priority: 900 -date_published: '2023-03-26' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -### Device Pixels ≠ Browser Pixels ≠ Image Pixels +### Device pixels ≠ browser 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 correspond to multiple device/printer pixels**. The devicePixelRatio of 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 of my desktop changes with the browser zoom, but by default it's at 1.5 (since my `System > Display > Scale` is set to 150%). -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 hard to get the image pixels to map perfectly 1:1 with device pixels, but with `srcset`, you can get close enough**, and with a little bit of Javascript, you can adjust the size of your HTML element after load if you really have a justified need for that perfect mapping, though such dark arts 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 at 96 dpi. Developers avoid absolute units because it's generally better to use units that derive from the font-size or from viewport/container dimensions. Absolute units can break a layout if the user adjusts their `Accessibility > Text size` multiplier, zooms their browser, or rotates their device. Needless to say, you should do all these things before launching your site. ===================== Content prompt used: @@ -31,7 +30,7 @@ Also carefully translate the title and description for the article; do not use & 2. Device px ≠ browser px ≠ image px Metadata returned1. px ≠ píxeles -2. Píxeles de dispositivo ≠ píxeles del navegador ≠ píxeles de imagen +2. Píxeles de dispositivo ≠ px de navegador ≠ px 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..5bd59c5 100644 --- a/src/content/docs/es/_roundtrip_specify-width-height.txt +++ b/src/content/docs/es/_roundtrip_specify-width-height.txt @@ -1,21 +1,21 @@ --- -title: Use Width and Height Attributes +title: Using Width and Height Attributes description: Benefits of using width and height attributes in HTML code -taskInputHash: c1840d188c21b829 +taskInputHash: 3a697d0f6acf5385 lang: en -ignore: '/* cSpell:locale es,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- +Why should you use width and height in HTML? -Why should you use width and height in HTML? +> It is 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, preventing content from shifting around while the image loads. +> +> Additionally, specifying width and height attributes for images can also improve the overall performance of the webpage. When a browser knows the size of an image ahead of time, it can more accurately calculate the amount of space needed to display the image and avoid unnecessary reflow or repaint of the 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'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. +{{No issues found.}} ===================== Content prompt used: @@ -28,8 +28,8 @@ Also carefully translate the title and description for the article; do not use & 1. Use width and height 2. Benefits of using width and height attributes in HTML code -Metadata returned1. Usa ancho y altura -2. Beneficios de usar los atributos de ancho y altura en el código HTML +Metadata returned1. Usar el ancho y el alto +2. Beneficios de utilizar los atributos de ancho y alto en el código HTML Roundtrip (isolated) prompt used: diff --git a/src/content/docs/es/_roundtrip_when-to-use-picture.txt b/src/content/docs/es/_roundtrip_when-to-use-picture.txt index 088b3f2..a59d8b3 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,25 @@ --- -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 what situations the element should be used +taskInputHash: 51d7f5ab633e52ac lang: en -ignore: '/* cSpell:locale es,en*/' -date_published: '2023-03-27' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -The `picture` element is used to provide multiple versions of an image and determine which version of the image to display based on certain conditions. It is particularly useful for optimizing images for different screen sizes and resolutions, and is commonly used in responsive web design. +The `picture` element is used to 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: +Here are some specific scenarios in which 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 images can appear blurry or pixelated if they are not optimized for high resolution. With the `picture` element, you can provide a version of the image that has twice the pixels of the normal version, so it appears sharp and clear on Retina displays. +* **Retina displays:** High-density displays such as Apple's retina displays have a higher pixel density, meaning 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 it appears clear and sharp on retina displays. * **Different aspect ratios:** If you're designing a site that needs to display images with different aspect ratios (such as landscape vs. portrait), you can use the `picture` element to provide different versions of the image that are optimized for each aspect ratio. * **Bandwidth limitations:** Images can be large files that take up a lot of bandwidth, especially on mobile devices. With the `picture` element, you can provide smaller versions of the image for devices with smaller screens or slower internet connections, which can help reduce page load times. -* **Art-directed layouts:** Sometimes you may want to present an image in a certain way based on the design of the rest of the page. For example, you may want to show a close-up of a person's face on mobile devices, but a wider shot on desktop devices. The `picture` element allows you to provide different versions of the image that are optimized for different layouts. +* **Art-directed 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 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. +Overall, the `picture` element is a powerful tool that can help you optimize your images for a variety of use cases and ensure they look great no matter what device or screen size they're being viewed on. ===================== Content prompt used: @@ -33,8 +32,8 @@ Also carefully translate the title and description for the article; do not use & 1. When to use element 2. Explains in which situations you should use the element -Metadata returned1. 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 se debe 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..0da088a 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: 57ff1c28d63c24f5 lang: en -ignore: '/* cSpell:locale es,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- Understanding Width (`w`) and Density (`x`) Descriptors in `srcset`. Use examples and Markdown. -> `srcset` is an HTML attribute that allows developers to provide multiple sources of images with different resolutions or pixel densities, and allow the browser to select the appropriate image based on the display characteristics of the device. The `srcset` attribute uses a combination of the `URL` and `w` or `x` descriptors to specify the images. +> `Srcset` is an HTML attribute that allows developers to provide multiple image sources with varying resolutions or pixel densities, and allows the browser to select the appropriate image based on the display characteristics of the device. The `srcset` attribute uses a combination of URLs and either `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's used when we want to provide the browser with the dimensions of an image so it can choose the appropriate image for the available screen space. > The syntax for using the `w` descriptor in `srcset` is as follows: @@ -23,14 +22,14 @@ 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 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 above example, we've provided the browser with three images and their corresponding widths in pixels. The browser will select the image with the width that's 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's used when we want to provide the browser with different versions of the same image with varying pixel densities. > The syntax for using the `x` descriptor in `srcset` is as follows: @@ -39,12 +38,12 @@ 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 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 above example, we've provided the browser with three images and their corresponding pixel densities. The browser will select the image with the pixel density that's closest to the device's display. -> It is important to note that `w` and `x` descriptors can be used together in the same `srcset` attribute to provide the browser with more options to choose from. +> Note that the `w` and `x` descriptors can be used together in the same `srcset` attribute to provide the browser with even more options to choose from. ===================== Content prompt used: diff --git a/src/content/docs/es/breakpoints.md b/src/content/docs/es/breakpoints.md index fe98f82..5290a94 100644 --- a/src/content/docs/es/breakpoints.md +++ b/src/content/docs/es/breakpoints.md @@ -1,43 +1,42 @@ --- -title: Breakpoints e imágenes +title: Puntos de quiebre e imágenes description: >- - Por qué algunos (pero no todos) los puntos de interrupción son importantes - para tus imágenes -taskInputHash: cc4be952df3fef63 + ¿Por qué algunos puntos de quiebre (pero no todos) son importantes para tus + imágenes? +taskInputHash: d63995938314e702 lang: es -ignore: '/* cSpell:locale es,en*/' -date_published: '2023-03-26' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- ### Antecedentes -Las pantallas pequeñas y los monitores grandes necesitan diseños diferentes. Para el propósito de `srcset` y `sizes`, necesitamos saber en qué punto cambia el diseño. +Pantallas pequeñas y grandes requieren diseños diferentes. Con el fin de utilizar `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é encoger, ocultar o reubicar en pantallas más pequeñas, o más comúnmente, qué expandir, revelar o agregar en pantallas más grandes. Además, tienen muy poca información. ¿El usuario está en un tablet o un teléfono en modo horizontal, o en una ventana de navegador pequeña? -Tenemos que elegir un ancho de viewport arbitrario donde cambie el diseño. Esto se llama un **punto de interrupción**. Es un número arbitrario de píxeles CSS ([no píxeles de dispositivo](/es/pixeles-no-pixeles)). Polypane tiene un [gran artículo](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023) sobre los puntos de interrupción utilizados comúnmente. +Tenemos que elegir un ancho de viewport arbitrario donde se produce el cambio de diseño. Esto se llama **punto de quiebre**. Es un número arbitrario de píxeles CSS ([no píxeles de dispositivo](/es/pixels-not-pixels)). Polypane tiene un [gran artículo](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023) sobre los puntos de quiebre comúnmente utilizados. -Algunas imágenes (como logotipos, iconos o botones) podrían ser inmunes a los cambios de diseño causados por estos puntos de interrupción (y estar bien con [descriptores de densidad de srcset](/es/descriptores-de-densidad)). +Algunas imágenes (como logotipos, iconos o botones) podrían ser inmunes a los cambios de diseño provocados por estos puntos de quiebre (y estar bien con los [descriptores de densidad srcset](/es/density-descriptors)). -Las imágenes del contenido principal estarán limitadas por el tamaño de su contenedor. Por lo general, el área de contenido principal de una página se limitará a un ancho determinado en las pantallas más grandes, un `max-width`, pero en las pantallas pequeñas, el área de contenido principal llenará todo el viewport. +Las imágenes de contenido principal estarán limitadas por el tamaño de su contenedor. Por lo general, la zona de contenido principal de una página se limitará a un ancho determinado en las pantallas más grandes, un `max-width`, pero en pantallas pequeñas la zona de contenido principal ocupará todo el viewport. -Si tiene más de una columna en algunos puntos de interrupción, será más difícil calcular las reglas de tamaño efectivas, ya que el porcentaje del ancho de viewport que ocupa la imagen cambiará. +Si tienes más de una columna en algunos puntos de quiebre, será más difícil calcular las reglas de dimensionamiento efectivas, ya que el porcentaje del ancho del viewport que ocupa la imagen 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: +Dicho esto, no te obsesiones con esto. Es muy probable que estés bien con la siguiente aproximación: -1. ¿A qué tamaño el columna principal (o el contenedor de la imagen) deja de crecer? Hasta ese ancho de viewport, podemos usar `100vw` para el atributo `sizes` de la imagen para indicar que la imagen ocupa el 100% del ancho del viewport. -2. ¿Cuál es el ancho máximo que el contenedor jamás alcanza? Podemos fijar eso como una `width` fija para todo lo demás. +1. ¿A qué tamaño deja de crecer la columna principal (o el contenedor de la imagen)? Hasta ese ancho de viewport, podemos usar `100vw` para el atributo `sizes` de la imagen para indicar que la imagen ocupa el 100% del ancho del viewport. +2. ¿Cuál es el ancho máximo que alcanzará el contenedor? Podemos establecer eso como un valor fijo de `width` 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 la pregunta 1 fue 700px y tu respuesta a la pregunta 2 fue 800px, puedes utilizar el siguiente atributo `sizes`: ```html - + ``` -> 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. +> Podríamos pensar que el navegador podría manejar fácilmente todos estos cálculos en función del 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 se lo merecen si no lo hacemos perfecto. diff --git a/src/content/docs/es/browser-picks-srcset.md b/src/content/docs/es/browser-picks-srcset.md index 5236618..99d38c7 100644 --- a/src/content/docs/es/browser-picks-srcset.md +++ b/src/content/docs/es/browser-picks-srcset.md @@ -1,16 +1,15 @@ --- title: Cómo el navegador elige -description: Cómo el navegador elige entre imágenes listadas en el atributo srcset -taskInputHash: 49304fce4ac555da +description: Cómo el navegador elige entre las imágenes listadas en el atributo srcset +taskInputHash: 78ffb2179558549b lang: es -ignore: '/* cSpell:locale es,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -¿Cómo el navegador elige entre las imágenes listadas en el atributo `srcset`? Aquí hay un paso a paso, con ejemplos para especificaciones tanto de ancho como de densidad y cómo decide el navegador en función del dispositivo y el tamaño de la ventana gráfica. +¿Cómo elige el navegador entre las imágenes listadas en el atributo srcset? Aquí hay un paso a paso, con ejemplos para especificaciones tanto de ancho como de densidad y cómo el navegador decide según el dispositivo y el viewport. -- Al usar el atributo `srcset` en HTML, el navegador utiliza un conjunto de reglas para elegir la imagen más apropiada de una lista de fuentes proporcionadas. Estas reglas dependen tanto de las características de la pantalla del dispositivo (resolución, densidad de píxeles), como del tamaño de la ventana gráfica. El atributo `srcset` te permite especificar diferentes imágenes según el ancho (usando el descriptor `w`) o la densidad de píxeles (usando el descriptor `x`). Repasemos cada caso con ejemplos. +- Al usar el atributo `srcset` en HTML, el navegador 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 visualización del dispositivo (resolución, densidad de píxeles) como del tamaño del viewport. El atributo `srcset` le permite especificar diferentes imágenes según el ancho (usando el descriptor `w`) o la densidad de píxeles (usando el descriptor `x`). Vamos a explicar cada caso con ejemplos. 1\. Descriptor de ancho (`w`): @@ -18,23 +17,23 @@ Supongamos que tenemos el siguiente atributo `srcset`: ```html -Ejemplo de imagen +Imagen de ejemplo ``` -El navegador seguirá los siguientes pasos: +El navegador seguirá estos pasos: -a. Determina la DPR (Relación de píxeles del dispositivo) del dispositivo. Por ejemplo, una pantalla estándar tiene una DPR de 1, mientras que una pantalla de alta resolución (Retina) tiene una DPR de 2 o más. +a. Determine el DPR (Relación de píxeles del dispositivo). Por ejemplo, una pantalla estándar tiene un DPR de 1, mientras que una pantalla de alta resolución (Retina) tiene un DPR de 2 o superior. -b. Calcula el ancho efectivo para cada imagen en `srcset`. Multiplica el descriptor de ancho por la DPR. Para un dispositivo con una DPR de 1: +b. Calcule el ancho efectivo para cada imagen en el `srcset`. Multiplique el descriptor de ancho por el DPR. Para un dispositivo con un DPR de 1: -- example-small.jpg: 400 \* 1 = 400px +- ejemplo-pequeño.jpg: 400 \* 1 = 400px -- example-medium.jpg: 800 \* 1 = 800px +- ejemplo-mediano.jpg: 800 \* 1 = 800px -- example-large.jpg: 1600 \* 1 = 1600px +- ejemplo-grande.jpg: 1600 \* 1 = 1600px -c. Compara los anchos efectivos con el ancho de la ventana gráfica (viewport). Supongamos que el ancho de la ventana gráfica es de 420px. El navegador elegirá la imagen más pequeña con un ancho efectivo mayor o igual al ancho de la ventana gráfica. En este caso, seleccionará `example-medium.jpg`. +c. Compare los anchos efectivos con el ancho del viewport. Supongamos que el ancho del viewport es de 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á `ejemplo-mediano.jpg`. 2\. Descriptor de densidad de píxeles (`x`): @@ -42,28 +41,28 @@ Supongamos que tenemos el siguiente atributo `srcset`: ```html -Ejemplo de imagen +Imagen de ejemplo ``` -El navegador seguirá los siguientes pasos: +El navegador seguirá estos pasos: -a. Determina la DPR (Relación de píxeles de dispositivo) del dispositivo. Por ejemplo, una pantalla estándar tiene una DPR de 1, mientras que una pantalla de alta resolución (Retina) tiene una DPR de 2 o más. +a. Determine el DPR (Relación de píxeles del dispositivo). Por ejemplo, una pantalla estándar tiene un DPR de 1, mientras que una pantalla de alta resolución (Retina) tiene un DPR de 2 o superior. -b. Compara la DPR del dispositivo con los descriptores `x` en `srcset`. En este caso, tenemos tres imágenes con los siguientes descriptores: +b. Compare el DPR del dispositivo con los descriptores `x` en el `srcset`. En este caso, tenemos tres imágenes con los siguientes descriptores: -- example-1x.jpg: 1x +- ejemplo-1x.jpg: 1x -- example-2x.jpg: 2x +- ejemplo-2x.jpg: 2x -- example-3x.jpg: 3x +- ejemplo-3x.jpg: 3x -c. Elige la imagen con el descriptor `x` que se acerque más a la DPR del dispositivo. Para un dispositivo con una DPR de 1, el navegador seleccionará `example-1x.jpg`. Para un dispositivo con una DPR de 2, elegirá `example-2x.jpg`, y así sucesivamente. +c. Elija la imagen con el descriptor `x` que esté más cerca del DPR del dispositivo. Para un dispositivo con un DPR de 1, el navegador elegirá `ejemplo-1x.jpg`. Para un dispositivo con un DPR de 2, elegirá `ejemplo-2x.jpg`, y así sucesivamente. -Es importante tener en cuenta que también se puede utilizar el atributo `sizes` en combinación con el atributo `srcset` para proporcionar más información sobre cómo se mostrará la imagen en diferentes anchos de ventana gráfica. Esto es particularmente útil cuando se utiliza el descriptor de anchura (`w`). Aquí hay un ejemplo: +Es importante tener en cuenta que también 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 -Una imagen de ejemplo ``` + + Este ejemplo de marcado incluye: -- **src**: La fuente de imagen predeterminada, se muestra si el navegador no admite srcset. -- **srcset**: La lista de fuentes de imagen y sus descriptores de densidad (1x, 2x, 3x). El navegador elegirá la imagen más adecuada según la pantalla del usuario. +- **src**: La fuente de imagen predeterminada, que se muestra si el navegador no admite srcset. +- **srcset**: La lista de fuentes de imágenes y sus descriptores de densidad (1x, 2x, 3x). El navegador elegirá la imagen más adecuada en función de la pantalla del usuario. - **alt**: Una descripción de la imagen con fines de accesibilidad. -¡Y eso es todo! Ha implementado con éxito srcset con descriptores de densidad, mejorando el rendimiento y la experiencia del usuario de su sitio web. +¡Eso es todo! Has implementado correctamente srcset con descriptores de densidad, mejorando el rendimiento y la experiencia del usuario en tu sitio web. diff --git a/src/content/docs/es/introduction.md b/src/content/docs/es/introduction.md index a374792..df7c015 100644 --- a/src/content/docs/es/introduction.md +++ b/src/content/docs/es/introduction.md @@ -1,22 +1,22 @@ --- -title: srcset y tamaños de -description: Una guía eficiente y con opiniones sobre imágenes responsivas para 2023 -taskInputHash: c0bfd3a988eb464d +title: srcset y tamaños de la etiqueta +description: Una guía eficiente y con opinión sobre imágenes responsivas para 2023 +taskInputHash: a764c357741581bc lang: es -ignore: '/* cSpell:locale es,en*/' sidebar_sort_priority: 1000 -date_published: '2023-03-23' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -**Una guía eficiente y con opiniones sobre imágenes para 2023** +**Una guía eficiente y con opinión sobre imágenes para 2023** -Consulte la barra lateral para obtener información detallada. Esta es la referencia rápida para actualizar las etiquetas `` y manejar los dispositivos modernos en todas sus diferentes tamaños y densidades de píxeles. Debe [saber que los píxeles no son iguales](/es/pixels-not-pixels) y que `devicePixelRatio` es más probable que esté alrededor de 3,875 en lugar de 1:1. Los teléfonos modernos fingen tener 320-428 píxeles de ancho para la legibilidad (en píxeles CSS), pero tienen muchos píxeles de dispositivo por píxel CSS. +Revisa la barra lateral para obtener una explicación más detallada. Esta es una referencia rápida para actualizar las etiquetas `` y hacer que se adapten a los dispositivos modernos con sus diversas resoluciones y tamaños de pantalla. Deberías [saber que los píxeles no son iguales](/es/pixels-not-pixels) y que `devicePixelRatio` es probable que sea 3,875 en lugar de 1:1. Los teléfonos modernos simulan tener entre 320 y 428 píxeles de ancho para que la lectura sea más sencilla (en píxeles CSS), pero tienen varios píxeles de dispositivo por píxel CSS. + +> Si tu imagen nunca cambia de tamaño, sin importar lo estrecha que sea la ventana del navegador, deberías usar [descriptores de densidad](/es/density-descriptors) en lugar de lo que aparece a continuación. Esto a menudo es adecuado para logos, iconos y botones. + +¿Sabes cuáles son tus [puntos de quiebre](/es/breakpoints)? Necesitarás esos números para ajustar la solución que aparece a continuación, al menos el punto de quiebre del ancho del viewport donde el área de contenido principal deja de crecer. -> Si su imagen nunca cambia de tamaño, no importa cuán estrecha haga la ventana del navegador, debe utilizar un [descriptor de densidad](/es/density-descriptors). Esto a menudo es adecuado para logotipos, iconos y botones. -¿Sabe cuáles son sus [puntos de interrupción](/es/breakpoints)? Necesitará esos números para ajustar la solución a continuación, como mínimo, el punto de interrupción del ancho del viewport donde el área de contenido principal deja de crecer. - ### El método fácil ```html @@ -28,12 +28,11 @@ Consulte la barra lateral para obtener información detallada. Esta es la refere img.jpg?format=webp&w=1600 1600w, img.jpg?format=webp&w=2000 2000w" - sizes="(max-width: 700px) 100vw, 800px" alt="Perro montando en bicicleta" /> + sizes="(max-width: 700px) 100vw, 800px" alt="Perro montando bicicleta" /> - - + ``` diff --git a/src/content/docs/es/lighthouse-performance-test.md b/src/content/docs/es/lighthouse-performance-test.md index 823fd93..44f251e 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 +title: Probar el rendimiento con Lighthouse description: Pasos sobre cómo probar el rendimiento de un sitio web utilizando Lighthouse -taskInputHash: d6d69f5336f685c3 +taskInputHash: f77d81584d57a9a3 lang: es -ignore: '/* cSpell:locale es,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -¿Cómo se prueba el rendimiento del sitio con Lighthouse? +¿Cómo se prueba el rendimiento de tu 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: > -> 1\. Abre el navegador web Google Chrome y navega hasta la página que deseas probar. +> 1\. Abre el navegador web Google Chrome y dirígete a la página que deseas probar. > -> 2\. Haz clic en los tres puntos en la esquina superior derecha de la ventana del navegador, luego selecciona "Más herramientas" y luego "Herramientas de desarrollador" o usa simplemente el atajo del teclado "Ctrl + Shift + I" (Windows, Linux) o "Command + Option + I" (macOS). +> 2\. Haz clic en los tres puntos de la esquina superior derecha de la ventana del navegador, luego selecciona "Más herramientas" y luego "Herramientas de desarrollo" o simplemente usa 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 de desarrollo, 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 Comando, luego escribe "Lighthouse" y selecciona "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, selecciona el rendimiento y otras opciones relevantes que deseas probar, luego haz clic en "Generar informe". > -> 5\. Después de que Lighthouse complete su análisis, verás un informe con puntuaciones y recomendaciones para mejorar el rendimiento, accesibilidad y otras áreas de tu sitio web. +> 5\. Después de que Lighthouse complete su análisis, verás un informe con puntuaciones y recomendaciones para mejorar el rendimiento, la accesibilidad y otras áreas de tu sitio web. > -> Siguiendo estos pasos, puedes utilizar Lighthouse para probar y optimizar el rendimiento de tu sitio web, lo que puede ayudar a mejorar la experiencia de usuario y los rankings de los motores de búsqueda. +> Siguiendo estos pasos, puedes utilizar Lighthouse para probar y optimizar el rendimiento de tu sitio web, lo que puede ayudar a mejorar la experiencia del usuario y el posicionamiento en los motores de búsqueda. diff --git a/src/content/docs/es/picture-examples.md b/src/content/docs/es/picture-examples.md index 2d49689..af8253a 100644 --- a/src/content/docs/es/picture-examples.md +++ b/src/content/docs/es/picture-examples.md @@ -1,18 +1,17 @@ --- title: Ejemplos usando el elemento description: >- - Proporciona ejemplos utilizando el elemento , para imágenes - responsivas, dirección de arte y diferentes formatos de imagen. -taskInputHash: 6db4516ee45090eb + Proporciona ejemplos usando el elemento para imágenes responsivas, + dirección de arte y diferentes formatos de imagen. +taskInputHash: b566d36d33874c9e lang: es -ignore: '/* cSpell:locale es,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- Aquí hay algunos ejemplos de cómo usar el elemento `` y sus explicaciones: -1\. Ejemplo para imágenes responsivas: +1\. Ejemplo de imágenes responsivas: ```html @@ -22,9 +21,9 @@ Aquí hay algunos ejemplos de cómo usar el elemento `` y sus explicaci ``` -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 imágenes para diferentes tamaños de pantalla. Los elementos `` especifican las diferentes fuentes de imagen usando el atributo "scrset" y el atributo "media" para especificar las condiciones bajo las cuales se debe utilizar cada fuente. El elemento `` se utiliza como una opción alternativa para navegadores antiguos o cuando no se cumplen las condiciones especificadas en los elementos ``. -2\. Ejemplo para dirección de arte: +2\. Ejemplo para la dirección de arte: ```html @@ -34,7 +33,7 @@ Explicación: En este ejemplo, el elemento `` se utiliza para proporcio ``` -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 dependiendo de 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 de retrato. 3\. Ejemplo para diferentes formatos de imagen: @@ -48,12 +47,12 @@ Explicación: En este ejemplo, el elemento `` se utiliza para proporcio ``` -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, se utiliza el elemento `` para proporcionar diferentes fuentes de imágenes para diferentes formatos de imagen. Los elementos `` especifican diferentes fuentes de imagen usando el atributo "srcset" y el atributo "type" para especificar el formato de imagen. El elemento `` se utiliza como opción alternativa para navegadores antiguos que no admiten el elemento ``. -## Puntos de quiebre +## Breakpoints -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, los breakpoints se utilizan para definir cuándo el diseño de un sitio web o aplicación debe cambiar según el tamaño del viewport. Los breakpoints se definen típicamente mediante consultas de medios en CSS, que aplican diferentes estilos según el ancho de la pantalla. Estos breakpoints se pueden usar en conjunción 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 en el que se debe usar cada fuente. Cuando el ancho de la pantalla es mayor o igual a 768 píxeles, se utilizará la fuente `image-large.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 `image-medium.jpg`; y cuando el ancho de la pantalla es menor que 480 píxeles, se utilizará la fuente `image-small.jpg`. Esto nos permite ofrecer imágenes de tamaño adecuado para cada dispositivo, reduciendo el tiempo de carga de la página 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 breakpoints se pueden definir en cualquier tamaño de pantalla y se pueden usar múltiples breakpoints para crear diseños que respondan a una amplia gama de dispositivos. Al combinar breakpoints con el elemento ``, se pueden crear diseños flexibles y responsivos que luzcan 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..6b5f6f8 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 ≠ px de navegador ≠ px de imagen +taskInputHash: f879e185cc72444b lang: es -ignore: '/* cSpell:locale es,en*/' sidebar_sort_priority: 900 -date_published: '2023-03-26' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -### Píxeles de dispositivo ≠ píxeles del navegador ≠ píxeles de imagen +### Píxeles del dispositivo ≠ px del navegador ≠ px de la 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 corresponden con 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/) -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 de mi escritorio cambia con el zoom del navegador, pero por defecto está en 1,5 (ya que mi `Sistema > Pantalla > Escala` es del 150 %). -Los archivos de imagen (excluyendo SVG) se decodifican a una cuadrícula de píxeles. **Es molestoamente difícil obtener que los píxeles de la imagen se muestren perfectamente a una relación 1:1 con los píxeles de dispositivo -pero con `srcset` puedes llegar lo *suficientemente* cerca**, y un poco de Javascript puede ajustar el tamaño del elemento html después de la carga si realmente tienes razones justificadas para necesitar ese mapeo perfecto, aunque dichas artes prohibidas no serán reveladas aquí. +Los archivos de imagen (excluyendo SVG) se decodifican en una cuadrícula de píxeles. **Es molestomente difícil hacer que los píxeles de la imagen se muestren perfectamente en una relación de 1:1 con los píxeles del dispositivo - pero con `srcset` puedes llegar a *lo suficientemente cerca***, y con un poco de Javascript puedes ajustar el tamaño del elemento HTML después de la carga si realmente tienes razones justificadas para necesitar ese mapeo perfecto, aunque tales artes prohibidos no serán revelados aquí. -> Otras unidades absolutas [unidades (in, pc, pt, mm, cm, Q)](https://developer.mozilla.org/es/docs/Web/CSS/length) se definen en términos del número de píxeles CSS y pretenden que todo sea de 96 ppp. Los desarrolladores evitan las unidades absolutas porque generalmente es mejor utilizar unidades derivadas del tamaño de fuente o de las dimensiones del viewport/contenedor. Las unidades incompatibles pueden romper una disposición si el usuario ajusta el multiplicador de `Accesibilidad > Tamaño de texto`, acerca el navegador, o rota su dispositivo. Cabe decir que debes hacer todas estas cosas antes de lanzar tu sitio. +> Otras unidades absolutas [in, pc, pt, mm, cm, Q)](https://developer.mozilla.org/es/docs/Web/CSS/length) se definen en términos del número de píxeles CSS y pretenden que todo es de 96 ppp. Los desarrolladores evitan las unidades absolutas porque generalmente es mejor utilizar unidades que se derivan del tamaño de fuente o de las dimensiones del viewport o contenedor. Las unidades desajustadas pueden romper un diseño si el usuario ajusta su multiplicador de `Accesibilidad > Tamaño del texto`, acerca o aleja el navegador o rota su dispositivo. Innecesario decir que deberías hacer todas estas cosas antes de lanzar tu sitio. diff --git a/src/content/docs/es/specify-width-height.md b/src/content/docs/es/specify-width-height.md index 74d5c12..553cbce 100644 --- a/src/content/docs/es/specify-width-height.md +++ b/src/content/docs/es/specify-width-height.md @@ -1,17 +1,16 @@ --- -title: Usa ancho y altura -description: Beneficios de usar los atributos de ancho y altura en el código HTML -taskInputHash: c1840d188c21b829 +title: Usar el ancho y el alto +description: Beneficios de utilizar los atributos de ancho y alto en el código HTML +taskInputHash: 3a697d0f6acf5385 lang: es -ignore: '/* cSpell:locale es,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -¿Por qué deberías poner ancho y altura en el HTML? +¿Por qué deberías poner el ancho y alto en el HTML? -> Se recomienda poner los atributos de ancho y altura en el código HTML de las imágenes porque ayuda al navegador web a conocer el tamaño de la imagen antes de que se cargue por completo. Esto permite al navegador reservar la cantidad apropiada de espacio en la página web para la imagen, lo que evita que el contenido salte mientras se carga la imagen. +> Se recomienda poner los atributos de ancho y alto en el código HTML para imágenes porque ayuda al navegador web a conocer el tamaño de la imagen antes de que se cargue por completo. Esto permite que el navegador reserve la cantidad adecuada de espacio en la página web para la imagen, lo que evita que el contenido se desplace 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 alto para las imágenes también puede ayudar a mejorar el rendimiento general de la página web. Cuando un navegador conoce el tamaño de una imagen de antemano, puede calcular con mayor precisión la cantidad de espacio necesaria para mostrar la imagen y evitar reflujo o repintado innecesario del contenido a medida que 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 alto en el código HTML para imágenes puede mejorar la experiencia del usuario al hacer que el contenido se cargue más rápido y reducir las fallas visuales. diff --git a/src/content/docs/es/when-to-use-picture.md b/src/content/docs/es/when-to-use-picture.md index 2c26e07..8f89eb6 100644 --- a/src/content/docs/es/when-to-use-picture.md +++ b/src/content/docs/es/when-to-use-picture.md @@ -1,23 +1,21 @@ --- -title: Cuándo usar el elemento -description: Explica en qué situaciones se debe usar el elemento -taskInputHash: 97265d75f3229eaa +title: Cuándo utilizar el elemento +description: Explica en qué situaciones se debe utilizar el elemento +taskInputHash: 51d7f5ab633e52ac lang: es -ignore: '/* cSpell:locale es,en*/' -date_published: '2023-03-27' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -El elemento `picture` se utiliza para proporcionar múltiples versiones de una imagen y determina cuál versión de la imagen mostrar en función de ciertas condiciones. Es particularmente útil para optimizar imágenes para diferentes tamaños de pantalla y resoluciones, y se utiliza comúnmente en diseño web adaptable. +El elemento `picture` se utiliza para proporcionar múltiples versiones de una imagen y determinar qué versión de la imagen mostrar según ciertas condiciones. Es particularmente útil para optimizar las imágenes para diferentes tamaños y resoluciones de pantalla, y es comúnmente utilizado en diseño web receptivo. +Aquí hay algunos escenarios específicos en los que es posible que desee utilizar el elemento `picture`: -Aquí hay algunos escenarios específicos donde podría querer utilizar el elemento `picture`: +* **Pantallas retina:** Las pantallas de alta densidad como las pantallas retina de Apple tienen una mayor densidad de píxeles, lo que significa que las imágenes pueden 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, para que se vea clara y nítida en las pantallas retina. -* **Pantallas Retina:** Las pantallas de alta densidad como las pantallas Retina de Apple tienen una mayor densidad de píxeles, lo que significa que las imágenes pueden verse borrosas o pixeladas si no se optimizan para una resolución alta. Con el elemento `picture`, puede proporcionar una versión de la imagen que tiene el doble de píxeles que la versión normal, para que se vea nítida y clara en las pantallas Retina. +* **Diferentes relaciones de aspecto:** Si está diseñando un sitio que necesita 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 debe mostrar imágenes con diferentes relaciones de aspecto (como paisaje vs. retrato), puede utilizar el elemento `picture` para proporcionar diferentes versiones de la imagen que estén optimizadas para cada relación de aspecto. +* **Limitaciones de ancho de banda:** Las imágenes pueden ser archivos grandes que ocupan mucho ancho de banda, especialmente en dispositivos móviles. Con el elemento `picture`, 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. -* **Limitaciones de ancho de banda:** Las imágenes pueden ser archivos grandes que ocupan mucho ancho de banda, especialmente en dispositivos móviles. Con el elemento `picture`, puede proporcionar versiones más pequeñas de la imagen para dispositivos con pantallas más pequeñas o conexiones de Internet más lentas, lo que puede ayudar a reducir los tiempos de carga de la página. +* **Diseños dirigidos por arte:** A veces, es posible que desee presentar una imagen de una cierta manera dependiendo del diseño del resto de la página. Por ejemplo, es posible que desee mostrar un primer plano de la cara 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 diseños diferentes. -* **Diseños dirigidos por arte:** A veces puede desear presentar una imagen de cierta manera según el diseño del resto de la página. Por ejemplo, puede querer mostrar un primer plano del rostro de una persona en dispositivos móviles, pero una toma más amplia en dispositivos de escritorio. El elemento `picture` le permite proporcionar diferentes versiones de la imagen que estén optimizadas para diferentes diseños. - -En general, el elemento `picture` es una herramienta poderosa que puede ayudarlo a optimizar sus imágenes para una variedad de casos de uso y asegurarse de que se vean geniales sin importar en qué dispositivo o tamaño de pantalla se estén viendo. +En general, el elemento `picture` es una herramienta poderosa que puede ayudarlo a optimizar sus imágenes para una variedad de casos de uso y garantizar que se vean geniales sin importar en qué dispositivo o tamaño de pantalla se estén viendo. diff --git a/src/content/docs/es/width-density.md b/src/content/docs/es/width-density.md index 123cd3f..e5c483c 100644 --- a/src/content/docs/es/width-density.md +++ b/src/content/docs/es/width-density.md @@ -1,47 +1,46 @@ --- title: Descriptores de ancho y densidad description: Ejemplos de uso de descriptores de ancho y densidad en `srcset` -taskInputHash: 74b8eb2869d948a0 +taskInputHash: 57ff1c28d63c24f5 lang: es -ignore: '/* cSpell:locale es,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Entendiendo los descriptores de ancho (w) y densidad (x) en `srcset`. Usa ejemplos y Markdown. +Entendiendo los descriptores de ancho (`w`) y densidad (`x`) en `srcset`. Usa ejemplos y usa 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 imagen con diferentes resoluciones o densidades de píxeles, y permitir que el navegador seleccione la imagen adecuada según 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. -> 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`) -> La sintaxis para utilizar el descriptor `w` en `srcset` es la siguiente: +> El descriptor `w` se utiliza para especificar el ancho de una imagen en píxeles. Se utiliza cuando queremos proporcionar al navegador las dimensiones de una imagen para que pueda elegir la imagen adecuada para el espacio de pantalla disponible. + +> La sintaxis para usar el descriptor `w` en `srcset` es la siguiente: ```html Ejemplo de Imagen + alt="Ejemplo de imagen"> ``` +> En el ejemplo anterior, hemos proporcionado al navegador tres imágenes y sus correspondientes anchuras en píxeles. El navegador seleccionará la imagen con el ancho más cercano al espacio de pantalla disponible. -> 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: +> La sintaxis para usar el descriptor `x` en `srcset` es la siguiente: ```html 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. +> Ten en cuenta que los descriptores `w` y `x` se pueden usar 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..47adae1 100644 --- a/src/content/docs/fr/_roundtrip_breakpoints.txt +++ b/src/content/docs/fr/_roundtrip_breakpoints.txt @@ -1,43 +1,44 @@ --- title: Breakpoints and Images description: >- - Why some breakpoints (but not all) matter for your images -taskInputHash: b9dc6c0d27d7c8b7 + Why some (but not all) breakpoints are important for your images +taskInputHash: 3a845882fe3c1d34 lang: en -ignore: '/* cSpell:locale fr,en*/' -date_published: '2023-03-26' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- ### Context -Small screens and large monitors require different layouts. For the needs of `srcset` and `sizes`, we need to know when the layout changes. +Small and large screens require different layouts. For the use of `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 small screens - or more commonly, what to enlarge, 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 in 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 at which the layout changes. This is called a **breakpoint**. It is an arbitrary number of CSS pixels ([not device pixels](/en/css-and-dppx/)). 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 fine with [density descriptors in srcset](/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 their container size. Typically, the main content area of a page will be limited to a certain width on larger screens, with 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 harder to calculate effective sizing rules, because the percentage of the display port width that the image occupies 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 worry too much. You'll probably be fine with the following approximation: -1. At what size does the main column (or image container) stop growing? Up to this viewport width, we can use `100vw` for the `sizes` attribute of the image to say that the image takes up 100% of the viewport width. -2. What is the maximum width the container ever reaches? We can set that as a fixed width for everything else. +1. At what size does the main column (or image container) stop growing? Up to this display port width, we can use `100vw` as the `sizes` attribute of the image to say that the image occupies 100% of the display port width. +2. What is the maximum width that the container 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: +If your answer to the first question is 700px and your answer to the second is 800px, you can use the following `sizes` attribute: ```html - + ``` -> You thought the browser might handle all these calculations for us based on CSS. Unfortunately, browsers are aggressively keen to choose an image URL *before* downloading style sheets. We have to do the calculations ourselves, and they're well worth it if we don't get them perfectly. + + +> You might think that the browser could handle all these calculations for us based on CSS. Unfortunately, browsers are aggressively eager to pick an image URL *before* style sheets are downloaded. So we have to do the calculations ourselves, and they're perfectly happy with that if we don't do it perfectly. ===================== Content prompt used: @@ -51,7 +52,7 @@ Also carefully translate the title and description for the article; do not use & 2. Why some (but not all) breakpoints matter for your images Metadata returned1. Points de rupture et images -2. Pourquoi certains points de rupture (mais pas tous) sont importants pour vos images +2. Pourquoi certains (mais pas tous) des points de rupture sont importants pour vos images Roundtrip (isolated) prompt used: diff --git a/src/content/docs/fr/_roundtrip_browser-picks-srcset.txt b/src/content/docs/fr/_roundtrip_browser-picks-srcset.txt index e7bf5a7..3a24418 100644 --- a/src/content/docs/fr/_roundtrip_browser-picks-srcset.txt +++ b/src/content/docs/fr/_roundtrip_browser-picks-srcset.txt @@ -1,60 +1,63 @@ --- -title: How does the browser choose between images listed in the srcset attribute -description: How the browser chooses between images listed in the srcset attribute -taskInputHash: df517c34368094dc +title: How the browser chooses +description: >- + How the browser chooses between images listed in the srcset attribute +taskInputHash: 526ee912d47a6d62 lang: en +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -How does the browser choose between images listed in the `srcset` attribute? Here is a step-by-step guide with examples for width and density specifications for how the browser decides based on support and viewport. +How does the browser choose between images listed in the srcset attribute? Here is a step-by-step guide, with examples for width and density specifications, and how the browser decides based on the device and display. -- 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 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 you to specify different images based on width (using the `w` descriptor) or pixel density (using the `x` descriptor). Let's look at each case with examples. -1. Width Descriptor (`w`): +1. Width descriptor (`w`): -Assuming we have the following `srcset` attribute: +Suppose we have the following `srcset` attribute: -```html +```html Example image ``` -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 device's DPR (Device Pixel Ratio). For example, a standard screen has a DPR of 1, while a high-resolution screen (Retina) 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 of each image in the `srcset`. Multiply the width descriptor by the DPR. For a device with a DPR of 1: -- example-small.jpg: 400 * 1 = 400 px -- example-medium.jpg: 800 * 1 = 800 px -- example-large.jpg: 1600 * 1 = 1600 px +- example-small.jpg: 400 * 1 = 400px +- example-medium.jpg : 800 * 1 = 800px +- example-large.jpg : 1600 * 1 = 1600px -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 width of the display window. Suppose the display window width is 420px. The browser will choose the smallest image with an effective width greater than or equal to the display window 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 device's DPR (Device Pixel Ratio). For example, a standard screen has a DPR of 1, while a high-resolution screen (Retina) 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's DPR with the `x` descriptors in the `srcset`. In this case, we have three images with the following descriptors: - example-1x.jpg: 1x - example-2x.jpg: 2x - example-3x.jpg: 3x -c. Choose the image with the `x` descriptor that is closest to the device DPR. For a device with a DPR of 1, the browser selects `example-1x.jpg`. For a device with a DPR of 2, it selects `example-2x.jpg`, and so on. +c. Choose the image with the `x` descriptor that is closest to the device'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. -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 display window sizes. This is particularly useful when using the width descriptor (`w`). Here's an example: -```html +```html sizes -description: An efficient and subjective guide for responsive images in 2023 -taskInputHash: 2f3bd9fa4d308fbc -lang: en -ignore: '/* cSpell:locale fr,en*/' +title: srcset and sizes attributes +description: An efficient and partial guide to responsive images for 2023 +taskInputHash: ddea94bb07b6ac00 +lang: fr sidebar_sort_priority: 1000 -date_published: '2023-03-23' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -**An efficient and subjective guide for images in 2023** +**An Efficient and Partial Guide to Images for 2023** + +Check the sidebar for an in-depth dive. This is the fast reference to upgrading those `` tags to handle modern devices in all their various sizes and pixel densities. You should [know that pixels != pixels](/fr/pixels-pas-pixels) and that `devicePixelRatio` is more likely to be around 3.875 than 1:1. Modern phones pretend to be a width of 320 to 428 pixels for legibility (in CSS pixels), but have many device pixels per CSS pixel. -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. +>If your image never changes size, regardless of the size of the browser window, you should use a [density descriptor instead](/fr/descripteurs-de-densité). This often suits logos, icons, and buttons. -> 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. +Do you know what your [breakpoints](/fr/points-de-rupture) are? You'll need those numbers to refine the solution below - at a minimum the breakpoint width of the viewport where the main content area ceases to grow. -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. -### The easy way +### The Easy Method ```html -Dog riding bicycle - - - - -``` + + Dog riding a bike + + + + +``` + +{{The original text uses "tailles" (sizes) in the title, which in this context would have a better translation to "attributes". Also, "points de rupture" (literally "breaking points") should be translated as "breakpoints".}} ===================== Content prompt used: @@ -48,8 +51,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 partial 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..7a79e38 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: 41b20c3fed2f0d3d lang: en -ignore: '/* cSpell:locale fr,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- How to test your site's performance with Lighthouse? -> 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 the performance, accessibility, and other aspects of a website. To test your website's performance with Lighthouse, follow these steps: > > 1\. Open the Google Chrome web browser and go to the page you want to test. > -> 2\. Click on the three dots in the upper right corner of the browser window, then select "More tools" and then "Developer tools" or simply use the keyboard shortcut "Ctrl+Shift+I" (Windows, Linux) or "Command+Option+I" (macOS). +> 2\. Click on the three dots in the top right corner of the browser window and 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 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 relevant performance and other options you want to test, then click "Generate report". +> 4\. In the Lighthouse dialog box, select the performance and other relevant options you want to test, then click "Generate report." > -> 5\. After Lighthouse 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 has finished 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 site's performance, which can help improve the user experience and rankings in search engines. ===================== 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. Tester les performances avec Lighthouse -2. Étapes pour tester les performances d'un site web en utilisant Lighthouse +Metadata returned1. Tester la performance avec Lighthouse +2. Étapes pour tester la performance d'un site Web en utilisant Lighthouse Roundtrip (isolated) prompt used: diff --git a/src/content/docs/fr/_roundtrip_picture-examples.txt b/src/content/docs/fr/_roundtrip_picture-examples.txt index 10f80e1..d04f926 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 adaptive images, art direction, and different image formats. +taskInputHash: 612a054526e2fcb5 lang: en -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Here are some examples of using the `` element with explanations: +Here are some examples of using the `` element and their explanations: -1. Example for responsive images: +1. Example for adaptive images: ```html @@ -20,7 +20,7 @@ Here are some examples of using the `` element with explanations: ``` -Explanation: In this example, the `` element is used to provide different image sources for different screen sizes. The `` elements specify different image sources using the "srcset" attribute and the "media" attribute to specify the conditions under which each source should be used. The `` element is used as a fallback for older browsers or when the conditions specified in the `` elements are not met. +Explanation: In this example, the `` element is used to provide different image sources for different screen sizes. The `` elements specify 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 solution for older browsers or when the conditions specified in the `` elements are not met. 2. Example for art direction: @@ -46,15 +46,15 @@ Explanation: In this example, the `` element is used to provide differe ``` -Explanation: In this example, the `` element is used to provide different image sources 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 a fallback solution 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 display window. Breakpoints are usually defined using media queries in CSS, which apply different styles based on the screen width. These breakpoints can be used in conjunction with the `` element to provide different image sources for different screen sizes. +In adaptive design, breakpoints are used to define when the layout of a website or application should change based on the size of the display window. 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 specify the screen width under which each source should be used. When the screen width is greater than or equal to 768 pixels, the `image-large.jpg` source will be used; when the screen width is greater than or equal to 480 pixels but less than 768 pixels, the `image-medium.jpg` source will be used; and when the screen width is less than 480 pixels, the `image-small.jpg` source will be used. This allows us to provide appropriately sized images for each device, thus reducing page loading times and improving the user experience. +For example, in the first example above, we used the `media` attribute to specify the screen width under which each source should be used. When the screen width is greater than or equal to 768 pixels, the `image-large.jpg` source will be used; when the screen width is greater than or equal to 480 pixels but less than 768 pixels, the `image-medium.jpg` source will be used; and when the screen width is less than 480 pixels, the `image-small.jpg` source will be used. This allows us to provide appropriately sized images for each device, 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. +Breakpoints can be set at any screen size, and multiple breakpoints can be used to create layouts that adapt to a wide range of devices. By combining breakpoints with the `` element, it is possible to create flexible and adaptive designs that look great on any device. ===================== Content prompt used: @@ -67,8 +67,8 @@ Also carefully translate the title and description for the article; do not use & 1. Examples using element 2. Provides examples using the element, for responsive images, art direction and different image formats -Metadata returned1. Exemples utilisant l'élément -2. Fournit des exemples utilisant l'élément , pour des images réactives, la direction artistique et différents formats d'image. +Metadata returned1. Exemples d'utilisation de l'élément +2. Fournit des exemples d'utilisation de l'élément pour les images adaptatives, la direction artistique et les 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..6c02998 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 pixels ≠ image pixels +taskInputHash: b505a8e4cccad4f3 lang: en -ignore: '/* cSpell:locale fr,en*/' sidebar_sort_priority: 900 -date_published: '2023-03-26' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -### Screen pixels ≠ browser pixels ≠ image pixels +### Device pixels ≠ browser pixels ≠ image pixels -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 more than one device/printer pixel**. My phone's devicePixelRatio 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`). +My desktop computer's devicePixelRatio varies with each zoom level of the browser but is by default 1.5 (my display scaling factor `System > Display > Scale` being at 150%). -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 for SVG) are broken down into a grid of pixels. **It's surprisingly difficult to display image pixels perfectly matched 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 have very good reasons for needing that perfect mapping, although such prohibited practices won't be revealed 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 [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 pretend that everything is 96dpi. Developers avoid absolute units because it's generally better to use units derived from font size or view/container dimensions. Incompatible units can break a layout if the user adjusts the `Accessibility > Text size` multiplier, zooms the browser, or rotates their device. Needless to say, you should do all these things before delivering your site. ===================== Content prompt used: @@ -30,8 +29,8 @@ Also carefully translate the title and description for the article; do not use & 1. px ≠ pixels 2. Device px ≠ browser px ≠ image px -Metadata returned1. px ≠ pixels -2. Pixels d'écran ≠ pixels de navigateur ≠ pixels d'image +Metadata returned1. px ≠ pixels +2. Pixels d'appareil ≠ pixels de navigateur ≠ pixels 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..4a1e304 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 description: >- - Benefits of using width and height attributes in HTML code -taskInputHash: b09c49dc5d3a4a2d + Advantages of using the width and height attributes in HTML code +taskInputHash: 710d960e0aef9b37 lang: en -ignore: '/* cSpell:locale fr,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Why should you include width and height in HTML? +Why should you put 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 size of the image before it is fully loaded. This allows the browser to reserve the appropriate space on the web page for the image, which prevents content from jumping around while the image is loading. +> It is recommended to include the 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, preventing 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 the overall performance of the web page. 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 reflows or repaints of content during its loading. > -> In summary, the use of width and height attributes in HTML code for images can improve the user experience by speeding up content loading and reducing visual issues. +> Overall, using the width and height attributes in HTML code for images can improve the user experience by speeding up content loading and reducing visual defects. ===================== Content prompt used: diff --git a/src/content/docs/fr/_roundtrip_when-to-use-picture.txt b/src/content/docs/fr/_roundtrip_when-to-use-picture.txt index 1e5b634..6a1bba3 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 +description: Explains in what situations you should use the element +taskInputHash: f314b7d0da04a16a lang: en -ignore: '/* cSpell:locale fr,en*/' -date_published: '2023-03-27' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -The `picture` element is used to provide multiple versions of an image and determine which version of the image to display based on certain conditions. It is particularly useful for optimizing images for different screen sizes and resolutions, and is commonly used in responsive web design. -Here are some specific scenarios where you would want to use the `picture` element: +The `picture` element is used to provide multiple versions of an image and determine which version of the image to display based on certain conditions. It's especially useful for optimizing images for different sizes and screen resolutions, and is commonly used in responsive web design. +Here are some specific scenarios where you might want to use the `picture` element: -* **Retina Displays:** High-density displays such as Apple's Retina displays have a higher pixel density, which means that images may look blurry or pixelated if they are not optimized for high resolution. With the `picture` element, you can provide a version of the image that has twice as many pixels as the normal version, making it sharp and clear on Retina displays. +* **Retina displays:** High-density displays 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 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 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 website 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 that are optimized for each aspect ratio. -* **Bandwidth Limitations:** Images can be large files that consume a lot of bandwidth, especially on mobile devices. With the `picture` element, you can provide smaller versions of the image for devices with smaller screens or slower internet connections, which can help reduce page load times. +* **Bandwidth limitations:** Images can be large files that take up a lot of bandwidth, especially on mobile devices. With the `picture` element, you can provide smaller versions of the image for devices with smaller screens or slower internet connections, which can help reduce page loading times. -* **Art Direction Layout:** Sometimes, you may want to present an image in a certain way based on the layout of the rest of the page. For example, you may want to display a close-up of a person's face on mobile devices, but a wider shot on desktop computers. The `picture` element allows you to provide different versions of the image optimized for different layouts. +* **Art-directed layouts:** Sometimes you may want to present an image in a certain way based on the layout of the rest of the page. For example, you may want to show a close-up of a person's face on mobile devices, but a wider shot on desktop 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 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 that they look great, no matter what device or screen size they are viewed on. ===================== Content prompt used: diff --git a/src/content/docs/fr/_roundtrip_width-density.txt b/src/content/docs/fr/_roundtrip_width-density.txt index 23025c9..73123ac 100644 --- a/src/content/docs/fr/_roundtrip_width-density.txt +++ b/src/content/docs/fr/_roundtrip_width-density.txt @@ -1,16 +1,15 @@ --- title: Width and Density Descriptors description: Examples of using width and density descriptors in `srcset` -taskInputHash: 569fd1065931e1e0 +taskInputHash: d4db50f5267305d1 lang: en -ignore: '/* cSpell:locale fr,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Understanding the width (`w`) and density (`x`) descriptors in `srcset`. Use examples and Markdown. +Understand the width (`w`) and density (`x`) descriptors in `srcset`. Use examples and Markdown. ->`srcset` is an HTML attribute that allows developers to provide multiple image sources with different resolutions or pixel densities, and let the browser select the appropriate image based on the display characteristics of the device. The `srcset` attribute uses a combination of the `URL` and `w` or `x` descriptors to specify the images. +> `srcset` is an HTML attribute that allows developers to provide multiple image sources with different resolutions or pixel densities and let the browser select the appropriate image based on the display characteristics of the device. The `srcset` attribute uses a combination of the URL and the `w` or `x` descriptors to specify images. ## Width Descriptor (`w`) @@ -26,7 +25,7 @@ Understanding the width (`w`) and density (`x`) descriptors in `srcset`. Use exa 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 and their corresponding widths in pixels. The browser will select the image with the closest width to the available screen space. ## Density Descriptor (`x`) @@ -42,9 +41,9 @@ Understanding the width (`w`) and density (`x`) descriptors in `srcset`. Use exa 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 with their corresponding pixel densities. The browser will select the image with the closest pixel density 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. ===================== Content prompt used: @@ -58,7 +57,7 @@ Also carefully translate the title and description for the article; do not use & 2. Examples of using width and density descriptors in `srcset` Metadata returned1. Descripteurs de largeur et de densité -2. Exemples d'utilisation des descripteurs de largeur et de densité dans `srcset` +2. Exemples d'utilisation de descripteurs de largeur et de densité dans `srcset` Roundtrip (isolated) prompt used: diff --git a/src/content/docs/fr/breakpoints.md b/src/content/docs/fr/breakpoints.md index eb1cb9e..aada03a 100644 --- a/src/content/docs/fr/breakpoints.md +++ b/src/content/docs/fr/breakpoints.md @@ -1,43 +1,42 @@ --- title: Points de rupture et images description: >- - Pourquoi certains points de rupture (mais pas tous) sont importants pour vos - images -taskInputHash: b9dc6c0d27d7c8b7 + Pourquoi certains (mais pas tous) des points de rupture sont importants pour + vos images +taskInputHash: 3a845882fe3c1d34 lang: fr -ignore: '/* cSpell:locale fr,en*/' -date_published: '2023-03-26' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- ### Contexte -Les petits écrans et les grands moniteurs nécessitent des mises en page différentes. Pour les besoins de `srcset` et de `sizes`, nous devons savoir à quel moment la mise en page change. +Les petits et grands écrans nécessitent des mises en page différentes. Pour l'utilisation de `srcset` et de `sizes`, nous devons savoir à quel moment la mise en page change. -Les développeurs Web doivent décider ce qu'il faut réduire, masquer ou déplacer sur les petits écrans - ou plus couramment, ce qu'il faut étendre, révéler ou ajouter sur les grands écrans. Ils disposent également de très peu d'informations. L'utilisateur est-il sur une tablette ou un téléphone en mode paysage - ou une petite fenêtre de navigateur ? +Les développeurs web doivent décider quoi réduire, cacher ou déplacer sur les petits écrans - ou plus couramment, quoi agrandir, révéler ou ajouter sur les grands écrans. Ils ont également très peu d'informations. L'utilisateur est-il sur une tablette ou un téléphone en mode paysage - ou dans 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 de pixels de l'appareil](/fr/pixels-pas-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 mise en page causés par ces points de rupture (et être fines avec [des 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 principales de contenu seront limitées par la taille de leur conteneur. Typiquement, 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 l'image occupe 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 : +Cela dit, ne vous posez pas trop de questions. 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 d'image) cesse-t-elle de grandir ? Jusqu'à cette largeur de port d'affichage, nous pouvons utiliser `100vw` pour l'attribut `sizes` de l'image pour dire que l'image occupe 100% de la largeur du port d'affichage. +2. Quelle est la largeur maximale que le conteneur atteint ? Nous pouvons définir cela comme une largeur fixe pour tout le reste. -Si votre réponse à 1 était 700px et votre réponse à 2 était 800px, vous pouvez utiliser l'attribut `sizes` suivant : +Si votre réponse à la première question est 700px et votre réponse à la deuxième est 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. +> Vous penseriez que le navigateur pourrait gérer toutes ces calculs pour nous en fonction du CSS. Malheureusement, les navigateurs sont agressivement 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 ça leur va très bien si nous ne le 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..e7048b0 100644 --- a/src/content/docs/fr/browser-picks-srcset.md +++ b/src/content/docs/fr/browser-picks-srcset.md @@ -3,69 +3,68 @@ title: Comment le navigateur choisit description: >- Comment le navigateur choisit entre les images répertoriées dans l'attribut srcset -taskInputHash: 1ad7279bfa827840 +taskInputHash: 526ee912d47a6d62 lang: fr -ignore: '/* cSpell:locale fr,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Comment le navigateur choisit-il entre les images répertoriées dans l'attribut srcset ? Voici les étapes détaillées, avec des exemples pour les spécifications de largeur et de densité et comment le navigateur décide en fonction de l'appareil et du viewport. - -- 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. - -1. Descripteur de largeur (`w`): - -Supposons que nous avons l'attribut `srcset` suivant : - -```html - -Image d'exemple - -``` - -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. - -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: - -- example-small.jpg: 400 \* 1 = 400px - -- example-medium.jpg: 800 \* 1 = 800px - -- example-large.jpg: 1600 \* 1 = 1600px - -c. Comparer les largeurs effectives avec la largeur du viewport. Supposons que la largeur du viewport est de 420px. Le navigateur choisira l'image la plus petite avec une largeur effective supérieure ou égale à la largeur de viewport. Dans ce cas, il sélectionnera `example-medium.jpg`. - -2. Descripteur de densité de pixels (`x`): - -Supposons que nous avons l'attribut `srcset` suivant : - -```html - -Image d'exemple - -``` - -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. - -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 : - -- example-1x.jpg: 1x - -- example-2x.jpg: 2x - -- 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. - -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 : - -```html - -Exemple d'image + +``` + +Le navigateur suivra ces étapes : + +a. Déterminer le DPR (Ratio de pixels du dispositif) 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 de 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-medium.jpg : 800 * 1 = 800px + +- example-large.jpg : 1600 * 1 = 1600px + +c. Comparez les largeurs effectives avec la largeur de la fenêtre d'affichage. Supposons que la largeur de la fenêtre d'affichage soit de 420px. Le navigateur choisira la plus petite image ayant une largeur effective supérieure ou égale à la largeur de la fenêtre d'affichage. Dans ce cas, il sélectionnera `example-medium.jpg`. + +1\. Descripteur de densité de pixels (`x`): + +Supposons que nous avons l'attribut `srcset` suivant : + +```html + +Exemple d'image + +``` + +Le navigateur suivra ces étapes : + +a. Déterminer le DPR (Ratio de pixels du dispositif) 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. Comparez le DPR du dispositif avec les descripteurs `x` dans le `srcset`. Dans ce cas, nous avons trois images avec les descripteurs suivants : + +- example-1x.jpg : 1x + +- example-2x.jpg : 2x + +- example-3x.jpg : 3x + +c. Choisissez l'image avec le descripteur `x` qui est le plus proche du DPR du dispositif. Pour un dispositif avec un DPR de 1, le navigateur sélectionnera `example-1x.jpg`. Pour un dispositif avec un DPR de 2, il choisira `example-2x.jpg`, et ainsi de suite. + +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 tailles de fenêtre d'affichage. Ceci est particulièrement utile lorsque vous utilisez le descripteur de largeur (`w`). Voici un exemple : + +```html + +Une image d'exemple ``` - - -Cet exemple de balisage comprend : +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. - **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 c'est tout ! Vous avez mis en œuvre srcset avec descripteurs de densité avec succès, améliorant ainsi 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..a51267b 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 partial sur les images réactives pour 2023 +taskInputHash: ddea94bb07b6ac00 lang: fr -ignore: '/* cSpell:locale fr,en*/' sidebar_sort_priority: 1000 -date_published: '2023-03-23' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -**Un guide efficace et subjectif pour les images en 2023** +**Un guide efficace et partial 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 une plongée en profondeur. Ceci est la référence rapide pour mettre à niveau ces balises `` pour gérer les appareils modernes dans toutes leurs tailles et densités de pixels différentes. Vous devriez [savoir que des pixels != pixels](/fr/pixels-pas-pixels) et que `devicePixelRatio` est plus susceptible d'être d'environ 3,875 que de 1:1. Les téléphones modernes se font passer pour une largeur de 320 à 428 pixels pour la lisibilité (en pixels CSS), mais ont de nombreux pixels de périphérique par pixel CSS. -> Si votre image ne change jamais de taille, peu importe la taille réduite de la fenêtre du navigateur, vous devriez utiliser un [descripteur de densité à la place](/en/density-descriptors). Ceci convient souvent aux logos, aux icônes et aux boutons. +> Si votre image ne change jamais de taille, quelle que soit la taille de la fenêtre du navigateur, vous devriez utiliser un [descripteur de densité à la place](/fr/descripteurs-de-densité). Cela convient souvent pour les logos, les icônes et les boutons. -Savez-vous ce que sont vos [points de rupture](/en/breakpoints)? Vous aurez besoin de ces numéros pour affiner la solution ci-dessous, et au minimum le point de rupture de la largeur d'affichage où la zone de contenu principal cesse de s'agrandir. +Savez-vous ce que sont vos [points de rupture](/fr/points-de-rupture) ? Vous aurez besoin de ces nombres pour affiner la solution ci-dessous - et au minimum le point de rupture de largeur de la fenêtre d'affichage où la zone de contenu principal cesse de croître. ### La méthode facile @@ -29,12 +28,11 @@ Savez-vous ce que sont vos [points de rupture](/en/breakpoints)? Vous aurez beso img.jpg?format=webp&w=1600 1600w, img.jpg?format=webp&w=2000 2000w" - sizes="(max-width: 700px) 100vw, 800px" alt="Chien faisant de la bicyclette" /> + sizes="(max-width: 700px) 100vw, 800px" alt="Chien faisant du vélo" /> + Et que sous cette largeur de fenêtre d'affichage, cette image prend 100% de la largeur, mais + lorsque la fenêtre d'affichage est plus grande, l'image est limitée à 800 pixels CSS --> - + ``` diff --git a/src/content/docs/fr/lighthouse-performance-test.md b/src/content/docs/fr/lighthouse-performance-test.md index 9a772bf..dcaf6ea 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 +title: Tester la performance avec Lighthouse +description: Étapes pour tester la performance d'un site Web en utilisant Lighthouse +taskInputHash: 41b20c3fed2f0d3d lang: fr -ignore: '/* cSpell:locale fr,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Comment tester les performances de votre site avec Lighthouse? +Comment tester la performance 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: +> Lighthouse est un outil qui peut être utilisé pour mesurer la performance, l'accessibilité et d'autres aspects d'un site Web. Pour tester la performance 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 souhaitez tester. > > 2\. Cliquez sur les trois points en haut à droite de la fenêtre du navigateur, puis sélectionnez "Autres outils" et ensuite "Outils de développement" ou utilisez simplement le raccourci clavier "Ctrl+Shift+I" (Windows, Linux) ou "Command+Option+I" (macOS). > -> 3\. Dans le panneau Outils de développement, cliquez sur l'icône Lighthouse située sur le côté gauche du panneau ou appuyez sur "Ctrl+Shift+P" (Windows, Linux) ou "Command+Shift+P" (macOS) pour ouvrir le menu Commandes, puis tapez "Lighthouse" et sélectionnez "Générer un rapport". +> 3\. Dans le panneau des outils de développement, cliquez sur l'icône Lighthouse située à gauche du panneau ou appuyez sur "Ctrl+Shift+P" (Windows, Linux) ou "Command+Shift+P" (macOS) pour ouvrir le menu des commandes, puis tapez "Lighthouse" et sélectionnez "Générer un rapport". > -> 4\. Dans la boîte de dialogue Lighthouse, sélectionnez les options de performances et autres pertinentes que vous souhaitez tester, puis cliquez sur "Générer un rapport". +> 4\. Dans la boîte de dialogue Lighthouse, sélectionnez les options de performance et d'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 les scores et les recommandations pour améliorer la performance, 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. +> En suivant ces étapes, vous pouvez utiliser Lighthouse pour tester et optimiser la performance de votre site, ce qui peut aider à améliorer l'expérience utilisateur et les classements 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..1d7cd65 100644 --- a/src/content/docs/fr/picture-examples.md +++ b/src/content/docs/fr/picture-examples.md @@ -1,17 +1,17 @@ --- -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 les images + adaptatives, la direction artistique et les différents formats d'image. +taskInputHash: 612a054526e2fcb5 lang: fr -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Voici quelques exemples d'utilisation de l'élément `` avec leurs explications : +Voici quelques exemples d'utilisation de l'élément `` et leurs explications : -1\. Exemple pour les images réactives : +1. Exemple pour les images adaptatives : ```html @@ -21,9 +21,9 @@ 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'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 solution de repli 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 : +2. Exemple pour la direction artistique : ```html @@ -35,7 +35,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. -3\. Exemple pour différents formats d'image : +3. Exemple pour différents formats d'image : ```html @@ -47,12 +47,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'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 solution de repli 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 matière de conception adaptative, des 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 multimédias en CSS, qui appliquent différents styles en fonction de la largeur de l'écran. Ces points de rupture peuvent être utilisés en conjonction avec l'élément `` pour fournir différentes sources d'image pour différentes tailles d'écran. -Par exemple, dans le premier exemple ci-dessus, nous avons utilisé l'attribut `media` pour spécifier la largeur d'écran sous laquelle chaque source doit être utilisée. Lorsque la largeur d'écran est supérieure ou égale à 768 pixels, la source `image-large.jpg` sera utilisée ; lorsque la largeur d'écran est supérieure ou égale à 480 pixels mais inférieure à 768 pixels, la source `image-medium.jpg` sera utilisée ; et lorsque la largeur d'écran est inférieure à 480 pixels, la source `image-small.jpg` sera utilisée. Cela nous permet de fournir des images aux tailles appropriées pour chaque appareil, réduisant ainsi les temps de chargement des pages et améliorant l'expérience utilisateur. +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 les temps de chargement des pages et améliorant l'expérience de l'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 s'adaptent à une large gamme de dispositifs. En combinant les points de rupture avec l'élément ``, il est possible de créer des designs flexibles et adaptatifs qui ont fière allure sur n'importe quel appareil. diff --git a/src/content/docs/fr/pixels-not-pixels.md b/src/content/docs/fr/pixels-not-pixels.md index f6eef92..0460375 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 ≠ pixels de navigateur ≠ pixels d'image +taskInputHash: b505a8e4cccad4f3 lang: fr -ignore: '/* cSpell:locale fr,en*/' sidebar_sort_priority: 900 -date_published: '2023-03-26' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -### Pixels d'écran ≠ pixels de navigateur ≠ pixels d'image +### Pixels d'appareil ≠ pixels de navigateur ≠ pixels 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 de mon téléphone est de 3,875 ; [et le vôtre ?](https://www.mydevice.io/) -Le devicePixelRatio de mon ordinateur de bureau change en fonction du zoom du navigateur, mais est par défaut de 1,5 (ma sacle d'affichage est de 150 % dans `Système > Affichage`). +Le devicePixelRatio de mon ordinateur de bureau varie à chaque zoom du navigateur, mais est par défaut à 1,5 (mon taux d'affichage `Système > Affichage > Échelle` étant de 150 %). -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 image (à l'exception de SVG) se découpent en une grille de pixels. **Il est étonnamment difficile d'afficher les pixels d'image parfaitement ajustés à un rapport 1:1 avec les pixels de l'appareil - mais avec `srcset`, vous pouvez vous en *approcher suffisamment***, et un peu de Javascript peut ajuster la taille de l'élément HTML après le chargement si vous avez des raisons vraiment justifiées d'avoir besoin de ce mappage parfait, bien que de telles pratiques prohibées ne seront pas révélées ici. -> Les autres unités absolues ([in, pc, pt, mm, cm, Q)](https://developer.mozilla.org/fr/docs/Web/CSS/Longueurs-et-dimensions_typographiques) sont définies en fonction du nombre de pixels CSS et prétendent que tout est à 96 dpi. Les développeurs évitent les unités absolues car il est généralement préférable d'utiliser des unités dérivées de la taille de police ou des dimensions de la fenêtre d'affichage/du conteneur. Des unités incompatibles peuvent casser la mise en page si l'utilisateur augmente la taille de texte, zoome le navigateur ou pivote son appareil. Inutile de dire qu'il faut faire toutes ces choses avant de publier votre site. +> Les autres unités absolues [unités (in, pc, pt, mm, cm, Q)](https://developer.mozilla.org/fr/docs/Web/CSS/longueur) sont définies en fonction du nombre de pixels CSS et font semblant que tout est à 96dpi. 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 vue/conteneur. Les unités incompatibles peuvent casser une mise en page si l'utilisateur ajuste le multiplicateur `Accessibilité > Taille du texte`, zoome le navigateur ou fait pivoter son appareil. Inutile de dire que vous devriez faire toutes ces choses avant de livrer votre site. diff --git a/src/content/docs/fr/specify-width-height.md b/src/content/docs/fr/specify-width-height.md index e5da3af..b973569 100644 --- a/src/content/docs/fr/specify-width-height.md +++ b/src/content/docs/fr/specify-width-height.md @@ -3,17 +3,16 @@ title: Utiliser la largeur et la hauteur description: >- Avantages de l'utilisation des attributs de largeur et de hauteur dans le code HTML -taskInputHash: b09c49dc5d3a4a2d +taskInputHash: 710d960e0aef9b37 lang: fr -ignore: '/* cSpell:locale fr,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Pourquoi devriez-vous mettre la largeur et la hauteur dans le HTML ? +Pourquoi devriez-vous mettre la largeur et la hauteur dans le HTML ? -> Il est recommandé de mettre les attributs de largeur et de hauteur dans le code HTML des images car cela aide le navigateur web à connaître la taille de l'image avant qu'elle ne soit entièrement chargée. Cela permet au navigateur de réserver l'espace approprié sur la page Web pour l'image, ce qui empêche le contenu de sauter pendant que l'image se charge. +> Il est recommandé de mettre les attributs de largeur et de hauteur dans le code HTML des images car cela aide le navigateur Web à connaître la taille de l'image avant qu'elle ne soit complètement 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, la spécification des attributs de largeur et de hauteur pour les images peut également contribuer à améliorer la performance globale 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 reflows ou des repaints inutiles du contenu lors de 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. +> Dans l'ensemble, 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 défauts 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..040ad2c 100644 --- a/src/content/docs/fr/when-to-use-picture.md +++ b/src/content/docs/fr/when-to-use-picture.md @@ -1,22 +1,21 @@ --- title: Quand utiliser l'élément description: Explique dans quelles situations vous devriez utiliser l'élément -taskInputHash: 745796c8db3f3527 +taskInputHash: f314b7d0da04a16a lang: fr -ignore: '/* cSpell:locale fr,en*/' -date_published: '2023-03-27' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -L'élément `picture` est utilisé pour fournir plusieurs versions d'une image et détermine quelle version de l'image afficher en fonction de certaines conditions. Il est particulièrement utile pour optimiser des images pour différentes tailles d'écran et résolutions, et est couramment utilisé dans la conception de sites Web adaptatifs. -Voici quelques scénarios spécifiques où vous voudriez utiliser l'élément `picture` : +L'élément `picture` est utilisé pour fournir plusieurs versions d'une image et détermine quelle version de l'image afficher en fonction de certaines conditions. Il est particulièrement utile pour optimiser les images pour différentes tailles et résolutions d'écran, et est couramment utilisé dans la conception web responsive. +Voici quelques scénarios spécifiques où vous pourriez vouloir utiliser l'élément `picture` : -* **Écrans Retina :** Les écrans haute densité tels que les écrans Retina d'Apple ont une densité de pixels plus élevée, ce qui signifie que les images peuvent sembler floues ou pixelisées si elles ne sont pas optimisées pour le haute résolution. Avec l'élément `picture`, vous pouvez fournir une version de l'image qui a deux fois plus de pixels que la version normale, ce qui la rend nette et claire sur les écrans Retina. +* **Écrans Retina :** Les écrans haute densité 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 une résolution élevée. Avec l'élément `picture`, vous pouvez fournir une version de l'image qui comporte deux fois plus de pixels que la version normale, de sorte qu'elle soit nette et claire sur les écrans Retina. -* **Différents ratios d'aspect :** Si vous concevez un site qui doit afficher des images avec différents ratios d'aspect (comme paysage contre portrait), vous pouvez utiliser l'élément `picture` pour fournir différentes versions de l'image optimisées pour chaque ratio d'aspect. +* **Différents ratios d'aspect :** Si vous concevez un site qui doit afficher des images avec différents ratios d'aspect (comme paysage versus portrait), vous pouvez utiliser l'élément `picture` pour fournir différentes versions de l'image qui sont optimisées pour chaque ratio d'aspect. -* **Limitations de la bande passante:** Les images peuvent être de grands fichiers qui consomment beaucoup de bande passante, surtout sur les appareils mobiles. Avec l'élément `picture`, vous pouvez fournir des versions plus petites de l'image pour les appareils avec des écrans plus petits ou des connexions Internet plus lentes, ce qui peut aider à réduire les temps de chargement des pages. +* **Limitations de la bande passante :** Les images peuvent être des fichiers volumineux qui occupent beaucoup de bande passante, 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 contribuer à réduire les temps de chargement de la page. -* **Mise en page d'art directionnel :** Parfois, vous pouvez vouloir présenter une image d'une certaine manière en fonction de la mise en page du reste de la page. Par exemple, vous pouvez vouloir afficher un gros plan du visage d'une personne sur les appareils mobiles, mais un plan plus large sur les ordinateurs de bureau. L'élément `picture` vous permet de fournir différentes versions de l'image optimisées pour différentes mises en page. +* **Mises en page dirigées par l'art :** Parfois, vous souhaiterez peut-être présenter une image d'une certaine manière en fonction de la mise en page du reste de la page. Par exemple, vous pourriez vouloir montrer un gros plan du visage d'une personne sur les appareils mobiles, mais un plan plus large sur les appareils de bureau. L'élément `picture` vous permet de fournir différentes versions de l'image qui sont optimisées pour différentes mises en page. -Dans l'ensemble, l'élément `picture` est un outil puissant qui peut vous aider à optimiser vos images pour une variété de cas d'utilisation et à vous assurer qu'elles ont fière allure, quel que soit l'appareil ou la taille d'écran sur lequel elles sont affichées. +Dans l'ensemble, l'élément `picture` est un outil puissant qui peut vous aider à optimiser vos images pour une variété de cas d'utilisation et à vous assurer qu'elles ont l'air superbes, quel que soit l'appareil ou la taille d'écran sur lequel elles sont visualisées. diff --git a/src/content/docs/fr/width-density.md b/src/content/docs/fr/width-density.md index 805d0c9..6fd818a 100644 --- a/src/content/docs/fr/width-density.md +++ b/src/content/docs/fr/width-density.md @@ -1,48 +1,46 @@ --- title: Descripteurs de largeur et de densité -description: Exemples d'utilisation des descripteurs de largeur et de densité dans `srcset` -taskInputHash: 569fd1065931e1e0 +description: Exemples d'utilisation de descripteurs de largeur et de densité dans `srcset` +taskInputHash: d4db50f5267305d1 lang: fr -ignore: '/* cSpell:locale fr,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Comprendre les descripteurs de largeur (w) et de densité (x) dans `srcset`. Utiliser des exemples et utiliser Markdown. +Comprendre les descripteurs de largeur (w) et de densité (x) dans `srcset`. Utilisez des exemples et utilisez Markdown. + +> `srcset` est un attribut HTML qui permet aux développeurs de fournir plusieurs sources d'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. -> `srcset` est un attribut HTML qui permet aux développeurs de fournir plusieurs sources d'images avec différentes résolutions ou densités de pixels, et de laisser le navigateur sélectionner l'image appropriée en fonction des caractéristiques d'affichage de l'appareil. L'attribut `srcset` utilise une combinaison de l'`URL` et des descripteurs `w` ou `x` pour spécifier les images. ## Descripteur de largeur (`w`) > Le descripteur `w` est utilisé pour spécifier la largeur d'une image en pixels. Il est utilisé lorsque nous voulons fournir au navigateur les dimensions d'une image afin qu'il puisse choisir l'image appropriée pour l'espace d'écran disponible. -> La syntaxe pour utiliser le descripteur `w` dans `srcset` est la suivante: +> La syntaxe pour utiliser le descripteur `w` dans `srcset` est la suivante : ```html Exemple d'image + alt="Example Image"> ``` - - > Dans l'exemple ci-dessus, nous avons fourni au navigateur trois images et leurs largeurs correspondantes en pixels. Le navigateur sélectionnera l'image avec la largeur la plus proche de l'espace d'é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 par rapport 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. -> 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 + alt="Example Image"> ``` +> Dans l'exemple ci-dessus, nous avons fourni au navigateur trois images et leurs densités de pixels correspondantes. Le navigateur sélectionnera l'image avec la densité de pixel 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. diff --git a/src/content/docs/it/_roundtrip_breakpoints.txt b/src/content/docs/it/_roundtrip_breakpoints.txt index e7fe41c..468e74d 100644 --- a/src/content/docs/it/_roundtrip_breakpoints.txt +++ b/src/content/docs/it/_roundtrip_breakpoints.txt @@ -1,42 +1,44 @@ --- title: Breakpoints and Images -description: Why some (but not all) breakpoints matter for your images -taskInputHash: 7714cadfe55d82ca +description: >- + Why some (but not all) breakpoints matter to your images +taskInputHash: 1dc3f28d444f3158 lang: en -ignore: '/* cSpell:locale it,en*/' -date_published: '2023-03-26' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- ### Context -Small screens and large displays require different layouts. In order for `srcset` and `sizes` to work, we need to know at what point the layout change occurs. +Small and large screens require different layouts. For the purpose of `srcset` and `sizes`, we need to know at what point the layout changes. -Web developers need to decide what to shrink, hide, or move up on smaller screens - or more commonly, what to expand, reveal, or add on larger screens. They also have little information to go on. Is the user using a tablet or a smartphone in landscape mode - or a small browser window? +Web developers have to decide what to contract, hide, or move around on smaller screens — or, more commonly, what to expand, reveal, or add on larger screens. They also have precious little information to go on. Is the user on a tablet or a phone in landscape mode — or is it 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's an arbitrary number of CSS pixels ([not device pixels](https://www.dan.uk/pixels)), and 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, 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 shifts caused by these breakpoints (and work well with [density descriptors](https://www.dan.uk/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 constrained by the size of their container. Typically, the main content area of a page will be constrained to a certain width on larger devices, a `max-width`, but on smaller devices, the main content area will occupy 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 a particular breakpoint, it'll be trickier to calculate the actual sizing rules, since the percentage of the viewport width that the image occupies will change. -### The Easy Way +### The Easy Method -That being said, you don't need to overthink it. You'll probably be just fine with the following approximation: +That being said, don't make things too complicated for yourself. This approximation will probably suffice: -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 point does the main column (or image container) stop growing? Until that viewport width, we can use `100vw` for the `sizes` attribute of the image to indicate that the image takes up 100% of the viewport width. +2. What is the maximum width that container ever reaches? We can set it as a fixed width for everything else. -If your answer to point 1 was 700px and the answer to point 2 was 800px, you can use the following `sizes` attribute: +If the answer to 1 is 700px and the answer to 2 is 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 CSS. Sadly, browsers are aggressively eager to pick an image URL *before* stylesheets are downloaded. So we have to do the calculations ourselves, and if we don't get them perfect, c'est la vie for them. ===================== 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. Breakpoints 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..ba3ebbe 100644 --- a/src/content/docs/it/_roundtrip_browser-picks-srcset.txt +++ b/src/content/docs/it/_roundtrip_browser-picks-srcset.txt @@ -1,16 +1,19 @@ --- -title: How the browser chooses -description: How the browser chooses among the images listed in the srcset attribute -taskInputHash: 5f305bd3a8d992cf +title: How Browsers Choose +description: How the browser chooses between images listed in the srcset attribute +taskInputHash: 9d76226efed7cd73 lang: en +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -How does the browser choose among the images listed in the `srcset` attribute? Here are the detailed steps, with examples for both width and density specifications and how the browser chooses based on the device and viewport: +How does the browser choose between images listed in the `srcset` attribute? Here's 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 choose the most appropriate image from a list of provided sources. These rules depend on the display characteristics of the device (resolution, pixel density) and the size of the viewport. The `srcset` attribute allows to specify different images based on width (using the `w` descriptor) or pixel density (using the `x` descriptor). Let's look at each case with examples. +- When using the `srcset` attribute in HTML, the browser uses a set of rules to choose the most appropriate image from a list of provided sources. These rules depend on the display characteristics of the device (resolution, pixel density) and the viewport dimensions. The `srcset` attribute allows for different images to be specified 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`): -Suppose we have the following `srcset` attribute: +Assuming we have the following `srcset` attribute: ```html @@ -18,11 +21,11 @@ Suppose we have the following `srcset` attribute: ``` -The browser follows these steps: +The browser will follow these steps: a. Determine the DPR (Device Pixel Ratio) of the device. For example, a standard display has a DPR of 1, while a high-resolution (Retina) display has a DPR of 2 or higher. -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`. Multiply the width descriptor by the DPR. For a device with a DPR of 1: - example-small.jpg: 400 * 1 = 400px @@ -30,11 +33,11 @@ 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. Assuming the viewport width is 420px. The browser will select the smallest image with an actual width greater than or equal to the viewport width. In this case, it will select `example-medium.jpg`. -1\. Pixel density descriptor (`x`): +2\. Pixel density descriptor (`x`): -Suppose we have the following `srcset` attribute: +Assuming we have the following `srcset` attribute: ```html @@ -42,11 +45,11 @@ Suppose we have the following `srcset` attribute: ``` -The browser follows these steps: +The browser will follow these steps: a. Determine the DPR (Device Pixel Ratio) of the device. For example, a standard display has a DPR of 1, while a high-resolution (Retina) display has a DPR of 2 or higher. -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`. In this case, we have three images with the following descriptors: - example-1x.jpg: 1x @@ -54,9 +57,9 @@ b. Compare the device's DPR with the `x` descriptors in `srcset`. In this case, - example-3x.jpg: 3x -c. Choose the image with the `x` descriptor closest to the device's DPR. For a device with a DPR of 1, the browser will select `example-1x.jpg`. For a device with a DPR of 2, it will choose `example-2x.jpg`, and so on. +c. Choose the image with the `x` descriptor closest to the device DPR. For a device with a DPR of 1, the browser will select `example-1x.jpg`. For a device with a DPR of 2, it will choose `example-2x.jpg`, and so on. -It is important to note that it is also possible to use the `sizes` attribute in combination with the `srcset` attribute to provide additional information on how the image will be displayed at different viewport widths. This is particularly useful when using the width descriptor (`w`). Here is an example: +It is important to note that it is also possible to 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 especially useful when using the width descriptor (`w`). Here's an example: ```html @@ -75,7 +78,7 @@ Also carefully translate the title and description for the article; do not use & 1. How the browser chooses 2. How the browser chooses between images listed in the srcset attribute -Metadata returned1. Come sceglie il browser +Metadata returned1. Come sceglie il browser 2. Come il browser sceglie tra le immagini elencate nell'attributo srcset diff --git a/src/content/docs/it/_roundtrip_density-descriptors.txt b/src/content/docs/it/_roundtrip_density-descriptors.txt index 85b40cf..cb251b2 100644 --- a/src/content/docs/it/_roundtrip_density-descriptors.txt +++ b/src/content/docs/it/_roundtrip_density-descriptors.txt @@ -1,37 +1,35 @@ --- -title: Density descriptors & srcset -description: Examples of using density descriptors in `srcset` -taskInputHash: cf54e3343feb0a22 +title: Density descriptors and srcset +description: Usage examples of density descriptors in `srcset` +taskInputHash: 8a445e12ba15aba8 lang: en -ignore: '/* cSpell:locale it,en*/' -date_published: '2023-03-26' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Srcset with density descriptors provides a simple and effective method to provide the image that fits the user's device best, improving performance and user experience. This guide will take you through the essentials of using srcset with density descriptors and provide markup examples for your convenience. +Srcset with density descriptors provides a simple and effective way to deliver the most suitable image to each user's device, improving performance and user experience. This guide will show you the essentials of using srcset with density descriptors and provide markup examples for your convenience. ## What is Srcset with density descriptors? -Srcset is an HTML attribute designed to allow specifying multiple image sources for a single `` element. Density descriptors (`x`) are used together with srcset to provide images at different resolutions based on the pixel density of the user's display. +Srcset is an HTML attribute designed to allow you to specify multiple image sources for a single `` element. Density descriptors (`x`) are used in combination with srcset to provide images at different resolutions based on the user's pixel density display. -## When to use Srcset with density descriptors +## When to use Srcset with density descriptors? Using srcset with density descriptors is particularly useful when you want to: - -1. 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. +1. Serve high-resolution images to high-resolution devices (e.g., Retina displays) while providing low-resolution images to standard displays. +2. Improve page performance by delivering the most appropriate image size for each user's device. ## Implementing Srcset with density descriptors To use srcset with density descriptors, follow these steps: -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. +1. Prepare your images in different resolutions. +2. Add the `srcset` attribute to the `` element, including image sources and their corresponding density descriptors. +3. Add the `sizes` attribute (optional) to specify the displayed image size on the screen. -### Example Markup +### Markup Example -Here's an example of how to implement srcset with density descriptors in your markup: +Here's an example of how to use srcset with density descriptors in your markup: ```html tag dimensions -description: An Efficient and Opinionated Guide to Responsive Images for 2023 -taskInputHash: 770938b4f7895424 +title: srcset and sizes +description: An efficient and opinionated guide to responsive images for 2023 +taskInputHash: 7c0db2e5e6194bc9 lang: en -ignore: '/* cSpell:locale it,en*/' sidebar_sort_priority: 1000 -date_published: '2023-03-23' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -**An Efficient and Opinionated Guide to Images for 2023** +**An efficient and 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 sidebar for the detailed elucidation. This is the quick reference for updating `` tags to handle modern devices in all their dimensions and pixel densities. You should [know that pixels != pixels](/en/pixels-arent-all-equal) and that `devicePixelRatio` is more likely to be 3.875 than 1:1. Modern phones pretend to be 320 to 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 resize the browser window, you should use a [density descriptor](/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 least the viewport width breakpoint where the primary content area stops growing. +Do you know what your [breakpoints](/en/breakpoints) are? You'll need these numbers to refine the solution below - and at least the viewport width breakpoint at which the main content area stops expanding. -### The Easy Way +### The easy way ```html @@ -28,16 +27,15 @@ Do you know what your [breakpoints](/en/breakpoints) are? You'll need those numb 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" /> + sizes="(max-width: 700px) 100vw, 800px" alt="Dog riding a bike" /> - + - + ``` -{{This seems to be a correctly translated technical documentation with no grammar or clumsy phrasing mistakes.}} ===================== Content prompt used: @@ -50,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 e le dimensioni delle tag -2. Una Guida Efficient and Opinionated alle Immagini Responsive per il 2023 +Metadata returned1. srcset e dimensioni +2. Una guida efficiente e opinabile alle immagini responsive per il 2023 Roundtrip (isolated) prompt used: diff --git a/src/content/docs/it/_roundtrip_lighthouse-performance-test.txt b/src/content/docs/it/_roundtrip_lighthouse-performance-test.txt index a590657..881aa80 100644 --- a/src/content/docs/it/_roundtrip_lighthouse-performance-test.txt +++ b/src/content/docs/it/_roundtrip_lighthouse-performance-test.txt @@ -1,28 +1,28 @@ --- -title: Test Performance with Lighthouse -description: Steps on how to test website performance using Lighthouse -taskInputHash: 174be49cc119f58b +title: Performance testing with Lighthouse +description: >- + Steps on how to test the performance of a website using Lighthouse +taskInputHash: 4f7942b4139a285a lang: en -ignore: '/* cSpell:locale it,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -How to Test Your Website Performance with Lighthouse? +How to test the performance of your website 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 the performance, accessibility, and other aspects of a website. To test the performance of your website with Lighthouse, follow these steps: +> +> 1. Open the Google Chrome web browser and navigate to the page you want to test. +> +> 2. Click the three dots in the top right corner of the browser window, then select "More Tools" and then "Developer Tools" or simply use the keyboard shortcut "Ctrl+Shift+I" (Windows, Linux) or "Command+Option+I" (macOS). +> +> 3. In the Developer Tools panel, click on the Lighthouse icon located on the left-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 performance and any other relevant options you want to test, then click "Generate report." +> +> 5. After Lighthouse completes its analysis, you'll see a report with scores and recommendations to improve the performance, accessibility, and other areas of your website. +> +> By following these steps, you can use Lighthouse to test and optimize the performance of your website, which can help improve user experience and search engine rankings. ===================== Content prompt used: @@ -35,8 +35,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. Test delle prestazioni con Lighthouse +2. I passaggi su come 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..57daf02 100644 --- a/src/content/docs/it/_roundtrip_picture-examples.txt +++ b/src/content/docs/it/_roundtrip_picture-examples.txt @@ -1,10 +1,13 @@ --- -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 how to use the element for responsive images, + art direction, and different image formats +taskInputHash: 8949b4f455087356 lang: en +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- Here are some examples of using the `` element and their explanations: @@ -48,11 +51,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 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 loading times and improving the user experience. +For example, in the first example above, we used the `media` attribute to specify the screen width below which to 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. This allows for appropriately sized images to be provided 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 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 work well on any device. ===================== Content prompt used: @@ -66,7 +69,7 @@ Also carefully translate the title and description for the article; do not use & 2. Provides examples using the element, for responsive images, art direction and different image formats Metadata returned1. Esempi di utilizzo dell'elemento -2. Fornisce esempi di utilizzo dell'elemento per immagini responsive, direzione artistica e diversi formati di immagine. +2. Fornisce esempi di utilizzo dell'elemento per immagini responsive, direzione d'arte e differenti formati di immagini 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..a2d9495 100644 --- a/src/content/docs/it/_roundtrip_pixels-not-pixels.txt +++ b/src/content/docs/it/_roundtrip_pixels-not-pixels.txt @@ -1,23 +1,22 @@ --- title: px ≠ pixel -description: Device pixels ≠ browser pixels ≠ image pixels -taskInputHash: 9e3d515b23db4c50 +description: Device Pixel ≠ Browser Pixel ≠ Image Pixel +taskInputHash: 30d633a4ce310a0f lang: en -ignore: '/* cSpell:locale it,en*/' sidebar_sort_priority: 900 -date_published: '2023-03-26' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -### Device pixels ≠ browser pixels ≠ image pixels +### Device Pixel ≠ Browser Pixel ≠ Image Pixel -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`) **usually correspond to multiples of device/printer pixels**. My phone's devicePixelRatio 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's devicePixelRatio changes when I zoom in the browser, but is 1.5 by default (after all, my `System > Display > Scale` is set to 150%). -Image files (excluding SVGs) decode a grid of pixels. **It's annoyingly difficult to display image pixels perfectly 1:1 with device pixels, but with the `srcset` attribute, you can come close enough**, and some JavaScript can adjust the size of the HTML element after loading if you have a really good reason to need that perfect correspondence, although such forbidden tricks won't be revealed here. +Image files (excluding SVGs) decode into a grid of pixels. **It's very difficult to perfectly match image pixels to device pixels at a 1:1 ratio, but with `srcset` you can get *close enough* **, and a bit of JavaScript code can adjust the HTML element size after loading if there are justifiable reasons for that perfect match, though we won't disclose those naughty techniques 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/docs/Web/CSS/length) are defined in terms of CSS pixels and assume that everything has a 96dpi resolution. Developers avoid absolute units because it's generally better to use units based on font sizes or viewport/container dimensions. Using non-matching units can break a layout if the client adjusts the `Accessibility > Text Size Multiplier`, zooms the browser, or rotates the device. That being said, you should try all those things before shipping the site. {{Note that the term used here is not the technical term...}}. ===================== diff --git a/src/content/docs/it/_roundtrip_specify-width-height.txt b/src/content/docs/it/_roundtrip_specify-width-height.txt index a9eb002..556dbd2 100644 --- a/src/content/docs/it/_roundtrip_specify-width-height.txt +++ b/src/content/docs/it/_roundtrip_specify-width-height.txt @@ -1,20 +1,19 @@ --- -title: Using width and height -description: Benefits of using width and height attributes in HTML code -taskInputHash: 34a145dde0e451eb +title: Use Width and Height +description: Advantages of using width and height attributes in HTML code +taskInputHash: 2c99c7f88c7255ed lang: en -ignore: '/* cSpell:locale it,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- Why should you include width and height in HTML? -> 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. +> It is recommended to include the 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 space on the web page for the image, avoiding content jumping 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 and avoid unnecessary fillings or redraws of content while it loads. +> +> In general, using the width and height attributes in HTML code for images can improve the user experience by making content loading faster and reducing visual imperfections. ===================== 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. Utilizza larghezza e altezza -2. Vantaggi dell'utilizzo degli attributi di larghezza e altezza nel codice HTML +Metadata returned1. Usa larghezza e altezza +2. Vantaggi nell'utilizzo degli attributi di larghezza e altezza nel codice HTML Roundtrip (isolated) prompt used: 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..33cf2ff 100644 --- a/src/content/docs/it/_roundtrip_when-to-use-picture.txt +++ b/src/content/docs/it/_roundtrip_when-to-use-picture.txt @@ -1,24 +1,25 @@ --- -title: When to Use the Element -description: Explains in which scenarios the element should be used -taskInputHash: 583a9afd2e45d56a +title: When to use the Element +description: Explains in which situations you should use the element. +taskInputHash: a2c5811d41d489da lang: en -ignore: '/* cSpell:locale it,en*/' -date_published: '2023-03-27' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -The `picture` element is used to provide multiple versions of an image and determine which version of the image to display based on certain conditions. It is particularly useful for optimizing images for different screen sizes and resolutions and is commonly used in responsive web design. Here are some specific scenarios in which you may want to use the `picture` element: +The `picture` element is used to provide multiple versions of an image and determines which version 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. -* **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 where 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 Screens:** High-density screens like Apple's Retina displays 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 with 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 loading times. -Overall, the `picture` element is a powerful tool that can help optimize images for a variety of use cases and ensure that they look great on any device or screen size they are displayed on. +* **Layout Driven by Artwork:** 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 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 can help you optimize your images for a variety of use cases and ensure they look their best on any device or screen size they are displayed on. ===================== Content prompt used: @@ -31,8 +32,8 @@ Also carefully translate the title and description for the article; do not use & 1. When to use element 2. Explains in which situations you should use the element -Metadata returned1. Quando utilizzare l'elemento -2. Spiega in quali situazioni si dovrebbe utilizzare l'elemento +Metadata returned1. Quando usare l'elemento +2. Spiega in quali situazioni dovresti usare 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..76627f7 100644 --- a/src/content/docs/it/_roundtrip_width-density.txt +++ b/src/content/docs/it/_roundtrip_width-density.txt @@ -1,22 +1,21 @@ --- title: Width and Density Descriptors description: Examples of using width and density descriptors in `srcset` -taskInputHash: ea49fc07cb749a51 +taskInputHash: b4c91fed1ce98c24 lang: en -ignore: '/* cSpell:locale it,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Understanding Width (`w`) and Density (`x`) Descriptors in `srcset`. Use examples and Markdown. +## Understanding Width (w) and Density (x) Descriptors in `srcset` -> `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. +The `srcset` attribute is an HTML attribute that allows developers to provide multiple image sources with different resolutions or pixel densities, enabling the browser to select the appropriate image based on the characteristics of the display device. The `srcset` attribute uses a combination of `URL`s and `w` or `x` descriptors to specify images. -## Width Descriptor (`w`) +## Width Descriptor (w) -> The `w` descriptor is used to specify the width of an image in pixels. It is used when we want to provide the browser with the size of an image so that it can choose the appropriate image for the available space on the screen. +The `w` descriptor is used to specify the width of an image in pixels. It is used when we want to provide the browser with the dimensions of an image so that it can choose the appropriate image for 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 ``` -> In the example above, we have provided the browser with three images and their corresponding widths in pixels. The browser will select the image with the width closest to the available space on the screen. +In the example above, we have provided the browser with three images and their respective pixel widths. The browser will select the image with the width closest to the available screen space. -## Density Descriptor (`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 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` is as follows: +The syntax for using the `x` descriptor in `srcset` is as follows: ```html Example image ``` -> In the example above, we have provided the browser with three images and their corresponding pixel densities. The browser will select the image with the pixel density closest to the device screen. +In the example above, we have provided the browser with three images and their respective pixel densities. The browser will select the image with the pixel density closest to the device 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 selection options. ===================== 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. Descrittori di larghezza e densità -2. Esempi di utilizzo dei descrittori di larghezza e densità in `srcset` +Metadata returned1. Descrittori width e density +2. Esempi di utilizzo dei descrittori width e density in `srcset` Roundtrip (isolated) prompt used: diff --git a/src/content/docs/it/breakpoints.md b/src/content/docs/it/breakpoints.md index 39943b9..98f9b04 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: Breakpoints e immagini +description: >- + Perché alcuni (ma non tutti) i punti di interruzione sono importanti per le + tue immagini +taskInputHash: 1dc3f28d444f3158 lang: it -ignore: '/* cSpell:locale it,en*/' -date_published: '2023-03-26' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- ### Contesto -Schermi piccoli e monitor grandi richiedono layout diversi. Per lo scopo di `srcset` e `sizes`, dobbiamo sapere a che punto avviene il cambio di layout. +Schermi piccoli e grandi richiedono 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? +Gli sviluppatori web devono decidere cosa contrarre, nascondere o spostare su schermi più piccoli - o, più comunemente, cosa espandere, rivelare o aggiungere su schermi più grandi. Hanno anche pochissime informazioni a disposizione. L'utente sta utilizzando un tablet o un telefono in modalità landscape - o è in 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 viene chiamato **punto di interruzione**. È un numero arbitrario di pixel CSS ([non pixel del dispositivo](/it/pixels-non-pixel)). Polypane ha un [ottimo articolo](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023) sui punti di interruzione 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 di layout causati da questi punti di interruzione (e ben funzionare con il [descrittore di densità](/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 dispositivi più grandi, una `max-width`, ma sui dispositivi più piccoli, l'area del contenuto principale occuperà 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 un certo punto di interruzione, sarà più difficile calcolare le regole di dimensionamento effettive, poiché la percentuale della larghezza del viewport che l'immagine occupa cambierà. ### Il metodo facile -Detto questo, non bisogna sovrapensare. Probabilmente sarete molto OK con la seguente approssimazione: +Detto ciò, non bisogna troppo complicarsi le cose. Probabilmente andrà bene 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 si ferma 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 indicare che l'immagine occupa il 100% della larghezza del viewport. +2. Qual è la larghezza massima mai raggiunta da quel contenitore? Possiamo impostarla come larghezza fissa per tutto il resto. -Se la vostra risposta al punto 1 è stata 700px e la risposta al punto 2 è stata 800px, potete usare il seguente attributo `sizes`: +Se la risposta a 1 è 700px e la risposta a 2 è 800px, è possibile utilizzare il seguente attributo `sizes`: ```html - + ``` -> Potreste pensare che il browser potrebbe gestire tutte queste elaborazioni per noi basandosi sul CSS. Sfortunatamente, i browser sono aggressivamente desiderosi di scegliere un URL dell'immagine *prima* che i fogli di stile vengano scaricati. Quindi dobbiamo fare i calcoli da soli, e farà loro comodo se non riusciamo a farlo perfettamente. +> Potresti pensare che il browser possa gestire in modo adeguato tutti questi calcoli per noi basandosi sul CSS. Purtroppo, i browser sono aggressivamente desiderosi di scegliere un URL dell'immagine *prima* che i fogli di stile siano scaricati. Quindi dobbiamo fare noi i calcoli, e se non li facciamo perfettamente, pazienza per loro. diff --git a/src/content/docs/it/browser-picks-srcset.md b/src/content/docs/it/browser-picks-srcset.md index fba5b78..ee2f7bf 100644 --- a/src/content/docs/it/browser-picks-srcset.md +++ b/src/content/docs/it/browser-picks-srcset.md @@ -1,16 +1,15 @@ --- title: Come sceglie il browser description: Come il browser sceglie tra le immagini elencate nell'attributo srcset -taskInputHash: 0eb976f059b10502 +taskInputHash: 9d76226efed7cd73 lang: it -ignore: '/* cSpell:locale it,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Come sceglie il browser tra le immagini elencate nell'attributo srcset? Ecco una procedura dettagliata, con esempi sia per le specifiche di larghezza che di densità e come il browser decide in base al dispositivo e alla viewport. +Come fa il browser a scegliere tra le immagini elencate nell'attributo srcset? Ecco una guida passo-passo, con esempi sia per le specifiche di larghezza che per quelle 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 una serie di regole per scegliere l'immagine più appropriata da una lista di sorgenti fornite. 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à dei pixel (utilizzando il descrittore `x`). Andiamo attraverso ogni caso con degli esempi. 1\. Descrittore di larghezza (`w`): @@ -18,23 +17,23 @@ Supponiamo di avere il seguente attributo `srcset`: ```html -Example Image +Immagine di esempio ``` -Il browser seguirà questi passaggi: +Il browser seguirà questi passi: -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. +a. Determina 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. Calcola la larghezza effettiva per ogni immagine nell'`srcset`. Moltiplica il descrittore di larghezza per il DPR. Per un dispositivo con un DPR di 1: -- example-small.jpg: 400 \* 1 = 400px +- example-small.jpg: 400 * 1 = 400px -- example-medium.jpg: 800 \* 1 = 800px +- example-medium.jpg: 800 * 1 = 800px -- example-large.jpg: 1600 \* 1 = 1600px +- example-large.jpg: 1600 * 1 = 1600px -c. 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. Confronta le larghezze effettive con la larghezza della viewport. Supponiamo che la larghezza della viewport sia 420px. Il browser sceglierà l'immagine più piccola con una larghezza effettiva maggiore o uguale alla larghezza viewport. In questo caso, selezionerà `example-medium.jpg`. 2\. Descrittore di densità dei pixel (`x`): @@ -42,15 +41,15 @@ Supponiamo di avere il seguente attributo `srcset`: ```html -Example Image +Immagine di esempio ``` -Il browser seguirà questi passaggi: +Il browser seguirà questi passi: -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. +a. Determina 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. Confronta il DPR del dispositivo con i descrittori `x` nell'`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. Scegli l'immagine con il descrittore `x` più vicino al DPR del dispositivo. Per un dispositivo con un DPR di 1, il browser selezionerà `example-1x.jpg`. Per un dispositivo con un DPR di 2, sceglierà `example-2x.jpg`, e così via. -È importante notare che è possibile utilizzare anche l'attributo `sizes` in combinazione con l'attributo `srcset` per fornire ulteriori informazioni su come l'immagine verrà visualizzata su diverse larghezze viewport. Questo è particolarmente utile quando si utilizza il descrittore di larghezza (`w`). Ecco un esempio: +È importante notare che è anche possibile utilizzare l'attributo `sizes` in combinazione con l'attributo `srcset` per fornire ulteriori informazioni su come l'immagine verrà visualizzata a diverse larghezze viewport. Questo è particolarmente utile quando si utilizza il descrittore di larghezza (`w`). Ecco un esempio: ```html diff --git a/src/content/docs/it/density-descriptors.md b/src/content/docs/it/density-descriptors.md index 499d6b0..f907ae9 100644 --- a/src/content/docs/it/density-descriptors.md +++ b/src/content/docs/it/density-descriptors.md @@ -1,42 +1,45 @@ --- -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 d'uso dei descrittori di densità in `srcset` +taskInputHash: 8a445e12ba15aba8 lang: it -ignore: '/* cSpell:locale it,en*/' -date_published: '2023-03-26' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Srcset con i descrittori di densità fornisce un metodo semplice ed efficace per fornire l'immagine più adatta al dispositivo dell'utente, migliorando le prestazioni e l'esperienza dell'utente. Questa guida ti guiderà attraverso gli elementi essenziali dell'utilizzo di srcset con descrittori di densità e fornirà esempi di markup per la tua convenienza. -## Cosa è Srcset con descrittori di densità? +Srcset con i descrittori di densità fornisce un metodo semplice ed efficace per consegnare l'immagine più adatta al dispositivo di ciascun utente, migliorando le prestazioni e l'esperienza utente. Questa guida ti mostrerà gli elementi essenziali dell'utilizzo di srcset con descrittori di densità e fornirà esempi di markup per la tua convenienza. -Srcset è un attributo HTML progettato per consentire di specificare più origini di immagini per un singolo elemento ``. I descrittori di densità (`x`) vengono utilizzati insieme a srcset per fornire immagini a diverse risoluzioni in base alla densità di pixel del display dell'utente. -## Quando usare Srcset con descrittori di densità +## Che cos'è Srcset con descrittori di densità? -L'utilizzo di srcset con descrittori di densità è particolarmente utile quando si desidera: -1. Fornire immagini ad alta risoluzione ai display ad alta DPI (ad esempio, i display Retina) mentre si forniscono immagini a risoluzione inferiore ai display standard. -2. Migliorare le prestazioni della pagina fornendo le immagini più appropriate a ciascun dispositivo dell'utente. -## Implementare Srcset con descrittori di densità +Srcset è un attributo HTML progettato per consentire di specificare molteplici fonti di immagine per un singolo elemento ``. I descrittori di densità (`x`) vengono utilizzati in combinazione con srcset per fornire immagini a diverse risoluzioni in base alla densità di pixel del display dell'utente. + +## Quando utilizzare Srcset con descrittori di densità? + +Utilizzare srcset con descrittori di densità è particolarmente utile quando vuoi: +1. Servire immagini ad alta risoluzione a dispositivi ad alta risoluzione (ad esempio, display Retina) mentre si forniscono immagini a bassa risoluzione a display standard. +2. Migliorare le prestazioni della pagina consegnando la dimensione dell'immagine più appropriata per il dispositivo di ciascun utente. + +## Implementazione di Srcset con descrittori di densità 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. + +1. Prepara le tue immagini in diverse risoluzioni. +2. Aggiungi l'attributo `srcset` all'elemento ``, inclusi la fonte delle immagini e i descrittori di densità corrispondenti. +3. Aggiungi l'attributo `sizes` (opzionale) per specificare la dimensione dell'immagine visualizzata sullo schermo. + ### Esempio di markup -Ecco un esempio di come implementare srcset con descrittori di densità nel tuo markup: +Ecco un esempio di come utilizzare srcset con descrittori di densità nel tuo markup: ```html Un esempio di immagine + alt="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. +- **src**: la fonte dell'immagine predefinita, visualizzata se il browser non supporta srcset. +- **srcset**: l'elenco di fonti di immagini e i relativi descrittori di densità (1x, 2x, 3x). Il browser sceglierà l'immagine più appropriata in base al display dell'utente. - **alt**: una descrizione dell'immagine per scopi di accessibilità. E questo è tutto! Hai implementato con successo srcset con descrittori di densità, migliorando le prestazioni del tuo sito web e l'esperienza dell'utente. diff --git a/src/content/docs/it/introduction.md b/src/content/docs/it/introduction.md index 0de941c..fd61562 100644 --- a/src/content/docs/it/introduction.md +++ b/src/content/docs/it/introduction.md @@ -1,39 +1,38 @@ --- -title: srcset e le dimensioni delle tag -description: Una Guida Efficient and Opinionated alle Immagini Responsive per il 2023 -taskInputHash: 770938b4f7895424 +title: srcset e dimensioni +description: Una guida efficiente e opinabile alle immagini responsive per il 2023 +taskInputHash: 7c0db2e5e6194bc9 lang: it -ignore: '/* cSpell:locale it,en*/' sidebar_sort_priority: 1000 -date_published: '2023-03-23' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -**Una Guida Efficient and Opinionated sulle Immagini per il 2023** +**Una guida efficiente e opinabile sulle immagini per il 2023** + +Controlla la barra laterale per la dettagliata delucidazione. Questo è il riferimento veloce per aggiornare i tag `` per gestire dispositivi moderni in tutte le loro dimensioni e densità di pixel. Dovresti [sapere che i pixel != pixel](/it/pixel-non-sono-tutti-uguali) e che `devicePixelRatio` è più probabile che sia 3.875 invece di 1:1. I telefoni moderni si fingono larghi da 320 a 428px per la leggibilità (in pixel CSS), ma hanno molti pixel del dispositivo per pixel CSS. -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 di dimensione, senza importare quanto ridimensioni la finestra del browser, dovresti usare un [descrittore di densità](/it/density-descriptors). Questo è spesso adatto per loghi, icone e pulsanti. -> Se la tua immagine non cambia mai 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. +Sai quali sono i tuoi [punti di interruzione](/it/breakpoints)? Avrai bisogno di questi numeri per affinare la soluzione qui sotto - e almeno il punto di interruzione in larghezza del viewport in cui l'area di contenuto principale smette di aumentare. ### Il metodo facile ```html -Cane che cavalca una bicicletta + sizes="(max-width: 700px) 100vw, 800px" alt="Cane che guida una bicicletta" /> - + - + ``` diff --git a/src/content/docs/it/lighthouse-performance-test.md b/src/content/docs/it/lighthouse-performance-test.md index 94f71a6..cc60a95 100644 --- a/src/content/docs/it/lighthouse-performance-test.md +++ b/src/content/docs/it/lighthouse-performance-test.md @@ -1,25 +1,26 @@ --- -title: Testare la performance con Lighthouse -description: Passaggi su come testare la performance di un sito web usando Lighthouse -taskInputHash: 174be49cc119f58b +title: Test delle prestazioni con Lighthouse +description: >- + I passaggi su come testare le prestazioni di un sito web utilizzando + Lighthouse +taskInputHash: 4f7942b4139a285a lang: it -ignore: '/* cSpell:locale it,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Come si testa la performance del tuo sito con Lighthouse? +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 vai alla pagina che vuoi 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 usa la scorciatoia da tastiera "Ctrl+Shift+I" (Windows, Linux) o "Command+Option+I" (macOS). +> +> 3\. Nel pannello Strumenti per sviluppatori, fai clic sull'icona di Lighthouse situata sul lato sinistro del pannello o premi "Ctrl+Shift+P" (Windows, Linux) o "Command+Shift+P" (macOS) per aprire il menu Comandi, quindi digita "Lighthouse" e seleziona "Genera rapporto". +> +> 4\. Nella finestra di dialogo di Lighthouse, seleziona le opzioni di prestazione 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 le prestazioni, l'accessibilità e altri ambiti 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 nei motori di ricerca. diff --git a/src/content/docs/it/picture-examples.md b/src/content/docs/it/picture-examples.md index f33fbe9..f684b51 100644 --- a/src/content/docs/it/picture-examples.md +++ b/src/content/docs/it/picture-examples.md @@ -1,16 +1,15 @@ --- 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, + direzione d'arte e differenti formati di immagini +taskInputHash: 8949b4f455087356 lang: it -ignore: '/* cSpell:locale it,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Ecco alcuni esempi di utilizzo dell'elemento `` e le loro spiegazioni: +Ecco alcuni esempi di utilizzo dell'elemento `` e le relative spiegazioni: 1. Esempio per immagini responsive: @@ -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 differenti sorgenti di immagine per diversi formati di schermo. Gli elementi `` specificano le diverse sorgenti di immagine utilizzando l'attributo "srcset" e l'attributo "media" per specificare le condizioni in cui ogni sorgente deve essere utilizzata. L'elemento `` viene utilizzato come fallback per i browser meno recenti o quando non vengono soddisfatte le condizioni specificate negli elementi ``. -2. Esempio per la direzione artistica: +2. Esempio per direzione d'arte: ```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 differenti sorgenti di immagine a seconda dell'orientamento del dispositivo. L'elemento `` con l'attributo "media" impostato su "(orientation: landscape)" specifica una sorgente di immagine per schermi larghi, mentre l'elemento `` specifica una sorgente di immagine per schermi verticali. -3. Esempio per diversi formati di immagine: +3. Esempio per differenti formati di immagini: ```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 differenti sorgenti di immagine per diversi formati di immagine. Gli elementi `` specificano diverse sorgenti di immagine utilizzando l'attributo "srcset" e l'attributo "type" per specificare il formato dell'immagine. L'elemento `` viene utilizzato come fallback per i browser meno recenti che non supportano l'elemento ``. -## Punti di interruzione +## 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 punti di interruzione vengono utilizzati per definire quando il layout di un sito web o di un'applicazione dovrebbe cambiare in base alla dimensione del viewport. I punti di interruzione vengono tipicamente definiti utilizzando media query in CSS, che applicano diversi stili a seconda della larghezza dello schermo. Questi punti di interruzione possono essere utilizzati in conjunction con l'elemento `` per fornire differenti sorgenti di immagine per diverse dimensioni dello schermo. -Ad esempio, nel primo esempio sopra, abbiamo utilizzato l'attributo `media` per specificare la larghezza dello schermo in base alla quale utilizzare ciascuna fonte. Quando la larghezza dello schermo è maggiore o uguale a 768 pixel, verrà utilizzata la fonte "image-large.jpg"; quando la larghezza dello schermo è maggiore o uguale a 480 pixel ma inferiore a 768 pixel, verrà utilizzata la fonte "image-medium.jpg"; e quando la larghezza dello schermo è inferiore a 480 pixel, verrà utilizzata la fonte "image-small.jpg". Questo ci consente di servire immagini delle dimensioni appropriate per ogni dispositivo, riducendo i tempi di caricamento delle pagine e migliorando l'esperienza dell'utente. +Ad esempio, nel primo esempio sopra, abbiamo utilizzato l'attributo `media` per specificare la larghezza dello schermo sotto cui utilizzare ogni sorgente. Quando la larghezza dello schermo è maggiore o uguale a 768 pixel, verrà utilizzata la sorgente `image-large.jpg`; quando la larghezza dello schermo è maggiore o uguale a 480 pixel ma inferiore a 768 pixel, verrà utilizzata la sorgente `image-medium.jpg`; e quando la larghezza dello schermo è inferiore a 480 pixel, verrà utilizzata la sorgente `image-small.jpg`. Ciò consente di fornire immagini di dimensioni appropriate per ogni dispositivo, riducendo i tempi di caricamento della pagina e migliorando l'esperienza 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 punti di interruzione possono essere definiti per qualsiasi dimensione dello schermo e possono essere utilizzati più punti di interruzione per creare layout che rispondano a una vasta gamma di dispositivi. Combinando i punti di interruzione con l'elemento ``, è possibile creare design flessibili e responsive 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..79f5119 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 +taskInputHash: 30d633a4ce310a0f lang: it -ignore: '/* cSpell:locale it,en*/' sidebar_sort_priority: 900 -date_published: '2023-03-26' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -### Pixel del dispositivo ≠ pixel del browser ≠ pixel dell'immagine +### Pixel dei dispositivi ≠ px del browser ≠ px 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 multipli di pixel del dispositivo/stampante**. Il devicePixelRatio del mio telefono è 3,875; [qual è il tuo?](https://www.mydevice.io/it/) -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 devicePixelRatio del mio desktop cambia durante lo zoom del browser, ma di default è 1,5 (dopotutto, la mia `Systema > Display > Scale` è al 150%). -I file di immagine (escludendo gli SVG) decodificano una griglia di pixel. **È fastidiosamente difficile ottenere la visualizzazione dei pixel dell'immagine perfettamente a un rapporto 1:1 con i pixel del dispositivo - ma con l'attributo `srcset` puoi avvicinarti abbastanza**, e un po' di Javascript può regolare la dimensione dell'elemento HTML dopo il caricamento se hai motivi davvero giustificati per necessitare di quella corrispondenza perfetta, anche se tali arti proibite non saranno svelate qui. +I file di immagine (esclusi gli SVG) decodificano in una griglia di pixel. **È molto difficile rendere i pixel dell'immagine perfettamente visibili con un rapporto di 1:1 con i pixel del dispositivo, ma con `srcset` puoi arrivare ad un valore *abbastanza vicino* **, e un po' di codice Javascript può regolare le dimensioni dell'elemento html dopo il caricamento se ci sono ragioni giustificate per avere quella corrispondenza perfetta, anche se qui non sveleremo tali tecniche proibite. -> 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 abbia una risoluzione di 96dpi. I developers evitano le unità assolute perché è generalmente meglio usare unità derivate dalle dimensioni del carattere o delle dimensioni del viewport/contenitore. L'utilizzo di unità non corrispondenti può rompere un layout se il cliente regola il moltiplicatore `Accessibilità > Dimensioni del testo`, zooma il browser o ruota il dispositivo. Ciò detto, dovresti provare tutte queste cose prima di rilasciare il sito. diff --git a/src/content/docs/it/specify-width-height.md b/src/content/docs/it/specify-width-height.md index 1d94fdd..96168cd 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 -description: Vantaggi dell'utilizzo degli attributi di larghezza e altezza nel codice HTML -taskInputHash: 34a145dde0e451eb +title: Usa larghezza e altezza +description: Vantaggi nell'utilizzo degli attributi di larghezza e altezza nel codice HTML +taskInputHash: 2c99c7f88c7255ed lang: it -ignore: '/* cSpell:locale it,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- Perché dovresti inserire larghezza e altezza nell'HTML? -> Si consiglia di inserire gli attributi di larghezza e altezza nel codice HTML delle immagini poiché aiuta il browser web a conoscere le dimensioni dell'immagine prima che sia completamente caricata. Questo permette al browser di riservare la quantità appropriata di spazio sulla pagina web per l'immagine, evitando che il contenuto salti mentre l'immagine viene caricata. -> -> 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. -> -> 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. +> Si consiglia di inserire gli attributi width e height nel codice HTML per le immagini perché aiuta il browser web a conoscere le dimensioni dell'immagine prima che essa sia completamente caricata. Ciò consente al browser di riservare lo spazio appropriato sulla pagina web per l'immagine, evitando che il contenuto salti mentre l'immagine viene caricata. +> +> Inoltre, specificare gli attributi width e height per le immagini può anche contribuire a migliorare le prestazioni complessive della pagina Web. Quando un browser conosce le dimensioni di un'immagine in anticipo, può calcolare in modo più preciso la quantità di spazio necessaria per visualizzare l'immagine e evitare riempimenti o ridisegni non necessari dei contenuti mentre questa viene caricata. +> +> Nel complesso, l'utilizzo degli attributi width e height nel codice HTML per le immagini può migliorare l'esperienza utente rendendo il caricamento del contenuto più veloce e riducendo le imperfezioni visive. diff --git a/src/content/docs/it/when-to-use-picture.md b/src/content/docs/it/when-to-use-picture.md index 6a43d70..a2b9aac 100644 --- a/src/content/docs/it/when-to-use-picture.md +++ b/src/content/docs/it/when-to-use-picture.md @@ -1,22 +1,21 @@ --- -title: Quando utilizzare l'elemento -description: Spiega in quali situazioni si dovrebbe utilizzare l'elemento -taskInputHash: 583a9afd2e45d56a +title: Quando usare l'elemento +description: Spiega in quali situazioni dovresti usare l'elemento +taskInputHash: a2c5811d41d489da lang: it -ignore: '/* cSpell:locale it,en*/' -date_published: '2023-03-27' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -L'elemento `picture` viene utilizzato per fornire più versioni di un'immagine e determina quale versione dell'immagine visualizzare in base a determinate condizioni. È particolarmente utile per ottimizzare le immagini per diverse dimensioni e risoluzioni dello schermo ed è comunemente usato nel web design responsive. -Ecco alcuni scenari specifici in cui potresti voler utilizzare l'elemento `picture`: +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 design web responsivo. +Ecco alcuni scenari specifici in cui potresti voler usare l'elemento `picture`: -* **Display Retina:** gli schermi ad alta densità come i display Retina di Apple hanno una densità di pixel maggiore, il che significa che le immagini possono sembrare sfocate o pixelate se non sono ottimizzate per l'alta risoluzione. Con l'elemento `picture`, è possibile fornire una versione dell'immagine che ha il doppio dei pixel della versione normale, in modo che appaia nitida e chiara sui display Retina. +* **Schermi Retina:** Schermi ad alta densità come i display Retina di Apple hanno una densità di pixel superiore, 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 con 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. +* **Diversi rapporti di aspetto:** Se stai progettando un sito che ha bisogno di visualizzare immagini con diversi rapporti di aspetto (come paesaggio vs ritratto), puoi usare l'elemento `picture` per fornire diverse versioni dell'immagine ottimizzate per ciascun rapporto di aspetto. -* **Limitazioni della larghezza di banda:** le immagini possono essere file di grandi dimensioni che occupano molta larghezza di banda, specialmente su dispositivi mobili. Con l'elemento `picture`, è possibile fornire versioni più piccole dell'immagine per dispositivi con schermi più piccoli o connessioni Internet più lente, il che può aiutare a ridurre i tempi di caricamento della pagina. +* **Limitazioni di larghezza di banda:** Le immagini possono essere file di grandi dimensioni che occupano molta larghezza di banda, soprattutto sui dispositivi mobili. Con l'elemento `picture`, è possibile fornire versioni più piccole dell'immagine per dispositivi con schermi più piccoli o connessioni internet più lente, il che può contribuire 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 guidati dall'arte grafica:** 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 una vista più ampia sui dispositivi desktop. L'elemento `picture` consente di fornire diverse versioni dell'immagine ottimizzate per diversi layout. -Complessivamente, l'elemento `picture` è uno strumento potente che può aiutare a ottimizzare le immagini per una varietà di casi d'uso e garantire che appaiano fantastici su qualsiasi dispositivo o dimensione dello schermo su cui vengono visualizzati. +Complessivamente, l'elemento `picture` è uno strumento potente che può aiutarti a ottimizzare le tue immagini per una varietà di casi d'uso e garantire che appaiano ottimali 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..d0539a3 100644 --- a/src/content/docs/it/width-density.md +++ b/src/content/docs/it/width-density.md @@ -1,48 +1,46 @@ --- -title: Descrittori di larghezza e densità -description: Esempi di utilizzo dei descrittori di larghezza e densità in `srcset` -taskInputHash: ea49fc07cb749a51 +title: Descrittori width e density +description: Esempi di utilizzo dei descrittori width e density in `srcset` +taskInputHash: b4c91fed1ce98c24 lang: it -ignore: '/* cSpell:locale it,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Capire i descrittori di larghezza (w) e densità (x) in `srcset`. Usare esempi e usare Markdown. +## Comprensione dei descrittori width (w) e density (x) in `srcset` -> `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`) +L'attributo `srcset` è un attributo HTML che consente ai developer di fornire più fonti di immagini con diverse risoluzioni o densità di pixel, permettendo al browser di selezionare l'immagine appropriata in base alle caratteristiche del dispositivo di visualizzazione. L'attributo `srcset` utilizza una combinazione di `URL` e descrittori `w` o `x` per specificare le immagini. -> 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. +## Descrittore Width (`w`) -> La sintassi per utilizzare il descrittore `w` in `srcset` è la seguente: +Il descrittore `w` viene utilizzato per specificare la larghezza di un'immagine in pixel. Viene utilizzato quando desideriamo fornire al browser le dimensioni di un'immagine in modo che possa scegliere l'immagine appropriata per lo spazio disponibile sullo schermo. + +La sintassi per utilizzare il descrittore `w` in `srcset` è la seguente: ```html Esempio immagine + alt="Immagine di esempio"> ``` +Nell'esempio sopra abbiamo fornito al browser tre immagini e le loro rispettive larghezze in pixel. Il browser selezionerà l'immagine con la larghezza più vicina allo spazio sullo schermo disponibile. +## Descrittore Density (`x`) -> 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`) - -> Il descrittore `x` viene utilizzato per specificare la densità di pixel di un'immagine, che è il rapporto tra pixel fisici e pixel CSS. Viene utilizzato quando vogliamo fornire al browser diverse versioni della stessa immagine con diverse densità di pixel. +Il descrittore `x` viene utilizzato per specificare la densità di pixel di un'immagine, che è il rapporto tra i pixel fisici e i pixel CSS. Viene utilizzato quando desideriamo 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 utilizzare il descrittore `x` in `srcset` è la seguente: ```html Esempio immagine + alt="Immagine di esempio"> ``` +Nell'esempio sopra abbiamo fornito al browser tre immagini e le loro rispettive densità di pixel. 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 loro densità di pixel corrispondenti. Il browser selezionerà l'immagine con la densità di pixel più vicina allo schermo del dispositivo. - -> Notare che i descrittori `w` e `x` possono essere utilizzati insieme nello stesso attributo `srcset` per fornire al browser più opzioni di scelta. +Si noti che i descrittori `w` e `x` possono essere utilizzati insieme nello stesso attributo `srcset` per fornire al browser maggiori opzioni di scelta. diff --git a/src/content/docs/ja/_roundtrip_breakpoints.txt b/src/content/docs/ja/_roundtrip_breakpoints.txt index 588b9bd..afa047e 100644 --- a/src/content/docs/ja/_roundtrip_breakpoints.txt +++ b/src/content/docs/ja/_roundtrip_breakpoints.txt @@ -1,44 +1,41 @@ --- title: Breakpoints and Images -description: Why some (not all) breakpoints are important in images -taskInputHash: f409cdb7248e141b +description: Why (but not all) breakpoints are important for your images +taskInputHash: 1fed01119b132d9d lang: en -ignore: '/* cSpell:locale ja,en*/' -date_published: '2023-03-26' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- ### Background -Different layouts are needed for small screens and large monitors. To achieve the purposes of `srcset` and `sizes`, you need to know the points at which the layout changes. +Different layouts are required for small screens and large monitors. To achieve the purpose of `srcset` and `sizes`, it is necessary to know the points at which layouts change. -Web developers need to decide what to shrink, hide, or move on small screens or, more generally, what to enlarge, expose, or add on large screens. They have very little information. Is the user using a tablet, landscape phone, or small browser window? +Web developers need to decide what to shrink, hide, or move on small screens, or more generally, what to enlarge, display, or add on large screens. They also have very little information – is the user on a tablet or landscape phone, or in a small browser window? -You need to choose any viewport width at which the layout changes. This is called a **breakpoint**. It's any number of CSS pixels (not device pixels) and Polypane has a great article on [common breakpoints](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023). +Any viewport width at which the layout changes must be selected. 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 (such as logos, icons, buttons, etc.) are immune to layout changes caused by these breakpoints, and there are no issues with density descriptors in `srcset`. +Some images, such as logos, icons, buttons, may be immune to layout shifts caused by these breakpoints (and work fine with [srcset density descriptors](/en/density-descriptors)). -Images in main content are constrained by the size of their containers. Typically, the primary content area of a page is constrained to a specific width that is the maximum screen size. That is, `max-width` is specified, but on small screens, the primary content area occupies the entire viewport. +The main content image is constrained by the size of its container. Typically, the main content area of a page is limited to a certain width on the largest screen (`max-width`). On small screens, the main content area fills the viewport. -When there are multiple columns at some breakpoints, it becomes more difficult to calculate valid sizing rules because the percentage of viewport width occupied by the image changes. +If you have multiple columns at a breakpoint, effective sizing rules can be more difficult to calculate because the proportion of the viewport width occupied by the image changes. -### A Simple Way +### Quick and Dirty -So don't make this too complicated. You can probably get a very reasonable answer with the following approximations. +Don't overthink this, though. Probably, the following approximations are good enough: -1. At what size does the main column (or image container) stop growing? If the viewport width is less than that, you can specify that the image occupies 100% of the viewport width using `100vw` in the `sizes` attribute. -2. What is the maximum width for the container to reach? You can set that as a fixed `width` for everything else. +1. At what size does the main column (or image container) stop growing? Up to that viewport width, the image's `sizes` attribute can use `100vw` to indicate that the image should occupy 100% of the viewport width. +2. What is the maximum width achieved by that container? That can be set as a fixed `width` for everything else. -If the answer to #1 is 700px and the answer to #2 is 800px, you can use the following `sizes` attribute: +If your answer to 1 is 700px and your answer to 2 is 800px, then 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 may think that browsers can process the calculations properly based on CSS. Unfortunately, browsers are very eager to select the image URL they enjoy *before* the stylesheet is downloaded. Therefore, we have to make the calculations ourselves (even if they are not perfect), or they will take revenge on us. ===================== 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. ブレークポイントと画像 -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..d8fa2c6 100644 --- a/src/content/docs/ja/_roundtrip_browser-picks-srcset.txt +++ b/src/content/docs/ja/_roundtrip_browser-picks-srcset.txt @@ -1,60 +1,66 @@ --- -title: How Browsers Select Images in srcset -description: Step-by-step explanation of how browsers choose images listed in the srcset attribute -taskInputHash: c272925d0cc63780 +title: How Browsers Select Images from srcset +description: How do browsers determine which image to select from a list of images in the srcset attribute +taskInputHash: e33bc9ab3ee1a7e0 lang: en +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -How does a browser select which image to display from those listed in the `srcset` attribute? We'll explain step-by-step, providing examples for both width and density descriptors based on device and viewport. +How do web browsers decide which image to select from a list of images in the srcset attribute? Let's look at how they choose based on both the `width` and `density` descriptors, with examples. -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 will use a set of rules to select the best image from the list of provided sources. These rules depend on the characteristics of the device's display (resolution, pixel density) and the size of the viewport. With `srcset`, you can specify different images based on the `width` descriptor (using the `w` descriptor) or pixel density (using the `x` descriptor). Let's explain each of these cases using examples. 1. Width descriptor (`w`): -Assume we have the following `srcset` attribute: +Consider 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 device pixel ratio (DPR). For example, a standard display has a DPR of 1 while high-resolution (Retina) displays have a DPR of 2 or higher. -b. Calculate the effective width for each image in `srcset` by multiplying its width descriptor by the DPR. For devices with a DPR of 1, they would be as follows: +b. Calculate the effective width of each image in the `srcset` by multiplying the width descriptor by the DPR. For DPR of 1: - example-small.jpg: 400 * 1 = 400px - - example-medium.jpg: 800 * 1 = 800px - - example-large.jpg: 1600 * 1 = 1600px -c. Compare each effective width with the viewport width. The browser chooses the smallest image with an effective width larger than the viewport width. In this case, `example-medium.jpg` would be chosen if the viewport width is assumed to be 420px. +c. Compare the effective widths to the viewport width. If the viewport width is 420px, the browser selects the smallest image with an effective width greater than or equal to the viewport width. In this case, `example-medium.jpg` is selected. -2. Density descriptor (`x`): +2. Pixel density descriptor (`x`): -Assume we have the following `srcset` attribute: +Consider 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 device pixel ratio (DPR). For example, a standard display has a DPR of 1 while high-resolution (Retina) displays have a DPR of 2 or higher. -b. Compare 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 `srcset` to the device's DPR. In this case, there are three images with the following descriptors: - example-1x.jpg: 1x - - example-2x.jpg: 2x - - 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 closest `x` descriptor to the device's DPR. For a DPR of 1, the browser selects `example-1x.jpg`. For a DPR of 2, it selects `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: +What's important to note is that when using the `width` descriptor (`w`), by combining the `sizes` attribute with the `srcset` attribute, we can provide more information about how the image will be displayed on different viewport widths. Here's an example: ```html + An example image ``` -This markup example includes the following: +This markup example includes: +- **src**: the default image source that is displayed 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**: a description of the image for accessibility purposes. -- **src**: The default image source to display if the browser does not support srcset. -- **srcset**: A list of image sources and their density descriptors (1x, 2x, 3x). The browser selects the optimal image based on the user's display. -- **alt**: The description of the image for accessibility purposes. - -That's it! You have successfully implemented Srcset with density descriptors and improved your website's performance and user experience. +That's it! You have successfully implemented Srcset with Density Descriptors, improving your website's performance and user experience. ===================== Content prompt used: @@ -56,8 +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. 密度指定子と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..6be110b 100644 --- a/src/content/docs/ja/_roundtrip_introduction.txt +++ b/src/content/docs/ja/_roundtrip_introduction.txt @@ -1,43 +1,41 @@ --- -title: '`srcset` and `sizes` for ``' -description: An Efficient and Subjective Guide to Responsive Images in 2023 -taskInputHash: fb587f981b4441f1 +title: srcset and sizes +description: Efficient and well-formed guide to responsive images in 2023. +taskInputHash: 5849d4b5bb433cd3 lang: en -ignore: '/* cSpell:locale ja,en*/' sidebar_sort_priority: 1000 -date_published: '2023-03-23' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -**An Efficient and Subjective Guide to Responsive Images in 2023** +**Efficient and Well-Formed 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. +Please refer to the sidebar for detailed information. This is a quick reference for upgrading the `` tag to handle all the various sizes and pixel densities of modern devices. It is important to [know that pixels are not pixels](/en/pixels-not-pixels) and to remember that `devicePixelRatio` can be much greater than 1:1. Modern phones pretend to be 320-428px for readability in CSS pixels, but have many device pixels per CSS pixel. -> If an image has to be the same size irrespective of the browser window, [a density descriptor](/en/density-descriptors) should be used. This is suitable for logos, icons, buttons, etc. +> Use [density descriptors](/en/density-descriptors) for images that will not change size no matter how small the browser window gets. This is ideal for logos, icons, and buttons. -Do you know your [breakpoints](/en/breakpoints)? You'll need these numbers to fine-tune the following solutions— at a minimum, you need the breakpoint at which the main content area stops expanding and the viewport width. +Do you know your [breakpoints](/en/breakpoints)? You will need those numbers to fine-tune the solutions below. You need at least one breakpoint for when the main content area expands to the viewport width. -### The Easy Solution +### The Easy Way ```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="Dog riding a bicycle" /> + + + + ``` -{{The translation is complete and accurate.}} +{{Note that "RIAPI" is not a common term and it is not explained in the text.}} ===================== Content prompt used: @@ -50,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` と `` の `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..e71b9ae 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: Step-by-step guide on using Lighthouse to test web performance +taskInputHash: 514590b0de96e45f lang: en -ignore: '/* cSpell:locale ja,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -# How to test website performance with Lighthouse +How to test website 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 to measure website performance, accessibility, and other aspects. Follow the steps below to test the performance of a website using Lighthouse. -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 the three dots in the top right corner of the browser window, 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 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 the Lighthouse icon on the left side of the panel or press "Ctrl + Shift + P" (Windows, Linux) or "Command + Shift + P" (macOS) to open the Command Menu, type "Lighthouse", and select "Generate Report". -4. In the Lighthouse dialog box, select the relevant options for the performance you want to test, then click "Generate report." +> 4. In the Lighthouse dialog box, select the performance and other related options you want to test, and click "Generate Report". -5. Once `Lighthouse` has completed the analysis, a report will be displayed showing the website's performance, accessibility, and other areas along with scores and recommendations for improvement. +> 5. When Lighthouse completes the analysis, it displays a report that includes scores, recommendations for improving website 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 website performance, improving user experience and search engine ranking. ===================== 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..7b7901b 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: 'Examples Using the `` Element' +description: Provide examples using the `` element for responsive images, art direction, and different image formats +taskInputHash: be7eddc11abaf63a lang: en +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Below are examples and explanations for using the `` element: +Here are some examples and their descriptions of using the `` element: -1. Example of a responsive image: +1. Example for 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. +Description: 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" and "media" attributes to specify the conditions under which each source is used. The `` element is used as a fallback for older browsers or when the conditions specified in the `` element are not met. -2. Example of art direction: +2. Example for art direction: ```html - An image + + Image ``` -Explanation: In this example, the `` element is used to provide different image sources depending on the device's orientation. The `` element with the `media` attribute set to `(orientation: landscape)` specifies the image source for wide screens, while the `` element specifies the image source for portrait screens. +Description: In this example, the `` element is used to provide different image sources depending on the device orientation. The `` element with the "media" attribute set to "(orientation: landscape)" specifies the image source for widescreen, while the `` element specifies the image source for portrait screen. -3. Example of different image formats: +3. Example for 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. +Description: In this example, the `` element is used to provide different image sources for different image formats. The `` element specifies different image sources for different image formats using the "srcset" and "type" attributes. The `` element is used as a fallback for older browsers that do not support the `` element. ## Breakpoints -In responsive design, breakpoints define when a website or application's layout changes based on the size of the viewport. Breakpoints are typically defined using CSS media queries, which apply different styles based on screen width. These breakpoints can be used in combination with the `` element to provide different image sources for different screen sizes. +In responsive design, breakpoints are used to define when the layout of a website or application changes based on the size of the viewport. Breakpoints are defined using CSS media queries and apply different styles depending on the screen width. These breakpoints can be used with the `` element to provide different image sources for different screen sizes. -For example, in the first example, 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, the `media` attribute is used to specify the screen width at which each source is used. If the screen width is 768 pixels or more, the `image-large.jpg` source is used. If the screen width is between 480 and 768 pixels, the `image-medium.jpg` source is used. If the screen width is less than 480 pixels, the `image-small.jpg` source is used. This provides images of the appropriate size for each device, reduces page load time, and improves 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 at any screen size and multiple breakpoints can be used to create layouts that are responsive across a wide range of devices. By combining the `` element with breakpoints, you can create great flexible and responsive designs for 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..cc2016e 100644 --- a/src/content/docs/ja/_roundtrip_pixels-not-pixels.txt +++ b/src/content/docs/ja/_roundtrip_pixels-not-pixels.txt @@ -1,23 +1,25 @@ --- -title: px ≠ Pixel -description: Device px ≠ Browser px ≠ Image px -taskInputHash: 73be94d33f113c9c + +title: px ≠ Pixels +description: Device Pixels ≠ Browser Pixels ≠ Image Pixels +taskInputHash: c3c114c4cc3f772b lang: en -ignore: '/* cSpell:locale ja,en*/' sidebar_sort_priority: 900 -date_published: '2023-03-26' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' + --- -### Device pixels ≠ Browser pixels ≠ Image pixels -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/) +### Device Pixels ≠ Browser Pixels ≠ Image Pixels + +Thanks to Apple, CSS and HTML pixels (`px`) correspond to multiple device/printer pixels in most cases. My phone's `devicePixelRatio` is 3.875; [what's 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`). +Desktop `devicePixelRatio` is changed by browser zoom but defaults to 1.5 (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. +Image files (excluding SVG) are decoded into a grid of pixels. It's challenging to perfectly display an image's pixels 1:1 with device pixels, but `srcset` gets us pretty close. If there's really good reason, you can adjust with a little JavaScript after reading the html element's size, but we won't get into that forbidden art 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`) [(MDN)](https://developer.mozilla.org/en-US/docs/Web/CSS/length) are based on the number of CSS pixels and assume all things to be 96dpi. Developers avoid absolute units because it's generally better to use units derived from font size or viewport/container dimensions. Mismatched units can break layouts when the user adjusts the `Accessibility > Text Size` multiplier, zooms in/out in the browser, or rotates device. Needless to say, it's important to take all of these into account before shipping 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. デバイスpx ≠ ブラウザpx ≠ 画像px +2. デバイスの px ≠ ブラウザの px ≠ 画像の px Roundtrip (isolated) prompt used: diff --git a/src/content/docs/ja/_roundtrip_specify-width-height.txt b/src/content/docs/ja/_roundtrip_specify-width-height.txt index 878dc2d..b464850 100644 --- a/src/content/docs/ja/_roundtrip_specify-width-height.txt +++ b/src/content/docs/ja/_roundtrip_specify-width-height.txt @@ -1,20 +1,23 @@ --- -title: Using Width and Height -description: The benefits of using the width and height attributes in HTML code -taskInputHash: 8d1d8f5ead1a1b70 +title: Usage of Width and Height +description: Benefits of using width and height attributes in HTML code +taskInputHash: 8edb8d80ec75276c lang: en -ignore: '/* cSpell:locale ja,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Why is it necessary to specify width and height in HTML code? +Why should we include width and height in HTML? + +> It is recommended to include `width` and `height` attributes in image HTML code so that the browser can know the size of the image before fully loading it. This allows the browser to reserve the appropriate space on the webpage for the image and prevents the content from jumping when the image is being loaded. + +> Additionally, specifying the `width` and `height` attributes of the image can also improve the overall performance of the webpage. When the browser knows the size of the image in advance, it can more accurately calculate the space required to display the image and avoid unnecessary re-layouts and re-paints as the content is being loaded. + +> Overall, by using `width` and `height` attributes in the image HTML code, the content will load faster and visual glitches will be reduced, leading to an improved user experience. + + -> 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. -> -> 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. -> -> Ultimately, using the width and height attributes in HTML code for images can speed up content loading, reduce visual anomalies, and enhance user experience. ===================== Content prompt used: @@ -28,7 +31,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/ja/_roundtrip_when-to-use-picture.txt b/src/content/docs/ja/_roundtrip_when-to-use-picture.txt index e9853cf..841bf18 100644 --- a/src/content/docs/ja/_roundtrip_when-to-use-picture.txt +++ b/src/content/docs/ja/_roundtrip_when-to-use-picture.txt @@ -1,24 +1,25 @@ --- -title: How to Use the `` Element -description: Explains when and how to use the `` element. -taskInputHash: 09553a05f76abc73 +title: When to Use the `` Element +description: This article explains when and why to use the `` element. +taskInputHash: bb5a6af1428273b7 lang: en -ignore: '/* cSpell:locale ja,en*/' -date_published: '2023-03-27' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -The `picture` element is used to provide multiple versions of an image and display them based on specific conditions. It is useful for optimizing for different screen sizes and resolutions, and is commonly used in responsive web design. Here are some specific scenarios in which to use the `picture` element: +The `picture` element is used to provide multiple versions of an image and display them 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. -* **Retina Displays:** High-density screens such as Apple's Retina display may display images as blurry or pixelated if not optimized for high resolution. The `picture` element can provide a version of the image with twice the normal pixel density, resulting in clear and sharp display on Retina displays. +Here are some specific scenarios where you may want to use the `picture` element: -* **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 like Apple's Retina display have a high pixel density. If an image is not optimized for high resolution, it may appear blurry or pixelated on these screens. Using the `picture` element, you can provide a version of the image with twice the pixel density of the normal version, resulting in a sharp and clear 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:** If you are designing a site that displays images with different aspect ratios, such as landscape and portrait orientations, you can use the `picture` element to provide different versions of the image 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 can be large files and can take up a lot of bandwidth, especially on mobile devices. Using the `picture` element, you can provide smaller versions of the image for devices with smaller screen sizes and slower 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-directed layouts:** There may be cases where you need to display an image in a specific way based on the rest of the layout of the page. For example, you may want to display a close-up of a person's face on mobile devices but a wide shot on desktop devices. Using the `picture` element, you can provide different versions of the image optimized for different layouts. + +Overall, the `picture` element is a powerful tool that helps optimize images for various use cases and ensures they look great on any device or screen size. ===================== 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..cb43c58 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 -lang: en -ignore: '/* cSpell:locale ja,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +title: Width and Density Descriptors +description: 'Examples of using width and density descriptors with `srcset`' +taskInputHash: 90676cde22fe88fe +lang: EN +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Understand the width (w) and density (x) descriptors in `srcset`, using examples and Markdown. +Using Width (`w`) and Density (`x`) Descriptors with `srcset` -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 provides multiple image sources with different resolutions and pixel densities, allowing the browser to select the appropriate image based on the display properties of the device. The `srcset` attribute specifies images using combinations of a `URL` and either a `w` or `x` descriptor. -## Width (w) Descriptor +## Width (`w`) Descriptors -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 an image in pixels. It's used when providing the dimensions of an image to the browser to select the appropriate image for the available screen space. -The syntax for using the `w` descriptor in `srcset` is as follows: +The syntax for using the `w` descriptor with `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 example above, three images and their respective widths (in pixels) are provided to the browser. The browser will select the image with the width closest to the available screen space. -## Density (x) Descriptor +## Density (`x`) Descriptors -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 an image, which is the ratio of its physical pixel size to its CSS pixel size. It's used when providing 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 with `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 example above, three images and their respective pixel densities are provided to the browser. The browser will select the image with the pixel density closest to the device's screen. -Both `w` and `x` descriptors can be used together within the same `srcset` attribute, providing the browser with choices. +Note that the `w` and `x` descriptors can be used together in the same `srcset` attribute to provide more options to the browser. ===================== 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..127931d 100644 --- a/src/content/docs/ja/breakpoints.md +++ b/src/content/docs/ja/breakpoints.md @@ -1,41 +1,38 @@ --- title: ブレークポイントと画像 -description: なぜ画像においていくつかの（すべてではない）ブレークポイントが重要なのか -taskInputHash: f409cdb7248e141b +description: なぜ一部の（しかしすべてではない）ブレークポイントがあなたの画像に重要なのか +taskInputHash: 1fed01119b132d9d lang: ja -ignore: '/* cSpell:locale ja,en*/' -date_published: '2023-03-26' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- ### 背景 -小さなスクリーンと大きなモニターには異なるレイアウトが必要です。 `srcset` と `sizes` の目的のために、レイアウトが変更されるポイントを知る必要があります。 +小さなスクリーンと大きなモニターでは、異なるレイアウトが必要です。 `srcset`と`sizes`の目的のために、レイアウトが変更されるポイントを知る必要があります。 -Web開発者は、小さなスクリーンでは何を縮小、非表示、または移動するか、またはより一般的には大きなスクリーンでは何を拡大、公開、または追加するかを決定する必要があります。彼らは非常に少ない情報しか持っていません。ユーザーはタブレット、または横向きの電話、または小さなブラウザウィンドウを使用していますか？ +Web開発者は、小さなスクリーンでは何を縮小、非表示、または移動するか、またはより一般的には、大きなスクリーンでは何を拡大、表示、または追加するかを決定する必要があります。彼らはまた、非常に少ない情報しか持っていません。ユーザーはタブレットまたは横向きの電話、または小さなブラウザーウィンドウであるのか？ -レイアウトが変更される任意のビューポート幅を選択する必要があります。これを **ブレークポイント** と呼びます。これは CSS ピクセルの任意の数字であり（[デバイスピクセルではありません](/ja/pixels-not-pixels)）、Polypane には共通に使用されるブレークポイントに関する[優れた記事](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023)があります。 +レイアウトが変更される任意のビューポート幅を選択する必要があります。これは**ブレークポイント**と呼ばれます。それはCSSピクセルの任意の数値です（[デバイスピクセルではありません]（/ja/pixels-not-pixels））。 Polypaneには、一般に使用されるブレークポイントに関する[素晴らしい記事があります（英語）]（https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/＃the-breakpoints-to-develop-on-in-2023）。 -一部の画像（ロゴやアイコン、ボタンなど）は、これらのブレークポイントによって引き起こされるレイアウトの変更に免疫があり、[srcset 密度記述子](/ja/density-descriptors)で問題ありません。 +ロゴやアイコン、ボタンなどの一部の画像は、これらのブレークポイントによって引き起こされるレイアウトシフトに免疫がある場合があります（および[srcset density descriptors]を使用した場合に問題ない場合があります。】【/ja/density-descriptors）。 -メインコンテンツの画像は、そのコンテナのサイズに制限されます。通常、ページのメインコンテンツ領域は、最大のスクリーンである特定の幅に制限されます。つまり、 `max-width` が指定されますが、小さなスクリーンでは、メインコンテンツ領域がビューポート全体を占めます。 +メインのコンテンツ画像は、そのコンテナのサイズに制限されます。通常、ページのメインコンテンツエリアは、最大のスクリーンで一定の幅に制限されます（ `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..800d346 100644 --- a/src/content/docs/ja/browser-picks-srcset.md +++ b/src/content/docs/ja/browser-picks-srcset.md @@ -1,20 +1,19 @@ --- -title: ブラウザが選択する方法 -description: '`srcset`属性にリストされた画像からブラウザが選択する方法' -taskInputHash: 4ad7cdb54859d445 +title: ブラウザの画像選択方法 +description: srcset属性にリストされた画像の選択方法 - ブラウザの選択基準 +taskInputHash: e33bc9ab3ee1a7e0 lang: ja -ignore: '/* cSpell:locale ja,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -ブラウザは、`srcset`属性にリストされた画像からどの画像を選択するのでしょうか？ デバイスとビューポートに基づき、幅と密度のそれぞれの指定について例を挙げて、ブラウザがどのように決定するかをステップバイステップで説明します。 +ブラウザは、srcset属性にリストされた画像の選択に関してどのように決定するのでしょうか？デバイスとビューポートに基づくwidth指定とdensity指定それぞれについて、例を交えて順に解説します。 -- HTMLの `srcset`属性を使用する場合、ブラウザは提供されたソースリストから最適な画像を選択するための一連のルールを使用します。これらのルールは、デバイスの表示特性（解像度、ピクセル密度）およびビューポートサイズに依存します。 `srcset`属性を使用すると、幅（ `w`ディスクリプタを使用）またはピクセル密度（ `x`ディスクリプタを使用）に基づいて異なる画像を指定できます。それでは、それぞれのケースについて例を挙げて説明していきましょう。 +- HTMLでsrcset属性を使用する場合、ブラウザは提供されたソースのリストから、最適な画像を選択するために規則のセットを使用します。これらの規則は、デバイスのディスプレイ特性（解像度、ピクセル密度）とビューポートのサイズに依存します。srcset属性を使用すると、width （ `w`ディスクリプターを使用）またはピクセル密度（ `x`ディスクリプタを使用）に基づく異なる画像を指定できます。次の各ケースを例を使って説明していきましょう。 -1\. 幅ディスクリプタ（ `w`）: +1. Widthディスクリプタ(`w`): -次の `srcset`属性を持つ場合を想定します。 +次のsrcset属性があるとします。 ```html @@ -22,24 +21,23 @@ date_updated: '2023-03-31' ``` -ブラウザは、次のステップに従います。 +ブラウザは以下の手順を踏みます: -a. デバイスのDPR（デバイスピクセル比）を決定します。たとえば、標準ディスプレイのDPRは1であり、高解像度（Retina）ディスプレイのDPRは2以上です。 +a. デバイスのDPR（Device Pixel Ratio）を決定する。例えば、標準的なディスプレイのDPRは1で、高解像度（Retina）ディスプレイは2以上です。 -b. `srcset`内の各画像の効果的な幅を計算します。幅ディスクリプタをDPRで乗算します。DPRが1のデバイスの場合: +b. `srcset`の各画像の有効な幅（effective width）を計算します。幅指定子をDPRで乗算します。DPRが1の場合: -- example-small.jpg: 400 \* 1 = 400px +- example-small.jpg：400 \* 1 = 400px -- example-medium.jpg: 800 \* 1 = 800px +- example-medium.jpg：800 \* 1 = 800px -- example-large.jpg: 1600 \* 1 = 1600px +- example-large.jpg：1600 \* 1 = 1600px -c. 効果的な幅をビューポート幅と比較します。ビューポート幅が420pxであると仮定します。ブラウザは、効果的な幅がビューポート幅以上の最小の画像を選択します。この場合、 `example-medium.jpg`を選択します。 +c. 有効な幅をviewportの幅と比較します。ビューポートの幅が420pxの場合、ブラウザはviewportの幅以上の有効な幅を持つ最小の画像を選択します。この場合、`example-medium.jpg`が選択されます。 -1\. ピクセル密度ディスクリプタ（ `x`）: - -次の `srcset`属性を持つ場合を想定します。 +2. Pixel densityディスクリプタ(`x`): +次のsrcset属性があるとします。 ```html @@ -47,21 +45,21 @@ c. 効果的な幅をビューポート幅と比較します。ビューポー ``` -ブラウザは、次のステップに従います。 +ブラウザは以下の手順を踏みます: -a. デバイスのDPR（デバイスピクセル比）を決定します。たとえば、標準ディスプレイのDPRは1であり、高解像度（Retina）ディスプレイのDPRは2以上です。 +a. デバイスのDPR（Device Pixel Ratio）を決定する。例えば、標準的なディスプレイのDPRは1で、高解像度（Retina）ディスプレイは2以上です。 -b. デバイスのDPRを `srcset`内の `x`ディスクリプタと比較します。この場合、次のようなディスクリプタを持つ3つの画像があります。 +b. `srcset`内の `x` ディスクリプタをデバイスのDPRと比較します。この場合、次のディスクリプタを持つ3つの画像があります。 -- 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. デバイスの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`が選択されます。 -幅ディスクリプタ（ `w`）を使用する場合、 `srcset`属性と `sizes`属性を組み合わせて、異なるビューポート幅での画像の表示方法に関するより詳細な情報を提供することもできます。これは、特に有用です。以下は例です。 +重要なのは、widthディスクリプタ（ `w`）を使用する場合、 `sizes`属性をsrcset属性と組み合わせて使用することで、異なるビューポート幅で画像がどのように表示されるかについてのより多くの情報を提供できることです。次に例を示します。 ```html diff --git a/src/content/docs/ja/density-descriptors.md b/src/content/docs/ja/density-descriptors.md index 63d7906..8503609 100644 --- a/src/content/docs/ja/density-descriptors.md +++ b/src/content/docs/ja/density-descriptors.md @@ -1,35 +1,34 @@ --- -title: 密度指定子とsrcset -description: '`srcset`内で密度指定子を使用する例' -taskInputHash: 00a6fe116a4f2366 +title: 密度記述子とsrcset +description: '`srcset`で密度記述子を使用する例' +taskInputHash: 077d27eab96354c5 lang: ja -ignore: '/* cSpell:locale ja,en*/' -date_published: '2023-03-26' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -## Srcset with Density Descriptorsとは何ですか？ +## Srcset with Density Descriptorsとは？ -密度指定子を使用したSrcsetは、1つの``要素に複数の画像ソースを指定できるHTML属性です。 密度指定子（`x`）は、ユーザーのディスプレイのピクセル密度に基づいて異なる解像度の画像を提供するために、Srcsetと組み合わせて使用されます。 +Srcset with Density Descriptors は、1つの``要素に対して複数の画像ソースを指定するためのHTML属性です。密度記述子（`x`）は、ユーザーのディスプレイの画素密度に基づいて異なる解像度の画像を提供するために、srcsetと共に使用されます。 -## いつSrcset with Density Descriptorsを使用しますか？ +## Density Descriptorsを使用するタイミング -密度指定子を使用したSrcsetを使用すると、以下の場合に特に便利です。 +Density Descriptorsを使用するのは、次の場合に特に有用です。 -1. 高解像度画像を高DPIディスプレイ（例：Retinaディスプレイ）に提供しながら、標準ディスプレイに低解像度の画像を提供する場合。 -2. 各ユーザーのデバイスに最適な画像サイズを提供して、ページのパフォーマンスを改善する場合。 +1. 高DPI（例：Retinaディスプレイ）のディスプレイに高解像度画像を提供しながら、標準のディスプレイに低解像度画像を提供する場合。 +2. 各ユーザーのデバイスに適した画像サイズを提供することにより、ページのパフォーマンスを改善する場合。 ## Srcset with Density Descriptorsの実装 -密度指定子を使用したSrcsetを使用するには、次の手順に従います。 +Density Descriptorsを使用したsrcsetを使用するには、次の手順に従ってください。 -1. 異なる解像度で画像を準備します。 -2. ``要素に`srcset`属性を追加し、画像ソースと対応する密度指定子を含めます。 -3. 画面に表示される画像のサイズを指定する場合は、オプションの`sizes`属性を追加します。 +1. 異なる解像度の画像を準備します。 +2. `srcset`属性を``要素に追加し、画像ソースと対応する密度記述子を含めます。 +3. 画面に表示される画像のサイズを指定するために、`sizes`属性（オプション）を追加します。 ### マークアップ例 -以下は、マークアップで密度指定子を使用したSrcsetを実装する方法の例です。 +次に、マークアップ内でDensity Descriptorsを使用したsrcsetの実装例を示します。 ```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..24e74ed 100644 --- a/src/content/docs/ja/introduction.md +++ b/src/content/docs/ja/introduction.md @@ -1,22 +1,21 @@ --- -title: '`srcset` と `` の `sizes`' -description: 2023年のレスポンシブイメージの効率的で主観的なガイド -taskInputHash: fb587f981b4441f1 +title: srcsetとのサイズ +description: 2023年のレスポンシブ画像に関する効率的で意見形成されたガイド +taskInputHash: 5849d4b5bb433cd3 lang: ja -ignore: '/* cSpell:locale ja,en*/' sidebar_sort_priority: 1000 -date_published: '2023-03-23' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -**2023年のイメージに関する効率的で主観的なガイド** +**2023年の画像に関する効率的で意見形成されたガイド** -深堀りについてはサイドバーを参照してください。これは、現代の様々なサイズとピクセル密度に対応するために、`` タグをアップグレードするクイックリファレンスです。pixels != pixels であることを[知っておくべきです](/ja/pixels-not-pixels)。そして、`devicePixelRatio` は1:1よりも3.875程度の方が多いです。現代のスマートフォンは、CSSピクセル単位で320-428pxの幅になるように見せかけますが、CSSピクセル単位あたりの多数のデバイスピクセルがあります。 +詳細情報についてはサイドバーを確認してください。これは、現代のデバイスのすべてのさまざまなサイズと画素密度を処理するために `` タグをアップグレードするためのクイックリファレンスです。ピクセルがピクセルではないことを[知る必要があります](/ja/pixels-not-pixels) そして `devicePixelRatio` は、1：1よりはるかに3.875になる可能性が高いことを覚えておく必要があります。現代の電話は、（CSSピクセルで）読みやすさのために320-428px を偽装しますが、CSSピクセルあたりの多くのデバイスピクセルを持っています。 -> ブラウザウィンドウをどんなに狭くしても、画像のサイズが変わらない場合は、[density descriptor](/ja/density-descriptors) を使用する必要があります。これは、ロゴ、アイコン、ボタンなどに適しています。 - -あなたの[ブレークポイント](/ja/breakpoints)を知っていますか？以下のソリューションを微調整するためにこれらの数値が必要になります-最小限に、メインコンテンツ領域が成長を止めるビューポート幅のブレークポイントが必要です。 +> ブラウザウィンドウをどれだけ狭くしても画像のサイズが変わらない場合は、[密度記述子]を使用するべきです(/ja/density-descriptors)。これは、ロゴ、アイコン、ボタンに適しています。 +あなたはあなたの[ブレークポイント](/ja/breakpoints)を知っていますか？あなたは以下のソリューションを微調整するためにそれらの数字が必要です。少なくともメインコンテンツエリアが拡大するビューポート幅のブレークポイントが必要です。 + ### 簡単な方法 ```html @@ -28,12 +27,12 @@ date_updated: '2023-03-31' img.jpg?format=webp&w=1600 1600w, img.jpg?format=webp&w=2000 2000w" - sizes="(max-width: 700px) 100vw, 800px" alt="犬が自転車に乗っている画像" /> + sizes="(max-width: 700px) 100vw, 800px" alt="自転車に乗る犬" /> - + - + ``` diff --git a/src/content/docs/ja/lighthouse-performance-test.md b/src/content/docs/ja/lighthouse-performance-test.md index 1214cb4..ffe7c99 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: 514590b0de96e45f lang: ja -ignore: '/* cSpell:locale ja,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -# Lighthouseを使ってサイトのパフォーマンスをテストする方法 +Lighthouse を使用してサイトのパフォーマンスをテストする方法は？ -`Lighthouse`は、ウェブサイトのパフォーマンス、アクセシビリティなどを測定するためのツールです。ウェブサイトのパフォーマンスを `Lighthouse`でテストするためには、次の手順を実行します。 +> 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のダイアログボックスで、テストしたいパフォーマンスおよびその他の関連オプションを選択し、「レポートの生成」をクリックします。 -5. `Lighthouse`が解析を完了すると、ウェブサイトのパフォーマンス、アクセシビリティ、その他の領域を改善するためのスコアと推奨事項が記載されたレポートが表示されます。 +> 5\. Lighthouseが解析を完了すると、スコアとWebサイトのパフォーマンス、アクセシビリティ、その他の領域の改善のための勧告が含まれるレポートが表示されます。 -これらの手順に従うことで、`Lighthouse`を使用してウェブサイトのパフォーマンスをテストおよび最適化し、ユーザーエクスペリエンスや検索エンジンランキングを向上することができます。 +>これらの手順に従うことで、Lighthouseを使用して、Webサイトのパフォーマンスをテストおよび最適化して、ユーザーエクスペリエンスと検索エンジンランキングを向上させることができます。 diff --git a/src/content/docs/ja/picture-examples.md b/src/content/docs/ja/picture-examples.md index 71affa6..a48392e 100644 --- a/src/content/docs/ja/picture-examples.md +++ b/src/content/docs/ja/picture-examples.md @@ -1,14 +1,13 @@ --- title: '`` 要素を使用した例' -description: レスポンシブイメージ、アートディレクション、異なる画像フォーマットに対して、`` 要素を使用した例を提供します。 -taskInputHash: ec17d7bd226d3aa1 +description: レスポンシブイメージ、アートディレクション、異なる画像形式に対して `` 要素を使用する例を提供する +taskInputHash: be7eddc11abaf63a lang: ja -ignore: '/* cSpell:locale ja,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -以下は、`` 要素を使用した例とその説明です。 +以下は、`` 要素を使用したいくつかの例と、それらの説明です: 1. レスポンシブイメージの例: @@ -16,39 +15,42 @@ date_updated: '2023-03-31' - An image + イメージ ``` -説明: この例では、`` 要素を使用して、画面サイズに応じて異なる画像リソースを提供しています。`` 要素は、「srcset」属性を使用して異なる画像リソースを指定し、「media」属性を使用して各リソースを使用する条件を指定します。`` 要素は、古いブラウザー用の代替方法であり、また `` 要素で指定された条件が満たされない場合にも使用されます。 +説明: この例では、`` 要素を使用して、異なる画面サイズに対して異なる画像ソースを提供するために使用されます。 `` 要素は、「srcset」と「media」属性を使用して、各ソースが使用される条件を指定して、異なる画像ソースを指定します。 `` 要素は、古いブラウザーのフォールバックまたは `` 要素で指定された条件が満たされない場合に使用されます。 2. アートディレクションの例: ```html - An image + + イメージ ``` -説明: この例では、デバイスの向きに応じて、異なる画像リソースを提供するために、`` 要素が使用されています。`` 要素は、「media」属性を `(orientation: landscape)` に設定して、ワイドスクリーン用の画像リソースを指定していますが、`` 要素はポートレートスクリーン用の画像リソースを指定しています。 +説明: この例では、`` 要素を使用して、デバイスの方向に応じて異なる画像ソースを提供するために使用されます。 "media" 属性を "(orientation: landscape)" に設定した `` 要素は、ワイドスクリーン用の画像ソースを指定し、 `` 要素はポートレートスクリーン用の画像ソースを指定します。 -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.jp`g ソースが使用されます。画面幅が 480 ピクセル以上 768 ピクセル未満の場合、 `image-medium.jpg` ソースが使用されます。画面の幅が 480 ピクセル未満の場合、 `image-small.jpg` ソースが使用されます。これにより、各デバイスに適したサイズの画像を提供し、ページの読み込み時間を短縮し、ユーザーエクスペリエンスを向上させることができます。 -ブレークポイントは任意の画面サイズで定義することができ、複数のブレークポイントを使用して、様々なデバイスに対応したレイアウトを作成することができます。ブレークポイントを `` 要素と組み合わせることで、どんなデバイスでも見栄えが良くフレキシブルでレスポンシブなデザインを作成することができます。 +ブレークポイントは、任意の画面サイズで定義でき、複数のブレークポイントを使用して、幅広いデバイスに対応したレイアウトを作成できます。 `` 要素とブレークポイントを組み合わせることで、どのデバイスでも素晴らしいフレキシブルかつレスポンシブなデザインを作成できます。 diff --git a/src/content/docs/ja/pixels-not-pixels.md b/src/content/docs/ja/pixels-not-pixels.md index 620a491..2c55bf4 100644 --- a/src/content/docs/ja/pixels-not-pixels.md +++ b/src/content/docs/ja/pixels-not-pixels.md @@ -1,20 +1,19 @@ --- title: px ≠ ピクセル -description: デバイスpx ≠ ブラウザpx ≠ 画像px -taskInputHash: 73be94d33f113c9c +description: デバイスの px ≠ ブラウザの px ≠ 画像の px +taskInputHash: c3c114c4cc3f772b lang: ja -ignore: '/* cSpell:locale ja,en*/' sidebar_sort_priority: 900 -date_published: '2023-03-26' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -### デバイスピクセル ≠ ブラウザpx ≠ 画像px +### デバイスのピクセル ≠ ブラウザの px ≠ 画像の px -Appleのおかげで、CSSとHTMLのピクセル（ `px` ）は**ほとんど常に複数のデバイス/プリンターピクセルにマップされます**。私の携帯電話の `devicePixelRatio` は3.875です。[あなたのものは？](https://www.mydevice.io/) +Appleのおかげで、CSSとHTMLのピクセル（`px`）はほとんどの場合、複数のデバイス/プリンターのピクセルに対応します。私の携帯電話のdevicePixelRatioは3.875です; [あなたのは？](https://www.mydevice.io/) -デスクトップの `devicePixelRatio` は、ブラウザーズームによって変化しますが、デフォルトは1.5です（私の `System> Display> Scale` は150％です）。 +デスクトップのdevicePixelRatioはブラウザのズームで変更されますが、デフォルトは1.5（私の `System > Display > Scale` は150%です）。 -画像ファイル（SVGを除く）は、ピクセルのグリッドにデコードされます。 **画像ピクセルをデバイスピクセルと1：1の比率で完璧に表示するのは非常に難しいですが、 `srcset` を使用すれば、それに十分に近づけることができます**。ただし、完璧なマッピングが必要な正当な理由がある場合は、少しのJavaScriptを使用して、ロード後にHTML要素のサイズを調整することができます。しかし、ここではそのような禁じられた技は明かされません。 +イメージファイル（SVGを除く）は、ピクセルのグリッドに解読されます。 画像のピクセルをデバイスピクセルと1：1の比率で完璧に表示するのは非常に困難ですが、 `srcset`を使用すると十分近いものを得られます。本当に正当な理由がある場合は、少しのJavaScriptでhtml要素のサイズを読み込んだ後に調整できますが、ここではそのような禁断の技の詳細は明かしません。 -> 他の絶対単位（in、pc、pt、mm、cm、Q）は、CSSピクセルの数とすべてが96dpiであると想定されています。開発者は絶対単位を避けます。なぜなら、フォントサイズまたはビューポート/コンテナの寸法から派生した単位を使用する方が一般的には良いからです。ユーザーが `Accessibility > Text Size` の乗数を調整、ブラウザーズーム、またはデバイスを回転させると、ミスマッチした単位がレイアウトを壊す可能性があります。言うまでもなく、サイトを出荷する前にこれらすべてのことを行う必要があります。 +> 他の絶対単位（in、pc、pt、mm、cm、Q）[（MDN）](https://developer.mozilla.org/en-US/docs/Web/CSS/length)は、CSSピクセルの数に基づいて定義され、すべてのものを96dpiと見なします。 デベロッパーは、フォントサイズまたはビューポート/コンテナの寸法から派生した単位を使用する方が一般的には良いため、絶対単位を避けます。 ミスマッチした単位は、ユーザーが `Accessibility > Text Size` 倍率を調整、ブラウザをズームイン/アウト、またはデバイスを回転させた場合、レイアウトを破壊する可能性があります。 言うまでもなく、あなたがあなたのサイトを出荷する前に、これらのことをすべて行う必要があります。 diff --git a/src/content/docs/ja/specify-width-height.md b/src/content/docs/ja/specify-width-height.md index 549dadd..11c1180 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 +description: HTMLコードで幅と高さ属性を使用することのメリット +taskInputHash: 8edb8d80ec75276c lang: ja -ignore: '/* cSpell:locale ja,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -なぜHTMLに幅と高さを指定する必要があるのでしょうか？ +なぜHTMLにwidthとheightを含めるべきですか？ -> 画像のHTMLコードに幅と高さの属性を指定することが推奨されています。これは、ウェブブラウザーが画像のサイズを完全に読み込む前に画像の大きさを知ることを助けるためです。これにより、ブラウザーは画像に適切なスペースをウェブページに予約でき、画像が読み込まれる際にコンテンツがジャンプするのを防ぐことができます。 -> -> さらに、画像の幅と高さを指定することで、ウェブページ全体のパフォーマンスを向上させることができます。ブラウザーが事前に画像のサイズを知っていると、画像を表示するために必要なスペースをより正確に計算でき、ロード中のコンテンツの不必要な再配置や再描画を回避することができます。 -> -> 結局のところ、画像のHTMLコードに幅と高さの属性を使用することで、コンテンツの読み込みを高速化し、ビジュアル的な不具合を減少させることで、ユーザーエクスペリエンスを向上させることができます。 +> 画像のHTMLコードにwidth属性とheight属性を含めることを推奨されているのは、ブラウザが画像を完全に読み込む前にそのサイズを知ることができるためです。これにより、ブラウザは画像のために適切なスペースをWebページ上に予約し、画像が読み込まれるとコンテンツがジャンプするのを防止します。 + +> さらに、画像のwidth属性とheight属性を指定することは、Webページ全体のパフォーマンスを向上させるのにも役立ちます。ブラウザが事前に画像のサイズを知っている場合、画像を表示するために必要なスペースをより正確に計算することができ、コンテンツが読み込まれるにつれて不必要な再レイアウトや再描画を回避することができます。 + +> 全体的に、画像のHTMLコードにwidth属性とheight属性を使用することで、コンテンツの読み込みが速くなり、ビジュアルグリッチが減少することで、ユーザー体験が向上します。 diff --git a/src/content/docs/ja/when-to-use-picture.md b/src/content/docs/ja/when-to-use-picture.md index aab2daa..1393329 100644 --- a/src/content/docs/ja/when-to-use-picture.md +++ b/src/content/docs/ja/when-to-use-picture.md @@ -1,22 +1,22 @@ --- -title: '``要素の使用方法' -description: '``要素を使用すべき状況について説明します。' -taskInputHash: 09553a05f76abc73 +title: いつ要素を使用するか +description: どのような状況で要素を使用するべきかを説明します。 +taskInputHash: bb5a6af1428273b7 lang: ja -ignore: '/* cSpell:locale ja,en*/' -date_published: '2023-03-27' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -`picture`要素は、複数のバージョンの画像を提供し、特定の条件に基づいて表示するために使用されます。異なる画面サイズや解像度に最適化するために役立ち、レスポンシブWebデザインで一般的に使用されます。 -ここでは、`picture`要素を使用する特定のシナリオをいくつか紹介します。 +`picture`要素は、画像の複数バージョンを用意し、特定の条件に基づいて表示するために使用されます。特に、さまざまな画面サイズと解像度に最適な画像を最適化するために役立ち、レスポンシブWebデザインで一般的に使用されます。 -* **Retinaディスプレイ：** AppleのRetinaディスプレイのような高密度なスクリーンは、高解像度に最適化されていない場合、画像がぼやけたり、ピクセル化したりする可能性があります。 `picture`要素を使用すると、通常のバージョンの2倍のピクセルを持つ画像のバージョンを提供して、Retinaディスプレイでクリアで鮮明な表示を実現できます。 +以下は、`picture`要素を使用する場合の具体的なシナリオです。 -* **異なるアスペクト比：** 横長と縦長のような異なるアスペクト比を持つ画像を表示する必要があるサイトを設計している場合、 `picture`要素を使用して、各アスペクト比に最適化された異なるバージョンの画像を提供できます。 +* **Retinaディスプレイ：** AppleのRetinaディスプレイなどの高密度スクリーンは、ピクセル密度が高いため、高解像度に最適化されていない場合、画像がぼやけたり、ピクセル化したりする可能性があります。 `picture`要素を使用すると、通常のバージョンよりも2倍のピクセル数を持つ画像のバージョンを提供して、Retinaディスプレイで鮮明でクリアな表示ができます。 -* **帯域制限：** 画像は大きなファイルで、特にモバイルデバイスでは多くのバンド幅を占有する可能性があります。 `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..6223445 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: 90676cde22fe88fe lang: ja -ignore: '/* cSpell:locale ja,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -`srcset`の中のwidth(w)とdensity(x)ディスクリプタを理解する。例を用いて説明しMarkdownを使用する。 +`srcset`における幅（`w`）と密度（`x`）のディスクリプターについて -`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..deb5174 100644 --- a/src/content/docs/sv/_roundtrip_breakpoints.txt +++ b/src/content/docs/sv/_roundtrip_breakpoints.txt @@ -1,33 +1,32 @@ --- title: Breakpoints & Images description: Why some (but not all) breakpoints matter for your images -taskInputHash: 93c856b4f6a02850 +taskInputHash: 67fe0daf8eb1aa7c lang: en -ignore: '/* cSpell:locale sv,en*/' -date_published: '2023-03-26' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- ### Background -Small screens and large screens require different layouts. For `srcset` and `sizes`, we need to know at what point the layout changes. +Small screens and large screens require different layouts. To use `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 must decide what to shrink, hide, or move on smaller screens—or more commonly, what to expand, reveal, or add on larger screens. They also have very little information to go on. Is the user on a tablet or a phone in landscape mode—or on 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 have to choose an arbitrary viewport width where 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 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 (like logos or icons or buttons) may be immune to layout shifts caused by these breakpoints (and be 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 restricted to a particular 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 the effective sizing rules, since the percentage of viewport width the image takes up will change. -### The Simple Way +### The Simple Method -That being said, don't overthink this. You'll probably be just fine with the following approximation: +With that said, don't overthink this. You'll probably be just fine with the following ballpark 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 container) stop growing? Up to that viewport width, we can use `100vw` for the image in the `sizes` attribute 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. If your answer to 1 was 700px and your answer to 2 was 800px, you can use the following `sizes` attribute: @@ -36,7 +35,9 @@ If your answer to 1 was 700px and your answer to 2 was 800px, you can use the fo ``` -> 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 CSS. Unfortunately, browsers are aggressively keen to choose an image URL *before* stylesheets have been downloaded. So, we have to do the calculations ourselves, and it serves them right if we don't get it perfect. ===================== Content prompt used: @@ -49,8 +50,8 @@ Also carefully translate the title and description for the article; do not use & 1. Breakpoints & images 2. Why some (but not all) breakpoints matter for your images -Metadata returned1. Brytpunkter & bilder -2. Varför vissa (men inte alla) brytpunkter är viktiga för dina bilder +Metadata returned1. Breakpoints & bilder +2. Varför vissa (men inte alla) breakpoints är viktiga för dina bilder Roundtrip (isolated) prompt used: diff --git a/src/content/docs/sv/_roundtrip_browser-picks-srcset.txt b/src/content/docs/sv/_roundtrip_browser-picks-srcset.txt index e316926..0bba244 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 +title: How Browsers Choose Images +description: How browsers choose between images listed in the srcset attribute +taskInputHash: 8c5f60d1e3eafe9f lang: en +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -How does the browser choose between images listed in the `srcset` attribute? Here is a step-by-step description, with examples for both width and density specifications, and how the browser chooses based on device and viewport size. +How do web browsers choose between images listed in the srcset attribute? Here's a step-by-step guide with examples of both width and density descriptors and how browsers determine based on device and viewport. -- When using the `srcset` attribute in HTML, the browser follows a set of rules to choose the most appropriate image from a list of specified sources. These rules depend on both the device's display properties (resolution, pixel density) and the viewport size. The `srcset` attribute allows you to specify different images based on width (by using the `w` descriptor) or pixel density (by using the `x` descriptor). Let's go through each case with an example. +- When using the srcset attribute in HTML, the browser uses a set of rules to choose the most appropriate image from a list of sources provided. These rules depend on both the device's screen characteristics (resolution, pixel density) and viewport size. The srcset attribute lets you 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): -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 of 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 +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 to the viewport width. Assume the viewport width is 420px. The browser chooses the smallest image with an effective width greater than or equal to the viewport width. In this case, it will choose `example-medium.jpg`. -2. Pixel density descriptor (`x`): +2. Pixel density descriptor (x): -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: 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 to 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 descriptor closest to the device's DPR. For a device with a DPR of 1, the browser chooses `example-1x.jpg`. For a device with a DPR of 2, it chooses `example-2x.jpg`, and so on. -It is important to note that you can also use the `sizes` attribute in conjunction with the `srcset` attribute to provide more information about how the image will be displayed at different viewport widths. This is particularly useful when using the width descriptor (`w`). Here is an example: +It's important to note that you can also use the sizes attribute 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's an example: ```html - sizes -description: An efficient and clear guide to responsive images for 2023 -taskInputHash: 87881becd1c9192b +title: srcset & sizes +description: An efficient and opinionated guide to responsive images for 2023 +taskInputHash: 9073468e325bcbed lang: en -ignore: '/* cSpell:locale sv,en*/' sidebar_sort_priority: 1000 -date_published: '2023-03-23' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -**An efficient and definite guide to images for 2023** +**An efficient and opinionated guide to images for 2023** -Check the sidebar for a more in-depth description. This is the quick reference for upgrading `` tags to handle modern devices in all their different sizes and pixel densities. You should know that pixels != pixels and `devicePixelRatio` is more likely to be around 3.875 than 1:1. Modern phones pretend to be 320-428px wide for legibility (in CSS-pixels), but have many device pixels per CSS-pixel. +Check the sidebar for an in-depth dive into the subject. This is a quick reference to upgrade the `` tags that handle modern devices with all their various 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 than 1:1. Modern phones pretend to be between 320-428px wide for legibility (in CSS pixels), but have many device pixels per CSS pixel. ->If your image never changes size no matter how narrow you make the browser window, you should use a density descriptor instead. This is often appropriate for logos, icons and buttons. +> If your image never changes size, no matter how narrow you make the browser window, you should use a [density descriptor instead](/en/density-descriptors). This is often appropriate for logos, icons, and buttons. -Do you know what your breakpoints are? You will need these numbers to fine-tune the solution below - and at a minimum the viewport width breakpoint where the main content area stops growing in width. +Do you know what your [breakpoints](/en/breakpoints) are? You'll need those numbers to fine-tune the solution below - and at least the breakpoint where the viewport stops growing. -### The simple method +### The Easy Way ```html 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="Dog riding bike" /> + + + + ``` +{{Note that the original code blocks contain broken links and use incorrect HTML formatting.}} ===================== 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 och sizes -2. En effektiv och tydlig guide till responsiva bilder för 2023 +Metadata returned1. srcset & sizes +2. En effektiv och åsiktsstyrd guide till responsiva bilder för 2023 Roundtrip (isolated) prompt used: diff --git a/src/content/docs/sv/_roundtrip_lighthouse-performance-test.txt b/src/content/docs/sv/_roundtrip_lighthouse-performance-test.txt index 363f3e2..c7799f6 100644 --- a/src/content/docs/sv/_roundtrip_lighthouse-performance-test.txt +++ b/src/content/docs/sv/_roundtrip_lighthouse-performance-test.txt @@ -1,29 +1,27 @@ --- -title: Test site performance with Lighthouse -description: >- - Step-by-step guide on how to test a website's performance using Lighthouse -taskInputHash: d9b9eb078ceeeb1f +title: Testing Performance with Lighthouse +description: Steps on how to test a website's performance using Lighthouse +taskInputHash: 034f3b9f627231a8 lang: en -ignore: '/* cSpell:locale sv,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- How do you test your website's performance with Lighthouse? -> Lighthouse is a tool that can be used to measure the performance, accessibility, and other aspects of a website. To test your website's performance with Lighthouse, follow these steps: +> Lighthouse is a tool that can be used to measure the performance, accessibility, and other aspects of a website. To test your website's performance using 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 the three dots in the top-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, then type "Lighthouse" and select "Generate report". +> 3. In the developer tools window, click the Lighthouse icon on the left 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 any 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 your website's performance, accessibility, and other areas. +> 5. When Lighthouse has completed its analysis, you will see a report 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. +> 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: @@ -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 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..e355cdf 100644 --- a/src/content/docs/sv/_roundtrip_picture-examples.txt +++ b/src/content/docs/sv/_roundtrip_picture-examples.txt @@ -1,14 +1,17 @@ --- -title: Example with the Element +title: Example using the element description: >- - Provides examples using the element for responsive images, art direction, - and different image formats. -taskInputHash: 3b4e429f7eb84ce2 + Provides examples of how to use the element for responsive images, + image orientation, and different image formats. +taskInputHash: 2be3dc0822137e26 lang: en +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- Here are some examples of how to use the `` element and their explanations: -1. Example for responsive images: +1\. Example for responsive images: ```html @@ -18,9 +21,9 @@ 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 by using the "srcset" and the "media" attributes, to state the conditions under which each source should be used. The `` element is used as a fallback for older browsers, or when the conditions specified in the `` elements are not met. -2. Example for art direction: +2\. Example for image orientation: ```html @@ -32,7 +35,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 portrait screens. -3. Example for different image formats: +3\. Example for different image formats: ```html @@ -44,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 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 by using the "srcset" attribute and the "type" attribute to state 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 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 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 source `image-large.jpg` will be used; when the screen width is greater than or equal to 480 pixels but less than 768 pixels, the source `image-medium.jpg` will be used, and when the screen width is less than 480 pixels, the source `image-small.jpg` will be used. This allows us to serve appropriately sized images for each device, reducing page load times 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 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 all devices. ===================== Content prompt used: @@ -65,8 +68,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. Ger exempel på användning av -elementet för responsiva bilder, bildriktning 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..6efcb36 100644 --- a/src/content/docs/sv/_roundtrip_pixels-not-pixels.txt +++ b/src/content/docs/sv/_roundtrip_pixels-not-pixels.txt @@ -1,23 +1,22 @@ --- title: px ≠ pixels -description: Unit px ≠ browser px ≠ image px -taskInputHash: 2b5adfa6783beef0 +description: Device pixels ≠ browser pixels ≠ image pixels +taskInputHash: 49c85f11bddeb9d6 lang: en -ignore: '/* cSpell:locale sv,en*/' sidebar_sort_priority: 900 -date_published: '2023-03-26' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -### Unit pixels ≠ browser pixels ≠ image pixels +### Device pixels ≠ browser pixels ≠ image pixels -Thanks to Apple, CSS and HTML pixels (`px`) **almost always map to several device/print pixels**. The `devicePixelRatio` on my phone is 3.875; [what's yours?](https://www.mydevice.io/) +Thanks to Apple, CSS and HTML pixels (`px`) **almost always map to multiple device/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 defaults to 1.5 (because my `System > Display > Scale` is set to 150%). +The devicePixelRatio on my desktop computer changes when I zoom in the browser, but it's 1.5 by default (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 SVGs) decode into a grid of pixels. **It's annoyingly hard to make image pixels match device pixels 1:1, but with `srcset` you can come *close enough* and a bit of JavaScript can adjust the size of the HTML element after loading if you have a truly compelling reason to need that perfect mapping, though such forbidden arts will not 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/en-US/docs/Web/CSS/length) are defined in terms of a number of CSS pixels and pretend everything is 96 dpi. Developers avoid absolute units because it's generally 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 of this before publishing your website. ===================== Content prompt used: @@ -30,8 +29,8 @@ Also carefully translate the title and description for the article; do not use & 1. px ≠ pixels 2. Device px ≠ browser px ≠ image px -Metadata returned1. px ≠ pixlar -2. Enhet px ≠ webbläsare px ≠ bild px +Metadata returned1. px ≠ bildpunkter +2. Enhets-pixlar ≠ webbläsarpixlar ≠ bild-pixlar 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..ff4b5a1 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 +title: Use Width and Height +description: Benefits of using width and height attributes in HTML code +taskInputHash: fbee33d6919f5c1d lang: en -ignore: '/* cSpell:locale sv,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Why should you add width and height to your HTML code? - -> It is recommended to add width and height attributes to images in HTML code because it helps the browser know the size of the image before it has fully loaded. This allows the browser to reserve appropriate space on the web page for the image, preventing content from jumping around when the image loads. -> -> Additionally, specifying the width and height attributes for images can also help improve the performance of the web page as a whole. When a browser knows the size of an image in advance, it can more accurately calculate the amount of space needed to display the image and avoid unnecessary reloading or redrawing of content as it loads. -> -> Overall, using width and height attributes in HTML code for images can improve user experience by making content load faster and reducing visual errors. +Why should you specify width and height in HTML code? + +> It is recommended to specify the width and height attributes in HTML code for images because it helps the web browser to know the size of the image before it is fully loaded. This allows the web browser to reserve the right amount of space on the webpage for the image, which prevents content from jumping around as the image loads. +> +> Additionally, specifying the width and height attributes for images can also help improve the performance of the webpage as a whole. When a web 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 relayout or repaint of the content as it loads. +> +> In summary, using the width and height attributes in HTML code for images can enhance the user experience by making the content load faster and reducing visual disturbances. ===================== 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..15ae5f0 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 +taskInputHash: 22cea24f0bea57f5 lang: en -ignore: '/* cSpell:locale sv,en*/' -date_published: '2023-03-27' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -The `picture` element is used to provide multiple versions of an image and determine which version to display based on certain conditions. It is particularly useful for optimizing images for different screen sizes and resolutions, and is often used in responsive web design. -Here are some specific scenarios where you may want to use the `picture` element: +The `` 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 especially useful for optimizing images for different screen sizes and resolutions and is commonly used in responsive web design. -* **Retina displays:** High density displays like Apple's Retina displays have higher pixel density, which means that images can appear blurry or pixelated if they are not optimized for high resolution. With the `picture` element, you can provide a version of the image that has twice as many pixels as the regular version, so it looks sharp and clear on Retina displays. +Here are some specific scenarios where you might want to use the `` element: -* **Different image formats:** If you are designing a website that needs to display images with different aspect ratios (e.g. landscape or portrait), you can use the `picture` element to provide different versions of the image that are optimized for each aspect ratio. +* **Retina displays:** High-density screens like Apple's Retina displays have a higher pixel density, which means images can appear blurry or pixelated if they are not optimized for high resolution. With the `` element, you can provide a version of the image that has twice as many pixels as the normal version, so it looks clear and sharp 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 website that needs to display images with different aspect ratios (like landscape vs portrait), you can use the `` element to provide different versions of the image that are optimized for each aspect ratio. -* **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 limitations:** Images can be large files that take up a lot of bandwidth, especially on mobile devices. With the `` element, you can provide smaller versions of the image for devices with smaller screens or slower internet connections, which can help reduce page loading times. -In summary, the `picture` element is a powerful tool that can help you optimize your images for different use cases and ensure they look great regardless of the device or screen size they are viewed on. +* **Art-directed layouts:** Sometimes you may want to 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 `` element allows you to provide different versions of the image that are optimized for different layouts. + +Overall, the `` 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 which device or screen size they are viewed on. ===================== Content prompt used: @@ -32,7 +32,7 @@ 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 +Metadata returned1. När man ska använda -elementet 2. Förklarar i vilka situationer du bör använda -elementet diff --git a/src/content/docs/sv/_roundtrip_width-density.txt b/src/content/docs/sv/_roundtrip_width-density.txt index dac7b90..250de5c 100644 --- a/src/content/docs/sv/_roundtrip_width-density.txt +++ b/src/content/docs/sv/_roundtrip_width-density.txt @@ -1,23 +1,22 @@ --- -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 using width and density descriptions in `srcset` +taskInputHash: 788dd1b49d02d6e5 lang: en -ignore: '/* cSpell:locale sv,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Understanding width (`w`) and density (`x`) descriptors in `srcset`. Use examples and markdown. +Understanding width (w) and density (x) descriptions 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 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 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 screen settings. The `srcset` attribute uses a combination of `URL` and descriptions `w` or `x` to specify the images. +## Width (`w`) Description -> The `w` descriptor is used to specify the width of an image in pixels. It is used when we want to provide the browser with the dimensions of an image so that it can choose the right image for the available viewport. +> The `w` description is used to specify the width of an image in pixels. It is used when we want to provide the browser with the image size so that it can choose the appropriate image for the available screen space. -> The syntax for using the `w` descriptor in `srcset` looks like this: +> The syntax for using the `w` description in `srcset` is as follows: -````html +```html ``` +> In the example above, we have provided the browser with three images and their corresponding width in pixels. The browser chooses the image with the closest width to the available screen space. +## Density (`x`) Description +> The `x` description 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. ->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` 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 ``` +> In the example above, we have provided the browser with three images and their corresponding pixel densities. The browser chooses the image with the closest number of pixels 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 provide the browser with more options to choose from. ===================== Content prompt used: @@ -59,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. Bredd- och densitetsbeskrivare -2. Exempel på användning av bredd- och densitetsbeskrivare i `srcset` +Metadata returned1. Bredd- och densitetsbeskrivningar +2. Exempel på användning av 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..8999fff 100644 --- a/src/content/docs/sv/breakpoints.md +++ b/src/content/docs/sv/breakpoints.md @@ -1,39 +1,40 @@ --- -title: Brytpunkter & bilder -description: Varför vissa (men inte alla) brytpunkter är viktiga för dina bilder -taskInputHash: 93c856b4f6a02850 +title: Breakpoints & bilder +description: Varför vissa (men inte alla) breakpoints är viktiga för dina bilder +taskInputHash: 67fe0daf8eb1aa7c lang: sv -ignore: '/* cSpell:locale sv,en*/' -date_published: '2023-03-26' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- ### Bakgrund -Små skärmar och stora skärmar behöver olika layouter. För `srcset` och `sizes` behöver vi veta vid vilken punkt layouten ändras. +Små skärmar och stora skärmar behöver olika layouter. För att kunna använda `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 besluta vad som ska krympas, döljas eller flyttas på mindre skärmar - eller mer vanligt, vad som ska expandera, avslöjas eller läggas till på större skärmar. De har också mycket lite information att gå på. Är användaren på en surfplatta eller en telefon i liggande läge - eller på ett litet webbläsarfönster? -Vi måste välja en godtycklig viewport-breddenhet där layouten ändras. Detta kallas en **brytpunkt**. Det är en godtycklig siffra av CSS-pixlar ([inte enhetspixlar](/sv/pixels-not-pixels)). Polypane har en [bra artikel](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023) om vanligt använda brytpunkter. +Vi måste välja en godtycklig viewport-breddenhet där layouten ändras. Detta kallas en **breakpoint**. 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 breakpoints. -Några bilder (som logotyper eller ikoner eller knappar) kan vara opåverkade av layoutskift som orsakas av dessa brytpunkter (och fungera bra med [srcset density descriptors](/en/density-descriptors)). +Vissa bilder (som logotyper eller ikoner eller knappar) kan vara immuna mot layoutskift som orsakas av dessa breakpoints (och vara ok med [srcset density descriptors](/sv/density-descriptors)). -Huvudinnehållsbilder kommer att begränsas av storleken på deras behållare. Vanligtvis kommer huvudinnehållsområdet på en sida att begränsas till en viss bredd på de största skärmarna, en `max-width`, men på små skärmar kommer huvudinnehållsområdet att fylla hela viewporten. +Huvudinnehållsbilder kommer att begränsas av storleken på sin 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. -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 breakpoints kommer det att bli svårare att beräkna de effektiva storleksreglerna, eftersom den procentandel av viewportbredden som bilden tar upp kommer att förändras. -### Det enkla sättet +### Den enkla metoden -Med det sagt, överanalysera inte det här. Du kommer förmodligen att vara mycket OK med följande approximation: +Med detta 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. +1. Vid vilken storlek slutar huvudkolumnen (eller bildens behållare) växa? Upp till den viewportbredden kan vi använda `100vw` för bilden i `sizes`-attributet för att säga att bilden tar upp 100% av viewportbredden. 2. Vad är den maximala bredden som behållaren någonsin uppnår? Vi kan ställa in det som en fast `bredd` för allt annat. -Om ditt svar på 1 var 700px och ditt svar på 2 var 800px, kan du använda följande `sizes`-attribut: +Om ditt svar på 1 var 700px och ditt svar på 2 var 800px kan du använda följande `sizes`-attribut: ```html - + ``` -> Du skulle tro att webbläsaren enkelt kan hantera alla dessa beräkningar för oss baserat på CSS:en. Tyvärr är webbläsare aggressivt angelägna om att välja en bild-URL *innan* stylesheetsen laddas ner. Så vi måste göra beräkningarna själva, och det tjänar dem rätt om vi inte får det perfekt. + + +> Du skulle kunna tro att webbläsaren kunde hantera alla dessa beräkningar åt oss baserat på CSS. Tyvärr är webbläsare aggressivt angelägna att välja en bild-URL *innan* stilmallarna har laddats ner. Så vi måste göra beräkningarna själva, och det tjänar dem rätt om vi inte får det perfekta. diff --git a/src/content/docs/sv/browser-picks-srcset.md b/src/content/docs/sv/browser-picks-srcset.md index 865d27f..cb750b5 100644 --- a/src/content/docs/sv/browser-picks-srcset.md +++ b/src/content/docs/sv/browser-picks-srcset.md @@ -1,20 +1,19 @@ --- title: Hur webbläsaren väljer description: Hur webbläsaren väljer mellan bilder som listas i srcset-attributet -taskInputHash: ca195aa8819f20d7 +taskInputHash: 8c5f60d1e3eafe9f lang: sv -ignore: '/* cSpell:locale sv,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Hur väljer webbläsaren mellan bilder som listas i `srcset`-attributet? Här är en steg-för-steg-guide, med exempel för både bredd- och densitetsspecifikationer och hur webbläsaren väljer baserat på enhet och viewport. +Hur väljer webbläsaren mellan bilder som listas i srcset-attributet? Här är en steg-för-steg-guide med exempel på både bredd- och densitetsspecifikationer och hur webbläsaren bestämmer baserat på enhet och vyport. -- 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. +- 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 källor som tillhandahålls. Dessa regler beror på både enhetens skärmegenskaper (upplösning, pixel densitet) och vyportstorleken. Srcset-attributet låter dig specificera olika bilder baserat på bredd (med hjälp av w-deskrivaren) eller pixel densitet (med hjälp av x-deskrivaren). Låt oss gå igenom varje fall med exempel. -1\. Breddspecifikation (`w`): +1\. Breddsdeskriptor (w): -Antag att vi har följande `srcset`-attribut: +Antag att vi har följande srcset-attribut: ```html @@ -22,23 +21,23 @@ Antag att vi har följande `srcset`-attribut: ``` -Webbläsaren gör följande steg: +Webbläsaren kommer att följa 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. +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 bredddescriptorn med DPR. För en enhet med en DPR på 1: +b. Beräkna effektiv bredd för varje bild i srcset-attributet. Multiplicera breddsdeskriptorn med DPR. För en enhet med en DPR på 1: -- example-small.jpg: 400 \* 1 = 400px +- example-small.jpg: 400 * 1 = 400px -- example-medium.jpg: 800 \* 1 = 800px +- example-medium.jpg: 800 * 1 = 800px -- example-large.jpg: 1600 \* 1 = 1600px +- example-large.jpg: 1600 * 1 = 1600px -c. 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`. +c. Jämför de effektiva bredderna med vyportens bredd. Antag att vyportens bredd är 420px. Webbläsaren väljer den minsta bilden med en effektiv bredd som är större än eller lika med vyportens bredd. I det här fallet kommer den att välja `example-medium.jpg`. -1\. Pixeldensitetsspecifikation (`x`): +1\. Pixel densitetssdeskriptor (x): -Antag att vi har följande `srcset`-attribut: +Antag att vi har följande srcset-attribut: ```html @@ -46,11 +45,11 @@ Antag att vi har följande `srcset`-attribut: ``` -Webbläsaren gör följande steg: +Webbläsaren följer 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. +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`-descriptorn i `srcset`. I detta fall har vi tre bilder med följande descriptorer: +b. Jämför enhetens DPR med x-deskriptorerna i srcset-attributet. I det här fallet har vi tre bilder med följande deskriptorer: - example-1x.jpg: 1x @@ -58,9 +57,9 @@ b. Jämför enhetens DPR med `x`-descriptorn i `srcset`. I detta fall har vi tre - 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. +c. Välj bilden med x-deskriptorn 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: +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 kommer att visas vid olika vyportbredder. Detta är särskilt användbart när man använder breddsdeskriptorn (w). Här är ett exempel: ```html diff --git a/src/content/docs/sv/density-descriptors.md b/src/content/docs/sv/density-descriptors.md index 06f4734..6e7f719 100644 --- a/src/content/docs/sv/density-descriptors.md +++ b/src/content/docs/sv/density-descriptors.md @@ -1,31 +1,34 @@ --- -title: Densitetsdescriptors och srcset -description: Exempel på att använda densitetsdescriptors i `srcset` -taskInputHash: 55ea5bbfbf5779eb +title: Density-descriptorer & Srcset +description: Exempel på att använda density-descriptorer i `srcset` +taskInputHash: 3e4c00237cedf2c5 lang: sv -ignore: '/* cSpell:locale sv,en*/' -date_published: '2023-03-26' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Srcset med densitetsdescriptors ger en enkel och effektiv metod för att leverera den mest lämpliga bilden till varje användares enhet, vilket förbättrar prestanda och användarupplevelse. Den här guiden går igenom det väsentliga i att använda srcset med densitetsdescriptors och ger exempel på markup för din bekvämlighet. -## Vad är Srcset med densitetsdescriptors? +Srcset med density-descriptors ger en enkel och effektiv metod för att leverera den mest lämpliga bilden till varje användares enhet, vilket förbättrar prestanda och användarupplevelse. Denna guide kommer att gå igenom grunderna i att använda srcset med density-descriptors och ge markup-exempel för din bekvämlighet. -Srcset är en HTML-attribut som är utformad för att låta dig ange flera bildkällor för ett enda ``-element. Densitetsdescriptors (`x`) används i kombination med srcset för att tillhandahålla bilder med olika upplösning baserat på användarens skärmpixeltäthet. -## När ska man använda Srcset med densitetsdescriptors +## Vad är Srcset med Density-Descriptors? -Användning av srcset med densitetsdescriptors är särskilt användbart när du vill: -1. Servera bilder med hög upplösning till hög-DPI-skärmar (t.ex. Retina-skärmar) samtidigt som du tillhandahåller bilder med lägre upplösning till vanliga skärmar. -2. Förbättra sidprestanda genom att leverera den mest lämpliga bildstorleken till varje användares enhet. -## Implementera Srcset med densitetsdescriptors +Srcset är en HTML-attribut som är utformad för att låta dig specificera flera bildkällor för ett enskilt ``-element. Density-descriptors (`x`) används tillsammans med srcset för att tillhandahålla bilder med olika upplösning baserat på användarens pixel densitet på skärmen. -För att använda srcset med densitetsdescriptors, följ dessa steg: +## När ska man använda Srcset med Density-Descriptors? + +Att använda srcset med density-descriptors är särskilt användbart när du vill: +1. Servera högupplösta bilder till hög-DPI-skärmar (t.ex. Retina-skärmar) samtidigt som du tillhandahåller bilder med lägre upplösning till standard-skärmar. +2. Förbättra sidprestandan genom att leverera den mest lämpliga bildstorleken till varje användares enhet. + +## Implementera Srcset med Density-Descriptors + +För att använda srcset med density-descriptors, följ dessa steg: 1. Förbered dina bilder i olika upplösningar. -2. Lägg till `srcset`-attributet till ``-elementet, inklusive bildkällorna och motsvarande densitetsdescriptors. -3. Lägg till `sizes`-attributet (valfritt) för att ange bildens storlek när den visas på skärmen. -### Markupexempel +2. Lägg till `srcset`-attributet till ``-elementet, inklusive bildkällorna och motsvarande density-descriptorer. +3. Lägg till `sizes`-attributet (valfritt) för att specificera storleken på bilden som den kommer att visas på skärmen. + +### Markup-exempel -Här är ett exempel på hur du implementerar srcset med densitetsdescriptors i din markup: +Här är ett exempel på hur du implementerar srcset med density-descriptors i din markup: ```html En exempelbild ``` - - -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 markup-exempel inkluderar: +- **src**: Bildkälla som visas om webbläsaren inte stöder srcset. +- **srcset**: Listan över bildkällor och deras density-descriptorer (1x, 2x, 3x). Webbläsaren väljer den mest lämpliga bilden baserat på användarens skärm. - **alt**: En beskrivning av bilden för tillgänglighetsändamål. - -Och det är allt! Du har framgångsrikt implementerat srcset med densitetsdescriptors, vilket förbättrar din webbplats prestanda och användarupplevelse. +Och det är det! Du har lyckats implementera srcset med density-descriptors och förbättrat din webbplatsens prestanda och användarupplevelse. diff --git a/src/content/docs/sv/introduction.md b/src/content/docs/sv/introduction.md index 272c473..581e574 100644 --- a/src/content/docs/sv/introduction.md +++ b/src/content/docs/sv/introduction.md @@ -1,39 +1,38 @@ --- -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 åsiktsstyrd guide till responsiva bilder för 2023 +taskInputHash: 9073468e325bcbed lang: sv -ignore: '/* cSpell:locale sv,en*/' sidebar_sort_priority: 1000 -date_published: '2023-03-23' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -**En effektiv och bestämd guide till bilder för 2023** - -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. - -> 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. - -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. - -### Den enkla metoden - -```html - -Hund som cyklar - - - - +**En effektiv och åsiktsstyrd guide till bilder för 2023** + +Kolla sidofältet för en djupdykning i ämnet. Detta är en snabbreferens för att uppgradera de `` taggar som hanterar moderna enheter med alla sina olika storlekar och pixeldensiteter. Du bör [veta att pixlar != pixlar](/sv/pixels-inte-pixels) och `devicePixelRatio` är mer troligt att vara runt 3,875 än 1:1. Moderna telefoner låtsas vara mellan 320-428px breda för läsbarhet (i CSS-pixlar), 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 använda en [densitetsbeskrivning istället](/sv/density-descriptors). Detta är ofta lämpligt för logotyper, ikoner och knappar. + +Vet du vad dina [brytpunkter](/sv/breakpoints) är? Du kommer att behöva dessa nummer för att finjustera lösningen nedan - och åtminstone brytpunkten där viewporten stannar att växa. + +### Det enkla sättet + +```html + +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..d451f86 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 Lighthouse +taskInputHash: 034f3b9f627231a8 lang: sv -ignore: '/* cSpell:locale sv,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- Hur testar du din webbplats prestanda med Lighthouse? -> Lighthouse är ett verktyg som kan användas för att mäta prestandan, tillgängligheten och andra aspekter av en webbplats. För att testa din webbplats prestanda med Lighthouse, följ dessa steg: +> Lighthouse är ett verktyg som kan användas för att mäta prestanda, tillgänglighet och andra aspekter av en webbplats. För att testa din webbplats prestanda med Lighthouse, följ dessa steg: > -> 1\. Öppna Google Chrome webbläsare och navigera till sidan du vill testa. +> 1\. Öppna Google Chrome-webbläsaren och navigera till sidan du vill testa. > -> 2\. Klicka på de tre punkterna i det övre högra hörnet av webbläsarfönstret, välj sedan "Fler verktyg" och sedan "Utvecklarverktyg" eller använd helt enkelt tangentbordsgenvägen "Ctrl + Shift + I" (Windows, Linux) eller "Command + Option + I" (macOS). +> 2\. Klicka på de tre prickarna i övre högra hörnet av webbläsarfönstret, välj "Fler verktyg" och sedan "Utvecklarverktyg" eller helt enkelt använd 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 fönstret för utvecklarverktyg, klicka på Lighthouse-ikonen till vänster eller tryck på "Ctrl+Shift+P" (Windows, Linux) eller "Command+Shift+P" (macOS) för att öppna kommandomenyn, skriv sedan "Lighthouse" och välj "Skapa rapport". > -> 4\. I Lighthouse dialogrutan, välj prestanda och andra relevanta alternativ som du vill testa, klicka sedan på "Generera rapport". +> 4\. I Lighthouse-dialogrutan, välj prestanda och andra relevanta alternativ du vill testa, klicka sedan på "Skapa rapport". > -> 5\. Efter att Lighthouse har slutfört sin analys, kommer du att se en rapport med poäng och rekommendationer för att förbättra din webbplats prestanda, tillgänglighet och andra områden. +> 5\. När Lighthouse har slutfört sin analys, kommer du att se en rapport med poäng och rekommendationer för att förbättra din webbplats prestanda, tillgänglighet och andra områden. > -> Genom att följa dessa steg kan du använda Lighthouse för att testa och optimera din webbplats prestanda, vilket kan hjälpa till att förbättra dess användarupplevelse och sökmotor ranking. +> Genom att följa dessa steg kan du använda Lighthouse för att testa och optimera din webbplatsprestanda, vilket kan hjälpa till att förbättra användarupplevelsen och sökmotorrankningen. diff --git a/src/content/docs/sv/picture-examples.md b/src/content/docs/sv/picture-examples.md index 0b07de6..aa7c3a0 100644 --- a/src/content/docs/sv/picture-examples.md +++ b/src/content/docs/sv/picture-examples.md @@ -2,17 +2,16 @@ title: Exempel med -elementet description: >- Ger exempel på användning av -elementet för responsiva bilder, - konstnärlig riktning och olika bildformat -taskInputHash: d2042ff600a5ac1a + bildriktning och olika bildformat +taskInputHash: 2be3dc0822137e26 lang: sv -ignore: '/* cSpell:locale sv,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- Här är några exempel på hur man använder ``-elementet och deras förklaringar: -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 specifierar de olika bildkällorna genom att använda attributen "srcset" och "media" för att ange villkoren under vilka varje källa ska användas. ``-elementet används som fallback för äldre webbläsare eller när villkoren som anges i ``-elementen inte uppfylls. -2\. Exempel på konstnärlig riktning: +2\. Exempel för bildriktning: ```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å orienteringen hos enheten. ``-elementet med attributet "media" inställt på "(orientation: landscape)" specificerar en bildkälla för breda skärmar, medan ``-elementet specificerar en bildkälla för porträtt skä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 genom att använda attributet "srcset" och attributet "type" för att ange bildformatet. ``-elementet används som fallback för äldre webbläsare som inte stödjer ``-elementet. ## Brytpunkter -I responsiv design används brytpunkter för att definiera när layouten på en webbplats eller applikation ska ändras baserat på storleken på viewporten. Brytpunkter definieras vanligtvis med hjälp av media queries i CSS, som tillämpar olika stilar beroende på skärmens bredd. Dessa brytpunkter kan användas i kombination med ``-elementet för att tillhandahålla olika bildkällor för olika skärmstorlekar. +I responsiv design används brytpunkter för att definiera när layouten på en webbplats eller applikation ska ändras baserat på storleken på viewporten. Brytpunkter definieras vanligtvis med 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. -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 attributet `media` för att specificera skärmens bredd under vilken varje källa ska användas. När skärmens bredd är större än eller lika med 768 pixlar, kommer källan `image-large.jpg` att användas; när skärmens bredd är större än eller lika med 480 pixlar men mindre än 768 pixlar, kommer källan `image-medium.jpg` att användas; och när skärmens bredd är mindre än 480 pixlar används källan `image-small.jpg`. Detta gör det möjligt för oss att servera lämpligt dimensionerade bilder för varje enhet, vilket minskar sidbelastningstider och förbättrar användarupplevelsen. -Brytpunkter kan definieras vid vilken skärmstorlek som helst, och flera brytpunkter kan användas för att skapa layouter som svarar på ett brett utbud av enheter. Genom att kombinera brytpunkter med ``-elementet kan du skapa flexibla och responsiva design som ser bra ut på alla enheter. +Brytpunkter kan definieras vid 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 designer som ser bra ut på alla enheter. diff --git a/src/content/docs/sv/pixels-not-pixels.md b/src/content/docs/sv/pixels-not-pixels.md index dc3ed90..8da3bed 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 +title: px ≠ bildpunkter +description: Enhets-pixlar ≠ webbläsarpixlar ≠ bild-pixlar +taskInputHash: 49c85f11bddeb9d6 lang: sv -ignore: '/* cSpell:locale sv,en*/' sidebar_sort_priority: 900 -date_published: '2023-03-26' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -### Enhet pixlar ≠ webbläsare px ≠ bild px +### Enhet-pixlar ≠ webbläsarpixlar ≠ bild-pixlar -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, mappar 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%). +Min stationära dator devicePixelRatio ändras vid zoom i webbläsaren, men är som standard 1,5 (min `System > Display > Scale` är 150%, trots allt). -Bildfiler (exklusive SVG) avkodas till en matris av pixlar. **Det är irriterande svårt att få bildpixlar att visas perfekt i 1:1-förhållande med enhetspixel - men med `srcset` kan du komma *tillräckligt nära***, och lite Javascript kan justera html-elementets storlek efter laddning om du har verkligt motiverade skäl för att behöva den perfekta matchningen, även om sådana förbjudna konster inte avslöjas här. +Bildfiler (exklusive SVG) avkodas till ett rutnät av pixlar. **Det är irriterande svårt att få bildpixlar att visas perfekt i en 1:1-förhållande med enhets-pixlarna - men med `srcset` kan du komma *tillräckligt nära* och lite av Javascript kan justera storleken på html-elementet efter inläsning om du har verkligt motiverade skäl för att behöva den perfekta mappningen, även om sådana förbjudna konster inte kommer att avslöjas här.** -> Andra absoluta [enheter (in, pc, pt, mm, cm, Q)](https://developer.mozilla.org/en-US/docs/Web/CSS/length) definieras i termer av antalet CSS-pixlar och låtsas att allt är 96 dpi. Utvecklare undviker absoluta enheter eftersom det brukar vara bättre att använda enheter som härstammar från teckenstorleken eller från viewport-/behållar-dimensionerna. Felaktiga enheter kan bryta en layout om användaren justerar sin `Accessibility > Text Size`-multiplikator, zoomar webbläsaren eller roterar sin enhet. Det behöver inte sägas att du bör göra alla dessa saker innan du lanserar din webbplats. +> Andra absoluta [enheterna (in, pc, pt, mm, cm, Q)](https://developer.mozilla.org/en-US/docs/Web/CSS/length) definieras i termer av antal CSS-pixlar och låtsas som om allt var 96 dpi. Utvecklare undviker absoluta enheter eftersom det generellt sett är bättre att använda enheter som härleds från teckenstorleken eller visningsområdet/kontainerns dimensioner. Mismatchade enheter kan bryta en layout om användaren justerar sin `Accessibility > Text Size`-multiplikator, zoomar webbläsaren eller roterar sin enhet. Onödigt att säga bör du göra allt detta 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..5ebefa9 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: fbee33d6919f5c1d lang: sv -ignore: '/* cSpell:locale sv,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Varför ska man lägga till bredd och höjd i HTML-koden? +Varför ska man ange bredd och höjd i HTML-koden? -> Det rekommenderas att lägga till bredd och höjd-attribut i HTML-koden för bilder eftersom det hjälper webbläsaren att veta hur stor bilden är innan den har laddats helt. Detta gör att webbläsaren kan reservera lämpligt utrymme på webbsidan för bilden, vilket förhindrar att innehållet hoppar runt när bilden laddas. +> Det rekommenderas att ange bredd och höjd-attribut i HTML-koden för bilder eftersom det hjälper webbläsaren att känna till storleken på bilden innan den är helt laddad. Detta gör att webbläsaren kan reservera rätt mängd utrymme på webbsidan för bilden, vilket förhindrar att innehållet hoppar runt när bilden laddas. > -> Dessutom kan att specificera bredd- och höjd-attribut för bilder också hjälpa till att förbättra prestandan för webbsidan som helhet. När en webbläsare känner till storleken på en bild i förväg kan den mer noggrant beräkna mängden utrymme som behövs för att visa bilden och undvika onödiga omladdningar eller omritningar av innehållet när det laddas. +> Dessutom kan att specificera bredd- och höjd-attributen för bilder också hjälpa till att förbättra prestandan på webbsidan som helhet. När en webbläsare känner till storleken av en bild i förväg kan den mer exakt beräkna mängden utrymme som behövs för att visa bilden och undvika onödig omläggning eller ommålning av innehållet när det laddas. > -> Sammantaget kan användningen av bredd- och höjd-attribut i HTML-koden för bilder förbättra användarupplevelsen genom att göra innehållet laddas snabbare och minska visuella fel. +> Sammanfattningsvis kan användning av bredd- och höjd-attributen i HTML-koden för bilder förbättra användarupplevelsen genom att göra innehållet ladda snabbare och minska visuella störningar. diff --git a/src/content/docs/sv/when-to-use-picture.md b/src/content/docs/sv/when-to-use-picture.md index 30d4794..f64e040 100644 --- a/src/content/docs/sv/when-to-use-picture.md +++ b/src/content/docs/sv/when-to-use-picture.md @@ -1,22 +1,22 @@ --- -title: När du ska använda -elementet +title: När man ska använda -elementet description: Förklarar i vilka situationer du bör använda -elementet -taskInputHash: be2190453a34daf1 +taskInputHash: 22cea24f0bea57f5 lang: sv -ignore: '/* cSpell:locale sv,en*/' -date_published: '2023-03-27' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Elementet `picture` används för att tillhandahålla flera versioner av en bild och avgör vilken version av bilden som ska visas baserat på vissa villkor. Det är särskilt användbart för att optimera bilder för olika skärmstorlekar och upplösningar och används ofta i responsiv webbdesign. -Här är några specifika scenarier där du kan vilja använda `picture`-elementet: +``-elementet används för att tillhandahålla flera versioner av en bild och bestämmer vilken version av bilden som ska visas baserat på vissa villkor. Det är särskilt användbart för att optimera bilder för olika skärmstorlekar och upplösningar och används vanligtvis i responsiv webbdesign. -* **Retina-skärmar:** Skärmar med hög densitet som Apples Retina-skärmar har högre pixeltäthet, vilket innebär att bilder kan se suddiga eller pixelerade ut om de inte är optimerade för hög upplösning. Med `picture`-elementet kan du tillhandahålla en version av bilden som har dubbelt så många pixlar som den vanliga versionen, så att den ser skarp och tydlig ut på Retina-skärmar. +Här är några specifika scenarier där du kanske vill använda ``-elementet: -* **Olika bildformat:** Om du utformar en webbplats som behöver visa bilder med olika bildförhållanden (t.ex. liggande eller stående), kan du använda `picture`-elementet för att tillhandahålla olika versioner av bilden som är optimerade för varje bildförhållande. +* **Retina-skärmar:** Skärmar med hög densitet som Apples Retina-skärmar har en högre pixeldensitet, vilket innebär att bilder kan se suddiga eller pixliga ut om de inte är optimerade för hög upplösning. Med ``-elementet kan du tillhandahålla en version av bilden som har dubbelt så många pixlar som normalversionen, så den ser klar och tydlig ut på Retina-skärmar. -* **Bandbreddsbegränsningar:** Bilder kan vara stora filer som tar upp mycket bandbredd, särskilt på mobila enheter. Med `picture`-elementet kan du tillhandahålla mindre versioner av bilden för enheter med mindre skärmar eller långsammare internetanslutningar, vilket kan hjälpa till att minska sidlastningstiderna. +* **Olika bildförhållanden:** Om du designar en webbplats som behöver visa bilder med olika bildförhållanden (som landskap vs porträtt), kan du använda ``-elementet för att tillhandahålla olika versioner av bilden som är optimerade för varje bildförhållande. -* **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. +* **Bandbreddsbegränsningar:** Bilder kan vara stora filer som tar upp mycket bandbredd, särskilt på mobila enheter. Med ``-elementet kan du tillhandahålla mindre versioner av bilden för enheter med mindre skärmar eller långsammare internetuppkopplingar, vilket kan hjälpa till att minska sidbelastningstiderna. -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å. +* **Konstnärligt riktade layouter:** Ibland vill du kanske presentera en bild på ett visst sätt beroende på layouten för resten av sidan. Till exempel kan du vilja visa en närbild av en persons ansikte på mobila enheter, men en bredare bild på stationära enheter. ``-elementet gör det möjligt att tillhandahålla olika versioner av bilden som är optimerade för olika layouter. + +Övergripande sett är ``-elementet ett kraftfullt verktyg som kan hjälpa dig att optimera dina bilder för en mängd olika användningsområden och se till att de ser bra ut oavsett vilken enhet eller skärmstorlek de visas på. diff --git a/src/content/docs/sv/width-density.md b/src/content/docs/sv/width-density.md index 4907c29..efbf902 100644 --- a/src/content/docs/sv/width-density.md +++ b/src/content/docs/sv/width-density.md @@ -1,49 +1,44 @@ --- -title: Bredd- och densitetsbeskrivare -description: Exempel på användning av bredd- och densitetsbeskrivare i `srcset` -taskInputHash: de07e2c59a8993ce +title: Bredd- och densitetsbeskrivningar +description: Exempel på användning av bredd- och densitetsbeskrivningar i `srcset` +taskInputHash: 788dd1b49d02d6e5 lang: sv -ignore: '/* cSpell:locale sv,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Förståelse för bredd (w) och densitet (x) deskriptorer i `srcset`. Använd exempel och använd markdown. +Förståelse för bredd (w) och densitet (x) beskrivningar 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-attribut som tillåter utvecklare att tillhandahålla flera bildkällor med olika upplösningar eller pixeltäthet och låta webbläsaren välja lämplig bild baserat på enhetens skärminställningar. Attributet `srcset` använder en kombination av `URL` och beskrivningar `w` eller `x` för att specificera bilderna. +## Bredd (`w`) Beskrivning -> 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. +> Beskrivningen `w` används för att specificera bredden på en bild i pixlar. Den används när vi vill tillhandahålla webbläsaren bildens storlek så att den kan välja lämplig bild för den tillgängliga skärmytan. -> Syntaxen för att använda beskrivaren `w` i `srcset` ser ut som följer: +> Syntaxen för att använda beskrivningen `w` i `srcset` är enligt följande: -````html +```html Exempelbild + alt="Exempel Bild"> ``` +> I exemplet ovan har vi tillhandahållit webbläsaren tre bilder och deras motsvarande bredd i pixlar. Webbläsaren väljer bilden med bredd som ligger närmast tillgänglig skärmyta. +## Densitet (`x`) Beskrivning +> Beskrivningen `x` används för att specificera pixeltätheten hos en bild, vilket är förhållandet mellan fysiska pixlar och CSS-pixlar. Den används när vi vill tillhandahålla webbläsaren olika versioner av samma bild med olika pixeltätheter. -> I exemplet ovan har vi tillhandahållit webbläsaren med tre bilder och deras motsvarande bredder i pixlar. Webbläsaren kommer att välja bilden som har den närmaste bredden till det tillgängliga skärmutrymmet. - -## Densitet (`x`) Beskrivare - -> Beskrivaren `x` används för att specificera pixeldensiteten på en bild, vilket är proportionen mellan fysiska pixlar och CSS-pixlar. Den används när vi vill tillhandahålla webbläsaren olika versioner av samma bild med olika pixeldensiteter. - -> Syntaxen för att använda beskrivaren `x` i `srcset` ser ut som följer: +> Syntaxen för att använda beskrivningen `x` i `srcset` är enligt följande: ```html Exempelbild + alt="Exempel Bild"> ``` +> I exemplet ovan har vi tillhandahållit webbläsaren tre bilder och deras motsvarande pixeltätheter. Webbläsaren väljer bilden med det närmaste antalet pixlar till enhetens skärm. -> I exemplet ovan har vi tillhandahållit webbläsaren med tre bilder och deras motsvarande pixeldensiteter. Webbläsaren kommer att välja bilden som har den närmaste pixeldensiteten till enhetens skärm. - -> Observera att beskrivarna `w` och `x` kan användas tillsammans i samma `srcset` attribut för att tillhandahålla webbläsaren fler alternativ att välja mellan. +> Observera att beskrivningarna `w` och `x` kan användas tillsammans i samma `srcset` attribut för att tillhandahålla webbläsaren fler alternativ att välja mellan. diff --git a/src/content/docs/zh/_roundtrip_breakpoints.txt b/src/content/docs/zh/_roundtrip_breakpoints.txt index cc20524..ec6c977 100644 --- a/src/content/docs/zh/_roundtrip_breakpoints.txt +++ b/src/content/docs/zh/_roundtrip_breakpoints.txt @@ -1,42 +1,43 @@ --- 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: 32b3202b064608d3 lang: en -ignore: '/* cSpell:locale zh,en*/' -date_published: '2023-03-26' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- ### Background -Small screens and large screens require different layouts. To use `srcset` and `sizes`, we need to know when the layout changes. +Smaller screens and larger displays require different layouts. To use `srcset` and `sizes`, we need to know which widths are the key points at which layout changes. -Web developers must decide what content to shrink, hide, or reposition on smaller screens, or more commonly, what content to expand, reveal, or add on larger screens. However, they have very little information to go on. Is the user on a tablet, a landscape phone, or a small browser window? +Web developers must decide what to shrink, hide, or reposition on smaller screens— or, more commonly, what to expand, show, 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 in a smaller 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 where the layout changes. This is called a **breakpoint**. It is an arbitrary number of CSS pixels ( [not device pixels](/pixels-not-pixels) ). Polypane has a [great post](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023) 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 (such as logos, icons, or buttons) may not be affected by layout changes caused by these breakpoints (and can use [density descriptors in srcset](/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. +Primary content images will be limited by the size of their container. Typically, the main content area of a page will be limited to a certain width on the largest screen, i.e. `max-width`, but on smaller screens, the main content area will fill the entire viewport. -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 you have multiple columns at some breakpoints, calculating an effective size rule will become more difficult because the percentage of 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 think too much about it. These rough approximations might make you very happy: -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? Before this viewport width, we can use `100vw` to represent the image taking up the entire viewport width in the `sizes` attribute. +2. What is the maximum width the container can be? We can set it as a fixed `width` that applies to all other elements. -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 is 700 pixels for the first question and 800 pixels for the second, you can use the following `sizes` attribute: ```html - + ``` -> You might think the browser can handle all these calculations for us nicely based on CSS. Unfortunately, browsers are too eager to *prefetch* the image URL before they download the style sheet. So, we have to do the calculations ourselves, and blame them if we get it wrong. + + +> You might think the browser can handle all of these calculations well based on CSS. Unfortunately, the browser is very eager to select an image URL before the style sheet is downloaded. So we must make the calculations ourselves, and if we cannot do it perfectly, then they must suffer the consequences. ===================== Content prompt used: @@ -50,7 +51,7 @@ Also carefully translate the title and description for the article; do not use & 2. Why some (but not all) breakpoints matter for your images Metadata returned1. 断点和图像 -2. 为什么您的图像会受到某些（但不是全部）断点的影响 +2. 为什么某些（但不是全部）断点对你的图像很重要 Roundtrip (isolated) prompt used: diff --git a/src/content/docs/zh/_roundtrip_browser-picks-srcset.txt b/src/content/docs/zh/_roundtrip_browser-picks-srcset.txt index 40b2f43..8df4428 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 +title: How Browsers Choose Images in srcset +description: How browsers select images in the srcset attribute +taskInputHash: 20629ee8e7bb7636 lang: en +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -How do browsers choose images in the `srcset` attribute? Here is a step-by-step explanation, including examples for width and density specifications based on devices and viewport. +How do browsers choose images in the `srcset` attribute? Here's a step-by-step guide, including width and pixel density specifications, along with examples of how browsers select based on device and viewport. -- When using the `srcset` attribute in HTML, the browser uses a set of rules to choose the most appropriate image from 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. These rules depend on the device's display characteristics (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 look at each case with some examples. 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 proceed as follows: -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 the `srcset`. Multiply the width descriptor by DPR. For a device with 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. Let's say the viewport width is 420px. The browser will choose the image with the smallest effective width greater than or equal to the viewport width. In this case, it will choose `example-medium.jpg`. 2. Pixel density descriptor (`x`): -Assuming we have the following `srcset` attribute: +Assume we have the following `srcset` attribute: ```html @@ -42,9 +45,9 @@ Assuming we have the following `srcset` attribute: ``` -The browser will follow these steps: +The browser will proceed as follows: -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: @@ -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 `x` descriptor closest to the device's DPR. For a DPR of 1, the browser will choose `example-1x.jpg`. For a DPR of 2, it will choose `example-2x.jpg`, and so on. -Note that you can also use the `sizes` attribute in conjunction with the `srcset` attribute to provide more information on how images should be displayed at different viewport widths. This is particularly useful when using the width descriptor (`w`). Here is an example: +Note that you can also use the `sizes` attribute in combination with the `srcset` attribute to provide more information about how images should be displayed at different viewport widths. 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..2b765c8 100644 --- a/src/content/docs/zh/_roundtrip_density-descriptors.txt +++ b/src/content/docs/zh/_roundtrip_density-descriptors.txt @@ -1,37 +1,36 @@ --- -title: Density Descriptors and srcset -description: Example usage of density descriptors in `srcset` -taskInputHash: b82d9308b6826856 +title: Density Descriptors and Srcset +description: Example of using density descriptors in `srcset` +taskInputHash: 5b1dfe8091bb672a lang: en -ignore: '/* cSpell:locale zh,en*/' -date_published: '2023-03-26' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Srcset with density descriptors provides a simple and effective way to provide the most appropriate image for each user's device, improving performance and user experience. This guide will walk you through using srcset with density descriptors and provide you with markup examples. +Srcset and density descriptors provide a simple yet effective way to serve the most appropriate image to each user's device, improving performance and user experience. This guide will introduce you to the basics of using srcset with density descriptors and provide you with markup examples for reference. -## What is Srcset with Density Descriptors? +## What is a Srcset with Density Descriptors -Srcset is an HTML attribute designed to allow you to specify multiple image sources for a single `` element. Density descriptors (`x`) are used in conjunction with srcset to provide images of different resolutions based on the user's display pixel density. +Srcset is an HTML attribute designed to allow you to specify multiple image sources for a single `` element. Density descriptors (`x`) are used with srcset to provide images with different resolutions based on the pixel density of the user's display. ## When to Use Srcset with Density Descriptors -Srcset with density descriptors is especially useful in the following scenarios: +Using srcset with density descriptors is particularly useful in the following scenarios: -1. Providing high-resolution images for high-DPI displays such as Retina displays, while providing low-resolution images for standard displays. -2. Improving page performance by providing the most suitable image size for each user's device. +1. Providing high-resolution images to high-DPI displays (such as Retina displays) while providing low-resolution images to standard displays. +2. Improving page performance by serving the most appropriate image size for each user's device. ## Implementing Srcset with Density Descriptors To use srcset with density descriptors, follow these steps: -1. Prepare your images at different resolutions. -2. Add the `srcset` attribute to the `` element, including the image sources and their corresponding density descriptors. -3. (Optional) Add the `sizes` attribute to specify how the image will be displayed on the screen. +1. Prepare images with different resolutions. +2. Add the `srcset` attribute to the `` element, including image sources and their corresponding density descriptors. +3. Add the `sizes` attribute (optional) to specify the size of the image 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 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: 508db0f0818d638b lang: en -ignore: '/* cSpell:locale zh,en*/' sidebar_sort_priority: 1000 -date_published: '2023-03-23' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -**Efficient and subjective guide to images in 2023** - -For an in-depth understanding, check out the sidebar. This is a quick reference for upgrading those `` tags to handle various sizes and pixel densities of modern devices. You should [know that pixels aren't pixels](/en/pixels-not-pixels), and that `devicePixelRatio` is more likely to be 3.875 than 1:1. Modern phones pretend to be between 320-428px wide (in CSS pixels) for legibility, but many device pixels support each CSS pixel. - -> If your image will never change size no matter how narrow the browser window is, use [density descriptors](/en/density-descriptors) instead. This usually applies to logos, icons, and buttons. - -Do you know your [breakpoints](/en/breakpoints)? You need these numbers to fine-tune the solutions below - at minimum the viewport width breakpoint where the main content area stops growing. - - -### Simple - -```html - -dog riding bike - - - - +**Efficient and Insightful Guide to Responsive Images in 2023** + +Please see the sidebar for an in-depth examination. This is a quick reference for upgrading `` tags to handle various sizes and pixel density devices of modern times. You should [know that pixels are not pixels](/en/pixels-not-pixels), and that `devicePixelRatio` is more likely 3.875 than 1:1. Modern phones pretend to be 320-428px wide (CSS pixels) for legibility, but there are many device pixels within CSS pixels. + +> If your image size never changes, regardless of how narrow the browser window gets, you should use [density descriptors](/en/density-descriptors). This typically 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 least the viewport width at which the primary content area stops growing. + + +### Simple Approach + +```html +Dog riding a bicycle + + + + ``` ===================== @@ -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 和 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..b535c74 100644 --- a/src/content/docs/zh/_roundtrip_lighthouse-performance-test.txt +++ b/src/content/docs/zh/_roundtrip_lighthouse-performance-test.txt @@ -1,28 +1,14 @@ ---- -title: Testing Website Performance with Lighthouse -description: Steps for testing website performance using Lighthouse -taskInputHash: 2da1cc6b426bea24 -lang: en -ignore: '/* cSpell:locale zh,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' ---- -How to test your website 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. +# Using Lighthouse to Test Performance + +Lighthouse is a tool that can be used to measure various aspects of a website's performance and accessibility. To use Lighthouse to test your website's performance, 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 located in the top right corner of the browser window, then select "More Tools," and then "Developer Tools," or simply use the keyboard shortcut "Ctrl+Shift+I" (Windows, Linux) or "Command+Option+I" (macOS). +3. In the Developer Tools panel, click on the Lighthouse icon located on the left side of the panel or type "Lighthouse" in the command menu (opened by pressing "Ctrl+Shift+P" in Windows/Linux, "Command+Shift+P" in macOS), and select "Generate Report." +4. In the Lighthouse dialog box, choose the performance and other relevant options you want to test, and then click "Generate Report." +5. Once Lighthouse has finished analyzing, you will see a report with scores and suggestions 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 rankings. ===================== Content prompt used: @@ -35,8 +21,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/zh/_roundtrip_picture-examples.txt b/src/content/docs/zh/_roundtrip_picture-examples.txt index 30c6c97..efed188 100644 --- a/src/content/docs/zh/_roundtrip_picture-examples.txt +++ b/src/content/docs/zh/_roundtrip_picture-examples.txt @@ -1,12 +1,15 @@ --- -title: Examples of using the element -description: Examples of using the element for responsive images, art direction, and different image formats. -taskInputHash: 84ee999fd4dc56dc +title: Example Usage of the <picture> Element +description: Provides examples of using the <picture> element for responsive images, art direction, and different image formats. +taskInputHash: 948d982e0b7ea61f lang: en +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Here are some examples of using the `` element and their explanations: +Here are some examples and explanations of using the `` element: -1. Example of responsive images: +1. Example of a responsive image: ```html @@ -16,7 +19,7 @@ Here are some examples of using the `` element and their explanations: ``` -Explanation: In this example, the `` element is used to provide different image sources for different screen sizes. The `` element uses the `srcset` and `media` attributes to specify different image sources and the conditions for using each source. When the conditions specified in the `` element are not met, the `` element is used as a fallback image for older browsers. +Explanation: In this example, the `` element is used to provide different image sources for different screen sizes. The `` elements use the "srcset" attribute and "media" attribute to specify different image sources and the conditions under which each source should be used. The `` element serves as a fallback for older browsers or when the conditions specified in the `` elements are not met. 2. Example of art direction: @@ -27,7 +30,7 @@ Explanation: In this example, the `` element is used to provide differe ``` -Explanation: In this example, the `` element is used to provide different image sources based on the device orientation. The `` element uses the `media` attribute and sets it to `(orientation: landscape)` to provide a landscape-oriented image source, while the `` element provides a portrait-oriented image source. +Explanation: In this example, the `` element provides different image sources based on the orientation of the device. The `` element with "media" set to "(orientation: landscape)" specifies the image source for wide screens, while the `` element specifies the image source for vertical screens. 3. Example of different image formats: @@ -39,15 +42,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 for different image formats. The `` element uses the `srcset` and `type` attributes to specify different image sources and their image formats, while the `` element is used as a fallback image for older browsers that do not support the `` element. +Explanation: In this example, the `` element is used to provide different image sources for different image formats. The `` elements use the "srcset" attribute and "type" attribute to specify different image source formats. The `` element serves as a fallback for older browsers that do not support the `` element. ## Breakpoints -In responsive design, breakpoints are used to define how the layout of a website or application should change as the viewport size changes. Breakpoints are usually defined using media queries in CSS and apply different styles based on screen width. These breakpoints can be combined with the `` element to provide different image sources for different screen sizes. +In responsive design, breakpoints are used to define where a website or application's layout should change as the viewport size changes. Breakpoints are typically defined using media queries in CSS to 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 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 to use for each screen width. 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; when the screen width is less than 480 pixels, the "image-small.jpg" source is used. This allows us to provide appropriately sized images for each device, reducing page load time and improving user experience. -Breakpoints can be defined for any screen size and multiple breakpoints can be used to create layouts that respond to a wide range of devices. By combining breakpoints with the `` element, flexible and responsive designs can be created that look great on any device. +Breakpoints can be defined at any screen size and multiple breakpoints can be used to create layouts that respond to a wide range of devices. By using breakpoints with the `` element, flexible and responsive designs can be created that work well 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..28fc998 100644 --- a/src/content/docs/zh/_roundtrip_pixels-not-pixels.txt +++ b/src/content/docs/zh/_roundtrip_pixels-not-pixels.txt @@ -1,23 +1,22 @@ --- title: px ≠ Pixels -description: Device Pixels ≠ Browser Pixels ≠ Image Pixels -taskInputHash: af021fc2c7e6641e +description: Device pixels ≠ Browser pixels ≠ Image pixels +taskInputHash: 48e3945f4c04c8a4 lang: en -ignore: '/* cSpell:locale zh,en*/' sidebar_sort_priority: 900 -date_published: '2023-03-26' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- ### Device Pixels ≠ Browser Pixels ≠ Image Pixels -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/) +Because of Apple, CSS, and HTML pixels (`px`) **almost always map to multiple device/printer pixels**. My phone's devicePixelRatio is 3.875; [what's yours?](https://www.mydevice.io/) -My desktop's device pixel ratio changes with browser zoom, but is by default 1.5 (after all, my `System > Display > Scale` is set to 150%). +On my desktop device, the PixelRatio changes with browser zoom, but is 1.5 by default (after all, my `System > Display > Scale` is at 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 SVG) decode to pixel grids. Getting image pixels to display in perfect 1:1 proportion with device pixels is tricky - but by using `srcset`, you can get close, and if you really need a perfect mapping, you can adjust HTML element size after loading with some JavaScript, though these forbidden techniques won't be revealed here. -> Other absolute units (such as in, pc, pt, mm, cm, Q) are represented with a number of CSS pixels, pretending that everything is 96dpi. Developers will avoid absolute units as it's usually better to use units derived from font size or viewport/container size. Mismatched units can break layouts if the user adjusts their `Accessibility > Text Size` multiplier, zooms in the browser, or rotates their device. Needless to say, you should test all of these before launching your site. +> Other absolute units (`in`, `pc`, `pt`, `mm`, `cm`, `Q`) are defined based on a certain number of CSS pixels and assume everything is 96dpi. Developers avoid using absolute units, because it's best to use units derived from font size or viewport/container size. Mismatched units can break layouts if a user adjusts their `Accessibility > Text Size` multiplier, zooms their browser or rotates their device. Needless to say, you should do all these operations before publishing your website. ===================== Content 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..496cf1e 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 +description: Benefits of Using Width and Height Attributes in HTML Code +taskInputHash: e73418bc853d298b lang: en -ignore: '/* cSpell:locale zh,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Why should you set width and height in HTML? - -> It is recommended to set the width and height attributes of images in HTML code because it allows web browsers to know the size of the image before it is fully loaded. This allows the browser to reserve the appropriate space for the image on the webpage, thereby preventing content from jumping around while the image loads. -> -> Additionally, specifying the width and height attributes of an image can help improve the overall performance of a webpage. When the browser knows the size of the image beforehand, it can more accurately calculate the space needed to display the image and avoid unnecessary reflow or repaint. -> -> Overall, using width and height attributes for images in HTML code can enhance the user experience, make content load faster, and reduce visual disruptions. +Why should you include width and height in your HTML code? + +> It is recommended to add width and height attributes to images in your HTML code as this helps web browsers know the size of an image before it fully loads. This allows the browser to reserve the proper space for the image on the webpage and prevent content from jumping around when the image is loading. +> +> Additionally, specifying width and height attributes for images can also help improve the performance of the entire webpage. When the browser knows the size of the image beforehand, it is able to more accurately calculate the space needed to display the image and avoid unnecessary relayout or repaint when loading the content. +> +> Overall, using width and height attributes in your HTML code can enhance user experience by making 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. 使用宽度和高度 -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..5930df9 100644 --- a/src/content/docs/zh/_roundtrip_when-to-use-picture.txt +++ b/src/content/docs/zh/_roundtrip_when-to-use-picture.txt @@ -1,26 +1,25 @@ --- -title: When to Use the `` Element -description: Explains specific cases when the `` element should be used -taskInputHash: 671b0d063b76a959 +title: When to Use the Element +description: Explains when to use the element. +taskInputHash: b6307fed6c50d53f lang: en -ignore: '/* cSpell:locale zh,en*/' -date_published: '2023-03-27' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -The `picture` element is used to provide multiple versions of an image and determine which version to display based on specific conditions. It is particularly useful for optimizing images for different screen sizes and resolutions and is commonly used in responsive web design. +The `picture` element is used to provide multiple versions of an image and determine which version to display based on certain conditions. It is particularly useful for optimizing images for different screen sizes and resolutions, and is a commonly used element in responsive web design. -Here are some specific cases when you may want to use the `picture` element: +Here are some specific scenarios where you can 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 with double the pixels, so it appears sharper 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 your website design calls for displaying 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 are often 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. -* **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, based on the layout of other parts of the page, you may want to present an image in a certain way. For example, you may want to show a close-up of a person's face on mobile devices, but a wider shot on desktop devices. The `picture` element allows you to provide different versions of the image optimized for different layouts. -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 good no matter which device or screen size they are viewed on. ===================== Content prompt used: @@ -33,8 +32,8 @@ Also carefully translate the title and description for the article; do not use & 1. When to use element 2. Explains in which situations you should use the element -Metadata returned1. 何时使用``元素 -2. 解释何时应使用``元素的特定情况 +Metadata returned1. 何时应该使用 元素 +2. 说明在哪些情况下应该使用 元素。 Roundtrip (isolated) prompt used: diff --git a/src/content/docs/zh/_roundtrip_width-density.txt b/src/content/docs/zh/_roundtrip_width-density.txt index 68f736e..07f3e62 100644 --- a/src/content/docs/zh/_roundtrip_width-density.txt +++ b/src/content/docs/zh/_roundtrip_width-density.txt @@ -1,51 +1,49 @@ --- title: Width and Pixel Density Descriptors -description: Example usage of width and pixel density descriptors in `srcset` -taskInputHash: 43b724a74c26793e +description: Example usage of width and pixel density descriptors in `srcset`. +taskInputHash: cb9466618b61758c lang: en -ignore: '/* cSpell:locale zh,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Learn about width (`w`) and pixel density (`x`) descriptors in `srcset`. Use examples and Markdown. +Understand the `w` and `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 varying resolutions or pixel densities, and allows the browser to select the appropriate image based on the device display characteristics. The `srcset` attribute uses a combination of `URL` and `w` or `x` descriptors to specify these images. ->The `w` descriptor is used to specify the width of the image in pixels. It is used when we want to provide the browser with dimensions for the image that can fit the available screen space. +## Width (`w`) Descriptors ->The syntax for using the `w` descriptor in `srcset` is as follows: +> The `w` descriptor is used to specify the width of the image in pixels. It can be used when we want to provide the browser with the size of the image so that it can choose the appropriate one. + +> 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 three images and their corresponding pixel widths. The browser will choose the image that is closest to the available screen space. +## Pixel Density (`x`) Descriptors ->In the above example, we have provided the browser with three images and their respective widths in pixels. The browser will select the image that is closest to the available screen space. -## Pixel Density (`x`) Descriptor - ->The `x` descriptor is used to specify the pixel density of the image, which is the ratio of physical pixels to CSS pixels. It is used when we want to provide the browser with different versions of the same image with different pixel densities. +> The `x` descriptor is used to specify the pixel density of the image, i.e. the ratio of physical pixels to CSS pixels. It can be used when we want to provide different versions of the same image with different pixel densities to the browser. ->The syntax for using the `x` descriptor in `srcset` is as follows: +> The syntax for using the `x` descriptor in `srcset` is as follows: ```html Example Image + alt="Example image"> ``` +> In the example above, we have provided three images and their corresponding pixel densities. The browser will choose the image that is 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 the `w` and `x` descriptors can be used together in the same `srcset` attribute to provide more options to the browser. ===================== Content prompt used: @@ -59,7 +57,7 @@ Also carefully translate the title and description for the article; do not use & 2. Examples of using width and density descriptors in `srcset` Metadata returned1. 宽度和像素密度描述符 -2. 在`srcset`中使用宽度和像素密度描述符的示例 +2. 在 `srcset` 中使用宽度和像素密度描述符的示例 Roundtrip (isolated) prompt used: diff --git a/src/content/docs/zh/breakpoints.md b/src/content/docs/zh/breakpoints.md index ac75e99..bcda076 100644 --- a/src/content/docs/zh/breakpoints.md +++ b/src/content/docs/zh/breakpoints.md @@ -1,41 +1,40 @@ --- title: 断点和图像 -description: 为什么您的图像会受到某些（但不是全部）断点的影响 -taskInputHash: e220f548add04019 +description: 为什么某些（但不是全部）断点对你的图像很重要 +taskInputHash: 32b3202b064608d3 lang: zh -ignore: '/* cSpell:locale zh,en*/' -date_published: '2023-03-26' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- ### 背景 -小屏幕和大屏幕需要不同的布局。为了使用`srcset`和`sizes`，我们需要知道布局在什么时候改变。 +较小的屏幕和较大的显示器需要不同的布局。为了使用 `srcset` 和 `sizes`，我们需要知道哪个宽度是布局发生变化的关键点。 -Web开发人员必须决定在较小的屏幕上收缩、隐藏或重新定位什么内容，或者更常见的是，在较大的屏幕上扩展、揭示或添加什么内容。 然而，他们拥有的信息非常少。用户是在平板上、手机横屏模式还是小型浏览器窗口上？ +Web 开发人员必须决定在较小的屏幕上缩小、隐藏或重新定位什么 - 或者更常见的是在较大的屏幕上扩展、显示或添加什么。他们也有非常少的信息可以参考。用户是在平板电脑上还是在横屏模式下的手机上，还是在较小的浏览器窗口中？ -我们必须选择一个任意的视口宽度，其中布局发生更改。这被称为**断点**。它是一个CSS像素的任意数量（[不是设备像素](/zh-cn/pixels-not-pixels)）。Polypane有一篇[很棒的文章](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023) ，讲述了常用的断点。 +我们必须选择一个任意的视口宽度，在这个宽度上布局发生变化。这被称为**断点**。这是一个 CSS 像素的任意数量（[不是设备像素](/zh/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. 主列（或图像容器）在什么大小停止增长？在该视口宽度之前，我们可以在图像的 `sizes` 属性中使用 `100vw` 来表示图像占用了整个视口宽度。 +2. 容器可达到的最大宽度是多少？我们可以将其设置为固定的 `width`，作用于其他所有元素。 -例如，如果你的第一步答案是700像素，第二步答案是800像素，则可以使用以下`sizes`属性： +如果你的答案对于第一个问题是 700 像素，对于第二个问题是 800 像素，你可以使用以下 `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..11e258d 100644 --- a/src/content/docs/zh/browser-picks-srcset.md +++ b/src/content/docs/zh/browser-picks-srcset.md @@ -1,18 +1,17 @@ --- -title: 浏览器如何选择 -description: 浏览器如何在`srcset`属性中选择图片 -taskInputHash: bee7d600f9a7bbb2 +title: 浏览器如何进行选择 +description: 浏览器如何在srcset属性中选择图像 +taskInputHash: 20629ee8e7bb7636 lang: zh -ignore: '/* cSpell:locale zh,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -浏览器如何在`srcset`属性中选择图片？以下是一步一步的说明，包括宽度和精度规范，并根据设备和视口决定如何选择。 +浏览器如何在srcset属性中选择图片？以下是一步步，包括宽度和像素密度规格以及浏览器如何根据设备和视口进行选择的示例。 -- 在HTML中使用`srcset`属性时，浏览器使用一组规则从提供的源列表中选择最合适的图像。这些规则取决于设备的显示特性（分辨率，像素密度）和视口大小。 `srcset`属性允许您根据宽度（使用`w`描述符）或像素密度（使用`x`描述符）指定不同的图像。让我们通过每个示例进行演示。 +- 当在HTML中使用`srcset`属性时，浏览器使用一组规则从提供的源列表中选择最合适的图像。这些规则取决于设备的显示特性（分辨率，像素密度）和视口大小。`srcset`属性允许您根据宽度（使用`w`描述符）或像素密度（使用`x`描述符）指定不同的图像。让我们通过每种情况来看一下示例。 -1.宽度描述符（`w`）： +1\. 宽度描述符（`w`）： 假设我们有以下`srcset`属性： @@ -22,21 +21,21 @@ 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 +- example-small.jpg：400 \* 1 = 400px -- example-medium.jpg：800 * 1 = 800px +- example-medium.jpg：800 \* 1 = 800px -- example-large.jpg：1600 * 1 = 1600px +- example-large.jpg：1600 \* 1 = 1600px -c.将有效宽度与视口宽度进行比较。假设视口宽度为420px。浏览器将选择具有大于或等于视口宽度的最小有效宽度的图像。在本例中，它将选择`example-medium.jpg`。 +c. 将有效宽度与视口宽度进行比较。假设视口宽度为420px。浏览器将选择具有大于或等于视口宽度的最小有效宽度的图像。在这种情况下，它将选择`example-medium.jpg`。 -2.像素密度描述符（`x`）： +2\. 像素密度描述符（`x`）： 假设我们有以下`srcset`属性： @@ -46,11 +45,11 @@ 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..cd9b65a 100644 --- a/src/content/docs/zh/density-descriptors.md +++ b/src/content/docs/zh/density-descriptors.md @@ -1,31 +1,36 @@ --- -title: 密度描述符与srcset +title: 密度描述符与Srcset description: 在`srcset`中使用密度描述符的示例 -taskInputHash: b82d9308b6826856 +taskInputHash: 5b1dfe8091bb672a lang: zh -ignore: '/* cSpell:locale zh,en*/' -date_published: '2023-03-26' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Srcset with density descriptors（带密度描述符的Srcset）提供了一种简单而有效的方法，为每个用户的设备提供最合适的图像，提高了性能和用户体验。本指南将引导您了解如何使用带密度描述符的srcset，并为您提供标记示例。 -## 什么是带密度描述符的Srcset？ +Srcset与密度描述符提供了一种简单而有效的方法，可以为每个用户的设备提供最合适的图像，从而提高性能和用户体验。本指南将为您介绍使用Srcset与密度描述符的基础知识，并为您提供标记示例以供参考。 -Srcset是一种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..d11c9e9 100644 --- a/src/content/docs/zh/introduction.md +++ b/src/content/docs/zh/introduction.md @@ -1,38 +1,38 @@ --- -title: srcset 和 sizes -description: 2023 年响应式图像的高效且主观的指南 -taskInputHash: ff8b517c77f33d91 +title: '`srcset`和``大小' +description: 2023年响应式图像高效而有见解的指南 +taskInputHash: 508db0f0818d638b lang: zh -ignore: '/* cSpell:locale zh,en*/' sidebar_sort_priority: 1000 -date_published: '2023-03-23' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -**2023 年图像高效且主观的指南** +**2023 年图像高效而有见解的指南** -查看侧边栏进行深入了解。这是快速参考，用于升级那些 `` 标签以处理现代设备的各种尺寸和像素密度。您应该[知道像素不等于像素](/zh/pixels-not-pixels)，而 `devicePixelRatio` 更有可能是 3.875，而不是 1:1。现代手机为了可读性会假装宽度为 320-428px（在 CSS 像素中），但是有许多设备像素支持每个 CSS 像素。 +请参见侧边栏进行深入研究。这是升级这些``标签以处理现代各种大小和像素密度设备的快速参考。您应该[知道像素并不等于像素](/zh/pixels-not-pixels)，`devicePixelRatio`更可能是3.875而不是1: 1。现代手机为了可读性伪装为320-428px宽（CSS像素），但是在CSS像素中有许多设备像素。 -> 如果您的图像永远不会更改大小，无论您将浏览器窗口缩小到多窄，您应该使用[分辨率描述符](/zh/density-descriptors)代替。这通常适用于徽标、图标和按钮。 +> 如果您的图像尺寸永远不会改变，无论浏览器窗口变得多窄，您应该使用[分辨率描述符](/zh/density-descriptors)。这通常适用于徽标，图标和按钮。 -您知道您的[断点](/zh/breakpoints)是什么吗？您需要这些数字来微调以下解决方案-至少是主内容区域停止增长的视口宽度断点。 +您知道自己的[断点](/zh/breakpoints)是什么吗？您需要这些数字来微调以下解决方案-至少是主要内容区域停止增长的视口宽度断点。 -### 简单方法 +### 简单的方法 ```html - -Dog riding a bicycle - sizes="(max-width: 700px) 100vw, 800px" alt="狗骑自行车" /> - - + - + ``` diff --git a/src/content/docs/zh/lighthouse-performance-test.md b/src/content/docs/zh/lighthouse-performance-test.md index ae8f4eb..954e319 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 测试性能 -description: 使用 Lighthouse 测试网站性能的步骤 -taskInputHash: 2da1cc6b426bea24 +title: 使用 Lighthouse 测试性能 +description: 如何使用 Lighthouse 测试网站性能的步骤 +taskInputHash: e3a6a4766e302363 lang: zh -ignore: '/* cSpell:locale zh,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- 如何使用 Lighthouse 测试您的网站性能？ -> Lighthouse 是一款用于测量网站性能、可访问性和其他方面的工具。要使用 Lighthouse 测试您的网站性能，请按照以下步骤进行： +> Lighthouse 是一种工具，可用于测量网站的性能、可访问性和其他方面。 要使用 Lighthouse 测试您的网站性能，请按照以下步骤操作： > -> 1. 打开 Google Chrome 网络浏览器并转到要测试的页面。 +> 1. 打开 Google Chrome 网页浏览器并导航到要测试的页面。 > -> 2. 点击浏览器窗口右上角的三个点，然后选择“更多工具”，然后选择“开发者工具”，或者直接使用键盘快捷键 “Ctrl+Shift+I”（Windows，Linux）或 “Command+Option+I”（macOS）。 +> 2. 单击浏览器窗口右上角的三个点，然后选择“更多工具”，然后选择“开发者工具”，或者直接使用键盘快捷键“Ctrl+Shift+I”（Windows，Linux）或“Command+Option+I”（macOS）。 > -> 3. 在开发者工具面板中，单击位于面板左侧的 Lighthouse 图标，或按 “Ctrl+Shift+P”（Windows，Linux）或 “Command+Shift+P”（macOS）打开命令菜单，然后输入 "Lighthouse" 并选择 “Generate report”。 +> 3. 在开发者工具面板中，单击位于面板左侧的 Lighthouse 图标，或按“Ctrl+Shift+P”（Windows，Linux）或“Command+Shift+P”（macOS）打开命令菜单，然后键入“Lighthouse”，并选择“生成报告”。 > -> 4. 在 Lighthouse 对话框中，选择您要测试的性能和其他相关选项，然后单击 “Generate report”。 +> 4. 在 Lighthouse 对话框中，选择要测试的性能和其他相关选项，然后单击“生成报告”。 > -> 5. Lighthouse 完成分析后，您将看到一份报告，其中包括改进您的网站性能、可访问性和其他区域的建议和评分。 +> 5. Lighthouse 完成分析后，您将看到一个报告，其中包含用于改善您的网站性能、可访问性和其他方面的得分和建议。 > -> 遵循这些步骤，就可以使用 Lighthouse 来测试和优化您的网站性能，这有助于提高其用户体验和搜索引擎排名。 +> 通过遵循这些步骤，您可以使用 Lighthouse 来测试和优化您的网站性能，这可以帮助改善用户体验和搜索引擎排名。 diff --git a/src/content/docs/zh/picture-examples.md b/src/content/docs/zh/picture-examples.md index 15bc82d..26e35a5 100644 --- a/src/content/docs/zh/picture-examples.md +++ b/src/content/docs/zh/picture-examples.md @@ -1,16 +1,15 @@ --- -title: 使用 元素的示例 -description: 提供使用 元素的示例，包括响应式图片、艺术指导和不同的图片格式。 -taskInputHash: 14b6f48db8e81c85 +title: 使用元素的示例 +description: 提供使用元素的示例，用于响应式图像、艺术方向和不同的图像格式。 +taskInputHash: 948d982e0b7ea61f lang: zh -ignore: '/* cSpell:locale zh,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -以下是使用``元素的一些示例和它们的解释： +以下是使用``元素的一些示例及其说明： -1. 响应式图片示例: +1.响应式图片示例： ```html @@ -20,35 +19,38 @@ date_updated: '2023-03-31' ``` -解释：在这个例子中，``元素用于为不同的屏幕尺寸提供不同的图像源。``元素使用`"srcset"`属性和`"media"`属性来指定在哪些条件下使用每个源。当``元素中指定的条件未达成时，``元素将作为一个回退选项呈现给旧的浏览器。 +说明：在此示例中，``元素用于为不同的屏幕大小提供不同的图像来源。``元素使用"srcset"属性和"media"属性来指定不同的图像来源，并指定每个来源应该使用的条件。``元素用作旧版浏览器的回退，或在``元素中指定的条件不满足时使用。 -2. 艺术指导示例： +2.艺术指导示例： ```html + 一张图片 ``` -解释：在这个例子中，``元素被用于根据设备的屏幕方向提供不同的图像源。``元素中的`"media"`属性指定横屏宽屏幕的图像源，而``元素则指定竖屏设备的图像源。 +说明：在此示例中，``元素根据设备的方向提供不同的图像来源。具有将"media"属性设置为"(orientation: landscape)"的``元素指定宽屏的图像来源，而``元素指定纵向屏幕的图像来源。 -3. 不同图片格式的示例： +3.不同图像格式的示例： ```html + + 一张图片 ``` -解释：在这个例子中，``元素用于为不同的图片格式提供不同的图像源。``元素使用`"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`来源；当屏幕宽度大于或等于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..3398899 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 +taskInputHash: 48e3945f4c04c8a4 lang: zh -ignore: '/* cSpell:locale zh,en*/' sidebar_sort_priority: 900 -date_published: '2023-03-26' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- ### 设备像素 ≠ 浏览器像素 ≠ 图像像素 -感谢苹果，CSS 和 HTML 的像素 (`px`) **几乎总是映射到多个设备/打印机像素上**。我的手机设备像素比是 3.875；[你的是多少？](https://www.mydevice.io/) +因为 Apple，CSS 和 HTML 像素（`px`）**几乎总是映射到多个设备/打印机像素**上。我的手机上的 devicePixelRatio 是 3.875；[你的是多少？](https://www.mydevice.io/) -我的台式机的设备像素比在浏览器缩放时会改变，但默认为 1.5（毕竟我的 `系统 > 显示 > 缩放` 设为 150%）。 +我的桌面设备PixelRatio在浏览器缩放时会发生变化，但默认值为1.5（毕竟我的 `System > Display > Scale` 是 150%）。 -图像文件（不包括 SVG）解码为像素网格。**让图像像素以 1:1 比例完美显示在设备像素上非常困难，但通过 `srcset`，你可以得到足够接近于完美的比例**。如果你确实有需要完美映射的正当理由，一些 JavaScript 可以在加载后调整 HTML 元素大小，但此处不会透露此禁忌艺术的细节。 +图像文件（不包括 SVG）解码为像素网格。要让图像像素与设备像素呈1：1的完美比例显示非常麻烦 - 但通过 `srcset`，你可以让它们相当接近，如果你真正需要完美的映射，则可以在加载后使用一些 Javascript 调整html元素的大小，尽管这些被禁止的技巧在此不会被透露。 -> 其他绝对单位（如 in、pc、pt、mm、cm、Q）是用 CSS 像素数表示的，假装一切都是 96dpi。开发人员会避免使用绝对单位，因为通常最好使用从字体大小或视口/容器尺寸派生的单位。如果用户调整了他们的 `辅助功能 > 文本大小` 倍数，缩放浏览器或旋转他们的设备，不匹配的单位可能会破坏布局。不必说，你应该在发布网站之前执行所有这些操作。 +> 其他绝对单位（in、pc、pt、mm、cm、Q）是基于 CSS 像素数量定义的，并且假装一切都是 96dpi。开发者避免使用绝对单位，因为最好使用从字体大小或视口/容器尺寸派生的单位。如果用户调整了他们的 `Accessibility > Text Size` 倍数设置、缩放浏览器或旋转设备，不匹配的单位可能会破坏布局。不用说，你应该在发布网站之前进行所有这些操作。 diff --git a/src/content/docs/zh/specify-width-height.md b/src/content/docs/zh/specify-width-height.md index da28c72..0dd25a3 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: e73418bc853d298b lang: zh -ignore: '/* cSpell:locale zh,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -你为什么应该在HTML中设置宽度和高度？ +为什么应该在 HTML 代码中加入宽度和高度？ -> 建议在HTML代码中为图像设置宽度和高度属性，因为它可以帮助Web浏览器在完全加载图像之前知道图像的大小。这使得浏览器可以为图像在网页上预留适当的空间，从而防止内容在图像加载时跳动。 -> -> 此外，为图像指定宽度和高度属性还可以帮助提高网页的整体性能。当浏览器事先知道图像的大小时，它可以更准确地计算显示图像所需的空间，并避免不必要的回流或重绘内容。 -> -> 总的来说，通过在HTML代码中为图像使用宽度和高度属性可以提高用户体验，使内容加载更快，减少视觉故障。 +> 推荐在 HTML 代码中为图像添加宽度和高度属性，这有助于网页浏览器在完全加载图像之前先知道图像的大小。这允许浏览器为图像在网页上保留适当的空间，从而防止内容在图像加载时跳动。 +> +> 此外，为图像指定宽度和高度属性也可以帮助提高整个网页的性能。当浏览器事先知道图像的大小时，它可以更准确地计算显示图像所需的空间，并避免内容在加载时不必要的重新布局或重新绘制。 +> +> 总的来说，使用 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..baef1aa 100644 --- a/src/content/docs/zh/when-to-use-picture.md +++ b/src/content/docs/zh/when-to-use-picture.md @@ -1,23 +1,21 @@ --- -title: 何时使用``元素 -description: 解释何时应使用``元素的特定情况 -taskInputHash: 671b0d063b76a959 +title: 何时应该使用 元素 +description: 说明在哪些情况下应该使用 元素。 +taskInputHash: b6307fed6c50d53f lang: zh -ignore: '/* cSpell:locale zh,en*/' -date_published: '2023-03-27' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -`picture`元素用于提供多个图像版本，并根据特定条件确定显示哪个版本的图像。它特别适用于针对不同的屏幕尺寸和分辨率优化图像，并常用于响应式网页设计。 +`picture` 元素用于提供多个版本的图片，并根据某些条件来决定显示哪个版本的图片。它特别适用于优化不同屏幕尺寸和分辨率的图片，是响应式网页设计中常用的一个元素。 +下面是一些特定的场景，在这些场景下可以使用 `picture` 元素： -以下是一些你可能想要使用`picture`元素的特定情况： +* **Retina 显示屏：** 高密度屏幕，如苹果的 Retina 显示屏具有更高的像素密度，这意味着如果没有为高分辨率优化，图像可能会看起来模糊或呈像素状。通过 `picture` 元素，您可以提供一个具有两倍像素的图像版本，这样在 Retina 显示屏上它看起来就更加清晰。 -* **视网膜显示器：** 高密度屏幕（如苹果的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..64e24a5 100644 --- a/src/content/docs/zh/width-density.md +++ b/src/content/docs/zh/width-density.md @@ -1,48 +1,45 @@ --- title: 宽度和像素密度描述符 -description: 在`srcset`中使用宽度和像素密度描述符的示例 -taskInputHash: 43b724a74c26793e +description: 在 `srcset` 中使用宽度和像素密度描述符的示例 +taskInputHash: cb9466618b61758c lang: zh -ignore: '/* cSpell:locale zh,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -了解在`srcset`中的宽度（w）和像素密度（x）描述符。使用示例并使用Markdown。 +理解 `srcset` 中 `w` 和 `x` 描述符。使用示例并使用 Markdown。 + +> `srcset` 是一种 HTML 属性，允许开发人员提供多个具有不同分辨率或像素密度的图像源，并让浏览器基于设备的显示特性选择适当的图像。`srcset` 属性使用 `URL` 和 `w` 或 `x` 描述符的组合来指定这些图像。 ->`srcset`是一个HTML属性，允许开发人员提供具有不同分辨率或像素密度的多个图像源，并让浏览器根据设备的显示特性选择适当的图像。`srcset`属性使用`URL`和`w`或`x`描述符的组合来指定图像。 ## 宽度（`w`）描述符 ->`w`描述符用于指定图像的宽度，以像素为单位。当我们想要提供浏览器可以选择适合可用屏幕空间的图像的维度时，就会使用它。 +> `w` 描述符用于指定图像的宽度（以像素为单位）。当我们想要提供浏览器图像的尺寸以便它可以选择适合的图像时，可以使用它。 ->在`srcset`中使用`w`描述符的语法如下： +> 在 `srcset` 中使用 `w` 描述符的语法如下： ```html Example Image + alt="示例图像"> ``` +> 在上面的示例中，我们提供了三张图像及其对应的像素宽度。浏览器将选择与可用屏幕空间最接近的图像。 +## 密度（`x`）描述符 +> `x` 描述符用于指定图像的像素密度，即物理像素与 CSS 像素的比率。当我们想要为浏览器提供具有不同像素密度的同一图像的不同版本时，可以使用它。 ->在上面的例子中，我们已经向浏览器提供了三个图像及其相应的宽度（以像素为单位）。浏览器将选择最接近可用屏幕空间的图像。 -## 像素密度（`x`）描述符 - ->`x`描述符用于指定图像的像素密度，即物理像素与CSS像素的比率。 当我们想要向浏览器提供具有不同像素密度的相同图像的不同版本时，我们会使用它。 - ->在`srcset`中使用`x`描述符的语法如下： +> 在 `srcset` 中使用 `x` 描述符的语法如下： ```html Example Image + alt="示例图像"> ``` +> 在上面的示例中，我们提供了三张图像及其对应的像素密度。浏览器将选择与设备屏幕最接近的图像。 ->在上面的例子中，我们已经向浏览器提供了三个图像及其相应的像素密度。浏览器将选择最接近设备屏幕的像素密度的图像。 - ->请注意，`w`和`x`描述符可以同时在同一个`srcset`属性中使用，以便向浏览器提供更多的选择。 +> 请注意，`w` 和 `x` 描述符可以在同一 `srcset` 属性中一起使用，以向浏览器提供更多的选择。 diff --git a/src/content/imgstyle/de/_roundtrip_create-a-carousel.txt b/src/content/imgstyle/de/_roundtrip_create-a-carousel.txt index ead1233..74ba8f2 100644 --- a/src/content/imgstyle/de/_roundtrip_create-a-carousel.txt +++ b/src/content/imgstyle/de/_roundtrip_create-a-carousel.txt @@ -1,23 +1,22 @@ --- -title: Create a Carousel -description: How to create a carousel on a website -taskInputHash: 230c6ecf771bf3cb +title: Creating an Image Carousel +description: How to create an image carousel on a website +taskInputHash: a04b23b21eb4f8de lang: en -ignore: '/* cSpell:locale de,en*/' -date_published: '2023-03-29' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Here are the general steps to create an image carousel on a website: +Here are the general steps for creating 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. +1. Create a new HTML file for your image carousel. You can name it something like "carousel.html." +2. Add the HTML structure to your file, which usually includes the header with a title and any necessary CSS stylesheets, as well as the body where you'll add the actual carousel. +3. Create a container for your carousel using a `
` tag. Give it an ID or a class so that you can style it later. +4. Add individual image elements inside the container using the `` tag. You can set the src attribute to the image file path or URL and add alt text or captions as needed. 5. Add navigation buttons to your carousel using `