diff --git a/src/content/docs/de/_roundtrip_breakpoints.txt b/src/content/docs/de/_roundtrip_breakpoints.txt index d2d48bc..0c4ad20 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 +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 what point the layout should change. -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 must decide what to make smaller or invisible on smaller screens, or larger or add to larger screens. They also have very little information available. Is the user on a tablet, a phone in landscape mode, or a small browser window? -We have to choose an arbitrary viewport width at which the layout changes. This is called a **breakpoint**. It can be any number of CSS pixels ([not device pixels](/en/pixels-not-pixels)). Polypane has a [great article](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023) on commonly used breakpoints. +We need to choose an arbitrary viewport width breakpoint at which the layout changes. This is called a **breakpoint**. It's an arbitrary number of CSS pixels ([not device pixels](/en/pixels-not-pixels)). Polypane has a [great article](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023) on commonly used breakpoints. -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) can be immune to the layout changes caused by these breakpoints (and be fine with [srcset density descriptors](/en/density-descriptors)). -Main content images are limited by the size of their container. Typically, the main area of a page layout is constrained to a specific width, a `max-width`, on the largest screens, but on small screens the main content area fills the entire viewport. +Main content images are limited by the size of their container. Typically, a page's main content is constrained to a specific width on the largest screens, a `max-width`, but on small screens, the main content fills the entire viewport. -When you have more than one column at some breakpoints, it becomes difficult to compute the effective size rules because the percentage of viewport width taken up by the image changes. +If you have more than one column at some breakpoints, it becomes harder to calculate effective sizing rules because the percentage of viewport width the image occupies changes. -### The easy way +### The Easy Method -That doesn't mean you should smash your head against the wall. You will likely get very far with the following approach: +However, you shouldn't think too much about it. You'll probably do well with this approximation method: -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 image container) stop growing? Until that viewport width, we can use `100vw` for the `sizes` attribute of the image to say that the image is 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 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. +> One might think that the browser could do all of these calculations for us nicely based on CSS. Unfortunately, browsers aggressively select an image URL *before* downloading the stylesheets. Therefore, we have to do the calculations ourselves, and they're fine with us not getting it perfect. ===================== Content prompt used: @@ -52,7 +51,7 @@ Also carefully translate the title and description for the article; do not use & 2. Why some (but not all) breakpoints matter for your images Metadata returned1. 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..04a3264 100644 --- a/src/content/docs/de/_roundtrip_browser-picks-srcset.txt +++ b/src/content/docs/de/_roundtrip_browser-picks-srcset.txt @@ -1,28 +1,32 @@ --- -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 does the browser decide between images listed in the `srcset` attribute? Here is a step-by-step guide with examples for both width and density specifications, and how the browser decides based on device and viewport. -- When using the "srcset" attribute in HTML, the browser uses a set of rules to select the most suitable image from a list of provided sources. These rules depend on both the display characteristics of the device (resolution, pixel density) and the size of the viewport. The "srcset" attribute allows you to specify different images based on width (using the "w" descriptor) or pixel density (using the "x" descriptor). Let's go through examples for both cases. +- When the `srcset` attribute is used in HTML, the browser uses a set of rules to select the best image from a list of provided sources. These rules depend on the display properties (resolution, pixel density) of the device and the size of the viewport. The `srcset` attribute allows you to specify different images based on width (using `w` descriptor) or pixel density (using `x` descriptor). Let's go through each case with examples. -1. Width descriptor ("w"): +1. Width Descriptor (`w`): -Assuming we have the following "srcset" attribute: +Assuming we have the following `srcset` attribute: ```html -Example image +example image ``` -The browser will perform the following steps: +The browser will perform these steps: -a. Determine the DPR (Device Pixel Ratio) of the device. For instance, a standard display has a DPR of 1, while a high-resolution (Retina) display has a DPR of 2 or higher. +a. Determine the DPR (Device Pixel Ratio) of the device. For example, a standard display has a DPR of 1, while a high-resolution (Retina) display has a DPR of 2 or higher. -b. Calculate the effective width for each image in the "srcset". Multiply the width descriptor by the DPR. For a device with a DPR of 1: +b. Calculate the effective width for each image in the `srcset`. Multiply the width descriptor by the DPR. For a device with a DPR of 1: - example-small.jpg: 400 * 1 = 400px @@ -30,23 +34,23 @@ b. Calculate the effective width for each image in the "srcset". Multiply the wi - example-large.jpg: 1600 * 1 = 1600px -c. Compare the effective widths to the viewport width. Assuming the viewport width is 420px, the browser selects the smallest image whose effective width is greater than or equal to the viewport width. In this case, "example-medium.jpg" is selected. +c. Compare the effective widths with the viewport width. Assuming the viewport width is 420px. The browser selects the smallest image with an effective width that is greater than or equal to the viewport width. In this case, it will select `example-medium.jpg`. -2. Density descriptor ("x"): +2. Pixel Density Descriptor (`x`): -Assuming we have the following "srcset" attribute: +Assuming we have the following `srcset` attribute: ```html -Example image +example image ``` -The browser will perform the following steps: +The browser will perform these steps: -a. Determine the DPR (Device Pixel Ratio) of the device. For instance, a standard display has a DPR of 1, while a high-resolution (Retina) display has a DPR of 2 or higher. +a. Determine the DPR (Device Pixel Ratio) of the device. For example, a standard display has a DPR of 1, while a high-resolution (Retina) display has a DPR of 2 or higher. -b. Compare the device's DPR with the "x" descriptors in the "srcset". In this case, we have three images with the following descriptors: +b. Compare the device's DPR with the `x` descriptors in the `srcset`. In this case, we have three images with the following descriptors: - example-1x.jpg: 1x @@ -54,14 +58,15 @@ b. Compare the device's DPR with the "x" descriptors in the "srcset". In this ca - example-3x.jpg: 3x -c. Select the image with the "x" descriptor closest to the device's DPR. For a device with a DPR of 1, the browser selects "example-1x.jpg". For a device with a DPR of 2, it selects "example-2x.jpg", and so on. +c. Select the image with the `x` descriptor that is closest to the device'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 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 use the `sizes` attribute in combination with the `srcset` attribute to provide more information on how the image will be displayed at various viewport widths. This is particularly useful when using the width descriptor (`w`). Here is an example: ```html ` element. Density descriptors (`x`) are used in conjunction with srcset to provide images at different resolutions based on the pixel density of the user's display. +Srcset is an HTML attribute that allows you to specify multiple image sources for a single `` element. Density descriptors (`x`) are used in conjunction with srcset to provide different resolutions of images based on the pixel density of the user's display. -## When to use srcset with density descriptors? +## When to use Srcset with Density Descriptors? -Using srcset with density descriptors is especially useful when you: -1. Want to provide high resolution images for high DPI displays (e.g. Retina displays) while using lower resolutions for standard displays. -2. Want to improve page rendering by providing the most appropriate image size for each user's device. +Using srcset with density descriptors is particularly useful when you want to: +1. provide high-resolution images on high-resolution displays (e.g. Retina displays) while providing lower resolutions on other displays. +2. improve page performance by providing the most suitable image size to each user's device. -## Implementing srcset with density descriptors +## Implementing Srcset with Density Descriptors -To use srcset with density descriptors, follow these steps: +Follow these steps to use srcset with density descriptors: 1. Prepare your images in different resolutions. 2. Add the `srcset` attribute to the `` element, including the image sources and corresponding density descriptors. -3. Optionally, add the `sizes` attribute to set the size of the image on the screen. +3. Add the `sizes` attribute (optional) to specify the size of the image as it is displayed on the screen. -### Markup example +### Markup Example -Here is an example of how to implement srcset with density descriptors in your markup: +Here is an example of how you can implement srcset with density descriptors in your markup: ```html sizes -description: An efficient and definitive guide to responsive images until 2023 -taskInputHash: f8e7c31ccf577572 +title: srcset & sizes +description: An efficient and opinionated guide to responsive images in 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 opinionated guide to images in 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 the detailed analysis. This is the quick reference for updating your `` tags to handle modern devices in all their various sizes and pixel densities. You should [know that pixels are not pixels](/en/pixels-not-pixels) and that `devicePixelRatio` is more likely to be 3.875 than 1:1. Modern phones pretend to be 320-428px wide (in CSS pixels) to be readable, 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 size never changes no matter how narrow you make 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'll need those numbers to fine-tune the solution below - at a minimum, the viewport breakpoint at which the main content stops growing. -### The easy method + +### The simple method ```html + dog riding on 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 bike" /> + + + + ``` ===================== @@ -48,8 +49,8 @@ Also carefully translate the title and description for the article; do not use & 1. srcset & sizes 2. An Efficient and Opinionated Guide to Responsive Images for 2023 -Metadata returned1. srcset und sizes - 2. Ein effizienter und dezidierter Leitfaden für responsive Bilder bis 2023 +Metadata returned1. srcset & sizes +2. Ein effizienter und eigensinniger Leitfaden für responsive Bilder im Jahr 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..36ad321 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: Performance Testing with Lighthouse +description: 'Steps on how to test a website's performance with Lighthouse.' +taskInputHash: 26eb06d37d959148 lang: en -ignore: '/* cSpell:locale de,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -How do you test your website's performance using Lighthouse? +How to Test Your Website's Performance with Lighthouse -> Lighthouse is a tool that allows for the measurement of a website's performance, accessibility, and other aspects. To test your website's performance using Lighthouse, follow these steps: +> Lighthouse is a tool that can 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 wish to test. +> 1. Open the Google Chrome web browser and navigate to the page you want to test. > -> 2. Click on the three dots in the upper right corner of the browser window, then select "More Tools" and then "Developer Tools," or simply use the keyboard shortcut "Ctrl+Shift+I" (Windows, Linux) or "Command+Option+I" (macOS). +> 2. Click the three dots in the top right corner of the browser window and then select "More Tools" and then "Developer Tools" or simply use the keyboard shortcut "Ctrl+Shift+I" (Windows, Linux) or "Command+Option+I" (macOS). > -> 3. In the Developer Tools window, click on the Lighthouse icon on the left side of the window, or press "Ctrl+Shift+P" (Windows, Linux) or "Command+Shift+P" (macOS) to open the Command Menu. Type "Lighthouse" and select "Generate report." +> 3. In the Developer Tools panel, click on the Lighthouse icon on the left 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 wish to test, then click "Generate report." +> 4. In the Lighthouse dialog box, select the performance and other relevant options you want to test and then click on "Generate Report." > -> 5. Once Lighthouse completes its analysis, you will see a report with scores and recommendations for improving your website's performance, accessibility, and other areas. +> 5. After Lighthouse completes its analysis, a report will appear 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 improve user experience and search engine rankings. +> By following these steps, you can use Lighthouse to test and optimize your website's performance, which can help to improve user experience and search engine rankings. ===================== Content prompt used: @@ -35,8 +34,8 @@ Also carefully translate the title and description for the article; do not use & 1. Test performance with Lighthouse 2. Steps on how to test a website's performance using Lighthouse -Metadata returned1. Testen der Leistung mit Lighthouse -2. Schritte zum Testen der Leistung einer Website mit Lighthouse +Metadata returned1. Leistungstest mit Lighthouse +2. Schritte, wie man die Leistung einer Website mit Lighthouse testet. 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..b0776ab 100644 --- a/src/content/docs/de/_roundtrip_picture-examples.txt +++ b/src/content/docs/de/_roundtrip_picture-examples.txt @@ -1,54 +1,60 @@ ---- -title: Examples for usage of element -description: >- - Provides examples for the usage of the element for responsive images, art direction, and various image formats. -taskInputHash: aace1b3e0a9751e5 -lang: en ---- -Here are a few examples for the usage of the `` element and their explanations: - -1. Example for responsive images: - -```html - - - - An image - -``` - -Explanation: In this example, the `` element is used to provide different image sources for different screen sizes. The `` elements specify the different image sources using the `srcset` attribute and the `media` attribute to define the conditions under which each source should be used. The `` element is used as fallback for older browsers or if the conditions specified in the `` elements are not met. - -2. Example for Art Direction: - -```html - - - An image - -``` - -Explanation: In this example, the `` element is used to provide different image sources based on the orientation of the device. The `` element with the `media` attribute set to `(orientation: landscape)` specifies an image source for wide screens while the `` element specifies an image source for portrait screens. - -3. Example for various image formats: - -```html - - - - An image - -``` - -Explanation: In this example, the `` element is used to provide different image sources for various image formats. The `` elements specify different image sources using the `srcset` attribute and the `type` attribute to define the image format. The `` element is used as fallback for older browsers that do not support the `` element. - -## Breakpoints - -In responsive design, breakpoints are used to define when the layout of a website or application should change based on the size of the viewport. Breakpoints are typically defined with media queries in CSS that apply different styles depending on the screen width. These breakpoints can be used in conjunction with the `` element to provide different image sources for different screen sizes. - -In the first example above, we used the `media` attribute to specify the screen width at which each source should be used. If the screen width is greater than or equal to 768 pixels, the `image-large.jpg` source will be used. If the screen width is greater than or equal to 480 pixels but less than 768 pixels, `image-medium.jpg` source will be used. If the screen width is less than 480 pixels, the `image-small.jpg` source will be used. This allows appropriately sized images to be provided for each device, reducing page load times and improving the user experience. - -Breakpoints can be defined for any screen size, and multiple breakpoints can be used to create layouts that respond to a wide range of devices. By combining breakpoints with the `` element, flexible and responsive designs can be created that look great on any device. +--- +title: Examples with the Element +description: >- + Provides examples with 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 some 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 with the "srcset" attribute and the "media" attribute to indicate 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 for art direction: + +```html + + + + An image + +``` + +Explanation: In this example, the `` element is used to provide different image sources depending on the orientation of the device. The `` element with the "media" attribute set to "(orientation: landscape)" specifies an image source for wide screens, while the `` element provides 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 with the "srcset" attribute and the "type" attribute to indicate the image format. The `` element serves as a fallback for older browsers that do not support the `` element. + +## Breakpoints + +In responsive design, breakpoints are used to define when the layout of a website or application should change based on the size of the viewport. Breakpoints are commonly defined using media queries in CSS, which apply different styles depending on the screen width. These breakpoints can be used in conjunction with the `` element to provide different image sources for different screen sizes. + +For example, in the first example above, we used the `media` attribute to specify the screen width under which each source should be used. If the screen width is greater than or equal to 768 pixels, the `image-large.jpg` source will be used; if the screen width is greater than or equal to 480 pixels but less than 768 pixels, the `image-medium.jpg` source will be used; and if the screen width is less than 480 pixels, the `image-small.jpg` source will be used. This allows us to use appropriately sized images for each device, reducing load times and improving the user experience. + +Breakpoints can be defined at any screen size, and multiple breakpoints can be used to create layouts that respond to a variety of devices. By combining breakpoints with the `` element, you can create flexible and responsive designs that look great on any device. ===================== Content prompt used: @@ -61,8 +67,8 @@ Also carefully translate the title and description for the article; do not use & 1. Examples using element 2. Provides examples using the element, for responsive images, art direction and different image formats -Metadata returned1. Beispiele für die Verwendung des -Elements -2. Bietet Beispiele für die Verwendung des -Elements für responsive Bilder, Art Direction und verschiedene Bildformate. +Metadata returned1. Beispiele mit dem -Element +2. Stellt Beispiele mit dem -Element bereit, für responsive Bilder, Art Direction und verschiedene Bildformate. Roundtrip (isolated) prompt used: diff --git a/src/content/docs/de/_roundtrip_pixels-not-pixels.txt b/src/content/docs/de/_roundtrip_pixels-not-pixels.txt index 0055c57..a9ce768 100644 --- a/src/content/docs/de/_roundtrip_pixels-not-pixels.txt +++ b/src/content/docs/de/_roundtrip_pixels-not-pixels.txt @@ -1,23 +1,22 @@ --- title: px ≠ Pixel -description: Device Pixels ≠ Browser Pixels ≠ Image Pixels -taskInputHash: 6bf2840ae3339b2e +description: Device pixels ≠ browser pixels ≠ image pixels +taskInputHash: b857216a5693bfeb lang: en -ignore: '/* cSpell:locale de,en*/' sidebar_sort_priority: 900 -date_published: '2023-03-26' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -### Device Pixels ≠ Browser Pixels ≠ Image Pixels +### Device pixels ≠ browser pixels ≠ image pixels -Thanks to Apple, CSS and HTML pixels (`px`) almost never correspond to a single device/printer pixel. The `devicePixelRatio` on my phone is 3.875; [how high is yours?](https://www.mydevice.io/) +Thanks to Apple, CSS and HTML pixels (`px`) **rarely correspond to a single device or printer pixel**. My phone's devicePixelRatio is 3.875; [what's yours?](https://www.mydevice.io/) -My desktop `devicePixelRatio` changes as I zoom in on the browser, but it is typically 1.5 (my `System > Display > Scale` is set to 150%, after all). +My desktop's devicePixelRatio varies depending on the browser zoom, but is default set to 1.5 (my `System > Display > Scale` is 150%, after all). -Image files (except for SVG) decode to a grid of pixels. **Unfortunately, it is difficult to display image pixels perfectly at a 1:1 ratio with device pixels -- but with `srcset`, you can get *close enough*, and some JavaScript can adjust the size of the HTML element after it loads if you have a really compelling reason for perfect parity, though such black arts will not be revealed here.** +Image files (excluding SVG) are decoded into a grid of pixels. **It is frustratingly difficult to perfectly display image pixels at a 1:1 ratio with device pixels, but with `srcset`, you can get pretty close**, and a bit of JavaScript can adjust the size of the HTML element after loading if you really have compelling reasons for requiring this perfect rendering, but such forbidden arts are not revealed here. -> Other absolute [units (in, pc, pt, mm, cm, Q)](https://developer.mozilla.org/en-US/docs/Web/CSS/length) are defined in terms of the number of CSS pixels they represent, pretending that everything is 96dpi. Developers should generally avoid absolute units, opting for units that derive from font size or viewport/container dimensions. Mismatched units can break a layout when the user adjusts the `Accessibility > Text Size` multiplier, when the browser zooms, or when the device is rotated. Of course, you should test all of these things before publishing your site. +> Other absolute [units (in, pc, pt, mm, cm, Q)](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Units_and_values) are defined in relation to the number of CSS pixels and assume everything is 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 a layout when the user adjusts the `Accessibility > Text Size` multiplier, zooms the browser, or rotates the device. Needless to say, you should do all of these things before publishing your website. ===================== Content prompt used: @@ -31,7 +30,7 @@ Also carefully translate the title and description for the article; do not use & 2. Device px ≠ browser px ≠ image px Metadata returned1. px ≠ Pixel -2. Geräte-Pixel ≠ Browser-Pixel ≠ Bild-Pixel +2. Gerätepixel ≠ Browser-Pixel ≠ 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..89bfb76 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? -> 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 the HTML code for images because it helps the web browser to know the size of the image before it is fully loaded. This allows the browser to reserve the appropriate space on the webpage for the image, preventing the content from jumping around while the image loads. > -> 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. +> Furthermore, specifying the width and height attributes for images can also help improve the overall performance of the webpage. If the browser knows the size of an image beforehand, it can calculate the required space to display the image more accurately, avoiding unnecessary reflows or repaints of the content during loading. > -> Overall, the use of width and height attributes in HTML code for images can improve the user experience by loading content faster and reducing visual errors. +> Overall, using width and height attributes in HTML code for images can improve the user experience by loading content faster and reducing visual errors. ===================== Content prompt used: @@ -17,8 +17,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. Verwendung von Breite und Höhe -2. Vorteile der Verwendung von Breite und Höhe Attributen im HTML-Code +Metadata returned1. Verwenden von Breite und Höhe +2. Vorteile der Verwendung von Breite- und Höhe-Attributen im HTML-Code Roundtrip (isolated) prompt used: diff --git a/src/content/docs/de/_roundtrip_when-to-use-picture.txt b/src/content/docs/de/_roundtrip_when-to-use-picture.txt index 508508a..9ee2abc 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 based on certain conditions which version of the image should be displayed. 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: -* **Retina displays:** High-resolution screens such as Apple's Retina displays have a higher pixel density, which means that images can look blurry or pixelated if they are not optimized for high resolutions. With the `picture` element, you can provide a version of the image that has twice as many pixels as the normal version, so it looks sharp and clear on Retina displays. +* **Retina displays:** High-resolution screens like Apple's Retina displays have a higher pixel density, which means images can look blurry or pixelated if they're 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. -* **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're designing a website that needs to display images with different aspect ratios (such as landscape vs. portrait), you can use the `picture` element to 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 display an image in a specific 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. With the `picture` element, you can 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 to optimize your images for a variety of use cases and ensure they look great regardless of device or screen size. ===================== Content prompt used: @@ -34,7 +33,7 @@ Also carefully translate the title and description for the article; do not use & 2. Explains in which situations you should use the element Metadata returned1. Wann man das -Element verwenden sollte -2. Erklärt, in welchen Situationen das -Element verwendet werden sollte. +2. Erklärt, in welchen Situationen Sie das -Element verwenden sollten 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..07143d4 100644 --- a/src/content/docs/de/_roundtrip_width-density.txt +++ b/src/content/docs/de/_roundtrip_width-density.txt @@ -1,22 +1,21 @@ --- -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 (`x`) descriptors in `srcset`. Use examples and markdown. -> `srcset` is an HTML attribute that allows developers to provide multiple image sources with different resolutions or pixel densities and let the browser choose the appropriate image based on the display properties of the device. The `srcset` attribute uses a combination of `URL` and `w-` or `x-` adapters to specify the images. +> `srcset` is an HTML attribute that allows developers to provide multiple image sources at different resolutions or pixel densities, and let the browser choose the appropriate image based on the display characteristics of the device. The `srcset` attribute uses a combination of URL and `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's 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-` adapter in `srcset` looks like this: +> The syntax for using the `w` descriptor in `srcset` is as follows: ```html Example Image ``` -> In the above example, we have provided the browser with three images and their corresponding widths in pixels. The browser selects the image with the closest width to the available screen space. +> In the above example, we have specified three images and their respective widths in pixels. The browser chooses the image with the nearest width to the available screen space. -## Density (`x`) Adapter +## Density (`x`) Descriptor -> The `x-` adapter is used to indicate the pixel density of an image, which is the ratio of physical pixels to CSS pixels. It is used when we want to provide the browser with different versions of the same image with different pixel densities. +> The `x` descriptor is used to specify the pixel density of an image, which 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 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 ``` -> In the above example, we have provided the browser with three images and their corresponding pixel densities. The browser selects the image with the closest pixel density to the device screen. +> In the above example, we have provided the browser with three images and their respective pixel densities. The browser chooses the image with the nearest pixel density to the device's screen. -> Note that the `w-` and `x-` adapters can be used in the same `srcset` attribute to provide the browser with more options to choose from. +> Note that the `w` and `x` descriptors can be used together in the same `srcset` attribute to provide the browser with more choices. ===================== Content prompt used: @@ -57,8 +56,8 @@ Also carefully translate the title and description for the article; do not use & 1. Width and density descriptors 2. Examples of using width and density descriptors in `srcset` -Metadata returned1. 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..196bbc3 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, ab welchem Punkt 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 kleiner oder unsichtbar gemacht werden soll - oder was auf größeren Bildschirmen größer oder hinzugefügt werden soll. Sie haben auch sehr wenig Informationen zur Verfügung. Ist der Benutzer auf einem Tablet oder einem Telefon im Querformat - oder 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 einen willkürlichen Viewport-Breitenpunkt wählen, an dem das Layout geändert wird. Dies wird als **Breakpoint** bezeichnet. Es handelt sich um eine willkürliche Anzahl von CSS-Pixel ([nicht Geräte-Pixel](/de/pixel-keine-pixel)). Polypane hat einen [groartigen 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 häufig verwendete 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) können immun gegen die Layout-Änderungen sein, die durch diese Breakpoints verursacht werden (und mit [srcset Density-Descriptoren](/de/density-descriptors) in Ordnung sein). -Hauptinhaltbilder werden durch die Größe ihres Containers begrenzt. Typischerweise ist der Hauptbereich eines Seitenlayouts auf den größten Bildschirmen auf eine bestimmte Breite begrenzt, eine `max-width`, aber auf kleinen Bildschirmen füllt der Hauptinhaltbereich den gesamten Viewport aus. +Die Bilder des Hauptinhalts werden durch die Größe ihres Containers begrenzt. In der Regel ist der Hauptinhalt einer Seite auf den größten Bildschirmen auf eine bestimmte Breite begrenzt, eine `max-width`, aber auf kleinen Bildschirmen füllt der Hauptinhalt den gesamten Viewport aus. -Wenn Sie bei einigen Breakpoints mehr als eine Spalte haben, wird es schwieriger, die effektiven Größenregeln zu berechnen, da sich der Prozentsatz der Viewport-Breite, den das Bild einnimmt, ändert. +Wenn Sie an einigen Breakpoints mehr als eine Spalte haben, wird es schwieriger, die effektiven Größenregeln zu berechnen, da sich der prozentuale Anteil der Viewport-Breite ä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: +Dennoch sollten Sie nicht zu viel darüber nachdenken. Sie werden mit folgender Näherungsmethode wahrscheinlich sehr gut fahren: -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 Bildcontainer) auf zu wachsen? Bis zu dieser Viewport-Breite können wir für das `sizes`-Attribut des Bildes `100vw` 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 feste `width` für alles andere festlegen. -Wenn Ihre Antwort auf 1 700px und Ihre Antwort auf 2 800px lautet, können Sie das folgende `sizes`-Attribut verwenden: +Wenn Ihre Antwort auf 1 bei 700px und Ihre Antwort auf 2 bei 800px lag, 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 all diese Berechnungen auf Basis des CSS schön für uns übernehmen könnte. Leider sind Browser aggressiv darauf aus, eine Bild-URL *vor* dem Herunterladen der Stylesheets auszuwählen. Daher müssen wir die Berechnungen selbst durchführen, und es ist ihnen recht, wenn wir es nicht perfekt hinbekommen. diff --git a/src/content/docs/de/browser-picks-srcset.md b/src/content/docs/de/browser-picks-srcset.md index 542c414..f57f488 100644 --- a/src/content/docs/de/browser-picks-srcset.md +++ b/src/content/docs/de/browser-picks-srcset.md @@ -1,20 +1,21 @@ --- -title: Wie der Browser wählt -description: Wie der Browser zwischen in srcset aufgelisteten Bildern wählt -taskInputHash: 565e2cc4a65e54bd +title: Wie der Browser auswählt +description: >- + Wie der Browser zwischen Bildern wählt, die im srcset Attribut aufgelistet + sind +taskInputHash: 09ab2b098b259019 lang: de -ignore: '/* cSpell:locale de,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Wie wählt der Browser zwischen den in srcset angegebenen Bildern? Hier sind die Schritte mit Beispielen für sowohl Width- als auch Density-Spezifikationen und wie der Browser basierend auf Gerät und Viewport entscheidet: +Wie entscheidet der Browser zwischen Bildern, die im srcset-Attribut aufgeführt sind? Hier ist eine schrittweise Anleitung mit Beispielen für sowohl Breiten- als auch Dichtespezifikationen und wie der Browser auf Basis 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 am besten geeignete Bild aus einer Liste von bereitgestellten Quellen auszuwählen. Diese Regeln hängen von den Anzeigeeigenschaften (Auflösung, Pixel-Dichte) des Geräts und der Größe des Viewports ab. Das `srcset` Attribut ermöglicht es Ihnen, verschiedene Bilder basierend auf Breite (unter Verwendung von `w` Deskriptor) oder Pixel-Dichte (unter Verwendung von `x` Deskriptor) zu spezifizieren. Lassen Sie uns jeden Fall mit Beispielen durchgehen. -1\. Width-Beschreibung (`w`): +1\. Breiten Deskriptor (`w`): -Angenommen, wir haben das folgende `srcset`-Attribut: +Angenommen, wir haben das folgende `srcset` Attribut: ```html @@ -22,11 +23,11 @@ Angenommen, wir haben das folgende `srcset`-Attribut: ``` -Der Browser wird die folgenden Schritte ausführen: +Der Browser wird diese 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. Der DPR (Device Pixel Ratio) des Geräts bestimmen. Zum Beispiel hat ein Standard-Display 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. Die effektive Breite für jedes Bild im `srcset` berechnen. Multiplizieren Sie den Breiten Deskriptor mit dem DPR. Für ein Gerät mit einer DPR von 1: - Beispiel-small.jpg: 400 * 1 = 400px @@ -34,12 +35,11 @@ b. Berechnen Sie die effektive Breite für jedes Bild im `srcset`. Multipliziere - Beispiel-large.jpg: 1600 * 1 = 1600px -c. Vergleichen Sie die effektiven Breiten mit der Viewport-Breite. Angenommen, die Viewport-Breite beträgt 420px. Der Browser wählt das kleinste Bild mit einer effektiven Breite, die größer als oder gleich der Viewport-Breite ist. In diesem Fall wählt er `example-medium.jpg`. +c. Vergleichen Sie die effektiven Breiten mit der Viewport-Breite. Nehmen Sie an, die Viewport-Breite beträgt 420px. 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 er `example-medium.jpg` auswählen. +1\. Pixel Dichte Deskriptor (`x`): -2\. Pixeldichte-Beschreibung (`x`): - -Angenommen, wir haben das folgende `srcset`-Attribut: +Angenommen, wir haben das folgende `srcset` Attribut: ```html @@ -47,11 +47,11 @@ Angenommen, wir haben das folgende `srcset`-Attribut: ``` -Der Browser wird die folgenden Schritte ausführen: +Der Browser wird diese 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. Der DPR (Device Pixel Ratio) des Geräts bestimmen. Zum Beispiel hat ein Standard-Display 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 die 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 @@ -59,9 +59,9 @@ b. Vergleichen Sie die DPR des Geräts mit den `x`-Beschreibungen im `srcset`. I - Beispiel-3x.jpg: 3x -c. Wählen Sie das Bild mit der `x`-Beschreibung aus, die der DPR des Geräts am nächsten kommt. Für ein Gerät mit einem DPR von 1 wählt der Browser `example-1x.jpg` aus. Für ein Gerät mit einem DPR von 2 wählt er `example-2x.jpg` aus und so weiter. +c. Wählen Sie das Bild mit dem `x` Deskriptor, der der DPR des Geräts am nächsten kommt. Für ein Gerät mit einer DPR von 1 wählt der Browser `example-1x.jpg` aus. Für ein Gerät mit einer DPR von 2 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 das `sizes` Attribut in Kombination mit dem `srcset` Attribut verwenden können, um mehr Informationen darüber zu geben, wie das Bild bei verschiedenen Viewport Breiten angezeigt wird. Dies ist besonders nützlich, wenn der Breiten Deskriptor (`w`) verwendet wird. 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..60cef1e 100644 --- a/src/content/docs/de/density-descriptors.md +++ b/src/content/docs/de/density-descriptors.md @@ -1,35 +1,34 @@ --- -title: Density-Descriptoren und Srcset -description: Beispiele für die Verwendung von Density-Descriptoren in `srcset` -taskInputHash: 0a85d4f28fee785a +title: Density-Deskriptoren & Srcset +description: Beispiele zur Verwendung von Density-Deskriptoren 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-Deskriptoren bietet eine einfache und effektive Methode, um jedem Gerät des Benutzers das am besten geeignete Bild bereitzustellen und damit die Leistung und Benutzerfreundlichkeit zu verbessern. Diese Anleitung führt Sie durch die Grundlagen der Verwendung von srcset mit density-Deskriptoren und bietet Markup-Beispiele für Ihre Bequemlichkeit. -## Was ist Srcset mit Density Descriptors? +## Was ist Srcset mit Density-Deskriptoren? -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. +Srcset ist ein HTML-Attribut, das es Ihnen ermöglicht, mehrere Bildquellen für ein einziges ``-Element anzugeben. Density-Deskriptoren (`x`) werden in Verbindung mit srcset verwendet, um unterschiedliche Auflösungen von Bildern basierend auf der Pixeldichte des Displays des Benutzers bereitzustellen. -## Wann soll man Srcset mit Density Descriptors verwenden? +## Wann sollte man Srcset mit Density-Deskriptoren 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. +Die Verwendung von srcset mit density-Deskriptoren ist besonders nützlich, wenn Sie: +1. hochauflösende Bilder auf hochauflösenden Displays (z.B. Retina-Displays) bereitstellen möchten, während Sie niedrigere Auflösungen auf anderen Displays bereitstellen möchten. +2. die Leistung der Seite verbessern möchten, indem Sie jedem Gerät des Benutzers die am besten geeignete Bildgröße bereitstellen. -## Implementierung von Srcset mit Density Descriptors +## Implementierung von Srcset mit Density-Deskriptoren -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. +Folgen Sie diesen Schritten, um srcset mit Density-Deskriptoren zu verwenden: +1. Bereiten Sie Ihre Bilder in unterschiedlichen Auflösungen vor. +2. Fügen Sie das `srcset`-Attribut zum ``-Element hinzu, einschließlich der Bildquellen und entsprechenden Density-Deskriptoren. +3. Fügen Sie das `sizes`-Attribut (optional) hinzu, um die Größe des Bildes anzugeben, wie es auf dem Bildschirm angezeigt wird. -### Markup Beispiel +### Markup-Beispiel -Hier ist ein Beispiel, wie Sie srcset mit Density Descriptors in Ihrem Markup implementieren: +Hier ist ein Beispiel, wie Sie srcset mit Density-Deskriptoren in Ihrem Markup implementieren können: ```html sizes -description: Ein effizienter und dezidierter Leitfaden für responsive Bilder bis 2023 -taskInputHash: f8e7c31ccf577572 +title: srcset & sizes +description: Ein effizienter und eigensinniger Leitfaden für responsive Bilder im Jahr 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 eigensinniger Leitfaden für Bilder im Jahr 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 detaillierte Analyse. Das ist die Schnellreferenz zum Aktualisieren dieser ``-Tags, um moderne Geräte in all ihren verschiedenen Größen und Pixel-Dichten zu handhaben. Sie sollten [wissen, dass Pixel != Pixel](/de/pixels-not-pixels) und `devicePixelRatio` wahrscheinlicher 3.875 als 1:1 ist. Moderne Telefone geben vor, 320-428px breit (in CSS-Pixeln) zu sein, um lesbar zu sein, 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 Bildgröße sich niemals ändert, unabhängig davon, wie schmal Sie das Browserfenster machen, sollten Sie stattdessen einen [Dichtedeskriptor verwenden](/de/density-descriptors). Dies ist oft geeignet für Logos, Icons und Buttons. + +Wissen Sie, was Ihre [Breakpoints](/de/breakpoints) sind? Sie benötigen diese Zahlen, um die unten stehende Lösung fein abzustimmen - und mindestens den Viewport-Brechpunkt, an dem der Hauptinhalt aufhört zu wachsen. -Wissen Sie, was Ihre [Breakpoints](/de/breakpoints) sind? Sie benötigen diese Zahlen, um die unten stehende Lösung feinabzustimmen - und mindestens den Viewport-Brechpunkt, bei dem der Hauptinhaltbereich aufhört zu wachsen. ### Die einfache Methode @@ -28,12 +28,12 @@ Wissen Sie, was Ihre [Breakpoints](/de/breakpoints) sind? Sie benötigen diese Z img.jpg?format=webp&w=1600 1600w, img.jpg?format=webp&w=2000 2000w" - sizes="(max-width: 700px) 100vw, 800px" alt="Hund auf einem Fahrrad fahrend" /> + sizes="(max-width: 700px) 100vw, 800px" alt="Hund, der ein Fahrrad reitet" /> - + + Die dynamische Bildvariantenerstellung ist unerlässlich für die Entwickler-Sanity. --> ``` diff --git a/src/content/docs/de/lighthouse-performance-test.md b/src/content/docs/de/lighthouse-performance-test.md index b794f4e..a96ad50 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: Leistungstest mit Lighthouse +description: 'Schritte, wie man die Leistung einer Website mit Lighthouse testet.' +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: +> Lighthouse ist ein Tool, mit dem die Leistung, die Zugänglichkeit und andere Aspekte einer Website 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). +> 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 "Befehlstaste + Option + I" (macOS). > -> 3\. Klicken Sie im Entwicklertoolsfenster auf das Lighthouse-Symbol auf der linken Seite des Fensters oder drücken Sie "Strg+Shift+P" (Windows, Linux) oder "Befehl+Shift+P" (macOS), um das Befehlsfenster zu öffnen. Geben Sie "Lighthouse" ein und wählen Sie "Bericht generieren". +> 3\. Klicken Sie im Entwicklertools-Panel auf das Lighthouse-Symbol auf der linken Seite des Panels oder drücken Sie "Strg+Shift+P" (Windows, Linux) oder "Command+Shift+P" (macOS), um das Befehlsmenü zu öffnen. Geben Sie dann "Lighthouse" ein und wählen Sie "Bericht generieren". > > 4\. Wählen Sie im Lighthouse-Dialogfeld die Leistung und andere relevante Optionen aus, die Sie testen möchten, und klicken Sie dann auf "Bericht generieren". > -> 5\. Nach Abschluss der Analyse durch Lighthouse sehen Sie einen Bericht mit Scores und Empfehlungen zur Verbesserung der Leistung, Zugänglichkeit und anderer Bereiche Ihrer Website. +> 5\. Nach Abschluss der Analyse durch Lighthouse wird ein Bericht mit Bewertungen und Empfehlungen zur Verbesserung der Leistung, Zugänglichkeit und anderen Bereichen Ihrer Website angezeigt. > -> Indem Sie diesen Schritten folgen, können Sie Lighthouse verwenden, um die Leistung Ihrer Website zu testen und zu optimieren, was dazu beitragen kann, die Benutzererfahrung und die Suchmaschinenrankings zu verbessern. +> Durch Befolgen dieser Schritte können Sie Lighthouse zum Testen und Optimieren der Leistung Ihrer Website verwenden, 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..ad28b30 100644 --- a/src/content/docs/de/picture-examples.md +++ b/src/content/docs/de/picture-examples.md @@ -1,18 +1,17 @@ --- -title: Beispiele zur Verwendung des -Elements +title: Beispiele mit dem -Element description: >- - Beispiele zur Verwendung des -Elements für responsive Bilder, Art - Direction und unterschiedliche Bildformate -taskInputHash: d2a1e2234ca5c46c + Stellt Beispiele mit dem -Element bereit, für responsive Bilder, Art + Direction und verschiedene 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 zur Verwendung des ``-Elements und ihre Erläuterungen: -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. +Erläuterung: In diesem Beispiel wird das ``-Element verwendet, um unterschiedliche Bildquellen für verschiedene Bildschirmgrößen bereitzustellen. Die ``-Elemente spezifizieren die verschiedenen Bildquellen mit dem Attribut "srcset" und dem Attribut "media" zur Angabe der Bedingungen, unter denen jede Quelle verwendet werden soll. Das ``-Element dient als Rückfall für ältere Browser oder wenn die in den ``-Elementen angegebenen Bedingungen nicht erfüllt werden. 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. +Erläuterung: In diesem Beispiel wird das ``-Element verwendet, um unterschiedliche Bildquellen je nach Ausrichtung des Geräts bereitzustellen. Das ``-Element mit dem Attribut "media" auf "(orientation: landscape)" spezifiziert eine Bildquelle für breite Bildschirme, während das ``-Element eine Bildquelle für hochformatige Bildschirme bereitstellt. -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. +Erläuterung: In diesem Beispiel wird das ``-Element verwendet, um unterschiedliche Bildquellen für verschiedene Bildformate bereitzustellen. Die ``-Elemente spezifizieren unterschiedliche Bildquellen mit dem "srcset"-Attribut und dem "type"-Attribut zur Angabe des Bildformats. Das ``-Element dient als Rückfall für ältere Browser, die das ``-Element nicht unterstützen. ## Breakpoints -In Responsive Design werden Breakpoints verwendet, um festzulegen, wann das Layout einer Website oder Anwendung basierend auf der Größe des Viewports geändert werden sollte. Breakpoints werden typischerweise mit Medienabfragen in CSS definiert, die je nach Bildschirmbreite unterschiedliche Stile anwenden. Diese Breakpoints können in Verbindung mit dem `` Element verwendet werden, um verschiedene Bildquellen für verschiedene Bildschirmgrößen bereitzustellen. +In Responsive Design werden Breakpoints verwendet, um zu definieren, wann sich das Layout einer Website oder Anwendung basierend auf der Größe der Ansicht ändern sollte. Breakpoints werden üblicherweise mit Media Queries in CSS definiert, die verschiedene Stile abhängig von der Bildschirmbreite anwenden. Diese Breakpoints können in Verbindung mit dem ``-Element verwendet werden, um unterschiedliche 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. +Zum Beispiel haben wir im obigen ersten Beispiel das `media`-Attribut verwendet, um die Bildschirmbreite anzugeben, unter der jede Quelle verwendet werden sollte. Wenn die Bildschirmbreite größer oder gleich 768 Pixel beträgt, wird die Quelle `image-large.jpg` verwendet; wenn die Bildschirmbreite größer oder gleich 480 Pixel, aber weniger als 768 Pixel beträgt, wird die Quelle `image-medium.jpg` verwendet; und wenn die Bildschirmbreite weniger als 480 Pixel beträgt, wird die Quelle `image-small.jpg` verwendet. Dies erlaubt uns, passend dimensionierte Bilder für jedes Gerät zu verwenden, um Ladezeiten zu reduzieren und die Benutzererfahrung zu verbessern. -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 Sie flexible und reaktionsfähige Designs erstellen, die auf jedem Gerät großartig aussehen. diff --git a/src/content/docs/de/pixels-not-pixels.md b/src/content/docs/de/pixels-not-pixels.md index 946e5fc..106ded9 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ätepixel ≠ Browser-Pixel ≠ 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 ≠ Browser-Pixel ≠ Bildpixel -Dank Apple entspricht CSS- und HTML-Pixel (`px`) **fast nie genau einem einzigen Geräte-/Druckerpixel**. Der devicePixelRatio auf meinem Handy beträgt 3,875; [wie hoch ist deiner?](https://www.mydevice.io/) +Dank Apple entsprechen CSS- und HTML-Pixel (`px`) **fast nie einem einzelnen Geräte- bzw. Drucker-Pixel**. Das devicePixelRatio meines Telefons ist 3,875; [wie ist es bei dir?](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%). +Das devicePixelRatio meines Desktops variiert je nach Browser-Zoom, ist aber standardmäßig auf 1,5 (meine `System > Display > Scale` beträgt schließlich 150 %). -Bilddateien (mit Ausnahme von SVG) entschlüsseln zu einem Raster von Pixeln. **Es ist ärgerlicherweise schwer, Bildpixel perfekt mit Gerätepixeln im Verhältnis 1:1 anzuzeigen - aber mit `srcset` kann man *nahe genug* kommen**, und etwas Javascript kann die Größe des HTML-Elements nach dem Laden anpassen, wenn man wirklich triftige Gründe für eine perfekte Zuordnung hat, obwohl solche verbotenen Künste hier nicht enthüllt werden. +Bilddateien (mit Ausnahme von SVG) werden zu einem Raster von Pixeln dekodiert. **Es ist ärgerlicherweise schwierig, die Bildpixel perfekt im Verhältnis 1:1 mit den Gerätepixeln anzuzeigen - aber mit `srcset` kann man nahe genug rankommen**, und ein bisschen Javascript kann nach dem Laden die Größe des HTML-Elements anpassen, falls du wirklich triftige Gründe dafür hast, diese perfekte Abbildung zu benötigen, aber solche verbotenen Künste werden hier nicht enthüllt. -> Andere absolute [Einheiten (in, pc, pt, mm, cm, Q)](https://developer.mozilla.org/de/docs/Web/CSS/length) werden in Bezug auf die Anzahl von CSS-Pixeln definiert und tun so, als ob alles 96 dpi hat. Entwickler meiden absolute Einheiten, weil es in der Regel besser ist, Einheiten zu verwenden, die sich von der Schriftgröße oder den Abmessungen des Viewports/Containers ableiten. Nicht übereinstimmende Einheiten können ein Layout brechen, wenn der Benutzer den `Barrierefreiheit > Textgröße`-Multiplikator anpasst, den Browser zoomt oder das Gerät dreht. Selbstverständlich solltest du all diese Dinge vor dem Veröffentlichen deiner Website ausprobieren. +> Andere absolute [Einheiten (in, pc, pt, mm, cm, Q)](https://developer.mozilla.org/de/docs/Web/CSS/Laengeneinheiten) werden in Bezug auf die Anzahl der CSS-Pixel definiert und tun so, als ob alles 96 dpi hat. Entwickler:innen vermeiden 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 ein Layout brechen, wenn die:der Benutzer:in den `Accessibility > Text Size`-Multiplikator anpasst, den Browser zoomt oder das Gerät dreht. Unnötig zu sagen, dass du all diese Dinge tun solltest, bevor du deine Website veröffentlichst. diff --git a/src/content/docs/de/specify-width-height.md b/src/content/docs/de/specify-width-height.md index 06c16be..c43c9aa 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 +title: Verwenden von Breite und Höhe +description: Vorteile der Verwendung von Breite- und Höhe-Attributen im HTML-Code +taskInputHash: 6e6638bf3441e838 lang: de -ignore: '/* cSpell:locale de,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Warum sollten Sie Breite und Höhe in HTML einfügen? +Warum sollte man Breite und Höhe im HTML angeben? -> Es wird empfohlen, Breite- und Höhenattribute im HTML-Code für Bilder einzufügen, da sie dem Webbrowser helfen, die Größe des Bildes zu kennen, bevor es vollständig geladen wird. Dies ermöglicht es dem Browser, den entsprechenden Platz auf der Webseite für das Bild zu reservieren, was verhindert, dass der Inhalt beim Laden des Bildes springt. +> Es wird empfohlen, Breite- und Höhe-Attribute im HTML-Code für Bilder anzugeben, weil es dem Webbrowser hilft, die Größe des Bildes zu kennen, bevor es vollständig geladen ist. Dies ermöglicht es dem Browser, den entsprechenden Platz auf der Webseite für das Bild zu reservieren, was verhindert, dass der Inhalt hin und her springt, während das Bild lädt. > -> Darüber hinaus können die Angabe von Breite- und Höhenattributen für Bilder dazu beitragen, die Gesamtleistung der Webseite zu verbessern. Wenn ein Browser die Größe eines Bildes im Voraus kennt, kann er genauer berechnen, wie viel Platz benötigt wird, um das Bild anzuzeigen, und unnötige Reflows oder Repaints des Inhalts beim Laden vermeiden. +> Darüber hinaus kann das Spezifizieren der Breite- und Höhe-Attribute für Bilder auch dazu beitragen, die Gesamtleistung der Webseite zu verbessern. Wenn der Browser im Vorfeld die Größe eines Bildes kennt, kann er den benötigten Platz zur Anzeige des Bildes genauer berechnen 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 die Verwendung der Breite- und Höhe-Attribute im HTML-Code für Bilder das Benutzererlebnis verbessern, indem der Inhalt schneller geladen wird und visuelle Fehler reduziert werden. diff --git a/src/content/docs/de/when-to-use-picture.md b/src/content/docs/de/when-to-use-picture.md index b962b90..5c5f138 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 Sie das -Element verwenden sollten' +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 aufgrund bestimmter Bedingungen zu bestimmen, welche Version des Bildes angezeigt werden soll. Es ist besonders nützlich für die Optimierung von Bildern für verschiedene Bildschirmgrößen und -auflösungen und wird häufig in responsivem Webdesign verwendet. -Hier sind einige konkrete Szenarien, in denen Sie das `picture`-Element verwenden möchten: +Hier sind einige spezifische Szenarien, in denen Sie das `picture`-Element verwenden möchten: -* **Retina-Displays:** Hochauflösende Bildschirme wie Apples Retina-Displays haben eine höhere Pixeldichte, was bedeutet, dass Bilder unscharf oder pixelig aussehen können, wenn sie nicht für hohe Auflösungen optimiert sind. Mit dem `picture`-Element können Sie eine Version des Bildes zur Verfügung stellen, die doppelt so viele Pixel wie die normale Version hat, sodass es auf Retina-Displays scharf und klar aussieht. +* **Retina-Displays:** 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 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 Sie eine Website entwerfen, die Bilder mit unterschiedlichen Seitenverhältnissen anzeigen muss (wie Landschaft vs. Porträt), können Sie das `picture`-Element verwenden, um verschiedene Versionen des Bildes bereitzustellen, die für jedes Seitenverhältnis optimiert sind. -* **Bandbreitenbeschränkungen:** Bilder können große Dateien sein, die viel Bandbreite benötigen, insbesondere auf mobilen Geräten. Mit dem `picture`-Element können Sie kleinere Versionen des Bildes für Geräte mit kleineren Bildschirmen oder langsameren Internetverbindungen bereitstellen, um die Ladezeiten der Website zu reduzieren. +* **Bandbreitenbeschränkungen:** Bilder können große Dateien sein, die viel Bandbreite 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, was dazu beitragen kann, die Ladezeiten der Seite zu verkürzen. -* **Art-directed Layouts:** Manchmal möchten Sie ein Bild auf bestimmte Weise präsentieren, abhängig vom Layout des Rests der Seite. Beispielsweise möchten Sie auf mobilen Geräten eine Nahaufnahme des Gesichts einer Person zeigen, auf Desktop-Geräten jedoch eine breitere Ansicht. Das `picture`-Element ermöglicht es Ihnen, verschiedene Versionen des Bildes bereitzustellen, die für unterschiedliche Layouts optimiert sind. +* **Kunstgerichtete Layouts:** Manchmal möchten Sie ein Bild auf eine bestimmte Weise darstellen, abhängig vom Layout des Rests der Seite. Möglicherweise möchten Sie beispielsweise auf mobilen Geräten eine Nahaufnahme des Gesichts einer Person zeigen, auf Desktop-Geräten jedoch eine breitere Aufnahme. Mit dem `picture`-Element können Sie verschiedene Versionen des Bildes bereitstellen, die für verschiedene Layouts optimiert sind. -Insgesamt ist das `picture`-Element ein leistungsstarkes Werkzeug, mit dem Sie Ihre Bilder für eine Vielzahl von Anwendungsfällen optimieren und sicherstellen können, dass sie unabhängig vom Gerät oder der Bildschirmgröße großartig aussehen. +Insgesamt ist das `picture`-Element ein leistungsstarkes Werkzeug, mit dem Sie Ihre Bilder für eine Vielzahl von Anwendungsfällen optimieren und sicherstellen können, dass sie unabhängig von Gerät oder Bildschirmgröße großartig aussehen. diff --git a/src/content/docs/de/width-density.md b/src/content/docs/de/width-density.md index 8c73476..5353817 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 der Breiten- (w) und Dichte- (x) Deskriptoren in `srcset`. Verwenden Sie Beispiele und Markdown. -> `srcset` ist ein HTML-Attribut, das Entwicklern ermöglicht, mehrere Bildquellen mit unterschiedlichen Auflösungen oder Pixeldichten bereitzustellen, und den Browser das geeignete Bild basierend auf den Anzeigeeigenschaften des Geräts auswählen zu lassen. Das `srcset`-Attribut verwendet eine Kombination aus `URL`- und `w-` oder `x-`Adaptern, um die Bilder zu spezifizieren. +> `srcset` ist ein HTML-Attribut, mit dem Entwickler mehrere Bildquellen mit unterschiedlichen Auflösungen oder Pixeldichten bereitstellen können und der Browser auf der Grundlage der Anzeigeeigenschaften des Geräts das geeignete Bild auswählen kann. Das Attribut `srcset` verwendet eine Kombination aus `URL` und `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. Er 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` lautet wie folgt: ```html Beispielbild ``` -> Im obigen Beispiel haben wir dem Browser drei Bilder und ihre entsprechenden Breiten in Pixeln zur Verfügung gestellt. Der Browser wählt das Bild mit der nächstliegenden Breite zum verfügbaren Bildschirmplatz. +> Im obigen Beispiel haben wir drei Bilder und ihre jeweiligen Breiten in Pixeln angegeben. Der Browser wählt das Bild mit der nächstgelegenen Breite zum verfügbaren Bildschirmplatz aus. -## Dichteadapter (`x`) +## Dichte (`x`) Deskriptor -> Der `x-`Adapter wird verwendet, um die Pixel-Dichte eines Bildes anzugeben, was das Verhältnis von physischen Pixeln zu CSS-Pixeln ist. Er wird verwendet, wenn wir dem Browser verschiedene Versionen desselben Bildes mit unterschiedlichen Pixeldichten zur Verfügung stellen wollen. +> Der `x` Deskriptor wird verwendet, um die Pixeldichte 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 bereitstellen möchten. -> Die Syntax für die Verwendung des `x-`Adapters in `srcset` sieht wie folgt aus: +> Die Syntax für die Verwendung des `x` Deskriptors in `srcset` lautet wie folgt: ```html Beispielbild ``` -> Im obigen Beispiel haben wir dem Browser drei Bilder und ihre entsprechenden Pixeldichten zur Verfügung gestellt. Der Browser wählt das Bild mit der nächstgelegenen Pixeldichte für den Gerätebildschirm aus. +> Im obigen Beispiel haben wir dem Browser drei Bilder und ihre jeweiligen Pixeldichten bereitgestellt. Der Browser wählt das Bild mit der nächstgelegenen Pixeldichte zum Bildschirm des Geräts aus. -> Beachten Sie, dass die `w-` und `x-`Adapter in derselben `srcset`-Attribut verwendet werden können, um dem Browser mehr Optionen zur Auswahl zu geben. +> Beachten Sie, dass die `w` und `x` Deskriptoren im selben `srcset` Attribut zusammen verwendet werden können, um dem Browser mehr Auswahlmöglichkeiten zu bieten. diff --git a/src/content/docs/en/breakpoints.md b/src/content/docs/en/breakpoints.md index ad658c5..e503687 100644 --- a/src/content/docs/en/breakpoints.md +++ b/src/content/docs/en/breakpoints.md @@ -1,8 +1,8 @@ --- title: Breakpoints & images description: Why some (but not all) breakpoints matter for your images -date_published: '2023-03-26' -date_modified: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' --- ### Background diff --git a/src/content/docs/en/browser-picks-srcset.md b/src/content/docs/en/browser-picks-srcset.md index 43ecbc0..d9d53aa 100644 --- a/src/content/docs/en/browser-picks-srcset.md +++ b/src/content/docs/en/browser-picks-srcset.md @@ -1,8 +1,8 @@ --- title: How the browser chooses description: How the browser chooses between images listed in the srcset attribute -date_published: '2023-03-24' -date_modified: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' --- How does the browser choose between images listed in the srcset attribute? Here's a step-by-step, with examples for both width and density specifications and how the browser decides based on device and viewport. diff --git a/src/content/docs/en/density-descriptors.md b/src/content/docs/en/density-descriptors.md index e72dabd..58e809d 100644 --- a/src/content/docs/en/density-descriptors.md +++ b/src/content/docs/en/density-descriptors.md @@ -1,8 +1,8 @@ --- title: Density descriptors & srcset description: Examples of using density descriptors in `srcset` -date_published: '2023-03-26' -date_modified: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' --- Srcset with density descriptors provides a simple and effective method for delivering the most suitable image to each user's device, improving performance and user experience. This guide will walk you through the essentials of using srcset with density descriptors and provide markup examples for your convenience. diff --git a/src/content/docs/en/introduction.md b/src/content/docs/en/introduction.md index c529f64..0a24255 100644 --- a/src/content/docs/en/introduction.md +++ b/src/content/docs/en/introduction.md @@ -2,8 +2,8 @@ title: 'srcset & sizes ' description: An Efficient and Opinionated Guide to Responsive Images for 2023 sidebar_sort_priority: 1000 -date_published: '2023-03-23' -date_modified: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' --- **An Efficient and Opinionated Guide to Images for 2023** diff --git a/src/content/docs/en/lighthouse-performance-test.md b/src/content/docs/en/lighthouse-performance-test.md index 04fb5b5..323dc99 100644 --- a/src/content/docs/en/lighthouse-performance-test.md +++ b/src/content/docs/en/lighthouse-performance-test.md @@ -1,8 +1,8 @@ --- title: Test performance with Lighthouse description: Steps on how to test a website's performance using Lighthouse -date_published: '2023-03-24' -date_modified: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' --- How do you test your site’s performance with Lighthouse? diff --git a/src/content/docs/en/picture-examples.md b/src/content/docs/en/picture-examples.md index 3d3b6d8..2adae70 100644 --- a/src/content/docs/en/picture-examples.md +++ b/src/content/docs/en/picture-examples.md @@ -3,8 +3,8 @@ title: Examples using element description: >- Provides examples using the element, for responsive images, art direction and different image formats -date_published: '2023-03-24' -date_modified: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' --- Here are a few examples of using the `` element and their explanations: diff --git a/src/content/docs/en/pixels-not-pixels.md b/src/content/docs/en/pixels-not-pixels.md index e4c638f..f36c9d5 100644 --- a/src/content/docs/en/pixels-not-pixels.md +++ b/src/content/docs/en/pixels-not-pixels.md @@ -2,8 +2,8 @@ title: px ≠ pixels description: Device px ≠ browser px ≠ image px sidebar_sort_priority: 900 -date_published: '2023-03-26' -date_modified: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' --- ### Device pixels ≠ browser px ≠ image px diff --git a/src/content/docs/en/specify-width-height.md b/src/content/docs/en/specify-width-height.md index 1eb09b0..2cc2947 100644 --- a/src/content/docs/en/specify-width-height.md +++ b/src/content/docs/en/specify-width-height.md @@ -1,8 +1,8 @@ --- title: Use width and height description: Benefits of using width and height attributes in HTML code -date_published: '2023-03-24' -date_modified: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' --- Why should you put width and height in the HTML? diff --git a/src/content/docs/en/when-to-use-picture.md b/src/content/docs/en/when-to-use-picture.md index 66e7244..6fc6f0b 100644 --- a/src/content/docs/en/when-to-use-picture.md +++ b/src/content/docs/en/when-to-use-picture.md @@ -1,8 +1,8 @@ --- title: When to use element description: Explains in which situations you should use the element -date_published: '2023-03-27' -date_modified: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' --- The `picture` element is used to provide multiple versions of an image and determines which version of the image to display based on certain conditions. It is particularly useful for optimizing images for different screen sizes and resolutions, and is commonly used in responsive web design. Here are some specific scenarios where you might want to use the `picture` element: diff --git a/src/content/docs/en/width-density.md b/src/content/docs/en/width-density.md index 1e00293..02739c5 100644 --- a/src/content/docs/en/width-density.md +++ b/src/content/docs/en/width-density.md @@ -1,8 +1,8 @@ --- title: Width and density descriptors description: Examples of using width and density descriptors in `srcset` -date_published: '2023-03-24' -date_modified: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' --- Understanding width (w) and density (x) descriptors in `srcset`. Use examples and use Markdown. diff --git a/src/content/docs/es/_roundtrip_breakpoints.txt b/src/content/docs/es/_roundtrip_breakpoints.txt index 186ad39..2faa55d 100644 --- a/src/content/docs/es/_roundtrip_breakpoints.txt +++ b/src/content/docs/es/_roundtrip_breakpoints.txt @@ -2,33 +2,32 @@ title: Breakpoints and Images description: >- Why some (but not all) breakpoints matter for your images -taskInputHash: cc4be952df3fef63 +taskInputHash: d63995938314e702 lang: en -ignore: '/* cSpell:locale es,en*/' -date_published: '2023-03-26' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -### Background +### Context -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 need different layouts. For the purpose of `srcset` and `sizes`, we need to know at what point 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 gets smaller, hidden, or relocated on smaller screens, or more commonly, what gets bigger, revealed, or added on larger screens. They also have very little information available. Is the user on a tablet or a phone in horizontal mode—or in 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 portfolio width where the layout changes. 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 commonly used breakpoints. -Some images (like logos, icons, or buttons) might be immune to design changes caused by these breakpoints (and be fine with [srcset density descriptors](/en/density-descriptors)). +Some images such as logos, icons, or buttons might be immune to layout changes caused by these breakpoints (and fare well with [srcset density descriptors](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#density_descriptor)). -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. +Images for main content will be bounded by their container size. Usually, the main content area of a page will be limited to a certain width on larger screens, a `max-width`, but on smaller screens, the main content area will fill the whole portfolio. -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 harder to calculate effective size rules, as the percentage of the portfolio width the image takes up will change. -### The Easy Method +### The Easy Way -That being said, don't overcomplicate things. You'll probably be just fine with the following approach: +That said, don't overthink this. You'll probably be just fine with the following approach: -1. At what size does the main column (or the image container) stop growing? Up to that viewport width, we can use `100vw` for the image `sizes` attribute to indicate the image takes up the full width of the viewport. -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 that portfolio width, we can use `100vw` for the `sizes` attribute of the image to say that the image takes up 100% of the portfolio width. +2. What's the maximum width that container reaches? We can set this 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: @@ -37,8 +36,7 @@ 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 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. - +> One would think that the browser could handle these nice calculations for us based on the CSS. Unfortunately, browsers are eagerly eager to pick an image URL *before* the style sheets are downloaded. So we have to do the calculations ourselves, and they do just fine if we don't do them perfectly. ===================== Content prompt used: @@ -51,8 +49,8 @@ Also carefully translate the title and description for the article; do not use & 1. Breakpoints & images 2. Why some (but not all) breakpoints matter for your images -Metadata returned1. Breakpoints e imágenes -2. Por qué algunos (pero no todos) los puntos de interrupción son importantes para tus imágenes +Metadata returned1. Puntos de quiebre e imágenes +2. Por qué algunos (pero no todos) los puntos de quiebre importan 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..4c5dfc8 100644 --- a/src/content/docs/es/_roundtrip_browser-picks-srcset.txt +++ b/src/content/docs/es/_roundtrip_browser-picks-srcset.txt @@ -1,66 +1,69 @@ --- -title: How browsers choose -description: How browsers choose between images listed in the srcset attribute -taskInputHash: 5d7773a8c6385fd7 +title: How the browser chooses +description: How the browser chooses between the images listed in the srcset attribute +taskInputHash: 78ffb2179558549b lang: en +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -How do browsers choose between images listed in the `srcset` attribute? Here we explain the steps, with examples for both width and density specifications, and how the browser decides according to the device and screen size. +How does the browser choose between the images listed in the srcset attribute? Here's a step-by-step guide, with 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 characteristics of the device screen (resolution, pixel density) and the size of the viewport. The `srcset` attribute allows you to specify different images based on width (using `w` descriptors) or pixel density (using `x` descriptors). Let's go through each case with examples. -1\. Width descriptor (`w`): +1\. Width descriptors (`w`): Suppose 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 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 more. b. Calculate the effective width for each image in the `srcset`. Multiply the width descriptor by the DPR. For a device with a DPR of 1: -- small-example.jpg: 400 * 1 = 400 pixels +- example-small.jpg: 400 * 1 = 400px -- medium-example.jpg: 800 * 1 = 800 pixels +- example-medium.jpg: 800 * 1 = 800px -- large-example.jpg: 1600 * 1 = 1600 pixels +- example-large.jpg: 1600 * 1 = 1600px -c. Compare the effective widths to the width of the display window. Suppose the width of the display window is 420 pixels. The browser will choose the smallest image with an effective width greater than or equal to the width of the display window. In this case, it will select `medium-example.jpg`. +c. Compare the effective widths with the viewport width. Assume the viewport width is 420px. The browser will choose the smallest image with an effective width greater than or equal to the viewport width. In this case, it will select `example-medium.jpg`. -2\. Pixel density descriptor (`x`): +2\. Density descriptors (`x`): Suppose we have the following `srcset` attribute: ```html -Example Image +Example image ``` The browser will follow these steps: -a. Determine the DPR (Device Pixel Ratio). For example, a standard screen has a DPR of 1, while a high-resolution (Retina) screen has a DPR of 2 or higher. +a. Determine the 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 more. -b. Compare the device DPR with the `x` descriptors in the `srcset`. In this case, we have three images with the following descriptors: +b. Compare the device's DPR with the `x` descriptors in the `srcset`. In this case, we have three images with the following descriptors: -- 1x-example.jpg: 1x +- example-1x.jpg: 1x -- 2x-example.jpg: 2x +- example-2x.jpg: 2x -- 3x-example.jpg: 3x +- example-3x.jpg: 3x -c. Choose the image with the `x` descriptor closest to the device DPR. For a device with a DPR of 1, the browser will select `1x-example.jpg`. For a device with a DPR of 2, it will choose `2x-example.jpg`, and so on. +c. Choose the image with the `x` descriptor that is closest to the device's DPR. For a device with a DPR of 1, the browser will select `example-1x.jpg`. For a device with a DPR of 2, it will choose `example-2x.jpg`, and so on. -It is important to note that the `sizes` attribute can also be used in combination with the `srcset` attribute to provide more information about how the image will be displayed at different window widths. This is especially useful when using the width descriptor (`w`). Here's an example: +It's important to note that you can also use the `sizes` attribute in combination with the `srcset` attribute to provide more information about how the image will be displayed at different viewport widths. This is particularly useful when using the width descriptor `w`. Here's an example: ```html - ``` -This sample markup includes: -- **src**: The default image source, displayed if the browser doesn't support srcset. -- **srcset**: The list of image sources and their density descriptors (1x, 2x, 3x). The browser chooses the most suitable image based on the user's screen. +This markup example includes: +- **src**: The default image source that will be displayed if the browser doesn't support srcset. +- **srcset**: The list of image sources and their density descriptors (1x, 2x, 3x). The browser will choose the most appropriate image based on the user's 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. +And that's it! You've successfully implemented srcset with density descriptors, improving the performance and user experience of your website. ===================== 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. Descriptores de densidad y Srcset -2. Ejemplos de uso de descriptores de densidad en `srcset` +Metadata returned1. Descriptores de densidad y srcset +2. Ejemplos de cómo usar descriptores de densidad en `srcset` Roundtrip (isolated) prompt used: diff --git a/src/content/docs/es/_roundtrip_introduction.txt b/src/content/docs/es/_roundtrip_introduction.txt index 7d7d4de..2a311a9 100644 --- a/src/content/docs/es/_roundtrip_introduction.txt +++ b/src/content/docs/es/_roundtrip_introduction.txt @@ -1,41 +1,41 @@ ---- -title: srcset and sizes attributes for -description: An efficient and opinionated guide to responsive images for 2023 -taskInputHash: c0bfd3a988eb464d -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' ---- -**An efficient and opinionated guide to 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. - -> 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. - -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. - -### The easy method - -```html - -Dog riding a bicycle - - - - +--- +title: srcset and sizes +description: An opinionated and efficient guide to responsive images for 2023 +taskInputHash: a764c357741581bc +lang: en +sidebar_sort_priority: 1000 +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' +--- +**An opinionated and efficient guide to images for 2023** + +See the sidebar for more information. This is the quick reference for updating those `` tags to handle modern devices in all their various pixel dimensions and densities. You should [know that pixels are not equal to pixels](/en/pixels-not-pixels) and that `devicePixelRatio` is more likely to be around 3.875 than 1:1. Modern phones aim for a width of 320-428px for legibility (in CSS pixels), but have several device pixels per CSS pixel. + +>If your image never changes size, no matter how narrow the browser window gets, you should use a [density descriptor instead](/en/density-descriptors). This is often suitable for logos, icons, and buttons. + +Do you know your [breakpoints](/en/breakpoints)? You'll need those numbers to adjust the solution below, and at a minimum, the viewport width breakpoint where the main content area stops growing. + + +### The easy method + +```html + +Dog Riding Bike + + + + ``` ===================== @@ -50,7 +50,7 @@ Also carefully translate the title and description for the article; do not use & 2. An Efficient and Opinionated Guide to Responsive Images for 2023 Metadata returned1. srcset y tamaños de -2. Una guía eficiente y con opiniones sobre imágenes responsivas para 2023 +2. Una guía eficiente y opinionada 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..aacc25a 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 for testing the performance of a website 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 website performance with Lighthouse? > Lighthouse is a tool that can be used to measure the performance, accessibility, and other aspects of a website. To test the performance of your website with Lighthouse, follow these steps: > -> 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 evaluate. > -> 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 "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 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". +> 4. In the Lighthouse dialog box, select the performance and other relevant options you want to evaluate, then click "Generate report". > -> 5\. After Lighthouse completes its analysis, you will see a report with scores and recommendations for improving the performance, accessibility, and other areas of your website. +> 5. After Lighthouse completes its analysis, you will see a report with scores and recommendations for improving the performance, accessibility, and other aspects 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 evaluate and optimize the performance of your website, which can help improve user experience and search engine rankings. ===================== Content prompt used: @@ -35,8 +34,8 @@ Also carefully translate the title and description for the article; do not use & 1. Test performance with Lighthouse 2. Steps on how to test a website's performance using Lighthouse -Metadata returned1. Prueba de rendimiento con Lighthouse -2. Pasos sobre cómo probar el rendimiento de un sitio web utilizando Lighthouse +Metadata returned1. Probar el rendimiento con Lighthouse +2. Pasos para probar el rendimiento de un sitio web usando Lighthouse Roundtrip (isolated) prompt used: diff --git a/src/content/docs/es/_roundtrip_picture-examples.txt b/src/content/docs/es/_roundtrip_picture-examples.txt index 9103a02..de5725f 100644 --- a/src/content/docs/es/_roundtrip_picture-examples.txt +++ b/src/content/docs/es/_roundtrip_picture-examples.txt @@ -1,35 +1,38 @@ --- -title: Examples using the element +title: Examples using the Element description: >- Provides examples using the element for responsive images, art direction, and different image formats. -taskInputHash: aa9de5a15f947b5e +taskInputHash: b566d36d33874c9e lang: en +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Here are some examples of using the `` element and their explanations: +Here are some examples of using the `` element and their explanations: 1. Example for responsive images: ```html - - - An image + + + An image ``` -Explanation: In this example, the `` element is used to provide different image sources for different screen sizes. The `` elements specify the different image sources using the "srcset" attribute and the "media" attribute to specify the conditions under which each source should be used. The `` element is used as a fallback for older browsers or when the conditions specified in the `` elements are not met. +Explanation: In this example, the `` element is used to provide different image sources for different screen sizes. The `` elements specify the different image sources using the "srcset" attribute and the "media" attribute to specify the conditions when each source should be used. The `` element is used as a fallback for older browsers or when conditions specified in the `` elements are not met. 2. Example for art direction: ```html - + - An image + An image ``` -Explanation: In this example, the `` element is used to provide different image sources depending on the orientation of the device. The `` element with the "media" attribute set to "(orientation: landscape)" specifies an image source for wide screens, while the `` element specifies an image source for vertical screens. +Explanation: In this example, the `` element is used to provide different image sources depending on the device orientation. The `` element with the "media" attribute set to "(orientation: landscape)" specifies an image source for wide screens, while the `` element specifies an image source for vertical screens. 3. Example for different image formats: @@ -43,15 +46,15 @@ Explanation: In this example, the `` element is used to provide differe ``` -Explanation: In this example, the `` element is used to provide different image sources in different formats. The `` elements specify different image sources using the "srcset" attribute and the "type" attribute to specify the image format. The `` element is used as a fallback for older browsers that do not support the `` element. +Explanation: In this example, the `` element is used to provide different image sources for different image formats. The `` elements specify different image sources using the "srcset" attribute and the "type" attribute to specify the image format. The `` element is used as a fallback for older browsers that do not support the `` element. ## Breakpoints -In responsive design, breakpoints are used to define when the layout of a website or application should change based on the size of the viewport. Breakpoints are typically defined 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 depending on the screen width. These breakpoints can be used in conjunction with the `` element to provide different image sources for different screen sizes. -For example, in the first example above, we used the `media` attribute to specify the screen width under which each source should be used. When the screen width is greater than or equal to 768 pixels, the `image-large.jpg` source will be used; when the screen width is greater than or equal to 480 pixels but less than 768 pixels, the `image-medium.jpg` source will be used; and when the screen width is less than 480 pixels, the `image-small.jpg` source will be used. This allows us to serve appropriately sized images for each device, reducing page load times and improving the user experience. +For example, in the first example above, we used the `media` attribute to specify the screen width when each source should be used. When the screen width is greater than or equal to 768 pixels, the `large-image.jpg` source will be used; when the screen width is greater than or equal to 480 pixels but less than 768 pixels, the `medium-image.jpg` source will be used; and when the screen width is less than 480 pixels, the `small-image.jpg` source will be used. This allows us to serve appropriately sized images for each device, reducing page load times and improving the user experience. -Breakpoints can be defined at any screen size, and multiple breakpoints can be used to create layouts that respond to a wide range of devices. By combining breakpoints with the `` element, 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 and responsive designs can be created that look great on any device. ===================== Content 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..cd2274f 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`) are almost always assigned to multiple device/printer pixels. My phone's devicePixelRatio is 3.875; [what's yours?](https://www.mydevice.io/) -My desktop devicePixelRatio changes with the browser zoom, but is set to 1.5 by default (after all, my `System > Display > Scale` is set to 150%). +My desktop devicePixelRatio changes with browser zoom but is set to 1.5 (my `System > Display > Scale` is 150%, after all!). -Image files (excluding SVG) decode to a grid of pixels. **It's annoyingly difficult to get the image pixels to display perfectly at a 1:1 ratio with device pixels—but with `srcset` you can get close enough**, and a bit of Javascript can adjust the size of the HTML element after loading if you really have a justified reason for needing that perfect mapping, though such forbidden arts won't be revealed here. +Image files (except SVG) are decoded to a grid of pixels. **Getting image pixels to display at a 1:1 ratio with device pixels is annoyingly difficult; `srcset` can get you close enough,** and a bit of JavaScript can resize the html element after it's loaded if you have truly compelling reasons for needing that perfect correspondence mapping, although those dark arts will not be revealed here. -> Other absolute units [units (in, pc, pt, mm, cm, Q)](https://developer.mozilla.org/en/docs/Web/CSS/length) are defined in terms of the CSS pixel count and presume 96ppi. Developers avoid absolute units because it's generally better to use units derived from font size or viewport/container dimensions. Incompatible units can break layout if the user adjusts the `Accessibility > Text size multiplier`, zooms the browser, or rotates their device. It should be noted that you should do all these things before launching your site. +> Other absolute units [in, pc, pt, mm, cm, Q] (https://developer.mozilla.org/en-US/docs/Web/CSS/length) are defined in terms of the number of CSS pixels and assume a device pixel ratio of 96dpi. Developers avoid absolute units because it's generally better to use units that derive from font size or view/container dimensions. Unequal units can break a layout if the user adjusts their `Accessibility > Text Size` multiplier, zooms the browser, or rotates their device. Needless to say, you should do all these things before publishing your site. ===================== Content prompt used: @@ -31,7 +30,7 @@ Also carefully translate the title and description for the article; do not use & 2. Device px ≠ browser px ≠ image px Metadata returned1. px ≠ píxeles -2. Píxeles de dispositivo ≠ píxeles del navegador ≠ píxeles de imagen +2. Píxeles de dispositivo ≠ píxeles de navegador ≠ píxeles de imagen Roundtrip (isolated) prompt used: diff --git a/src/content/docs/es/_roundtrip_specify-width-height.txt b/src/content/docs/es/_roundtrip_specify-width-height.txt index bd3e7c3..07ea3b2 100644 --- a/src/content/docs/es/_roundtrip_specify-width-height.txt +++ b/src/content/docs/es/_roundtrip_specify-width-height.txt @@ -1,21 +1,19 @@ --- -title: Use Width and Height Attributes +title: Use width and height attributes description: Benefits of using width and height attributes in HTML code -taskInputHash: c1840d188c21b829 +taskInputHash: 3a697d0f6acf5385 lang: en -ignore: '/* cSpell:locale es,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- - -Why should you use width and height in HTML? - -> It's recommended to use width and height attributes in HTML code for images because it helps the web browser know the size of the image before it fully loads. This allows the browser to reserve the appropriate amount of space on the webpage for the image, which prevents content from jumping around while the image loads. -> -> Additionally, specifying the width and height attributes for images can also help improve overall webpage performance. When a browser knows the size of an image in advance, it can more accurately calculate the amount of space needed to display the image and prevent unnecessary reflows or repaints of content as it loads. -> -> Overall, using width and height attributes in HTML code for images can improve the user experience by making content load faster and reducing visual glitches. +Why should you use width and height in HTML? + +> It is recommended to use 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 amount of space on the webpage for the image, preventing content from shifting while the image is loading. +> +> In addition, specifying width and height attributes for images can also help improve overall webpage performance. When a browser knows the size of an image beforehand, it can more accurately calculate how much space is needed to display the image and avoid unnecessary reflows or repaints of content as it loads. +> +> Overall, using width and height attributes in the HTML code of images can improve the user experience by making content load faster and reducing visual glitches. ===================== Content prompt used: @@ -28,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. Usa ancho y altura -2. Beneficios de usar los atributos de ancho y altura en el código HTML +Metadata returned1. Utiliza ancho y 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..cea28d5 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 +title: When to use the element description: Explains in which situations you should use the element -taskInputHash: 97265d75f3229eaa +taskInputHash: 51d7f5ab633e52ac lang: en -ignore: '/* cSpell:locale es,en*/' -date_published: '2023-03-27' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- The `picture` element is used to provide multiple versions of an image and determine which version of the image to display based on certain conditions. It is particularly useful for optimizing images for different screen sizes and resolutions, and is commonly used in responsive web design. -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 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 that has twice the pixels of the normal version, so that it looks sharp and clear on Retina displays. -* **Different aspect ratios:** If you're designing a site that needs to display images with different aspect ratios (such as landscape vs. portrait), you can use the `picture` element to provide different versions of the image that are optimized for each aspect ratio. +* **Different aspect ratios:** If you are designing 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 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. +* **Bandwidth constraints:** 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 very useful 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. ===================== 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 deberías usar 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..3c2640c 100644 --- a/src/content/docs/es/_roundtrip_width-density.txt +++ b/src/content/docs/es/_roundtrip_width-density.txt @@ -1,20 +1,19 @@ --- title: Width and Density Descriptors -description: Examples of using width and density descriptors in `srcset` -taskInputHash: 74b8eb2869d948a0 +description: Examples of usage for width and density descriptors in `srcset` +taskInputHash: 57ff1c28d63c24f5 lang: en -ignore: '/* cSpell:locale es,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Understanding Width (`w`) and Density (`x`) Descriptors in `srcset`. Use examples and Markdown. +Understanding width (`w`) and density (`x`) descriptors in `srcset`. Use examples and Markdown. -> `srcset` is an HTML attribute that allows developers to provide multiple sources of images with different resolutions or pixel densities, and allow the browser to select the appropriate image based on the display characteristics of the device. The `srcset` attribute uses a combination of the `URL` and `w` or `x` descriptors to specify the images. +> `srcset` is an HTML attribute that allows developers to provide multiple image sources with different resolutions or pixel densities, and allows the browser to select the appropriate image based on the display characteristics of the device. The `srcset` attribute uses a combination of `URL` and either the `w` or `x` descriptors to specify the images. -## Width Descriptors (`w`) +## Width Descriptor (`w`) -> The `w` descriptor is used to specify the width of an image in pixels. It is used when you want to provide the browser with the dimensions of an image so it can choose the appropriate image for the available space on the screen. +> The `w` descriptor is used to specify the width of an image in pixels. It is used when we want to provide the browser with the dimensions of an image so that it can choose the appropriate image 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 of an 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 have provided the browser with three images and their corresponding widths in pixels. The browser will select the image with the width closest to the available screen space. -## Density Descriptors (`x`) +## Density Descriptor (`x`) -> The `x` descriptor is used to specify the pixel density of an image, which is the ratio of physical pixels to CSS pixels. It is used when you want to provide the browser with different versions of the same image with different pixel densities. +> The `x` descriptor is used to specify the pixel density of an image, which is the ratio of physical pixels to CSS pixels. It is used when we want to provide the browser with different versions of the same image with different pixel densities. > The syntax for using the `x` descriptor in `srcset` is as follows: @@ -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 of an 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 have provided the browser with three images and their corresponding pixel densities. The browser will select the image with the pixel density closest to the device's 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..7282fc2 100644 --- a/src/content/docs/es/breakpoints.md +++ b/src/content/docs/es/breakpoints.md @@ -1,43 +1,40 @@ --- -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 (pero no todos) los puntos de quiebre importan 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 +### Contexto -Las pantallas pequeñas y los monitores grandes necesitan diseños diferentes. Para el propósito de `srcset` y `sizes`, necesitamos saber en qué punto cambia el diseño. +Las pantallas pequeñas y grandes necesitan diseños diferentes. Con el propósito de `srcset` y `sizes`, necesitamos saber en qué punto cambia el diseño. -Los desarrolladores web deben decidir qué se encoje, se oculta o se reubica en pantallas más pequeñas - o más comúnmente, qué se expande, se revela o se agrega en pantallas más grandes. También tienen muy poca información para trabajar. ¿Está el usuario en una tableta o en un teléfono en modo horizontal - o en una ventana de pequeño navegador? +Los desarrolladores web deben decidir qué se reduce, se oculta o se reubica en las pantallas más pequeñas, o más comúnmente, qué se expande, se revela o se agrega en las pantallas más grandes. También tienen muy poca información disponible. ¿Está el usuario en una tableta o en un teléfono en modo horizontal - o en una ventana de navegador pequeña? -Tenemos que elegir un ancho de viewport arbitrario donde cambie el diseño. Esto se llama un **punto de interrupción**. Es un número arbitrario de píxeles CSS ([no píxeles de dispositivo](/es/pixeles-no-pixeles)). Polypane tiene un [gran artículo](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023) sobre los puntos de interrupción utilizados comúnmente. +Tenemos que elegir un ancho de portafolio arbitrario donde cambia el diseño. Esto se llama un **punto de quiebre**. Es un número arbitrario de píxeles CSS (no píxeles de dispositivo). 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) pueden ser inmunes a los cambios de diseño causados por estos puntos de quiebre (y estar bien con [descriptores de densidad srcset](/es/descriptores-de-densidad)). -Las imágenes del contenido principal estarán limitadas por el tamaño de su contenedor. Por lo general, el área de contenido principal de una página se limitará a un ancho determinado en las pantallas más grandes, un `max-width`, pero en las pantallas pequeñas, el área de contenido principal llenará todo el viewport. +Las imágenes de contenido principal estarán limitadas por el tamaño de su contenedor. Por lo general, el área de contenido principal de una página estará limitada 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 portafolio. -Si tiene más de una columna en algunos puntos de interrupción, será más difícil calcular las reglas de tamaño efectivas, ya que el porcentaje del ancho de viewport que ocupa la imagen cambiará. +Si tiene más de una columna en algunos puntos de quiebre, será más difícil calcular las reglas de tamaño efectivas, ya que el porcentaje del ancho del portafolio que ocupa la imagen cambiará. ### El método fácil -Dicho esto, no te compliques demasiado. Probablemente estarás muy bien con la siguiente aproximación: +Dicho esto, no pienses demasiado en esto. Probablemente estarás muy bien con la siguiente aproximación: -1. ¿A qué tamaño el columna principal (o el contenedor de la imagen) deja de crecer? Hasta ese ancho de viewport, podemos usar `100vw` para el atributo `sizes` de la imagen para indicar que la imagen ocupa el 100% del ancho del viewport. -2. ¿Cuál es el ancho máximo que el contenedor jamás alcanza? Podemos fijar eso como una `width` fija para todo lo demás. +1. ¿A qué tamaño deja de crecer la columna principal (o el contenedor de la imagen)? Hasta ese ancho de portafolio, podemos usar `100vw` para el atributo `sizes` de la imagen para decir que la imagen ocupa el 100% del ancho del portafolio. +2. ¿Cuál es el ancho máximo que alcanza ese contenedor? Podemos establecerlo como una `width` fija para todo lo demás. -Si tu respuesta a 1 fue 700px y tu respuesta a 2 fue 800px, puedes usar el siguiente atributo `sizes`: +Si su respuesta a 1 fue 700px y su respuesta a 2 fue 800px, puede usar el siguiente atributo `sizes`: -```html + ```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. +> Uno pensaría que el navegador podría manejar estos cálculos de manera agradable para nosotros basándose en el CSS. Desafortunadamente, los navegadores están ávidamente ansiosos 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. diff --git a/src/content/docs/es/browser-picks-srcset.md b/src/content/docs/es/browser-picks-srcset.md index 5236618..29c4b0e 100644 --- a/src/content/docs/es/browser-picks-srcset.md +++ b/src/content/docs/es/browser-picks-srcset.md @@ -1,69 +1,68 @@ --- title: Cómo el navegador elige -description: Cómo el navegador elige entre imágenes listadas en el atributo srcset -taskInputHash: 49304fce4ac555da +description: Cómo el navegador elige entre las imágenes enlistadas 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. - -- Al usar el atributo `srcset` en HTML, el navegador utiliza un conjunto de reglas para elegir la imagen más apropiada de una lista de fuentes proporcionadas. Estas reglas dependen tanto de las características de la pantalla del dispositivo (resolución, densidad de píxeles), como del tamaño de la ventana gráfica. El atributo `srcset` te permite especificar diferentes imágenes según el ancho (usando el descriptor `w`) o la densidad de píxeles (usando el descriptor `x`). Repasemos cada caso con ejemplos. - -1\. Descriptor de ancho (`w`): - -Supongamos que tenemos el siguiente atributo `srcset`: - -```html - -Ejemplo de imagen - -``` - -El navegador seguirá los siguientes pasos: - -a. Determina la DPR (Relación de píxeles del dispositivo) del dispositivo. Por ejemplo, una pantalla estándar tiene una DPR de 1, mientras que una pantalla de alta resolución (Retina) tiene una DPR de 2 o más. - -b. Calcula el ancho efectivo para cada imagen en `srcset`. Multiplica el descriptor de ancho por la DPR. Para un dispositivo con una DPR de 1: - -- example-small.jpg: 400 \* 1 = 400px - -- example-medium.jpg: 800 \* 1 = 800px - -- example-large.jpg: 1600 \* 1 = 1600px - -c. Compara los anchos efectivos con el ancho de la ventana gráfica (viewport). Supongamos que el ancho de la ventana gráfica es de 420px. El navegador elegirá la imagen más pequeña con un ancho efectivo mayor o igual al ancho de la ventana gráfica. En este caso, seleccionará `example-medium.jpg`. - -2\. Descriptor de densidad de píxeles (`x`): - -Supongamos que tenemos el siguiente atributo `srcset`: - -```html - -Ejemplo de imagen - -``` - -El navegador seguirá los siguientes pasos: - -a. Determina la DPR (Relación de píxeles de dispositivo) del dispositivo. Por ejemplo, una pantalla estándar tiene una DPR de 1, mientras que una pantalla de alta resolución (Retina) tiene una DPR de 2 o más. - -b. Compara la DPR del dispositivo con los descriptores `x` en `srcset`. En este caso, tenemos tres imágenes con los siguientes descriptores: - -- example-1x.jpg: 1x - -- example-2x.jpg: 2x - -- example-3x.jpg: 3x - -c. Elige la imagen con el descriptor `x` que se acerque más a la DPR del dispositivo. Para un dispositivo con una DPR de 1, el navegador seleccionará `example-1x.jpg`. Para un dispositivo con una DPR de 2, elegirá `example-2x.jpg`, y así sucesivamente. - -Es importante tener en cuenta que también se puede utilizar el atributo `sizes` en combinación con el atributo `srcset` para proporcionar más información sobre cómo se mostrará la imagen en diferentes anchos de ventana gráfica. Esto es particularmente útil cuando se utiliza el descriptor de anchura (`w`). Aquí hay un ejemplo: - -```html - -Imagen de ejemplo + +``` + +El navegador seguirá estos pasos: + +a. Determinar el DPR (relación de píxeles de dispositivo) del dispositivo. Por ejemplo, una pantalla estándar tiene un DPR de 1, mientras que una pantalla de alta resolución (Retina) tiene un DPR de 2 o más. + +b. Calcular el ancho efectivo para cada imagen en el `srcset`. Multiplica el descriptor de ancho por el DPR. Para un dispositivo con un DPR de 1: + +- ejemplo-pequeno.jpg: 400 \* 1 = 400px + +- ejemplo-medio.jpg: 800 \* 1 = 800px + +- ejemplo-grande.jpg: 1600 \* 1 = 1600px + +c. Compara los anchos efectivos con el ancho de viewport. Suponen que el ancho de viewport es 420px. El navegador elegirá la imagen más pequeña con un ancho efectivo mayor o igual al ancho de viewport. En este caso, seleccionará `ejemplo-medio.jpg`. + +2\. Descriptores de densidad de píxeles (`x`): + +Supongamos que tenemos el siguiente atributo `srcset`: + +```html + +Imagen de ejemplo + +``` + +El navegador seguirá estos pasos: + +a. Determinar el DPR (relación de píxeles de dispositivo) del dispositivo. Por ejemplo, una pantalla estándar tiene un DPR de 1, mientras que una pantalla de alta resolución (Retina) tiene un DPR de 2 o más. + +b. Compara el DPR del dispositivo con los descriptores `x` en el `srcset`. En este caso, tenemos tres imágenes con los siguientes descriptores: + +- ejemplo-1x.jpg: 1x + +- ejemplo-2x.jpg: 2x + +- ejemplo-3x.jpg: 3x + +c. Elige la imagen con el descriptor `x` que esté más cerca del DPR del dispositivo. Para un dispositivo con un DPR de 1, el navegador seleccionará `ejemplo-1x.jpg`. Para un dispositivo con un DPR de 2, elegirá `ejemplo-2x.jpg`, y así sucesivamente. + +Es importante tener en cuenta que también puedes 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 al usar el descriptor de ancho (`w`). Aquí hay un ejemplo: + +```html + +Perro montando en bicicleta - + - + ``` diff --git a/src/content/docs/es/lighthouse-performance-test.md b/src/content/docs/es/lighthouse-performance-test.md index 823fd93..ab645a3 100644 --- a/src/content/docs/es/lighthouse-performance-test.md +++ b/src/content/docs/es/lighthouse-performance-test.md @@ -1,25 +1,24 @@ --- -title: Prueba de rendimiento con Lighthouse -description: Pasos sobre cómo probar el rendimiento de un sitio web utilizando Lighthouse -taskInputHash: d6d69f5336f685c3 +title: Probar el rendimiento con Lighthouse +description: Pasos para probar el rendimiento de un sitio web usando Lighthouse +taskInputHash: f77d81584d57a9a3 lang: es -ignore: '/* cSpell:locale es,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -¿Cómo se prueba el rendimiento del sitio con Lighthouse? - -> 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. -> -> 2\. Haz clic en los tres puntos en la esquina superior derecha de la ventana del navegador, luego selecciona "Más herramientas" y luego "Herramientas de desarrollador" o usa simplemente el atajo del teclado "Ctrl + Shift + I" (Windows, Linux) o "Command + Option + I" (macOS). -> -> 3\. En el panel Herramientas de desarrollador, haz clic en el icono de Lighthouse ubicado en el lado izquierdo del panel o presiona "Ctrl + Shift + P" (Windows, Linux) o "Command + Shift + P" (macOS) para abrir el menú de comandos, escribe "Lighthouse" y selecciona "Generar reporte". -> -> 4\. En el cuadro de diálogo Lighthouse, selecciona el rendimiento y otras opciones relevantes que deseas probar, luego haz clic en "Generar reporte". -> -> 5\. Después de que Lighthouse complete su análisis, verás un informe con puntuaciones y recomendaciones para mejorar el rendimiento, accesibilidad y otras áreas de tu sitio web. -> -> Siguiendo estos pasos, puedes utilizar Lighthouse para probar y optimizar el rendimiento de tu sitio web, lo que puede ayudar a mejorar la experiencia de usuario y los rankings de los motores de búsqueda. +¿Cómo se prueba el rendimiento de un sitio web con Lighthouse? + +> Lighthouse es una herramienta que se puede utilizar para medir el rendimiento, la accesibilidad y otros aspectos de un sitio web. Para probar el rendimiento de tu sitio web con Lighthouse, sigue estos pasos: +> +> 1\. Abre el navegador web Google Chrome y navega hasta la página que quieres evaluar. +> +> 2\. Haz clic en los tres puntos en la esquina superior derecha de la ventana del navegador, luego selecciona "Herramientas para desarrolladores" o utiliza el atajo de teclado "Ctrl+Shift+I" (Windows, Linux) o "Command+Option+I" (macOS). +> +> 3\. En el panel de Herramientas para desarrolladores, haz clic en el icono de Lighthouse ubicado en el lado izquierdo del panel o presiona "Ctrl+Shift+P" (Windows, Linux) o "Command+Shift+P" (macOS) para abrir el menú de comandos, luego escribe "Lighthouse" y selecciona "Generar informe". +> +> 4\. En la ventana de diálogo de Lighthouse, selecciona las opciones de rendimiento y otros aspectos relevantes que deseas evaluar, luego haz clic en "Generar informe". +> +> 5\. Después de que Lighthouse complete su análisis, verás un informe con puntuaciones y recomendaciones para mejorar el rendimiento, la accesibilidad y otros aspectos de tu sitio web. +> +> Siguiendo estos pasos, puedes utilizar Lighthouse para evaluar y optimizar el rendimiento de tu sitio web, lo que puede ayudar a mejorar la experiencia del usuario y los rankings de los motores de búsqueda. diff --git a/src/content/docs/es/picture-examples.md b/src/content/docs/es/picture-examples.md index 2d49689..cd30168 100644 --- a/src/content/docs/es/picture-examples.md +++ b/src/content/docs/es/picture-examples.md @@ -1,59 +1,58 @@ --- -title: Ejemplos usando el elemento +title: Ejemplos utilizando el elemento description: >- - Proporciona ejemplos utilizando el elemento , para imágenes + Proporciona ejemplos utilizando el elemento para imágenes responsivas, dirección de arte y diferentes formatos de imagen. -taskInputHash: 6db4516ee45090eb +taskInputHash: 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: +Aquí hay algunos ejemplos de uso del elemento `` y sus explicaciones: 1\. Ejemplo para imágenes responsivas: ```html - - - Una imagen + + + Una imagen ``` -Explicación: En este ejemplo, el elemento `` se utiliza para proporcionar diferentes fuentes de imágenes para diferentes tamaños de pantalla. Los elementos `` especifican las diferentes fuentes de imagen utilizando el atributo "srcset" y el atributo "media" para especificar las condiciones en las que se debe utilizar cada fuente. El elemento `` se utiliza como alternativa para navegadores antiguos o cuando no se cumplen las condiciones especificadas en los elementos ``. +Explicación: En este ejemplo, se utiliza el elemento `` para proporcionar diferentes fuentes de imagen para diferentes tamaños de pantalla. Los elementos `` especifican las diferentes fuentes de imagen 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 sustituto para navegadores antiguos o cuando no se cumplen las condiciones especificadas en los elementos ``. 2\. Ejemplo para dirección de arte: ```html - + - Una imagen + Una imagen ``` -Explicación: En este ejemplo, el elemento `` se utiliza para proporcionar diferentes fuentes de imágenes según la orientación del dispositivo. El elemento `` con el atributo "media" establecido en "(orientation: landscape)" especifica una fuente de imagen para pantallas anchas, mientras que el elemento `` especifica una fuente de imagen para pantallas verticales. +Explicación: En este ejemplo, se utiliza el elemento `` 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 verticales. -3\. Ejemplo para diferentes formatos de imagen: +3\. Ejemplo para formatos de imagen diferentes: ```html - + - + - Una imagen + Una imagen ``` -Explicación: En este ejemplo, el elemento `` se utiliza para proporcionar diferentes fuentes de imágenes para diferentes formatos de imagen. Los elementos `` especifican diferentes fuentes de imagen utilizando el atributo "srcset" y el atributo "type" para especificar el formato de imagen. El elemento `` se utiliza como alternativa para navegadores antiguos que no admiten el elemento ``. +Explicación: En este ejemplo, se utiliza el elemento `` para proporcionar diferentes fuentes de imagen para diferentes formatos de imagen. Los elementos `` especifican diferentes fuentes de imagen utilizando el atributo "srcset" y el atributo "type" para especificar el formato de imagen. El elemento `` se utiliza como sustituto para navegadores antiguos que no admiten el elemento ``. -## Puntos de quiebre +## Puntos de interrupción -En el diseño responsivo, los puntos de quiebre se utilizan para definir cuándo debe cambiar el diseño de un sitio web o aplicación en función del tamaño del viewport. Los puntos de quiebre se definen típicamente utilizando consultas de medios en CSS, que aplican diferentes estilos dependiendo del ancho de la pantalla. Estos puntos de quiebre se pueden utilizar en conjunto con el elemento `` para proporcionar diferentes fuentes de imágenes para diferentes tamaños de pantalla. +En el diseño responsivo, los puntos de interrupción 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 puerto de visualización. Los puntos de interrupción se definen típicamente mediante consultas de medios en CSS, que aplican diferentes estilos dependiendo del ancho de la pantalla. Estos puntos de interrupción se pueden utilizar en conjunto 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 pantalla en el que se debe utilizar cada fuente. Cuando el ancho de pantalla es mayor o igual a 768 píxeles, se utilizará la fuente `imagen-grande.jpg`; cuando el ancho de pantalla es mayor o igual a 480 píxeles pero menor que 768 píxeles, se utilizará la fuente `imagen-mediana.jpg`; y cuando el ancho de pantalla es menor que 480 píxeles, se utilizará la fuente `imagen-pequeña.jpg`. Esto nos permite servir imágenes de tamaño adecuado para cada dispositivo, reduciendo los tiempos 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 puntos de interrupción se pueden definir en cualquier tamaño de pantalla, y se pueden utilizar múltiples puntos de interrupción para crear diseños que respondan a una amplia gama de dispositivos. Al combinar los puntos de interrupción con el elemento ``, se pueden crear diseños flexibles y responsivos que se ven 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..688ebc5 100644 --- a/src/content/docs/es/pixels-not-pixels.md +++ b/src/content/docs/es/pixels-not-pixels.md @@ -1,20 +1,19 @@ --- title: px ≠ píxeles -description: Píxeles de dispositivo ≠ píxeles del navegador ≠ píxeles de imagen -taskInputHash: a6f6575dc9ddbf59 +description: Píxeles de dispositivo ≠ píxeles de navegador ≠ píxeles de imagen +taskInputHash: f879e185cc72444b lang: es -ignore: '/* cSpell:locale es,en*/' sidebar_sort_priority: 900 -date_published: '2023-03-26' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -### Píxeles de dispositivo ≠ píxeles del navegador ≠ píxeles de imagen +### Device pixels ≠ px del navegador ≠ px de imagen -Gracias a Apple, los píxeles de CSS y HTML (`px`) **casi siempre se asignan a múltiples píxeles de dispositivo/impresora**. El devicePixelRatio de mi teléfono es 3,875; [¿cuál es el tuyo?](https://www.mydevice.io/) +Gracias a Apple, los píxeles de CSS y HTML (`px`) **casi siempre se asignan a varios píxeles de dispositivo/impresora**. El dispositivoPixelRatio 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%). +Mi dispositivoPixelRatio de escritorio cambia con el zoom del navegador, pero se establece en 1.5 (¡mi `Sistema > Pantalla > Escala` es del 150%, después de todo!). -Los archivos de imagen (excluyendo SVG) se decodifican a una cuadrícula de píxeles. **Es molestoamente difícil obtener que los píxeles de la imagen se muestren perfectamente a una relación 1:1 con los píxeles de dispositivo -pero con `srcset` puedes llegar lo *suficientemente* cerca**, y un poco de Javascript puede ajustar el tamaño del elemento html después de la carga si realmente tienes razones justificadas para necesitar ese mapeo perfecto, aunque dichas artes prohibidas no serán reveladas aquí. +Los archivos de imagen (a excepción de SVG) se decodifican a una cuadrícula de píxeles. **Es molestoamente difícil conseguir que los píxeles de la imagen se muestren perfectamente a una relación de 1:1 con los píxeles de dispositivos; con `srcset` puedes acercarte lo suficiente,** y un poco de Javascript puede ajustar el tamaño del elemento html después de cargarse si tienes razones verdaderamente justificadas para necesitar ese mapeo de perfecta correspondencia, aunque aquellas artes prohibidas no serán reveladas aquí. -> Otras unidades absolutas [unidades (in, pc, pt, mm, cm, Q)](https://developer.mozilla.org/es/docs/Web/CSS/length) se definen en términos del número de píxeles CSS y pretenden que todo sea de 96 ppp. Los desarrolladores evitan las unidades absolutas porque generalmente es mejor utilizar unidades derivadas del tamaño de fuente o de las dimensiones del viewport/contenedor. Las unidades incompatibles pueden romper una disposición si el usuario ajusta el multiplicador de `Accesibilidad > Tamaño de texto`, acerca el navegador, o rota su dispositivo. Cabe decir que debes hacer todas estas cosas antes de lanzar tu sitio. +> Otras unidades absolutas [in, pc, pt, mm, cm, Q] (https://developer.mozilla.org/es/docs/Web/CSS/length) se definen en términos del número de píxeles CSS y pretenden que todo sea de 96dpi. Los desarrolladores evitan las unidades absolutas porque generalmente es mejor usar unidades que se derivan del tamaño de fuente o las dimensiones de la vista/contenedor. Las unidades desiguales pueden deshacer una disposición si el usuario ajusta su multiplicador de `Accesibilidad > Tamaño de Texto`, amplía el navegador o rota su dispositivo. Sobran las palabras al decir que debes hacer todas estas cosas antes de publicar tu sitio. diff --git a/src/content/docs/es/specify-width-height.md b/src/content/docs/es/specify-width-height.md index 74d5c12..6316bd7 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: Utiliza ancho y 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 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 de las imágenes porque ayuda al navegador web a saber el tamaño de la imagen antes de que se cargue por completo. Esto permite al navegador reservar la cantidad adecuada de espacio en la página web para la imagen, lo que evita que el contenido se mueva mientras se carga la imagen. > -> Además, especificar los atributos de ancho y altura para las imágenes también puede ayudar a mejorar el rendimiento general de la página web. Cuando un navegador conoce el tamaño de una imagen de antemano, puede calcular con mayor precisión la cantidad de espacio necesario para mostrar la imagen y evitar reflujo innecesarios o repintados del contenido a medida que se carga. +> Además, especificar los atributos de ancho y alto para 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 repintados innecesarios 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 de las imágenes puede mejorar la experiencia del usuario al hacer que el contenido se cargue más rápido y reducir las fallas visuales. diff --git a/src/content/docs/es/when-to-use-picture.md b/src/content/docs/es/when-to-use-picture.md index 2c26e07..de345a4 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 deberías usar 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 determina qué 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 el diseño web adaptable. +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 alta resolución. Con el elemento `picture`, puedes proporcionar una versión de la imagen que tenga el doble de píxeles que la versión normal, para que se vea nítida y clara en las pantallas Retina. -* **Pantallas Retina:** Las pantallas de alta densidad como las pantallas Retina de Apple tienen una mayor densidad de píxeles, lo que significa que las imágenes pueden verse borrosas o pixeladas si no se optimizan para una resolución alta. Con el elemento `picture`, puede proporcionar una versión de la imagen que tiene el doble de píxeles que la versión normal, para que se vea nítida y clara en las pantallas Retina. +* **Proporciones diferentes:** si está diseñando un sitio que necesita mostrar imágenes con diferentes proporciones (como paisaje versus retrato), puedes utilizar el elemento `picture` para proporcionar diferentes versiones de la imagen que estén optimizadas para cada proporción. -* **Diferentes relaciones de aspecto:** Si está diseñando un sitio que debe mostrar imágenes con diferentes relaciones de aspecto (como paisaje vs. retrato), puede utilizar el elemento `picture` para proporcionar diferentes versiones de la imagen que estén optimizadas para cada relación de aspecto. +* **Limitaciones de ancho de banda:** las imágenes pueden ser archivos grandes que ocupan mucho ancho de banda, especialmente en dispositivos móviles. Con el elemento `picture`, puedes proporcionar versiones más pequeñas de la imagen para dispositivos con pantallas más pequeñas o conexiones a internet más lentas, lo que puede ayudar a reducir los tiempos de carga de la página. -* **Limitaciones de ancho de banda:** Las imágenes pueden ser archivos grandes que ocupan mucho ancho de banda, especialmente en dispositivos móviles. Con el elemento `picture`, puede proporcionar versiones más pequeñas de la imagen para dispositivos con pantallas más pequeñas o conexiones de Internet más lentas, lo que puede ayudar a reducir los tiempos de carga de la página. +* **Diseños dirigidos por arte:** a veces, es posible que desee presentar una imagen de cierta manera dependiendo del diseño del resto de la página. Por ejemplo, es posible que desee mostrar un primer plano del rostro de una persona en dispositivos móviles, pero una toma más amplia en dispositivos de escritorio. El elemento `picture` te permite proporcionar diferentes versiones de la imagen que estén optimizadas para diferentes diseños. -* **Diseños dirigidos por arte:** A veces puede desear presentar una imagen de cierta manera según el diseño del resto de la página. Por ejemplo, puede querer mostrar un primer plano del rostro de una persona en dispositivos móviles, pero una toma más amplia en dispositivos de escritorio. El elemento `picture` le permite proporcionar diferentes versiones de la imagen que estén optimizadas para diferentes diseños. - -En general, el elemento `picture` es una herramienta poderosa que puede ayudarlo a optimizar sus imágenes para una variedad de casos de uso y asegurarse de que se vean geniales sin importar en qué dispositivo o tamaño de pantalla se estén viendo. +En general, el elemento `picture` es una herramienta muy útil que te puede ayudar a optimizar tus imágenes para una variedad de casos de uso y asegurarte de 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..b86abb7 100644 --- a/src/content/docs/es/width-density.md +++ b/src/content/docs/es/width-density.md @@ -1,19 +1,18 @@ --- 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 anchura (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 permite al navegador seleccionar la imagen adecuada en función de las características de visualización del dispositivo. El atributo `srcset` utiliza una combinación de `URL` y los descriptores `w` o `x` para especificar las imágenes. +## Descripto de Anchura (`w`) -> 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. +> El descriptor `w` se utiliza para especificar el ancho de una imagen en píxeles. Se utiliza cuando queremos proporcionar al navegador las dimensiones de una imagen para que pueda elegir la imagen adecuada para el espacio de pantalla disponible. > La sintaxis para utilizar el descriptor `w` en `srcset` es la siguiente: @@ -22,14 +21,15 @@ Entendiendo los descriptores de ancho (w) y densidad (x) en `srcset`. Usa ejempl srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" - alt="Ejemplo de Imagen"> + alt="Ejemplo de imagen"> ``` -> En el ejemplo anterior, hemos proporcionado al navegador tres imágenes y sus anchos correspondientes en píxeles. El navegador seleccionará la imagen con el ancho más cercano al espacio disponible en la pantalla. -## Descriptores 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. +> En el ejemplo anterior, hemos proporcionado al navegador tres imágenes y sus anchuras correspondientes en píxeles. El navegador seleccionará la imagen con la anchura más cercana al espacio de pantalla disponible. +## Descriptor de Densidad (`x`) + +> El descriptor `x` se utiliza para especificar la densidad de píxeles de una imagen, que es la relación entre los píxeles físicos y los píxeles CSS. Se utiliza cuando queremos proporcionar al navegador diferentes versiones de la misma imagen con diferentes densidades de píxeles. > La sintaxis para utilizar el descriptor `x` en `srcset` es la siguiente: @@ -38,10 +38,10 @@ Entendiendo los descriptores de ancho (w) y densidad (x) en `srcset`. Usa ejempl srcset="small.jpg 1x, medium.jpg 2x, large.jpg 3x" - alt="Ejemplo de Imagen"> + alt="Ejemplo de imagen"> ``` -> En el ejemplo anterior, hemos proporcionado al navegador tres imágenes y sus diferentes densidades de píxeles correspondientes. El navegador seleccionará la imagen con la densidad de píxeles más cercana a la pantalla del dispositivo. +> En el ejemplo anterior, hemos proporcionado al navegador tres imágenes y sus correspondientes densidades de píxeles. El navegador seleccionará la imagen con la densidad de píxeles más cercana a la pantalla del dispositivo. -> Es importante notar que los descriptores `w` y `x` se pueden usar juntos en el mismo atributo `srcset` para proporcionar al navegador más opciones para elegir. +> 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..b4e172b 100644 --- a/src/content/docs/fr/_roundtrip_breakpoints.txt +++ b/src/content/docs/fr/_roundtrip_breakpoints.txt @@ -1,43 +1,44 @@ --- title: Breakpoints and Images description: >- - Why some breakpoints (but not all) matter for your images -taskInputHash: b9dc6c0d27d7c8b7 + Why some (but not all) breakpoints matter for your images +taskInputHash: 3a845882fe3c1d34 lang: en -ignore: '/* cSpell:locale fr,en*/' -date_published: '2023-03-26' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -### Context +### Context -Small screens and large monitors require different layouts. For the needs of `srcset` and `sizes`, we need to know when the layout changes. +Small screens and large monitors require different layouts. For the needs of `srcset` and `sizes`, we must 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 must 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 at their disposal. Is the user on a tablet or phone in landscape mode - or a small browser window? -We need to choose an arbitrary viewport width where the layout changes. This is called a **breakpoint**. It's an arbitrary number of CSS pixels ([not device pixels](/en/pixels-not-pixels)). Polypane has an [excellent article](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023) on commonly used breakpoints. +We have to choose an arbitrary viewport width at which the layout changes. This is called a **breakpoint**. It is an arbitrary number of CSS pixels ([not device pixels](https://www.w3.org/TR/css-values-4/#absolute-lengths)), 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 (like logos, icons or buttons) may be immune to layout changes caused by these breakpoints (and be refined with [srcset density descriptors](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#density_descriptors)). -Images in the main content will be constrained by the size of their container. Typically, the main content area of a page will be limited to some width on larger screens, a `max-width`, but on smaller screens, the main content area will fill the entire viewport. +Main content images will be limited by the size of their container. Usually, the main content area of a page will be limited to a certain width on larger screens, a `max-width`, but on smaller screens, the main content area will fill the entire viewport. -If you have more than one column at certain breakpoints, it will be harder to calculate effective sizing rules, because the percentage of the viewport width the image occupies will change. +If you have more than one column at certain breakpoints, it will be more difficult to calculate effective sizing rules, as the percentage of the viewport width that the image occupies will change. -### The easy way +### The Simple Method -That being said, don't think too much about this. You'll probably be just fine with the following approximation method: +That said, don't fret too much. You'll probably be just fine with the following rough approximation: -1. At what size does the main column (or image container) stop growing? Up to this viewport width, we can use `100vw` for the `sizes` attribute of the image to say that the image takes up 100% of the viewport width. -2. What is the maximum width the container ever reaches? We can set that as a fixed width for everything else. +1. At what point does the main column (or image container) stop growing? Up to that viewport width, we can use `100vw` at the image's `sizes` attribute to indicate that the image occupies 100% of the viewport width. +2. What is the maximum width the container can reach? We can set it as a fixed `width` for everything else. -If your answer to 1 was 700px and your answer to 2 was 800px, you can use the following `sizes` attribute: +If your answer to question 1 was 700px and to question 2 was 800px, you can use the following `sizes` attribute: ```html - - + + ``` -> You thought the browser might handle all these calculations for us based on CSS. Unfortunately, browsers are aggressively keen to choose an image URL *before* downloading style sheets. We have to do the calculations ourselves, and they're well worth it if we don't get them perfectly. +> One might think that the browser could handle all of these calculations for us based on CSS stylesheets. Unfortunately, browsers are extremely impatient to pick an image URL *before* stylesheets are downloaded. So we must do the calculations ourselves, and too bad for them if we're not perfect. + +{{Note that "density descriptors" could also be translated as "density attributes".}} ===================== Content prompt used: @@ -51,7 +52,7 @@ Also carefully translate the title and description for the article; do not use & 2. Why some (but not all) breakpoints matter for your images Metadata returned1. Points de rupture et images -2. Pourquoi certains points de rupture (mais pas tous) sont importants pour vos images +2. Pourquoi certains (mais pas tous) les points de rupture sont importants pour vos images Roundtrip (isolated) prompt used: diff --git a/src/content/docs/fr/_roundtrip_browser-picks-srcset.txt b/src/content/docs/fr/_roundtrip_browser-picks-srcset.txt index e7bf5a7..d60f25b 100644 --- a/src/content/docs/fr/_roundtrip_browser-picks-srcset.txt +++ b/src/content/docs/fr/_roundtrip_browser-picks-srcset.txt @@ -1,18 +1,22 @@ --- -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 both width and density specifications, and how the browser decides based on the device and display area. -- When you use the `srcset` attribute in HTML, the browser uses a set of rules to choose the most appropriate image from a provided list of sources. These rules depend on both the display characteristics of the device (resolution, pixel density) and the viewport size. The `srcset` attribute allows you to specify different images based on width (using the `w` descriptor) or pixel density (using the `x` descriptor). Let's review each case with examples. +- When using the `srcset` attribute in HTML, the browser uses a set of rules to choose the most appropriate image from a list of provided sources. These rules depend on both the display characteristics of the device (resolution, pixel density) and the size of the display area. 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: +Assume we have the following `srcset` attribute: -```html +```html Example image @@ -20,21 +24,23 @@ Assuming we have the following `srcset` attribute: The browser follows these steps: -a. Determine the DPR (Device Pixel Ratio) of the device. For example, a regular screen has a DPR of 1, while a high-resolution (Retina) screen has a DPR of 2 or more. +a. Determine the DPR (Device Pixel Ratio) of the device. For example, a standard screen has a DPR of 1, while a high-resolution (Retina) screen has a DPR of 2 or more. -b. Calculate the effective width for each image in `srcset`. Multiply the width descriptor by DPR. For a device with a DPR of 1: +b. Calculate the effective width 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 -c. Compare the effective widths with the viewport width. Suppose the viewport width is 420 px. The browser selects the smallest image with an effective width greater than or equal to the viewport width. In this case, it selects `example-medium.jpg`. +- example-medium.jpg: 800 * 1 = 800px -2. Pixel Density Descriptor (`x`): +- example-large.jpg: 1600 * 1 = 1600px -Assuming we have the following `srcset` attribute: +c. Compare the effective widths with the width of the display area. Assume the width of the display area is 420px. The browser will choose the smallest image with an effective width greater than or equal to the display area width. In this case, it will select `example-medium.jpg`. -```html +2. Pixel density descriptor (`x`): + +Assume we have the following `srcset` attribute: + +```html Example image @@ -42,19 +48,21 @@ Assuming we have the following `srcset` attribute: The browser follows these steps: -a. Determine the DPR (Device Pixel Ratio) of the device. For example, a regular screen has a DPR of 1, while a high-resolution (Retina) screen has a DPR of 2 or more. +a. Determine the DPR 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 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 area widths. This is particularly useful when using the width descriptor (`w`). Here's an example: -```html +```html sizes -description: An efficient and subjective guide for responsive images in 2023 -taskInputHash: 2f3bd9fa4d308fbc -lang: en -ignore: '/* cSpell:locale fr,en*/' +title: srcset & tailles +description: An effective and French-friendly guide to adaptive 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 Effective and French-Friendly Guide to Adaptive Images in 2023** -Check the sidebar for a deeper dive. This is a quick reference for updating those `` tags to support modern devices in all their varied sizes and pixel densities. You need to [know that pixels != pixels](/en/pixels-not-pixels) and `devicePixelRatio` is more likely to be around 3.875 than 1:1. Modern phones claim a width of 320 to 428 pixels for legibility (in CSS pixels), but have many pixels per CSS pixel. +Check the sidebar for a deep dive. This is the quick reference for updating those `` tags to handle modern devices in all of their varied sizes and pixel densities. You should [know that pixels are not created equally](/pixels-are-not-created-equally) and that `devicePixelRatio` is more likely to be around 3.875 than 1:1. Modern phones claim to be anywhere from 320 to 428px wide for legibility (in CSS pixels), but have multiple device pixels per CSS pixel. -> If your image never changes size, no matter how small the browser window gets, you should use a [density descriptor instead](/en/density-descriptors). This often suits logos, icons, and buttons. +> If your image never changes size no matter how much you shrink the browser window, you should use a [density descriptor](/density-descriptors) instead. This is often appropriate for logos, icons, and buttons. -Do you know what your [breakpoints](/en/breakpoints) are? You'll need those numbers to refine the solution below, at minimum the display width breakpoint where the main content area stops growing. +Do you know your [breakpoints](/breakpoints)? You'll need those numbers to tweak the solution below--and at minimum, the width breakpoint where the main content area stops growing. -### The easy way +### The Easy Method ```html Dog riding 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 on bike" /> + And that below that display width, this image takes 100% width, but + when the display width gets larger, the image is constrained to 800 CSS pixels --> - + ``` ===================== @@ -48,8 +46,8 @@ Also carefully translate the title and description for the article; do not use & 1. srcset & sizes 2. An Efficient and Opinionated Guide to Responsive Images for 2023 -Metadata returned1. srcset et tailles d' -2. Un guide efficace et subjectif pour les images réactives en 2023 +Metadata returned1. srcset & tailles d' +2. Un guide efficace et francophile des images adaptatives 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..a8ea87e 100644 --- a/src/content/docs/fr/_roundtrip_lighthouse-performance-test.txt +++ b/src/content/docs/fr/_roundtrip_lighthouse-performance-test.txt @@ -1,28 +1,18 @@ ---- -title: Testing Performance with Lighthouse -description: Steps for testing a website's performance using Lighthouse -taskInputHash: 8e6d39610c052ea3 -lang: en -ignore: '/* cSpell:locale fr,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' ---- -How to test your site's performance with Lighthouse? +How to test your website's performance with Lighthouse? -> Lighthouse is a tool that can be used to measure performance, accessibility, and other aspects of a website. To test your website's performance with Lighthouse, follow these steps: -> -> 1\. Open the Google Chrome web browser and go to the page you want to test. -> -> 2\. Click on the three dots in the upper right corner of the browser window, then select "More tools" and then "Developer tools" or simply use the keyboard shortcut "Ctrl+Shift+I" (Windows, Linux) or "Command+Option+I" (macOS). -> -> 3\. In the Developer Tools panel, click on the Lighthouse icon located on the left side of the panel or press "Ctrl+Shift+P" (Windows, Linux) or "Command+Shift+P" (macOS) to open the Command Menu, then type "Lighthouse" and select "Generate report". -> -> 4\. In the Lighthouse dialog box, select the relevant performance and other options you want to test, then click "Generate report". -> -> 5\. After Lighthouse finishes its analysis, you will see a report with scores and recommendations for improving the performance, accessibility, and other areas of your website. -> -> By following these steps, you can use Lighthouse to test and optimize your website's performance, which can help improve its user experience and ranking in search engines. +>Lighthouse is a tool that can be used to measure 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 at 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 press "Ctrl+Shift+P" (Windows, Linux) or "Command+Shift+P" (macOS) to open the Command Menu, then type "Lighthouse" and select "Generate Report." +> +> 4\. In the Lighthouse dialog box, select the performance options and other relevant options you want to test, and then click on "Generate Report." +> +> 5\. After Lighthouse completes its analysis, you'll 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 ranking. ===================== Content prompt used: @@ -36,7 +26,7 @@ Also carefully translate the title and description for the article; do not use & 2. Steps on how to test a website's performance using Lighthouse Metadata returned1. Tester les performances avec Lighthouse -2. Étapes pour tester les performances d'un site web en utilisant Lighthouse +2. Les étapes pour tester les performances d'un site web en utilisant Lighthouse Roundtrip (isolated) prompt used: diff --git a/src/content/docs/fr/_roundtrip_picture-examples.txt b/src/content/docs/fr/_roundtrip_picture-examples.txt index 10f80e1..8c83f0c 100644 --- a/src/content/docs/fr/_roundtrip_picture-examples.txt +++ b/src/content/docs/fr/_roundtrip_picture-examples.txt @@ -1,14 +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 responsive 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: @@ -20,7 +22,7 @@ Here are some examples of using the `` element with explanations: ``` -Explanation: In this example, the `` element is used to provide different image sources for different screen sizes. The `` elements specify different image sources using the "srcset" attribute and the "media" attribute to specify the conditions under which each source should be used. The `` element is used as a fallback for older browsers or when the conditions specified in the `` elements are not met. +Explanation: In this example, the `` element is used to provide different image sources for different screen sizes. The `` elements specify the different image sources using the "srcset" attribute and the "media" attribute to specify the conditions in 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: @@ -32,7 +34,7 @@ Explanation: In this example, the `` element is used to provide differe ``` -Explanation: In this example, the `` element is used to provide different image sources based on the orientation of the device. The `` element with the "media" attribute set to "(orientation: landscape)" specifies an image source for wide screens, while the `` element specifies an image source for portrait screens. +Explanation: In this example, the `` element is used to provide different image sources based on the orientation of the device. The `` element with the "media" attribute set to "(orientation: landscape)" specifies an image source for large screens, while the `` element specifies an image source for portrait mode screens. 3. Example for different image formats: @@ -46,15 +48,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 responsive design, breakpoints are used to define when the layout of a website or application should change based on the size of the display. Breakpoints are typically defined using media queries in CSS, which apply different styles based on the screen width. These breakpoints can be used in conjunction with the `` element to provide different image sources for different screen sizes. -For example, in the first example above, we used the `media` attribute to specify the screen width under which each source should be used. When the screen width is greater than or equal to 768 pixels, the `image-large.jpg` source will be used; when the screen width is greater than or equal to 480 pixels but less than 768 pixels, the `image-medium.jpg` source will be used; and when the screen width is less than 480 pixels, the `image-small.jpg` source will be used. This allows us to provide appropriately sized images for each device, thus reducing page loading times and improving the user experience. +For example, in the first example above, we used the `media` attribute to specify the screen width below 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 loading 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 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, responsive designs that look great on any device. ===================== Content prompt used: @@ -67,8 +69,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 réactives, la direction artistique et les différents formats d'images 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..4b4e181 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/HTML pixels (`px`) **almost always correspond to multiple device/printer pixels**. The devicePixelRatio on my phone is 3.875; [what's yours?](https://www.mydevice.io/) -The devicePixelRatio of my desktop computer changes based on the zoom level of the browser, but is by default 1.5 (my display scaling is 150% in `System > Display`). +The devicePixelRatio of my desktop computer changes with browser zoom, but is by default 1.5 (my `System > Display > Scale` being 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 (excluding SVG) are made up of a grid of pixels. **It is frustratingly difficult to get image pixels to display at a perfect 1:1 ratio with device pixels, but with `srcset`, you can get close enough**, and a little bit of JavaScript can adjust the size of the HTML element after loading if you have legitimate reasons for requiring this perfect correspondence, although such practices are forbidden from being detailed here. -> Other absolute units ([in, pc, pt, mm, cm, Q)](https://developer.mozilla.org/en-US/docs/Web/CSS/Length_and_Distance) are defined based on the number of CSS pixels and assume everything is at 96dpi. Developers tend to avoid absolute units since it's generally better to use units derived from font size or viewport/container dimensions. Incompatible units can break layout if the user increases text size, zooms the browser, or rotates their device. Needless to say, you should do all these things before publishing your site. +> Other absolute units [in, pc, pt, mm, cm, Q](https://developer.mozilla.org/en-US/docs/Web/CSS/length) are defined in terms of the number of CSS pixels and pretend everything is at 96dpi. Developers avoid absolute units because it is generally better to use units derived from font size or window/container dimensions. Incompatible units can break a layout if the user adjusts their Accessibility > Text size multiplier, zooms in the browser, or rotates their device. Needless to say, you should do all of these things before publishing your site. ===================== Content prompt used: @@ -31,7 +30,7 @@ Also carefully translate the title and description for the article; do not use & 2. Device px ≠ browser px ≠ image px Metadata returned1. px ≠ pixels -2. Pixels d'écran ≠ pixels de navigateur ≠ pixels d'image +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..eadd21c 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 + The benefits of using 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 include width and height in your HTML code? -> It is recommended to include width and height attributes in the HTML code of images because it helps the web browser to know the size of the image before it is fully loaded. This allows the browser to reserve the appropriate space on the web page for the image, which prevents content from jumping around while the image is loading. -> -> 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. -> -> 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. +> It is recommended to include 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 browser to reserve the appropriate space on the web page for the image, preventing content from jumping around while the image loads. +> +> Furthermore, specifying width and height attributes for images can also help improve overall page performance. When a browser knows the size of an image in advance, it can more accurately calculate the amount of space needed to display the image and avoid unnecessary reflows or repaints of content while 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 issues. ===================== Content prompt used: @@ -29,7 +28,7 @@ Also carefully translate the title and description for the article; do not use & 2. Benefits of using width and height attributes in HTML code Metadata returned1. Utiliser la largeur et la hauteur -2. Avantages de l'utilisation des attributs de largeur et de hauteur dans le code HTML +2. Les avantages de l'utilisation des attributs de largeur et de hauteur dans le code HTML Roundtrip (isolated) prompt used: diff --git a/src/content/docs/fr/_roundtrip_when-to-use-picture.txt b/src/content/docs/fr/_roundtrip_when-to-use-picture.txt index 1e5b634..7e17253 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,25 @@ --- -title: When to use the element -description: Explains in which situations you should use the element -taskInputHash: 745796c8db3f3527 +title: When to Use the `picture` Element +description: Explains in which situations you should use the `picture` 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 to display based on certain conditions. It is particularly useful for optimizing images for different screen sizes and resolutions, and is commonly used in responsive web design. -* **Retina Displays:** High-density displays such as Apple's Retina displays have a higher pixel density, which means 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. +Here are some specific scenarios where you might want to use the `picture` element: -* **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. +* **Retina Displays:** High-density 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, so that it is sharp and clear on Retina displays. -* **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. +* **Different Aspect Ratios:** If you are designing a website that needs to display images with different aspect ratios (such as landscape vs. portrait), you can use the `picture` element to provide different versions of the image that are optimized for each aspect ratio. -* **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. +* **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 to reduce page loading times. -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. +* **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 their best no matter what device or screen size they are displayed 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..55faf85 100644 --- a/src/content/docs/fr/_roundtrip_width-density.txt +++ b/src/content/docs/fr/_roundtrip_width-density.txt @@ -1,20 +1,19 @@ --- title: Width and Density Descriptors description: Examples of using width and density descriptors in `srcset` -taskInputHash: 569fd1065931e1e0 +taskInputHash: d4db50f5267305d1 lang: en -ignore: '/* cSpell:locale fr,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Understanding the width (`w`) and density (`x`) descriptors in `srcset`. Use examples and Markdown. +Understanding width (`w`) and density (`x`) descriptors in `srcset`. Use examples and use Markdown. ->`srcset` is an HTML attribute that allows developers to provide multiple image sources with different resolutions or pixel densities, and let the browser select the appropriate image based on the display characteristics of the device. The `srcset` attribute uses a combination of the `URL` and `w` or `x` descriptors to specify the images. +> `srcset` is an HTML attribute that allows developers to provide multiple image sources with different resolutions or pixel densities and let the browser choose the appropriate image based on the display characteristics of the device. The `srcset` attribute uses a combination of `URL` and either `w` or `x` descriptors to specify images. ## Width Descriptor (`w`) -> The `w` descriptor is used to specify the width of an image in pixels. It is used when we want to provide the browser with the dimensions of an image so that it can choose the appropriate image for the available screen space. +> The `w` descriptor is used to specify the width of an image in pixels. It is used when we want to provide the browser with an image's dimensions so that it may choose the appropriate image for the available screen space. > The syntax for using the `w` descriptor in `srcset` is as follows: @@ -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 example above, we have provided the browser with three images and their corresponding widths in pixels. The browser will select the image with the width closest to the available screen space. ## Density Descriptor (`x`) @@ -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 example above, we have provided the browser with three images and their corresponding pixel densities. The browser will select the image with the pixel density closest to the device's screen. -> Note that the `w` and `x` descriptors can be used together in the same `srcset` attribute to provide the browser with more options for selection. +> Note that the `w` and `x` descriptors can be used together in the same `srcset` attribute to provide the browser with more options to choose from. ===================== Content prompt used: diff --git a/src/content/docs/fr/breakpoints.md b/src/content/docs/fr/breakpoints.md index eb1cb9e..1f18514 100644 --- a/src/content/docs/fr/breakpoints.md +++ b/src/content/docs/fr/breakpoints.md @@ -1,43 +1,43 @@ --- title: Points de rupture et images description: >- - Pourquoi certains points de rupture (mais pas tous) sont importants pour vos - images -taskInputHash: b9dc6c0d27d7c8b7 + Pourquoi certains (mais pas tous) les points de rupture sont importants pour + vos images +taskInputHash: 3a845882fe3c1d34 lang: fr -ignore: '/* cSpell:locale fr,en*/' -date_published: '2023-03-26' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- ### Contexte Les petits écrans et les grands moniteurs nécessitent des mises en page différentes. Pour les besoins de `srcset` et de `sizes`, nous devons savoir à quel moment la mise en page change. -Les développeurs Web doivent décider ce qu'il faut réduire, masquer ou déplacer sur les petits écrans - ou plus couramment, ce qu'il faut étendre, révéler ou ajouter sur les grands écrans. Ils disposent également de très peu d'informations. L'utilisateur est-il sur une tablette ou un téléphone en mode paysage - ou une petite fenêtre de navigateur ? +Les développeurs Web doivent décider ce qu'il convient de réduire, de masquer ou de déplacer sur les petits écrans – ou plus couramment, ce qu'il convient d'agrandir, de révéler ou d'ajouter sur les grands écrans. Ils ont également très peu d'informations à leur disposition. L'utilisateur est-il sur une tablette ou un téléphone en mode paysage – ou une petite fenêtre de navigateur ? -Nous devons choisir une largeur de viewport arbitraire où la mise en page change. Cela s'appelle un **point de rupture**. C'est un nombre arbitraire de pixels CSS ([pas de pixels d'appareil](/fr/pixels-not-pixels)). Polypane a un [excellent article](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023) sur les points de rupture couramment utilisés. +Nous devons choisir une largeur de fenêtre d'affichage arbitraire où la mise en page change. C'est ce qu'on appelle un **point de rupture**. Il s'agit d'un nombre arbitraire de pixels CSS ([pas de pixels de l'appareil](/fr/les-pixels-pas-les-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) peuvent être immunisées contre les changements de mise en page causés par ces points de rupture (et être affinées 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 de contenu principal seront limitées par la taille de leur conteneur. En général, 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 occupera toute la fenêtre d'affichage. -Si vous avez plus d'une colonne à certains points de rupture, il sera plus difficile de calculer les règles de dimensionnement effectives, car le pourcentage de la largeur du viewport que l'image occupe changera. +Si vous avez plus d'une colonne à certains points de rupture, il sera plus difficile de calculer les règles de dimensionnement efficaces, car le pourcentage de la largeur de la fenêtre d'affichage que l'image occupe changera. -### La méthode facile +### La méthode simple -Cela étant dit, ne pensez pas trop à cela. Vous serez probablement très bien avec la méthode d'approximation suivante : +Cela dit, ne vous prenez pas trop la tête. Vous serez probablement très bien avec la première approximation suivante : -1. À quelle taille la colonne principale (ou le conteneur de l'image) cesse-t-elle de croître ? Jusqu'à cette largeur de viewport, nous pouvons utiliser `100vw` pour l'attribut `sizes` de l'image pour dire que l'image occupe 100 % de la largeur du viewport. -2. Quelle est la largeur maximale que le conteneur atteint jamais ? Nous pouvons fixer cela comme une largeur fixe pour tout le reste. +1. À quelle taille la colonne principale (ou le conteneur de l'image) cesse-t-elle de grandir ? Jusqu'à cette largeur de fenêtre d'affichage, nous pouvons utiliser `100vw` pour l'attribut `sizes` de l'image pour indiquer que l'image occupe 100% de la largeur de fenêtre d'affichage. +2. Quelle est la largeur maximale que le conteneur peut atteindre ? Nous pouvons le définir comme une `width` fixe pour tout le reste. -Si votre réponse à 1 était 700px et votre réponse à 2 était 800px, vous pouvez utiliser l'attribut `sizes` suivant : +Si votre réponse à la question 1 était 700px et celle à la question 2 était 800px, vous pouvez utiliser l'attribut `sizes` suivant : ```html - + ``` -> Vous pensiez que le navigateur pourrait gérer toutes ces calculs pour nous en fonction des CSS. Malheureusement, les navigateurs sont agressivement désireux de choisir une URL d'image *avant* le téléchargement des feuilles de style. Nous devons donc effectuer les calculs nous-mêmes, et ils méritent bien si nous ne les obtenons pas parfaitement. +> On pourrait penser que le navigateur pourrait gérer toutes ces calculs à notre place en fonction des feuilles de style CSS. Malheureusement, les navigateurs sont extrêmement impatients de choisir une URL d'image *avant* que les feuilles de style ne soient téléchargées. Nous devons donc faire les calculs nous-mêmes, et tant pis pour eux si nous ne sommes pas parfaits. diff --git a/src/content/docs/fr/browser-picks-srcset.md b/src/content/docs/fr/browser-picks-srcset.md index 42e2dfc..285150a 100644 --- a/src/content/docs/fr/browser-picks-srcset.md +++ b/src/content/docs/fr/browser-picks-srcset.md @@ -3,56 +3,55 @@ title: Comment le navigateur choisit description: >- Comment le navigateur choisit entre les images répertoriées dans l'attribut srcset -taskInputHash: 1ad7279bfa827840 +taskInputHash: 526ee912d47a6d62 lang: fr -ignore: '/* cSpell:locale fr,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Comment le navigateur choisit-il entre les images répertoriées dans l'attribut srcset ? Voici les étapes détaillées, avec des exemples pour les spécifications de largeur et de densité et comment le navigateur décide en fonction de l'appareil et du viewport. +Comment le navigateur choisit-il entre les images répertoriées dans l'attribut srcset? Voici un guide étape par étape, avec des exemples pour les spécifications de largeur et de densité et la façon dont le navigateur décide en fonction de l'appareil et de la zone d'affichage. -- 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. +- Lors de l'utilisation de l'attribut `srcset` en HTML, le navigateur utilise un ensemble de règles pour choisir l'image la plus appropriée parmi une liste de sources fournies. Ces règles dépendent à la fois des caractéristiques d'affichage de l'appareil (résolution, densité de pixels) et de la taille de la zone d'affichage. 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 : +Supposons que nous avons l'attribut `srcset` suivant: ```html -Image d'exemple +Exemple d'image ``` -Le navigateur suivra ces étapes: +Le navigateur suivra les étapes suivantes: 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: +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 +- exemple-small.jpg: 400 \* 1 = 400px -- example-medium.jpg: 800 \* 1 = 800px +- exemple-medium.jpg: 800 \* 1 = 800px -- example-large.jpg: 1600 \* 1 = 1600px +- exemple-large.jpg: 1600 \* 1 = 1600px -c. Comparer les largeurs effectives avec la largeur du viewport. Supposons que la largeur du viewport est de 420px. Le navigateur choisira l'image la plus petite avec une largeur effective supérieure ou égale à la largeur de viewport. Dans ce cas, il sélectionnera `example-medium.jpg`. +c. Comparer les largeurs effectives avec la largeur de la zone d'affichage. Supposons que la largeur de la zone d'affichage est de 420px. Le navigateur choisira l'image la plus petite ayant une largeur effective supérieure ou égale à la largeur de la zone d'affichage. Dans ce cas, il sélectionnera `example-medium.jpg`. -2. Descripteur de densité de pixels (`x`): +1. Descripteur de densité de pixels (`x`): -Supposons que nous avons l'attribut `srcset` suivant : +Supposons que nous avons l'attribut `srcset` suivant: ```html -Image d'exemple +Exemple d'image ``` -Le navigateur suivra ces étapes: +Le navigateur suivra les étapes suivantes: 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 : +b. Comparer le DPR de l'appareil avec les descripteurs `x` dans le `srcset`. Dans ce cas, nous avons trois images avec les descripteurs suivants: - example-1x.jpg: 1x @@ -60,9 +59,9 @@ b. Comparer le DPR de l'appareil avec le descripteur `x` dans le `srcset`. Dans - example-3x.jpg: 3x -c. Choisir l'image avec le descripteur `x` le plus proche du DPR de l'appareil. Pour un appareil avec un DPR de 1, le navigateur sélectionnera `example-1x.jpg`. Pour un appareil avec un DPR de 2, il choisira `example-2x.jpg`, et ainsi de suite. +c. Choisissez l'image avec le descripteur `x` qui est le plus proche du DPR de l'appareil. Pour un appareil avec un DPR de 1, le navigateur sélectionnera `example-1x.jpg`. Pour un appareil avec un DPR de 2, il choisira `example-2x.jpg`, et ainsi de suite. -Il est important de noter que l'on peut également utiliser l'attribut `sizes` en combinaison avec l'attribut `srcset` pour fournir plus d'informations sur la façon dont l'image sera affichée à différentes largeurs de viewport. Ceci est particulièrement utile lors de l'utilisation du descripteur de largeur (`w`). Voici un exemple : +Il est important de noter que vous pouvez également utiliser l'attribut `sizes` en combinaison avec l'attribut `srcset` pour fournir plus d'informations sur la façon dont l'image sera affichée à différentes largeurs de zone d'affichage. Cela est particulièrement utile lors de l'utilisation du descripteur de largeur (`w`). Voici un exemple: ```html diff --git a/src/content/docs/fr/density-descriptors.md b/src/content/docs/fr/density-descriptors.md index e8f8f44..c5e08d1 100644 --- a/src/content/docs/fr/density-descriptors.md +++ b/src/content/docs/fr/density-descriptors.md @@ -1,28 +1,31 @@ --- title: Descripteurs de densité et srcset -description: Exemples d'utilisation des descripteurs de densité dans `srcset` -taskInputHash: 4a6e8aedba865baf +description: Exemples d'utilisation de descripteurs de densité dans `srcset` +taskInputHash: 1b80ac29f8b4510b lang: fr -ignore: '/* cSpell:locale fr,en*/' -date_published: '2023-03-26' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Srcset avec descripteurs de densité fournit une méthode simple et efficace pour livrer l'image la plus adaptée à chaque appareil de l'utilisateur, améliorant les performances et l'expérience utilisateur. Ce guide vous guidera à travers l'essentiel de l'utilisation de srcset avec descripteurs de densité et fournira des exemples de balisage pour votre commodité. +Srcset avec descripteurs de densité fournit une méthode simple et efficace pour livrer l'image la plus appropriée à l'appareil de chaque utilisateur, améliorant les performances et l'expérience utilisateur. Ce guide vous guidera à travers l'essentiel de l'utilisation de srcset avec descripteurs de densité et fournira des exemples de balisage pour votre commodité. + ## Qu'est-ce que Srcset avec descripteurs de densité? -Srcset est un attribut HTML conçu pour vous permettre de spécifier plusieurs sources d'image pour un seul élément ``. Les descripteurs de densité (`x`) sont utilisés en conjonction avec srcset pour fournir des images de résolution différente en fonction de la densité de pixels de l'affichage de l'utilisateur. +Srcset est un attribut HTML conçu pour vous permettre de spécifier plusieurs sources d'image pour un seul élément ``. Les descripteurs de densité (`x`) sont utilisés en conjonction avec srcset pour fournir des images de résolution différente en fonction de la densité de pixels de l'écran de l'utilisateur. + ## Quand utiliser Srcset avec descripteurs de densité L'utilisation de srcset avec descripteurs de densité est particulièrement utile lorsque vous souhaitez : -1. Servir des images haute résolution aux affichages haute densité de pixels (par exemple, les affichages Retina) tout en fournissant des images de résolution inférieure aux affichages standard. -2. Améliorer les performances de la page en livrant la taille d'image la plus appropriée à chaque appareil de l'utilisateur. +1. Servir des images haute résolution aux écrans haute-DPI (par exemple, écrans Retina) tout en fournissant des images de résolution inférieure aux écrans standards. +2. Améliorer les performances de la page en fournissant la taille d'image la plus appropriée à l'appareil de chaque utilisateur. + ## Implémentation de Srcset avec descripteurs de densité Pour utiliser srcset avec descripteurs de densité, suivez ces étapes : -1. Préparez vos images dans des résolutions différentes. +1. Préparez vos images dans différentes résolutions. 2. Ajoutez l'attribut `srcset` à l'élément ``, en incluant les sources d'image et les descripteurs de densité correspondants. 3. Ajoutez l'attribut `sizes` (facultatif) pour spécifier la taille de l'image telle qu'elle sera affichée à l'écran. + ### Exemple de balisage Voici un exemple d'implémentation de srcset avec descripteurs de densité dans votre balisage : @@ -33,12 +36,9 @@ Voici un exemple d'implémentation de srcset avec descripteurs de densité dans alt="Une image d'exemple"> ``` - - Cet exemple de balisage comprend : - **src** : La source d'image par défaut, affichée si le navigateur ne prend pas en charge srcset. -- **srcset** : La liste des sources d'image et leurs descripteurs de densité (1x, 2x, 3x). Le navigateur choisira l'image la plus appropriée en fonction de l'affichage de l'utilisateur. +- **srcset** : La liste des sources d'image et de leurs descripteurs de densité (1x, 2x, 3x). Le navigateur choisira l'image la plus appropriée en fonction de l'écran de l'utilisateur. - **alt** : Une description de l'image à des fins d'accessibilité. - -Et voilà ! Vous avez implémenté avec succès srcset avec descripteurs de densité, améliorant les performances et l'expérience utilisateur de votre site Web. +Et voilà ! Vous avez réussi à implémenter srcset avec descripteurs de densité, améliorant les performances et l'expérience utilisateur de votre site web. diff --git a/src/content/docs/fr/introduction.md b/src/content/docs/fr/introduction.md index c65a76f..db39f54 100644 --- a/src/content/docs/fr/introduction.md +++ b/src/content/docs/fr/introduction.md @@ -1,22 +1,20 @@ --- -title: srcset et tailles d' -description: Un guide efficace et subjectif pour les images réactives en 2023 -taskInputHash: 2f3bd9fa4d308fbc +title: srcset & tailles d' +description: Un guide efficace et francophile des images adaptatives 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 francophile des 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 à jour ces balises `` pour gérer les appareils modernes dans toutes leurs tailles et densités de pixels variées. Vous devriez [savoir que les pixels ne sont pas égaux](/fr/pixels-ne-sont-pas-egaux) et que `devicePixelRatio` est plus susceptible d'être d'environ 3,875 que de 1:1. Les téléphones modernes prétendent être larges de 320 à 428 px pour la lisibilité (en pixels CSS), mais ont plusieurs 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. - -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. +> Si votre image ne change jamais de taille, peu importe à quel point vous réduisez la fenêtre du navigateur, vous devriez utiliser un [descripteur de densité](/fr/descripteurs-de-densite) à la place. C'est souvent approprié pour les logos, les icônes et les boutons. +Savez-vous quels sont vos [points de rupture](/fr/points-de-rupture) ? Vous aurez besoin de ces chiffres pour ajuster la solution ci-dessous - et au minimum, le point de rupture de la largeur du port d'affichage où la zone de contenu principal cesse de croître. ### La méthode facile @@ -29,12 +27,12 @@ Savez-vous ce que sont vos [points de rupture](/en/breakpoints)? Vous aurez beso img.jpg?format=webp&w=1600 1600w, img.jpg?format=webp&w=2000 2000w" - sizes="(max-width: 700px) 100vw, 800px" alt="Chien faisant de la bicyclette" /> + sizes="(max-width: 700px) 100vw, 800px" alt="Chien à vélo" /> + Et que sous cette largeur de port d'affichage, cette image prend 100% de la largeur, mais + lorsque le port d'affichage est plus grand, l'image est limitée à 800 pixels CSS --> - ``` diff --git a/src/content/docs/fr/lighthouse-performance-test.md b/src/content/docs/fr/lighthouse-performance-test.md index 9a772bf..25d683e 100644 --- a/src/content/docs/fr/lighthouse-performance-test.md +++ b/src/content/docs/fr/lighthouse-performance-test.md @@ -1,25 +1,24 @@ --- title: Tester les performances avec Lighthouse -description: Étapes pour tester les performances d'un site web en utilisant Lighthouse -taskInputHash: 8e6d39610c052ea3 +description: Les étapes pour tester les performances d'un site web en utilisant Lighthouse +taskInputHash: 41b20c3fed2f0d3d lang: fr -ignore: '/* cSpell:locale fr,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- Comment tester les performances de votre site avec Lighthouse? -> Lighthouse est un outil qui peut être utilisé pour mesurer les performances, l'accessibilité et d'autres aspects d'un site web. Pour tester les performances de votre site web avec Lighthouse, suivez ces étapes: -> -> 1\. Ouvrez le navigateur Web Google Chrome et accédez à la page que vous souhaitez tester. -> -> 2\. Cliquez sur les trois points en haut à droite de la fenêtre du navigateur, puis sélectionnez "Autres outils" et ensuite "Outils de développement" ou utilisez simplement le raccourci clavier "Ctrl+Shift+I" (Windows, Linux) ou "Command+Option+I" (macOS). -> -> 3\. Dans le panneau Outils de développement, cliquez sur l'icône Lighthouse située sur le côté gauche du panneau ou appuyez sur "Ctrl+Shift+P" (Windows, Linux) ou "Command+Shift+P" (macOS) pour ouvrir le menu Commandes, puis tapez "Lighthouse" et sélectionnez "Générer un rapport". -> -> 4\. Dans la boîte de dialogue Lighthouse, sélectionnez les options de performances et autres pertinentes que vous souhaitez tester, puis cliquez sur "Générer un rapport". -> -> 5\. Après que Lighthouse a terminé son analyse, vous verrez un rapport avec des scores et des recommandations pour améliorer les performances, l'accessibilité et d'autres domaines de votre site web. -> -> En suivant ces étapes, vous pouvez utiliser Lighthouse pour tester et optimiser les performances de votre site web, ce qui peut aider à améliorer son expérience utilisateur et son classement dans les moteurs de recherche. +>Lighthouse est un outil qui peut être utilisé pour mesurer les performances, l'accessibilité et d'autres aspects d'un site web. Pour tester les performances de votre site web avec Lighthouse, suivez ces étapes: +> +> 1\. Ouvrir le navigateur web Google Chrome et accéder à 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 à gauche du panneau ou appuyez sur "Ctrl+Shift+P" (Windows, Linux) ou "Command+Shift+P" (macOS) pour ouvrir le Menu de commande, puis tapez "Lighthouse" et sélectionnez « Générer un rapport ». +> +> 4\. Dans la boîte de dialogue Lighthouse, sélectionnez les options de performance et d'autres options pertinentes que vous souhaitez tester, puis cliquez sur "Générer un rapport". +> +> 5\. Après que Lighthouse ait terminé son analyse, vous verrez un rapport avec des scores et des recommandations pour améliorer les performances, l'accessibilité et d'autres domaines de votre site web. +> +> En suivant ces étapes, vous pouvez utiliser Lighthouse pour tester et optimiser les performances de votre site web, ce qui peut aider à améliorer l'expérience utilisateur et le classement des moteurs de recherche. diff --git a/src/content/docs/fr/picture-examples.md b/src/content/docs/fr/picture-examples.md index 5fe61a0..71587de 100644 --- a/src/content/docs/fr/picture-examples.md +++ b/src/content/docs/fr/picture-examples.md @@ -1,15 +1,15 @@ --- -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 + réactives, la direction artistique et les différents formats d'images +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 : @@ -21,7 +21,7 @@ Voici quelques exemples d'utilisation de l'élément `` avec leurs expl ``` -Explication : Dans cet exemple, l'élément `` est utilisé pour fournir différentes sources d'image pour différentes tailles d'écran. Les éléments `` spécifient les différentes sources d'image en utilisant l'attribut "srcset" et l'attribut "media" pour spécifier les conditions dans lesquelles chaque source doit être utilisée. L'élément `` est utilisé comme substitution pour les anciens navigateurs ou lorsque les conditions spécifiées dans les éléments `` ne sont pas remplies. +Explication : Dans cet exemple, l'élément `` est utilisé pour fournir différents sources d'images pour différentes tailles d'écran. Les éléments `` spécifient les différentes sources d'images en utilisant l'attribut "srcset" et l'attribut "média" 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 : @@ -33,9 +33,9 @@ Explication : Dans cet exemple, l'élément `` est utilisé pour fourni ``` -Explication : Dans cet exemple, l'élément `` est utilisé pour fournir différentes sources d'image en fonction de l'orientation de l'appareil. L'élément `` avec l'attribut "media" défini sur "(orientation: landscape)" spécifie une source d'image pour les écrans larges, tandis que l'élément `` spécifie une source d'image pour les écrans en portrait. +Explication : Dans cet exemple, l'élément `` est utilisé pour fournir différentes sources d'images en fonction de l'orientation de l'appareil. L'élément `` avec l'attribut "média" défini sur "(orientation: landscape)" spécifie une source d'image pour les grands écrans, tandis que l'élément `` spécifie une source d'image pour les écrans en mode portrait. -3\. Exemple pour différents formats d'image : +3\. Exemple pour les différents formats d'images : ```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'images pour différents formats d'images. Les éléments `` spécifient différentes sources d'images en utilisant l'attribut "srcset" et l'attribut "type" pour spécifier le format d'image. L'élément `` est utilisé comme solution de repli pour les navigateurs plus anciens qui ne supportent pas l'élément ``. ## Points de rupture -En design réactif, les points de rupture sont utilisés pour définir quand la mise en page d'un site web ou d'une application doit changer en fonction de la taille de la fenêtre d'affichage. Les points de rupture sont généralement définis à l'aide de requêtes média en CSS, qui appliquent différents styles en fonction de la largeur de l'écran. Ces points de rupture peuvent être utilisés en conjonction avec l'élément `` pour fournir différentes sources d'image pour différentes tailles d'écran. +En conception réactive, les points de rupture sont utilisés pour définir quand la mise en page d'un site web ou d'une application devrait changer en fonction de la taille de l'affichage. Les points de rupture sont généralement définis à l'aide de requêtes mé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'images pour différentes tailles d'écran. -Par exemple, dans le premier exemple ci-dessus, nous avons utilisé l'attribut `media` pour spécifier la largeur d'écran sous laquelle chaque source doit être utilisée. Lorsque la largeur d'écran est supérieure ou égale à 768 pixels, la source `image-large.jpg` sera utilisée ; lorsque la largeur d'écran est supérieure ou égale à 480 pixels mais inférieure à 768 pixels, la source `image-medium.jpg` sera utilisée ; et lorsque la largeur d'écran est inférieure à 480 pixels, la source `image-small.jpg` sera utilisée. Cela nous permet de fournir des images aux tailles appropriées pour chaque appareil, réduisant ainsi les temps de chargement des pages et améliorant l'expérience utilisateur. +Par exemple, dans le premier exemple ci-dessus, nous avons utilisé l'attribut `média` pour spécifier la largeur d'écran en dessous de 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 de taille appropriée pour chaque appareil, réduisant ainsi les temps de chargement de la page et améliorant l'expérience utilisateur. -Les points de rupture peuvent être définis à n'importe quelle taille d'écran, et plusieurs points de rupture peuvent être utilisés pour créer des mises en page qui répondent à un large éventail d'appareils. En combinant les points de rupture avec l'élément ``, vous pouvez créer des designs flexibles et réactifs qui sont superbes sur n'importe quel appareil. +Les points de rupture peuvent être définis à n'importe quelle taille d'écran, et plusieurs points de rupture peuvent être utilisés pour créer des mises en page qui répondent à une large gamme d'appareils. En combinant les points de rupture avec l'élément ``, vous pouvez créer des designs flexibles et réactifs qui donnent un excellent rendu 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..a5d5c21 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 +### Pixel des appareils ≠ Pixel de navigateur ≠ Pixel 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/HTML (`px`) **correspondent presque toujours à plusieurs pixels d'appareil/imprimante**. Le devicePixelRatio sur 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 change lors du zoom du navigateur, mais est par défaut de 1.5 (mon `Système > Affichage > Échelle` étant alors 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 d'images (SVG exclus) se découpent en une grille de pixels. **Il est frustrantement difficile de faire en sorte que les pixels d'image soient affichés parfaitement à un ratio de 1:1 avec les pixels de l'appareil, mais avec `srcset`, vous pouvez vous en approcher suffisamment**, et un peu de Javascript peut ajuster la taille de l'élément HTML après chargement si vous avez des raisons justifiées pour nécessiter cette correspondance parfaite, même si de telles pratiques interdites 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. +> D'autres unités absolues [in, pc, pt, mm, cm, Q](https://developer.mozilla.org/fr/docs/Web/CSS/longueur) sont définies en termes de nombre de pixels CSS et font semblant que tout est en 96ppp. 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/conteneur. Des unités incompatibles peuvent briser une disposition si l'utilisateur ajuste leur multiplicateur `Accessibilité > Taille de texte`, zoome dans le navigateur ou tourne leur appareil. Inutile de dire que vous devriez faire toutes ces choses avant de publier votre site. diff --git a/src/content/docs/fr/specify-width-height.md b/src/content/docs/fr/specify-width-height.md index e5da3af..9e5ced3 100644 --- a/src/content/docs/fr/specify-width-height.md +++ b/src/content/docs/fr/specify-width-height.md @@ -1,19 +1,18 @@ --- title: Utiliser la largeur et la hauteur description: >- - Avantages de l'utilisation des attributs de largeur et de hauteur dans le code - HTML -taskInputHash: b09c49dc5d3a4a2d + Les avantages de l'utilisation des attributs de largeur et de hauteur dans le + code HTML +taskInputHash: 710d960e0aef9b37 lang: fr -ignore: '/* cSpell:locale fr,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Pourquoi devriez-vous mettre la largeur et la hauteur dans le HTML ? +Pourquoi faut-il mettre la largeur et la hauteur dans le code 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. -> -> 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. -> -> 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. +> 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 soit entièrement chargée. Cela permet au navigateur de réserver l'espace approprié sur la page web pour l'image, ce qui empêche le contenu de sauter pendant que l'image se charge. +> +> De plus, la spécification des attributs de largeur et de hauteur pour les images peut également aider à améliorer les performances globales de la page web. Lorsqu'un navigateur connaît la taille d'une image à l'avance, il peut calculer avec plus de précision la quantité d'espace nécessaire pour afficher l'image, et éviter les reflows ou les repaints inutiles du contenu pendant que celui-ci se charge. +> +> Dans l'ensemble, l'utilisation des attributs de largeur et de hauteur dans le code HTML des images peut améliorer l'expérience utilisateur en rendant le contenu plus rapide à charger et en réduisant les problèmes visuels. diff --git a/src/content/docs/fr/when-to-use-picture.md b/src/content/docs/fr/when-to-use-picture.md index cac06f6..02a2010 100644 --- a/src/content/docs/fr/when-to-use-picture.md +++ b/src/content/docs/fr/when-to-use-picture.md @@ -1,22 +1,22 @@ --- 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 afficher en fonction de certaines conditions. Il est particulièrement utile pour optimiser les images pour différentes tailles d'écran et résolutions, et est couramment utilisé dans la conception de sites Web adaptatifs. -* **É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. +Voici quelques scénarios spécifiques où vous voudrez peut-être utiliser l'élément `picture`: -* **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. +* **É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 pixélisées si elles ne sont pas optimisées pour une haute résolution. Avec l'élément `picture`, vous pouvez fournir une version de l'image qui a deux fois plus de pixels que la version normale, de sorte qu'elle soit nette et claire sur les écrans Retina. -* **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. +* **Différents rapports d'aspect:** Si vous concevez un site qui doit afficher des images avec différents rapports d'aspect (comme paysage vs portrait), vous pouvez utiliser l'élément `picture` pour fournir différentes versions de l'image qui sont optimisées pour chaque rapport d'aspect. -* **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. +* **Limitations de bande passante:** Les images peuvent être des fichiers volumineux qui prennent beaucoup de bande passante, en particulier sur les appareils mobiles. Avec l'élément `picture`, vous pouvez fournir des versions plus petites de l'image pour les appareils avec des écrans plus petits ou des connexions Internet plus lentes, ce qui peut aider à réduire les temps de chargement des pages. -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. +* **Mises en page dirigées par l'art:** Parfois, vous voudrez peut-être présenter une image d'une certaine manière en fonction de la mise en page du reste de la page. Par exemple, vous voudrez peut-être montrer un gros plan du visage d'une personne sur les appareils mobiles, mais un plan plus large sur les 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 garantir qu'elles ont un aspect optimal quelle que soit l'appareil ou la taille d'écran sur lequel elles sont affichées. diff --git a/src/content/docs/fr/width-density.md b/src/content/docs/fr/width-density.md index 805d0c9..0b7bf1e 100644 --- a/src/content/docs/fr/width-density.md +++ b/src/content/docs/fr/width-density.md @@ -1,21 +1,21 @@ --- title: Descripteurs de largeur et de densité description: Exemples d'utilisation des descripteurs de largeur et de densité dans `srcset` -taskInputHash: 569fd1065931e1e0 +taskInputHash: d4db50f5267305d1 lang: fr -ignore: '/* cSpell:locale fr,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Comprendre les descripteurs de largeur (w) et de densité (x) dans `srcset`. Utiliser des exemples et utiliser Markdown. +Compréhension des descripteurs de largeur (w) et de densité (x) dans `srcset`. Utilisez des exemples et utilisez Markdown. + +> `srcset` est un attribut HTML qui permet aux développeurs de fournir plusieurs sources d'image avec différentes résolutions ou densités de pixels et de laisser le navigateur choisir l'image appropriée en fonction des caractéristiques d'affichage de l'appareil. L'attribut `srcset` utilise une combinaison des descripteurs `URL` et `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 ``` - - > Dans l'exemple ci-dessus, nous avons fourni au navigateur trois images et leurs largeurs correspondantes en pixels. Le navigateur sélectionnera l'image avec la largeur la plus proche de l'espace d'écran disponible. + ## Descripteur de densité (`x`) -> Le descripteur `x` est utilisé pour spécifier la densité de pixels d'une image, qui est le rapport des pixels physiques aux pixels CSS. Il est utilisé lorsque nous voulons fournir au navigateur différentes versions de la même image avec différentes densités de pixels. +> Le descripteur `x` est utilisé pour spécifier la densité de pixels d'une image, qui est le rapport de pixels physiques à pixels CSS. Il est utilisé lorsque nous voulons fournir au navigateur différentes versions de la même image avec des densités de pixels différentes. -> La syntaxe pour utiliser le descripteur `x` dans `srcset` est la suivante: +> La syntaxe pour utiliser le descripteur `x` dans `srcset` est la suivante : ```html Exemple d'image ``` - > Dans l'exemple ci-dessus, nous avons fourni au navigateur trois images et leurs densités de pixels correspondantes. Le navigateur 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 pour choisir. diff --git a/src/content/docs/it/_roundtrip_breakpoints.txt b/src/content/docs/it/_roundtrip_breakpoints.txt index e7fe41c..27a57af 100644 --- a/src/content/docs/it/_roundtrip_breakpoints.txt +++ b/src/content/docs/it/_roundtrip_breakpoints.txt @@ -1,42 +1,41 @@ --- title: Breakpoints and Images description: Why some (but not all) breakpoints matter for your images -taskInputHash: 7714cadfe55d82ca +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 +### Background -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 screens and large monitors need different layouts. To use `srcset` and `sizes`, we need to know at which point the layout changes. -Web developers need to decide what to shrink, hide, or move up on smaller screens - or more commonly, what to expand, reveal, or add on larger screens. They also have little information to go on. Is the user using a tablet or a smartphone in landscape mode - or a small browser window? +Web developers must decide what to shrink, hide, or move on smaller screens - or more commonly what to expand, reveal, and add on larger screens. Furthermore, they have very little information to go by. Is the user on a tablet or a phone in landscape mode - or a small browser window? -We need to choose an arbitrary viewport width at which the layout change occurs. This is called a **breakpoint**. It is an arbitrary CSS pixel value ([not device pixels](/en/pixels-not-pixels)). Polypane has a [great article](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023) on commonly used breakpoints. +We need to choose an arbitrary viewport width at which the layout changes. This is called a **breakpoint**. It's an arbitrary number in CSS pixels ([not device pixels](https://en.wikipedia.org/wiki/CSS_pixel)). Polypane has a [great article](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023) on commonly used breakpoints. -Some images (like logos, icons, or buttons) might be immune to layout changes caused by these breakpoints (and will do fine with [srcset density descriptors](/en/density-descriptors)). +Some images (like logos, icons, or buttons) might be immune to layout shifts caused by these breakpoints (and do well with [density descriptors in `srcset`](https://web.dev/set-src-natively/#density-descriptors-in-srcset)). -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 a page's main content area will be constrained to a specific width on larger screens, a `max-width`, but on smaller screens, the main content area will take up the entire viewport. -If you have more than one column at certain breakpoints, it becomes harder to calculate 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 some breakpoints, it will become harder to calculate the actual resizing rules, as the percentage of viewport width that the image occupies will change. -### The Easy Way +### The easy way -That being said, you don't need to overthink it. You'll probably be just fine with the following approximation: +That being said, don't overthink this. You'll probably be okay with the following approximation: -1. At what point does the main column (or image container) stop growing? Up to that viewport width, we can use `100vw` for the image's `sizes` attribute to indicate that the image takes up the full viewport width. -2. What is the maximum width the container reaches? We can set that fixed width for everything else. +1. At what size does the main column (or image container) stop growing? Up 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 can reach? We can set that as a fixed width for everything else. -If your answer to point 1 was 700px and the answer to point 2 was 800px, you can use the following `sizes` attribute: +If the answer to #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 that the browser could handle all these calculations elegantly for us based on the CSS. Unfortunately, browsers are aggressively eager to choose an image URL *before* stylesheets are downloaded. So, we need to do the calculations ourselves, and if we don't get them perfect, that's okay. ===================== Content 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..be595c2 100644 --- a/src/content/docs/it/_roundtrip_browser-picks-srcset.txt +++ b/src/content/docs/it/_roundtrip_browser-picks-srcset.txt @@ -1,28 +1,31 @@ --- -title: How the browser chooses -description: How the browser chooses among the images listed in the srcset attribute -taskInputHash: 5f305bd3a8d992cf +title: How the Browser Chooses +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 are the steps, with examples for both width and density specifications, and how the browser selects 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 provided list of sources. These rules depend on the display characteristics of the device (resolution, pixel density) and the viewport size. The `srcset` attribute allows specifying different images based on width (using the `w` descriptor) or pixel density (using the `x` descriptor). Let's go over each case with examples. -1\. Width descriptor (`w`): +1. Width Descriptor (`w`): -Suppose we have the following `srcset` attribute: +Assume we have the following `srcset` attribute: ```html -Example image +Example Image ``` -The browser 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 effective width for each image in the `srcset`. Multiply the width descriptor by the DPR. For a device with a DPR of 1: - example-small.jpg: 400 * 1 = 400px @@ -30,23 +33,23 @@ b. Calculate the effective width for each image in `srcset`. Multiply the width - example-large.jpg: 1600 * 1 = 1600px -c. Compare the effective widths with the viewport width. Suppose the viewport width is 420px. The browser will select the smallest image with an effective width greater than or equal to the viewport width. In this case, it will select `example-medium.jpg`. +c. Compare the effective widths with the viewport width. Assume 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`. -1\. Pixel density descriptor (`x`): +2. Pixel Density Descriptor (`x`): -Suppose we have the following `srcset` attribute: +Assume we have the following `srcset` attribute: ```html -Example image +Example Image ``` -The browser 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 that is closest to the device DPR. For a device with a DPR of 1, the browser will select `example-1x.jpg`. For a device with a DPR of 2, it will select `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 the `sizes` attribute can also be used in combination with the `srcset` attribute to provide further information on how the image will be displayed at different viewport widths. This is particularly useful when using the width descriptor (`w`). Here is an example: ```html @@ -75,7 +78,7 @@ Also carefully translate the title and description for the article; do not use & 1. How the browser chooses 2. How the browser chooses between images listed in the srcset attribute -Metadata returned1. Come sceglie il browser +Metadata returned1. Come il browser sceglie 2. Come il browser sceglie tra le immagini elencate nell'attributo srcset diff --git a/src/content/docs/it/_roundtrip_density-descriptors.txt b/src/content/docs/it/_roundtrip_density-descriptors.txt index 85b40cf..48f493f 100644 --- a/src/content/docs/it/_roundtrip_density-descriptors.txt +++ b/src/content/docs/it/_roundtrip_density-descriptors.txt @@ -1,35 +1,32 @@ --- -title: Density descriptors & srcset +title: Density descriptors and srcset description: Examples of using density descriptors in `srcset` -taskInputHash: cf54e3343feb0a22 +taskInputHash: 8a445e12ba15aba8 lang: en -ignore: '/* cSpell:locale it,en*/' -date_published: '2023-03-26' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Srcset with density descriptors provides a simple and effective method to provide the image that fits the user's device best, improving performance and user experience. This guide will take you through the essentials of using srcset with density descriptors and provide markup examples for your convenience. +Srcset with density descriptors provides a simple and effective way to deliver 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. -## What is Srcset with density descriptors? +## What is Srcset with Density Descriptors? -Srcset is an HTML attribute designed to allow specifying multiple image sources for a single `` element. Density descriptors (`x`) are used together with srcset to provide images at different resolutions based on the pixel density of the user's display. +Srcset is an HTML attribute designed to allow you to specify multiple image sources for a single `` element. Density descriptors (`x`) are used in conjunction with srcset to provide images at different resolutions based on the pixel density of the user's display. -## When to use Srcset with density descriptors +## When to Use Srcset with Density Descriptors Using srcset with density descriptors is particularly useful when you want to: +1. Serve high-resolution images to high-DPI displays (e.g. Retina displays), while also delivering low-resolution images to standard displays. +2. Improve page performance by delivering the most appropriate size image for the user's device. -1. Provide high-resolution images to high DPI displays (such as Retina displays) while providing lower resolution images to standard displays. -2. Improve page performance by providing the most appropriate images for each user's device. - -## Implementing Srcset with density descriptors +## Implementing Srcset with Density Descriptors To use srcset with density descriptors, follow these steps: - -1. Prepare images at different resolutions. +1. Prepare your images in different resolutions. 2. Add the `srcset` attribute to the `` element, including the image sources and corresponding density descriptors. -3. Add the `sizes` attribute (optional) to specify image dimensions as it will be displayed on the screen. +3. Add the `sizes` attribute (optional) to specify the size of the image as it will appear on the screen. -### Example Markup +### Markup Example Here's an example of how to implement srcset with density descriptors in your markup: @@ -40,12 +37,11 @@ Here's an example of how to implement srcset with density descriptors in your ma ``` This example markup includes: +- **src**: The default image source to be displayed if the browser doesn't support srcset. +- **srcset**: The list of image sources and their density descriptors (1x, 2x, 3x). The browser will choose the most appropriate image based on the user's display. +- **alt**: A description of the image for accessibility purposes. -- **src**: the default image source, shown if the browser doesn't support srcset. -- **srcset**: the list of image sources and their corresponding density descriptors (1x, 2x, 3x). The browser will choose the most appropriate image based on the user's display. -- **alt**: an image description for accessibility purposes. - -And that's it! You have successfully implemented srcset with density descriptors, improving your website's performance and user experience. +And that's it! You have successfully implemented srcset with density descriptors, improving the performance and user experience of your website. ===================== Content prompt used: @@ -58,8 +54,8 @@ Also carefully translate the title and description for the article; do not use & 1. Density descriptors & srcset 2. Examples of using density descriptors in `srcset` -Metadata returned1. Descrittori di densità & srcset -2. Esempi di utilizzo di descrittori di densità in `srcset` +Metadata returned1. Descrittori di densità e srcset +2. Esempi di utilizzo dei descrittori di densità in `srcset` Roundtrip (isolated) prompt used: diff --git a/src/content/docs/it/_roundtrip_introduction.txt b/src/content/docs/it/_roundtrip_introduction.txt index 2a4967d..3efcfcb 100644 --- a/src/content/docs/it/_roundtrip_introduction.txt +++ b/src/content/docs/it/_roundtrip_introduction.txt @@ -1,43 +1,36 @@ --- -title: srcset and tag dimensions -description: An Efficient and Opinionated Guide to Responsive Images for 2023 -taskInputHash: 770938b4f7895424 +title: srcset and sizes +description: An efficient and 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** -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 guide. This is a quick reference for updating `` tags to adapt to modern devices with their various dimensions and pixel densities. You should [know that pixels != pixels](/en/pixels-are-not-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 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 images never change size, no matter how much you resize the browser window, you should use a [density descriptor](/en/density-descriptor). 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 your [breakpoints](/en/breakpoints)? You'll need these numbers to fine-tune the solution below - and as a minimum to know the width of the viewport where the main content area stops growing. ### The Easy Way ```html +A dog riding a bicycle - - sizes="(max-width: 700px) 100vw, 800px" alt="Dog riding a bicycle" /> - - - - + ``` -{{This seems to be a correctly translated technical documentation with no grammar or clumsy phrasing mistakes.}} ===================== Content prompt used: @@ -50,8 +43,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 ed 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..a1d7b66 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 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 your website's performance with Lighthouse? -> Lighthouse is a tool that can be used to measure website performance, accessibility, and other aspects. To test your website performance with Lighthouse, follow these steps: +> Lighthouse is a tool that can be used to measure 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. +> 1. Open the Google Chrome web browser and navigate to the page that you want to test. > -> 2. Click on the three dots in the upper right corner of the browser window, then select "More Tools" and then "Developer Tools" or use the keyboard shortcut "Ctrl+Shift+I" (Windows, Linux) or "Command+Option+I" (macOS). +> 2. Click on the three dots in the top right-hand corner of the browser window, then select "More Tools" and then "Developer Tools" or simply use the keyboard shortcut "Ctrl+Shift+I" (Windows, Linux) or "Command+Option+I" (macOS). > -> 3. In the Developer Tools panel, click on the Lighthouse icon on the left side of the panel or press "Ctrl+Shift+P" (Windows, Linux) or "Command+Shift+P" (macOS) to open the Command menu, then type "Lighthouse" and select "Generate report." +> 3. In the Developer Tools window, click on the Lighthouse icon located on the left-hand side of the window or press "Ctrl+Shift+P" (Windows, Linux) or "Command+Shift+P" (macOS) to open the Command Menu, then type "Lighthouse" and select "Generate report". > -> 4. In the Lighthouse dialog box, select the performance and other relevant options you want to test, then click "Generate report." +> 4. In the Lighthouse dialog box, select the performance and other relevant options that you want to test, then click "Generate report". > -> 5. After Lighthouse completes its analysis, you will see a report with scores and recommendations to improve performance, accessibility, and other areas of your website. +> 5. After Lighthouse has completed its analysis, you will see a report with scores and recommendations for improving the performance, accessibility, and other aspects of your website. > -> By following these steps, you can use Lighthouse to test and optimize the performance of your website, which can help improve user experience and search engine ranking. +> By following these steps, you can use Lighthouse to test and optimize your website's performance, which can 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 della performance con Lighthouse +2. I passaggi su come testare la performance di un sito web utilizzando Lighthouse Roundtrip (isolated) prompt used: diff --git a/src/content/docs/it/_roundtrip_picture-examples.txt b/src/content/docs/it/_roundtrip_picture-examples.txt index 397769f..fe32903 100644 --- a/src/content/docs/it/_roundtrip_picture-examples.txt +++ b/src/content/docs/it/_roundtrip_picture-examples.txt @@ -1,10 +1,12 @@ --- -title: Examples of Using the Element +title: Examples using the element description: >- - Provides examples of using the element for responsive images, - art direction, and different image formats. -taskInputHash: 23abfd2c45089cf6 + Provides examples using the element for responsive images, art direction, and different image formats +taskInputHash: 8949b4f455087356 lang: en +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- Here are some examples of using the `` element and their explanations: @@ -18,7 +20,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 `` 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 depending on screen size. The `` elements specify the different image sources using the "srcset" attribute and the "media" attribute to specify the conditions under which each image 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: @@ -30,7 +32,7 @@ Explanation: In this example, the `` element is used to provide differe ``` -Explanation: In this example, the `` element is used to provide different image sources depending on the orientation of the device. The `` element with the "media" attribute set to "(orientation: landscape)" specifies an image source for wide screens, while the `` element specifies an image source for vertical screens. +Explanation: In this example, the `` element is used to provide different image sources depending on the device's orientation. The `` element with the "media" attribute set to "(orientation: landscape)" specifies an image source for wide screens, while the `` element specifies an image source for screens in portrait mode. 3. Example for different image formats: @@ -44,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 depending on the image format. The `` elements specify different image sources using the "srcset" attribute and the "type" attribute to specify the image format. The `` element is used as a fallback for older browsers that do not support the `` element. ## Breakpoints -In responsive design, breakpoints are used to define when the layout of a website or application should change based on the size of the viewport. Breakpoints are typically defined 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 a website or application's layout should change based on viewport size. Breakpoints are typically defined using media queries in CSS, which apply different styles based on screen width. These breakpoints can be used in combination with the `` element to provide different image sources based on screen size. -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 screen width for which each source is used. When the screen width is greater than or equal to 768 pixels, the `image-large.jpg` source is used; when the screen width is greater than or equal to 480 pixels but less than 768 pixels, the `image-medium.jpg` source is used; and when the screen width is less than 480 pixels, the `image-small.jpg` source is used. This allows us to 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 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, you can create flexible and responsive designs that look great on any device. ===================== Content prompt used: @@ -65,8 +67,8 @@ Also carefully translate the title and description for the article; do not use & 1. Examples using element 2. Provides examples using the element, for responsive images, art direction and different image formats -Metadata returned1. Esempi di utilizzo dell'elemento -2. Fornisce esempi di utilizzo dell'elemento per immagini responsive, direzione artistica e diversi formati di immagine. +Metadata returned1. Esempi usando l'elemento +2. Fornisce esempi utilizzando l'elemento , per le immagini responsive, la direzione artistica e i diversi formati di immagine Roundtrip (isolated) prompt used: diff --git a/src/content/docs/it/_roundtrip_pixels-not-pixels.txt b/src/content/docs/it/_roundtrip_pixels-not-pixels.txt index 3d40d5b..59989c2 100644 --- a/src/content/docs/it/_roundtrip_pixels-not-pixels.txt +++ b/src/content/docs/it/_roundtrip_pixels-not-pixels.txt @@ -1,25 +1,22 @@ --- title: px ≠ pixel -description: Device pixels ≠ browser pixels ≠ image pixels -taskInputHash: 9e3d515b23db4c50 +description: Device pixels ≠ browser px ≠ image px +taskInputHash: 30d633a4ce310a0f lang: en -ignore: '/* cSpell:locale it,en*/' sidebar_sort_priority: 900 -date_published: '2023-03-26' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -### Device pixels ≠ browser pixels ≠ image pixels +### Device pixels ≠ browser px ≠ image px -Thanks to Apple, CSS and HTML pixels (`px`) **almost always correspond to more device/printer pixels**. My phone's devicePixelRatio is 3.875; [what's yours?](https://www.mydevice.io/) +Thanks to Apple, CSS and HTML pixels (`px`) **almost always correspond to more device/printer pixels**. My 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 `devicePixelRatio` changes with the browser zoom, but by default it's 1.5 (my `System > Display > Scale` is set to 150%, after all). -Image files (excluding SVGs) decode a grid of pixels. **It's annoyingly difficult to display image pixels perfectly 1:1 with device pixels, but with the `srcset` attribute, you can come close enough**, and some JavaScript can adjust the size of the HTML element after loading if you have a really good reason to need that perfect correspondence, although such forbidden tricks won't be revealed here. +Image files (excluding SVG) decode to a pixel grid. **It's annoyingly difficult to get a perfect display of image pixels at a 1:1 ratio with device pixels, but with `srcset` you can get pretty close**, and a bit of JavaScript can adjust the html element size after loading if you need that perfect correspondence for serious reasons, although such dark arts will not be revealed here. -> Other absolute units [in, pc, pt, mm, cm, Q](https://developer.mozilla.org/en-US/docs/Web/CSS/length) are defined based on the number of CSS pixels and pretend that everything is at 96dpi. Developers avoid absolute units because it's generally better to use units that are derived from font or viewport/container sizes. Discordant units can break a layout if the user adjusts their `Accessibility > Text Size` multiplier, enlarges the browser, or rotates the device. Needless to say, you should do all these things before publishing your site. - -{{Note that the term used here is not the technical term...}}. +> Other absolute units (`in`, `pc`, `pt`, `mm`, `cm`, `Q`) are defined in terms of the number of CSS pixels and pretend everything is 96dpi. Developers avoid absolute units because it's usually better to use units derived from the font size or from the viewport/container size. Unmatched units may 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. ===================== Content prompt used: diff --git a/src/content/docs/it/_roundtrip_specify-width-height.txt b/src/content/docs/it/_roundtrip_specify-width-height.txt index a9eb002..bfdd48c 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 +title: Use Width and Height Attributes description: Benefits of using width and height attributes in HTML code -taskInputHash: 34a145dde0e451eb +taskInputHash: 2c99c7f88c7255ed lang: en -ignore: '/* cSpell:locale it,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Why should you include width and height in HTML? +Why should you include width and height in your 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. +> It is recommended to include the width and height attributes in the HTML code of 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 amount of space on the web page for the image, preventing content from jumping around during image 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. +> Additionally, specifying width and height attributes for images can also contribute to overall web page performance. When a browser knows the dimensions of an image in advance, it can more accurately calculate the amount of space needed to display it and avoid unnecessary content reflows during 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. +> In general, using width and height attributes in HTML code for images can improve the user experience, speeding up content loading and reducing visual anomalies. ===================== 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. Utilizza larghezza e altezza -2. Vantaggi dell'utilizzo degli attributi di larghezza e altezza nel codice HTML + 2. Benefici dell'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..a276fd0 100644 --- a/src/content/docs/it/_roundtrip_when-to-use-picture.txt +++ b/src/content/docs/it/_roundtrip_when-to-use-picture.txt @@ -1,24 +1,25 @@ --- title: When to Use the Element -description: Explains in which scenarios the element should be used -taskInputHash: 583a9afd2e45d56a +description: Explains when 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 it determines which version of the image to display based on certain conditions. It's particularly useful for optimizing images for different screen sizes and resolutions, and it's commonly used in responsive web design. -* **Retina Display:** High-density screens like Apple's Retina display have a higher pixel density, which means that images can appear blurry or pixelated if they are not optimized for high resolution. With the `picture` element, you can provide a version of the image that has twice the pixels of the normal version so that it appears sharp and clear on Retina displays. +Here are some specific scenarios in which you might want to use the `picture` element: -* **Different Proportions:** If you're designing a site that needs to display images with different proportions (such as landscape vs portrait), you can use the `picture` element to provide different versions of the image optimized for each proportion. +* **Retina Displays:** High-density displays like Apple's Retina displays have a higher pixel density, which means that images can appear blurry or pixelated if they're 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. + +* **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 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 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. -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. +Overall, the `picture` element is a powerful tool that can help optimize images for a variety of use cases and ensure they look beautiful no matter what device or screen size they're viewed 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 utilizzare l'elemento Roundtrip (isolated) prompt used: diff --git a/src/content/docs/it/_roundtrip_width-density.txt b/src/content/docs/it/_roundtrip_width-density.txt index 10692ac..2a87df1 100644 --- a/src/content/docs/it/_roundtrip_width-density.txt +++ b/src/content/docs/it/_roundtrip_width-density.txt @@ -1,20 +1,19 @@ --- title: Width and Density Descriptors description: Examples of using width and density descriptors in `srcset` -taskInputHash: ea49fc07cb749a51 +taskInputHash: b4c91fed1ce98c24 lang: en -ignore: '/* cSpell:locale it,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Understanding Width (`w`) and Density (`x`) Descriptors in `srcset`. Use examples and Markdown. +Understanding 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 enable the browser to select the appropriate image based on the characteristics of the device display. The `srcset` attribute uses a combination of `URL` and `w` or `x` descriptors to specify the images. +> `srcset` is an HTML attribute that allows developers to provide multiple image sources with different resolutions or pixel densities and allow the browser to select the appropriate image based on the characteristics of the device display. The `srcset` attribute uses a combination of `URL`s and `w` or `x` descriptions to specify images. ## Width Descriptor (`w`) -> The `w` descriptor is used to specify the width of an image in pixels. It is used when we want to provide the browser with the size of an image so that it can choose the appropriate image for the available space on the screen. +> The `w` descriptor is used to specify the width of an image in pixels. It is used when we want to provide the browser with the dimensions of an image so it can choose the appropriate image for the available space on the screen. > The syntax for using the `w` descriptor in `srcset` is as follows: @@ -26,7 +25,7 @@ Understanding Width (`w`) and Density (`x`) Descriptors in `srcset`. Use example alt="Example image"> ``` -> In the example above, we have provided the browser with three images and their corresponding widths in pixels. The browser will select the image with the width closest to the available space on the screen. +> In the example above, we provided the browser with three images and their respective widths in pixels. The browser will select the image with the width closest to the available space on the screen. ## Density Descriptor (`x`) @@ -42,7 +41,7 @@ Understanding Width (`w`) and Density (`x`) Descriptors in `srcset`. Use example alt="Example image"> ``` -> In the example above, we have provided the browser with three images and their corresponding pixel densities. The browser will select the image with the pixel density closest to the device screen. +> In the example above, we 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. ===================== diff --git a/src/content/docs/it/breakpoints.md b/src/content/docs/it/breakpoints.md index 39943b9..a437f59 100644 --- a/src/content/docs/it/breakpoints.md +++ b/src/content/docs/it/breakpoints.md @@ -1,41 +1,38 @@ --- title: Breakpoint e immagini description: Perché alcuni (ma non tutti) i breakpoint sono importanti per le tue immagini -taskInputHash: 7714cadfe55d82ca +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 +### Sfondo -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 monitor hanno bisogno di layout differenti. Per l'utilizzo di `srcset` e `sizes`, dobbiamo sapere a quale punto il layout cambia. -I web developer devono decidere cosa ridurre, nascondere o spostare su schermi più piccoli - o più comunemente, cosa espandere, rivelare o aggiungere su schermi più grandi. Inoltre hanno poche informazioni a disposizione. L'utente sta utilizzando un tablet o uno smartphone in modalità landscape - o una finestra di browser piccola? +I web developer devono decidere cosa restringere, nascondere o spostare sugli schermi più piccoli - o più comunemente cosa espandere, rivelare e aggiungere sui schermi più grandi. Inoltre, hanno pochissime informazioni per procedere. L'utente si trova su un tablet o su un telefono in modalità landscape - o una piccola finestra del browser? -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 si chiama **breakpoint**. È un numero arbitrario in pixel CSS ([non pixel del dispositivo](/it/pixel-non-pixel)). Polypane ha un [ottimo articolo](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023) sui breakpoint 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 loghi, icone o pulsanti) potrebbero essere immuni alle spostamenti del layout causati da questi breakpoint (e essere buoni con i [descrittori di densità srcset](/it/density-descriptors)). -Le immagini del contenuto principale saranno limitate dalle dimensioni del loro contenitore. In genere, l'area del contenuto principale di una pagina sarà limitata a una determinata larghezza sui più grandi schermi, una `max-width`, ma su schermi più piccoli l'area del contenuto principale riempirà l'intero viewport. +Le immagini di contenuto principale saranno limitate dalla dimensione del loro contenitore. Tipicamente l'area di contenuto principale di una pagina sarà limitata ad una larghezza specifica sui maggiori schermi, una `max-width`, ma sui piccoli schermi, l'area di contenuto principale coprirà 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 su alcuni breakpoint, diventerà più difficile calcolare le regole di ridimensionamento effettive, poiché la percentuale di larghezza del viewport che l'immagine occupa cambierà. ### Il metodo facile -Detto questo, non bisogna sovrapensare. Probabilmente sarete molto OK con la seguente approssimazione: +Detto questo, non fare troppi pensieri su questo. Probabilmente andrà tutto bene con la seguente approssimazione: -1. A che dimensione la colonna principale (o il contenitore dell'immagine) smette di crescere? Fino a quella larghezza di viewport, possiamo utilizzare `100vw` per l'attributo `sizes` dell'immagine per indicare che l'immagine occupa il 100% della larghezza del viewport. -2. Qual è la larghezza massima che il contenitore raggiunge? Possiamo impostare quella larghezza fissa per tutto il resto. +1. A quale dimensioni smette di crescere la colonna principale (o del 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 che il contenitore può raggiungere? Possiamo impostare quella come una 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 al punto 1 è 700px e la risposta al punto 2 è 800px, puoi utilizzare il seguente attributo `sizes`: ```html ``` - - -> Potreste pensare che il browser potrebbe gestire tutte queste elaborazioni per noi basandosi sul CSS. Sfortunatamente, i browser sono aggressivamente desiderosi di scegliere un URL dell'immagine *prima* che i fogli di stile vengano scaricati. Quindi dobbiamo fare i calcoli da soli, e farà loro comodo se non riusciamo a farlo perfettamente. +> Potresti pensare che il browser potrebbe gestire tutti questi calcoli in modo elegante per noi in base al 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 perfetti è giusto così. diff --git a/src/content/docs/it/browser-picks-srcset.md b/src/content/docs/it/browser-picks-srcset.md index fba5b78..6d5569a 100644 --- a/src/content/docs/it/browser-picks-srcset.md +++ b/src/content/docs/it/browser-picks-srcset.md @@ -1,16 +1,15 @@ --- -title: Come sceglie il browser +title: Come il browser sceglie description: Come il browser sceglie tra le immagini elencate nell'attributo srcset -taskInputHash: 0eb976f059b10502 +taskInputHash: 9d76226efed7cd73 lang: it -ignore: '/* cSpell:locale it,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Come sceglie il browser tra le immagini elencate nell'attributo srcset? Ecco una procedura dettagliata, con esempi sia per le specifiche di larghezza che di densità e come il browser decide in base al dispositivo e alla viewport. +Come fa il browser a scegliere tra le immagini elencate nell'attributo srcset? Ecco i passaggi, con esempi sia per le specifiche di larghezza che di densità e come il browser sceglie in base al dispositivo e alla viewport. -- Quando si utilizza l'attributo `srcset` in HTML, il browser utilizza un insieme di regole per scegliere l'immagine più appropriata da un elenco di fonti fornite. Queste regole dipendono dalle caratteristiche dello schermo del dispositivo (risoluzione, densità dei pixel) e dalle dimensioni della viewport. L'attributo `srcset` consente di specificare diverse immagini in base alla larghezza (utilizzando il descrittore `w`) o alla densità dei pixel (utilizzando il descrittore `x`). Vediamo ogni caso con degli esempi. +- Quando si utilizza l'attributo `srcset` in HTML, il browser utilizza un insieme di regole per scegliere l'immagine più appropriata da un elenco di fonti fornite. Queste regole dipendono dalle caratteristiche di visualizzazione del dispositivo (risoluzione, densità di pixel) e dalla dimensione della viewport. L'attributo `srcset` consente di specificare diverse immagini in base alla larghezza (utilizzando il descrittore `w`) o alla densità di pixel (utilizzando il descrittore `x`). Analizziamo ogni caso con esempi. 1\. Descrittore di larghezza (`w`): @@ -18,7 +17,7 @@ Supponiamo di avere il seguente attributo `srcset`: ```html -Example Image +Immagine di esempio ``` @@ -26,23 +25,23 @@ Il browser seguirà questi passaggi: a. Determinare il DPR (Device Pixel Ratio) del dispositivo. Ad esempio, un display standard ha un DPR di 1, mentre un display ad alta risoluzione (Retina) ha un DPR di 2 o superiore. -b. Calcolare la larghezza efficace per ogni immagine nella `srcset`. Moltiplicare il descrittore di larghezza per il DPR. Per un dispositivo con un DPR di 1: +b. Calcolare la larghezza effettiva per ciascuna immagine nell'`srcset`. Moltiplicare il descrittore di larghezza per il DPR. Per un dispositivo con un DPR di 1: -- example-small.jpg: 400 \* 1 = 400px +- esempio-piccolo.jpg: 400 \* 1 = 400px -- example-medium.jpg: 800 \* 1 = 800px +- esempio-medio.jpg: 800 \* 1 = 800px -- example-large.jpg: 1600 \* 1 = 1600px +- esempio-grande.jpg: 1600 \* 1 = 1600px -c. Confrontare le larghezze efficaci con la larghezza viewport. Supponiamo che la larghezza viewport sia di 420px. Il browser sceglierà l'immagine più piccola con larghezza efficace maggiore o uguale alla larghezza viewport. In questo caso, selezionerà `example-medium.jpg`. +c. Confrontare le larghezze effettive con la larghezza della viewport. Supponiamo che la larghezza della viewport sia 420px. Il browser sceglierà l'immagine più piccola con una larghezza effettiva maggiore o uguale alla larghezza della viewport. In questo caso, selezionerà `esempio-medio.jpg`. -2\. Descrittore di densità dei pixel (`x`): +2\. Descrittore di densità di pixel (`x`): Supponiamo di avere il seguente attributo `srcset`: ```html -Example Image +Immagine di esempio ``` @@ -50,20 +49,20 @@ Il browser seguirà questi passaggi: a. Determinare il DPR (Device Pixel Ratio) del dispositivo. Ad esempio, un display standard ha un DPR di 1, mentre un display ad alta risoluzione (Retina) ha un DPR di 2 o superiore. -b. Confrontare il DPR del dispositivo con i descrittori `x` presenti nella `srcset`. In questo caso, abbiamo tre immagini con i seguenti descrittori: +b. Confrontare il DPR del dispositivo con i descrittori `x` nell'`srcset`. In questo caso, abbiamo tre immagini con i seguenti descrittori: -- example-1x.jpg: 1x +- esempio-1x.jpg: 1x -- example-2x.jpg: 2x +- esempio-2x.jpg: 2x -- example-3x.jpg: 3x +- esempio-3x.jpg: 3x -c. Scegliere l'immagine con il descrittore `x` più vicino al DPR del dispositivo. Per un dispositivo con un DPR di 1, il browser selezionerà `example-1x.jpg`. Per un dispositivo con un DPR di 2, sceglierà `example-2x.jpg`, e così via. +c. Scegliere l'immagine con il descrittore `x` che è più vicino al DPR del dispositivo. Per un dispositivo con un DPR di 1, il browser selezionerà `esempio-1x.jpg`. Per un dispositivo con un DPR di 2, sceglierà `esempio-2x.jpg`, e così via. -È importante notare che è possibile utilizzare anche l'attributo `sizes` in combinazione con l'attributo `srcset` per fornire ulteriori informazioni su come l'immagine verrà visualizzata su diverse larghezze viewport. Questo è particolarmente utile quando si utilizza il descrittore di larghezza (`w`). Ecco un esempio: +È importante notare che è possibile utilizzare anche l'attributo `sizes` in combinazione con l'attributo `srcset` per fornire ulteriori informazioni su come l'immagine verrà visualizzata a diverse larghezze della viewport. Questo è particolarmente utile quando si utilizza il descrittore di larghezza (`w`). Ecco un esempio: ```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. -- **alt**: una descrizione dell'immagine per scopi di accessibilità. +Questa esempio di markup include: +- **src**: La sorgente dell'immagine predefinita, visualizzata se il browser non supporta srcset. +- **srcset**: L'elenco delle sorgenti delle immagini e dei suoi descrittori di densità (1x, 2x, 3x). Il browser sceglierà l'immagine più appropriata in base al display dell'utente. +- **alt**: Una descrizione dell'immagine per scopi di accessibilità. -E questo è tutto! Hai implementato con successo srcset con descrittori di densità, migliorando le prestazioni del tuo sito web e l'esperienza dell'utente. +E questo è tutto! Hai implementato con successo srcset con descrittori di densità, migliorando le prestazioni e l'esperienza utente del tuo sito web. diff --git a/src/content/docs/it/introduction.md b/src/content/docs/it/introduction.md index 0de941c..ccab1d1 100644 --- a/src/content/docs/it/introduction.md +++ b/src/content/docs/it/introduction.md @@ -1,39 +1,36 @@ --- -title: srcset e le dimensioni delle tag -description: Una Guida Efficient and Opinionated alle Immagini Responsive per il 2023 -taskInputHash: 770938b4f7895424 +title: srcset e dimensioni +description: Una guida efficiente ed 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 ed opinabile alle immagini per il 2023** -Controlla la sidebar per un'analisi approfondita. Questa è una rapida panoramica per l'aggiornamento dei tag `` per gestire i dispositivi moderni delle varie dimensioni e densità di pixel. Devi [sapere che i pixel non sono uguali](/it/pixels-not-pixels) e che il `devicePixelRatio` tende a essere verso 3,875 piuttosto che 1:1. I telefoni moderni fingono di essere larghi da 320-428px per la leggibilità (in pixel CSS), ma hanno molti pixel del dispositivo per ogni pixel CSS. +Controlla la barra laterale per la guida dettagliata. Questa è una rapida referenza per l'aggiornamento dei tag `` per adattarsi ai moderni device con le loro varie dimensioni e densità di pixel. Dovresti [saper che i pixel != i pixel](/it/pixel-non-sono-pixel) e `devicePixelRatio` è più probabile essere sui 3,875 che 1:1. I telefoni moderni si fingono larghi 320-428px per maggiore leggibilità (in pixel CSS), ma hanno molti pixel per pixel CSS. -> Se la tua immagine non cambia mai dimensione, indipendentemente da quanto è stretta la finestra del browser, dovresti usare un [descrittore di densità](/it/density-descriptors). Questo è spesso adatto per loghi, icone e pulsanti. +> Se le tue immagini non cambiano mai di dimensioni, indipendentemente da quante volte stringi la finestra del browser, dovresti utilizzare un [descrittore di densità](/it/descrittore-di-densita). Questo è spesso adatto per loghi, icone e pulsanti. + +Sai quali sono i tuoi [punti di interruzione](/it/punti-di-interruzione)? Avrai bisogno di queste cifre per perfezionare la soluzione sottostante - e come minimo per conoscere la larghezza del viewport dove l'area del contenuto principale smette di crescere. -Sai qual è il tuo [breakpoint](/it/breakpoints)? Avrai bisogno di quei numeri per affinare la soluzione qui sotto - e almeno il breakpoint della larghezza del viewport in cui l'area del contenuto principale smette di crescere. ### Il metodo facile ```html -Cane che cavalca una bicicletta + 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..e3c334b 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 della performance con Lighthouse +description: >- + I passaggi su come testare la performance di un sito web utilizzando + Lighthouse +taskInputHash: 4f7942b4139a285a lang: it -ignore: '/* cSpell:locale it,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- Come si testa la performance del tuo sito con Lighthouse? > Lighthouse è uno strumento che può essere utilizzato per misurare la performance, l'accessibilità e altri aspetti di un sito web. Per testare la performance del tuo sito web con Lighthouse, segui questi passaggi: > -> 1\. Apri il browser web Google Chrome e vai alla pagina che desideri testare. +> 1\. Apri il browser web Google Chrome e naviga nella pagina che vuoi 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). +> 2\. Fai clic sui tre puntini in alto a destra della finestra del browser, quindi seleziona "Altri strumenti" e poi "Strumenti per sviluppatori" o semplicemente utilizza la scorciatoia da tastiera "Ctrl+Shift+I" (Windows, Linux) o "Command+Option+I" (macOS). > -> 3\. Nel riquadro degli Strumenti per sviluppatori, fai clic sull'icona di Lighthouse situata sul lato sinistro del riquadro o premi "Ctrl+Shift+P" (Windows, Linux) o "Command+Shift+P" (macOS) per aprire il menu Comandi, quindi digita "Lighthouse" e seleziona "Genera rapporto". +> 3\. Nella finestra degli Strumenti per sviluppatori, fai clic sull'icona Lighthouse situata sul lato sinistro della finestra o premi "Ctrl+Shift+P" (Windows, Linux) o "Command+Shift+P" (macOS) per aprire il menu dei Comandi, quindi digita "Lighthouse" e seleziona "Genera rapporto". > -> 4\. Nella finestra di dialogo di Lighthouse, seleziona le opzioni di performance e altre pertinenti che desideri testare, quindi fai clic su "Genera rapporto". +> 4\. Nella finestra di dialogo Lighthouse, seleziona le opzioni di performance e altre opzioni pertinenti che desideri testare, quindi fai clic su "Genera rapporto". > -> 5\. Dopo che Lighthouse ha completato la sua analisi, vedrai un rapporto con punteggi e raccomandazioni per migliorare la performance, l'accessibilità e altre aree del tuo sito web. +> 5\. Dopo che Lighthouse ha completato la sua analisi, vedrai un rapporto con punteggi e raccomandazioni per migliorare la performance, l'accessibilità ed altri aspetti del tuo sito web. > -> Seguendo questi passaggi, puoi utilizzare Lighthouse per testare e ottimizzare la performance del tuo sito web, il che può contribuire a migliorare l'esperienza degli utenti e il posizionamento sui motori di ricerca. +> Seguendo questi passaggi, puoi utilizzare Lighthouse per testare ed ottimizzare la performance del tuo sito web, il che può contribuire a migliorare l'esperienza dell'utente e il posizionamento sui motori di ricerca. diff --git a/src/content/docs/it/picture-examples.md b/src/content/docs/it/picture-examples.md index f33fbe9..a860c4f 100644 --- a/src/content/docs/it/picture-examples.md +++ b/src/content/docs/it/picture-examples.md @@ -1,18 +1,17 @@ --- -title: Esempi di utilizzo dell'elemento +title: Esempi usando l'elemento description: >- - Fornisce esempi di utilizzo dell'elemento , per immagini responsive, - direzione artistica e diversi formati di immagine -taskInputHash: 1eedb92f6cc7cb3e + Fornisce esempi utilizzando l'elemento , per le immagini responsive, + la direzione artistica e i diversi formati di immagine +taskInputHash: 8949b4f455087356 lang: it -ignore: '/* cSpell:locale it,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Ecco alcuni esempi di utilizzo dell'elemento `` e le loro spiegazioni: +Ecco alcuni esempi sull'utilizzo dell'elemento `` e le loro spiegazioni: -1. Esempio per immagini responsive: +1\. Esempio per le immagini responsive: ```html @@ -22,9 +21,9 @@ Ecco alcuni esempi di utilizzo dell'elemento `` e le loro spiegazioni: ``` -Spiegazione: In questo esempio, l'elemento `` viene utilizzato per fornire diverse fonti di immagini per diverse dimensioni dello schermo. Gli elementi `` specificano le diverse fonti di immagini utilizzando l'attributo "srcset" e l'attributo "media" per specificare le condizioni in cui ciascuna fonte dovrebbe essere utilizzata. L'elemento `` viene utilizzato come fallback per i browser più vecchi o quando le condizioni specificate negli elementi `` non vengono soddisfatte. +Spiegazione: In questo esempio, l'elemento `` viene utilizzato per fornire diverse fonti di immagini a seconda delle dimensioni dello schermo. Gli elementi `` specificano le diverse fonti d'immagine utilizzando l'attributo "srcset" e l'attributo "media" per specificare le condizioni in base alle quali ogni fonte d'immagine dovrebbe essere utilizzata. L'elemento `` viene utilizzato come fallback per i browser più vecchi o quando non vengono soddisfatte le condizioni specificate negli elementi ``. -2. Esempio per la direzione artistica: +2\. Esempio per la direzione artistica: ```html @@ -34,9 +33,9 @@ Spiegazione: In questo esempio, l'elemento `` viene utilizzato per forn ``` -Spiegazione: In questo esempio, l'elemento `` viene utilizzato per fornire diverse fonti di immagini a seconda dell'orientamento del dispositivo. L'elemento `` con l'attributo "media" impostato su "(orientation: landscape)" specifica una fonte di immagine per schermi larghi, mentre l'elemento `` specifica una fonte di immagine per schermi verticali. +Spiegazione: In questo esempio, l'elemento `` viene utilizzato per fornire diverse fonti d'immagine a seconda dell'orientamento del dispositivo. L'elemento `` con l'attributo "media" impostato su "(orientation: landscape)" specifica una fonte d'immagine per schermi ampi, mentre l'elemento `` specifica una fonte d'immagine per schermi in modalità ritratto. -3. Esempio per diversi formati di immagine: +3\. Esempio per diversi formati di immagine: ```html @@ -48,12 +47,12 @@ Spiegazione: In questo esempio, l'elemento `` viene utilizzato per forn ``` -Spiegazione: In questo esempio, l'elemento `` viene utilizzato per fornire diverse fonti di immagini per diversi formati di immagine. Gli elementi `` specificano diverse fonti di immagini utilizzando l'attributo "srcset" e l'attributo "type" per specificare il formato dell'immagine. L'elemento `` viene utilizzato come fallback per i browser più vecchi che non supportano l'elemento ``. +Spiegazione: In questo esempio, l'elemento `` viene utilizzato per fornire diverse fonti d'immagine a seconda del formato dell'immagine. Gli elementi `` specificano diverse fonti d'immagine utilizzando l'attributo "srcset" e l'attributo "type" per specificare il formato dell'immagine. L'elemento `` viene utilizzato come fallback per i browser più vecchi che non supportano l'elemento ``. -## Punti di interruzione +## Breakpoints -Nel design responsive, i punti di interruzione vengono utilizzati per definire quando il layout di un sito web o di un'applicazione dovrebbe cambiare in base alle dimensioni del viewport. I punti di interruzione vengono tipicamente definiti utilizzando media queries in CSS, che applicano stili diversi a seconda della larghezza dello schermo. Questi punti di interruzione possono essere utilizzati in combinazione con l'elemento `` per fornire diverse fonti di immagini per diverse dimensioni dello schermo. +Nel design responsivo, i breakpoints vengono utilizzati per definire quando il layout di un sito web o di un'applicazione dovrebbe cambiare in base alle dimensioni del viewport. I breakpoints vengono tipicamente definiti utilizzando media queries in CSS, che applicano stili diversi in base alla larghezza dello schermo. Questi breakpoints possono essere utilizzati in combinazione con l'elemento `` per fornire diverse fonti d'immagine a seconda delle dimensioni dello schermo. -Ad esempio, nel primo esempio sopra, abbiamo utilizzato l'attributo `media` per specificare la larghezza dello schermo in base alla quale utilizzare ciascuna fonte. Quando la larghezza dello schermo è maggiore o uguale a 768 pixel, verrà utilizzata la fonte "image-large.jpg"; quando la larghezza dello schermo è maggiore o uguale a 480 pixel ma inferiore a 768 pixel, verrà utilizzata la fonte "image-medium.jpg"; e quando la larghezza dello schermo è inferiore a 480 pixel, verrà utilizzata la fonte "image-small.jpg". Questo ci consente di servire immagini delle dimensioni appropriate per ogni dispositivo, riducendo i tempi di caricamento delle pagine e migliorando l'esperienza dell'utente. +Ad esempio, nel primo esempio sopra, abbiamo utilizzato l'attributo `media` per specificare la larghezza dello schermo in base alla quale viene utilizzata ogni fonte. Quando la larghezza dello schermo è maggiore o uguale a 768 pixel, viene utilizzata la fonte `image-large.jpg`; quando la larghezza dello schermo è maggiore o uguale a 480 pixel ma inferiore a 768 pixel, viene utilizzata la fonte `image-medium.jpg`; e quando la larghezza dello schermo è inferiore a 480 pixel, viene utilizzata la fonte `image-small.jpg`. Ciò ci consente di fornire immagini di dimensioni adeguate per ogni dispositivo, riducendo i tempi di caricamento della pagina e migliorando l'esperienza dell'utente. -I punti di interruzione possono essere definiti a qualsiasi dimensione dello schermo e possono essere utilizzati più punti di interruzione per creare layout che rispondono a una vasta gamma di dispositivi. Combina i punti di interruzione con l'elemento ``, puoi creare design flessibili e reattivi che hanno un bell'aspetto su qualsiasi dispositivo. +I breakpoints possono essere definiti per qualsiasi dimensione dello schermo, e possono essere utilizzati più breakpoints per creare layout che rispondano a una vasta gamma di dispositivi. Combinando i breakpoints con l'elemento ``, è possibile creare design flessibili e responsivi che appaiono ottimamente 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..3f21d22 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 +### Device pixels ≠ browser px ≠ image px -Grazie ad Apple, i pixel CSS e HTML (`px`) **quasi sempre corrispondono a più pixel del dispositivo/stampante**. Il devicePixelRatio del mio telefono è di 3,875; [qual è il tuo?](https://www.mydevice.io/it/) +Grazie ad Apple, i pixel CSS e HTML (`px`) **quasi sempre corrispondono a più pixel del dispositivo/stampante**. Il devicePixelRatio del mio telefono è 3.875; [qual è il tuo?](https://www.mydevice.io/) -Il devicePixelRatio del mio desktop cambia allo zoom del browser, ma di default è di 1,5 (la mia `System > Display > Scale` è al 150%, dopotutto). +Il mio devicePixelRatio per desktop cambia con lo zoom del browser, ma di default è 1.5 (il mio `System > Display > Scale` è al 150%, dopotutto). -I file di immagine (escludendo gli SVG) decodificano una griglia di pixel. **È fastidiosamente difficile ottenere la visualizzazione dei pixel dell'immagine perfettamente a un rapporto 1:1 con i pixel del dispositivo - ma con l'attributo `srcset` puoi avvicinarti abbastanza**, e un po' di Javascript può regolare la dimensione dell'elemento HTML dopo il caricamento se hai motivi davvero giustificati per necessitare di quella corrispondenza perfetta, anche se tali arti proibite non saranno svelate qui. +I file di immagine (escludendo SVG) vengono decodificati in una griglia di pixel. **È fastidiosamente difficile ottenere una visualizzazione perfetta dei pixel dell'immagine in rapporto 1:1 con i pixel del dispositivo, ma con `srcset` puoi avvicinarti abbastanza**, e un po' di Javascript può regolare le dimensioni dell'elemento html dopo il caricamento se hai bisogno di quella corrispondenza perfetta per motivi seri, anche se tali arti proibiti non verranno rivelati qui. -> Altre unità assolute [in, pc, pt, mm, cm, Q](https://developer.mozilla.org/it/docs/Web/CSS/length) sono definite in base al numero di pixel CSS e fingono che tutto sia a 96dpi. Gli sviluppatori evitano le unità assolute perché in genere è meglio utilizzare unità che derivano dalle dimensioni del carattere o del viewport/contenitore. Unità discordanti possono rompere un layout se l'utente regola il loro moltiplicatore `Accessibility > Text Size`, ingrandisce il browser o ruota il dispositivo. Inutile dire che dovresti fare tutte queste cose prima di pubblicare il tuo sito. +> Altre unità assolute (in, pc, pt, mm, cm, Q) sono definite in termini di numero di pixel CSS e fingono che tutto sia 96dpi. Gli sviluppatori evitano le unità assolute perché di solito è meglio usare unità derivate dalla dimensione del carattere o dalle dimensioni del viewport/contenitore. Unità non corrispondenti possono rompere un layout se l'utente regola il loro moltiplicatore `Accessibility > Text Size`, esegue lo zoom del browser o ruota il proprio dispositivo. Inutile dire che dovresti fare tutte queste cose prima di lanciare il tuo sito. diff --git a/src/content/docs/it/specify-width-height.md b/src/content/docs/it/specify-width-height.md index 1d94fdd..5c1a91d 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 +description: Benefici dell'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. +> Si consiglia di inserire gli attributi di larghezza e altezza nel codice HTML delle immagini poiché ciò aiuta il browser web a conoscere la dimensione dell'immagine prima che venga completamente caricata. Ciò consente al browser di riservare l'appropriata quantità di spazio sulla pagina web per l'immagine, evitando che il contenuto saltelli durante il caricamento dell'immagine. > -> Inoltre, specificare gli attributi di larghezza e altezza per le immagini può anche contribuire a migliorare le prestazioni complessive della pagina web. Quando un browser conosce le dimensioni di un'immagine in anticipo, può calcolare più accuratamente la quantità di spazio necessaria per visualizzare l'immagine evitando riorganizzazioni o ripaints inutili del contenuto mentre viene caricata. +> Inoltre, specificare gli attributi di larghezza e altezza per le immagini può anche contribuire a migliorare le prestazioni complessive della pagina web. Quando un browser conosce in anticipo la dimensione di un'immagine, può calcolare con maggiore precisione la quantità di spazio necessaria per visualizzarla ed evitare ricalcoli o rimodellamenti inutili del contenuto durante il caricamento. > -> Complessivamente, l'utilizzo degli attributi di larghezza e altezza nel codice HTML delle immagini può migliorare l'esperienza utente facendo caricare più velocemente il contenuto e riducendo gli sfarfallii visivi. +> In generale, l'utilizzo degli attributi di larghezza e altezza nel codice HTML per le immagini può migliorare l'esperienza dell'utente, accelerando il caricamento dei contenuti e riducendo le anomalie 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..3308512 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 utilizzare l'elemento +taskInputHash: a2c5811d41d489da lang: it -ignore: '/* cSpell:locale it,en*/' -date_published: '2023-03-27' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -L'elemento `picture` viene utilizzato per fornire più versioni di un'immagine e determina quale versione dell'immagine visualizzare in base a determinate condizioni. È particolarmente utile per ottimizzare le immagini per diverse dimensioni e risoluzioni dello schermo ed è comunemente usato nel web design responsive. +L'elemento `picture` viene utilizzato per fornire più versioni di un'immagine, e determina quale versione dell'immagine visualizzare in base a determinate condizioni. È particolarmente utile per ottimizzare le immagini per diverse dimensioni e risoluzioni dello schermo, ed è comunemente utilizzato nell'ambito del responsive web design. Ecco alcuni scenari specifici in cui potresti voler utilizzare l'elemento `picture`: -* **Display Retina:** gli schermi ad alta densità come i display Retina di Apple hanno una densità di pixel maggiore, il che significa che le immagini possono sembrare sfocate o pixelate se non sono ottimizzate per l'alta risoluzione. Con l'elemento `picture`, è possibile fornire una versione dell'immagine che ha il doppio dei pixel della versione normale, in modo che appaia nitida e chiara sui display Retina. +* **Schermi Retina:** Gli schermi ad alta densità come quelli Retina di Apple hanno una maggiore densità di pixel, 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 risulti 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 d'aspetto:** Se si sta progettando un sito che deve visualizzare immagini con diversi rapporti d'aspetto (come paesaggio contro ritratto), è possibile utilizzare l'elemento `picture` per fornire diverse versioni dell'immagine ottimizzate per ciascun rapporto d'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 della larghezza di banda:** Le immagini possono essere grandi file che occupano molta larghezza di banda, specialmente su dispositivi mobili. Con l'elemento `picture`, è possibile fornire versioni più piccole dell'immagine per i 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 diretti artisticamente:** A volte si può 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 volto di una persona sui dispositivi mobili, ma uno più ampio sui dispositivi desktop. L'elemento `picture` consente di fornire diverse versioni dell'immagine ottimizzate per layout diversi. -Complessivamente, l'elemento `picture` è uno strumento potente che può aiutare a ottimizzare le immagini per una varietà di casi d'uso e garantire che appaiano fantastici su qualsiasi dispositivo o dimensione dello schermo su cui vengono visualizzati. +Complessivamente, l'elemento `picture` è uno strumento potente che può aiutare a ottimizzare le immagini per una varietà di casi d'uso e garantire che appaiano belle indipendentemente dal dispositivo o dalle dimensioni 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..35c41fb 100644 --- a/src/content/docs/it/width-density.md +++ b/src/content/docs/it/width-density.md @@ -1,16 +1,16 @@ --- title: Descrittori di larghezza e densità description: Esempi di utilizzo dei descrittori di larghezza e densità in `srcset` -taskInputHash: ea49fc07cb749a51 +taskInputHash: b4c91fed1ce98c24 lang: it -ignore: '/* cSpell:locale it,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Capire i descrittori di larghezza (w) e densità (x) in `srcset`. Usare esempi e usare Markdown. +Comprensione dei descrittori di larghezza (w) e densità (x) in `srcset`. Utilizzare esempi e Markdown. + +> `srcset` è un attributo HTML che consente agli sviluppatori di fornire più fonti 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 descrizioni `w` o `x` per specificare le immagini. -> `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`) > 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. @@ -22,12 +22,11 @@ Capire i descrittori di larghezza (w) e densità (x) in `srcset`. Usare esempi e srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" - alt="Esempio immagine"> + alt="Immagine di esempio"> ``` +> Nell'esempio sopra, abbiamo fornito al browser tre immagini e le relative larghezze in pixel. Il browser selezionerà l'immagine con la larghezza più vicina allo spazio disponibile sullo schermo. - -> 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. @@ -39,10 +38,9 @@ Capire i descrittori di larghezza (w) e densità (x) in `srcset`. Usare esempi e srcset="small.jpg 1x, medium.jpg 2x, large.jpg 3x" - alt="Esempio immagine"> + alt="Immagine di esempio"> ``` +> Nell'esempio sopra, abbiamo fornito al browser tre immagini e le relative densità di pixel. Il browser selezionerà l'immagine con la densità di pixel più vicina allo schermo del dispositivo. -> 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. +> Nota che i descrittori `w` e `x` possono essere utilizzati insieme nello stesso attributo `srcset` per fornire al browser più opzioni tra cui scegliere. diff --git a/src/content/docs/ja/_roundtrip_breakpoints.txt b/src/content/docs/ja/_roundtrip_breakpoints.txt index 588b9bd..e767d89 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 some (not all) breakpoints matter for 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. +Small screens and large monitors require different layouts. To achieve the aims of `srcset` and `sizes`, it's necessary to know the points at which layouts will 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 reposition on a small screen, or conversely what to enlarge, reveal, or add on a large one. And there's very little information about where they're headed. Are users on a tablet, landscape phone, or small browser window? -You need to choose any viewport width at which the layout changes. This is called a **breakpoint**. It's any number of CSS pixels (not device pixels) and Polypane has a great article on [common breakpoints](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023). +You need to choose any viewport width where the layout is changed. This is called a **breakpoint**. It's 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. -Some images (such as logos, icons, buttons, etc.) are immune to layout changes caused by these breakpoints, and there are no issues with density descriptors in `srcset`. +Some images (logos, icons, buttons, and so on) may be immune to layout shifts caused by these breakpoints ([srcset density descriptors](/en/density-descriptors) are well-suited to this task). -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. +Main content images, on the other hand, are affected by the container's size constraints. Typically, the main content area of a page is defined as `max-width` on the largest screen but fills the viewport on small screens. -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. +When there are multiple columns at some breakpoints, it's harder to calculate effective size rules because the percentage of the viewport width that images occupy changes. -### A Simple Way +### Approach -So don't make this too complicated. You can probably get a very reasonable answer with the following approximations. +Don't overthink this. Use the following approximations and you'll probably be fine. -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. Where does the main column (or image container) change size? Until that viewport width, use `100vw` in the image's `sizes` attribute to indicate that it occupies 100% of viewport width. +2. What is the maximum width that the container achieves? You can set it as the fixed `width` for all other elements. -If the answer to #1 is 700px and the answer to #2 is 800px, you can use the following `sizes` attribute: +If the answer to 1 is 700px and the answer to 2 is 800px, you can use the following `sizes` attribute: ```html - + ``` - - -> You may think that the browser can calculate it because it selects the image URL before it downloads the CSS. Unfortunately, web browsers select the image URL first, so we have to calculate it ourselves. It doesn't have to be perfect, though. +> You might think that browsers can handle all these calculations neatly based on CSS. Unfortunately, browsers tend to actively choose the URL of an image *before* its style sheets are downloaded, so we need to calculate it ourselves. But if we're not perfect, it's still helping. ===================== 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..482546b 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 Choose Images from srcset Attributes +description: Explaining how browsers pick images from list of images declared 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 browsers decide which image to choose from a list of images declared in the 'srcset' attribute? We will explain how browsers decide based on both the width and density descriptors and provide step-by-step 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 uses a set of rules to select the most appropriate image from the provided list of sources. These rules depend on both the device's display characteristics (resolution, pixel density) and the viewport size. The 'srcset' attribute allows you to specify different images based on width (`w`) or pixel density (`x`). Let's take a look at examples of both. -1. Width descriptor (`w`): +1. Width Descriptors (`w`): -Assume we have the following `srcset` attribute: +Assume that we have the following 'srcset' attribute: ```html + Example Image + ``` -The browser follows these steps: -a. Determine the device's DPR (Device Pixel Ratio). For example, the standard display has a DPR of 1, and high-resolution (Retina) displays have a DPR of 2 or more. +The browser follows these steps: + +a. Determine the device's DPR (device pixel ratio). For example, 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` 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' attribute. Multiply the width descriptor by the DPR. For a device with a DPR of 1: - example-small.jpg: 400 * 1 = 400px - - example-medium.jpg: 800 * 1 = 800px - - example-large.jpg: 1600 * 1 = 1600px -c. Compare 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 each image's width effect to the viewport width. Assuming a viewport width of 420px, the browser selects the smallest image with a width effect greater than or equal to the viewport width. In this case, the browser selects `example-medium.jpg`. -2. Density descriptor (`x`): +2. Density Descriptors (`x`): -Assume we have the following `srcset` attribute: +Assume that we have the following 'srcset' attribute: ```html + Example Image + ``` The browser follows these steps: -a. Determine the device's DPR (Device Pixel Ratio). For example, the standard display has a DPR of 1, and high-resolution (Retina) displays have a DPR of 2 or more. +a. Determine the device's DPR (device pixel ratio). For example, a standard display has a DPR of 1, while a high-resolution (Retina) display has 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 each `x` descriptor in the 'srcset' attribute with 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. Choose the image with the closest `x` descriptor 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, the browser 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: +It's important to note that when using width descriptors (`w`), you can also use the 'sizes' attribute in combination with the 'srcset' attribute to provide more detailed information about how the images should be displayed at different viewport widths. Here's an example: ```html + ` element, where density descriptors (`x`) are used in conjunction with srcset to provide images with different resolutions based on a user's display pixel density. +## What is Srcset with density descriptors? -## When to Use Srcset with Density Descriptors? +Srcset is an HTML attribute designed to specify multiple image sources for a single `` element. Density descriptors (`x`) are used in combination with Srcset to provide images with different resolutions based on the pixel density of the user’s display. -Srcset with density descriptors is especially useful when: +## When to use density descriptors -1. Providing high-resolution images to high-DPI displays (e.g., Retina displays) while providing low-resolution images to standard displays. -2. Providing each user's device with the optimal image size to improve page performance. +Using Srcset with density descriptors is particularly useful when: -## Implementation of Srcset with Density Descriptors +1. Providing high-resolution images to high-DPI displays like Retina displays, while providing low-resolution images to standard displays. + +2. Improving page performance by providing the optimal image size for each user’s device. + +## Implementing Srcset with density descriptors To use Srcset with density descriptors, follow these steps: -1. Prepare the images at different resolutions. -2. Add the `srcset` attribute to the `` element and include the image source and corresponding density descriptors. -3. If specifying the size of the displayed image, add an optional `sizes` attribute. +1. Prepare images in different resolutions. + +2. Add `srcset` attribute to `` element including the image sources and corresponding density descriptors. + +3. Add the `sizes` attribute (optional) to specify the size of the image displayed on the screen. ### Markup Example -The following is an example of how to implement Srcset with density descriptors using markup: +The following is an example of how to implement Srcset with density descriptors in markup. ```html An example image ``` -This markup example includes the following: +This markup example includes: -- **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. +- **src**: Default image source displayed if the browser does not support Srcset. +- **srcset**: List of image sources and their density descriptors (1x, 2x, 3x). The browser selects the best image based on the user's display. +- **alt**: 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've successfully implemented Srcset with density descriptors and improved the performance and user experience of your site. ===================== Content prompt used: @@ -56,8 +60,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..aea59d1 100644 --- a/src/content/docs/ja/_roundtrip_introduction.txt +++ b/src/content/docs/ja/_roundtrip_introduction.txt @@ -1,43 +1,51 @@ --- -title: '`srcset` and `sizes` for ``' -description: An Efficient and Subjective Guide to Responsive Images in 2023 -taskInputHash: fb587f981b4441f1 +title: srcset and size +description: Efficient and subjective guide to responsive images for 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 Subjective Guide to Images for 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. -> 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. +For a deep dive, check out the sidebar. This is a quick reference for upgrading the `` tag to accommodate modern a variety of sizes and pixel densities. It's important to know that [pixels are not equal](/en/pixels-not-pixels) and that `devicePixelRatio` may be as high as 3.875 compared to 1:1. While modern phones tend to be 320-428 pixels wide for visibility (in CSS pixels), they have many device pixels per CSS pixel. -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. -### The Easy Solution +> For images that don't change size no matter how narrow a browser window gets, use [density descriptors](/en/density-descriptors) instead. This is especially suited for logos, icons, and buttons. + + +Do you know your [breakpoints](/en/breakpoints)? You'll need those numbers at minimum—the viewport width breakpoint at which your main content area stops growing—to fine-tune this solution. + +### Easy Solution ```html A dog riding a bike. - - - - + srcset="img.jpg?format=webp&w=480 480w, + img.jpg?format=webp&w=800 800w, + img.jpg?format=webp&w=1200 1200w, + img.jpg?format=webp&w=1600 1600w, + img.jpg?format=webp&w=2000 2000w" + sizes="(max-width: 700px) 100vw, 800px" + alt="Dog riding bike"/> + + + + ``` -{{The translation is complete and accurate.}} +{{Note that the term used here is not the technical term for "pixes per inch." The technical term for the density of a display is "pixel density" or "pixels per inch."}} + +Mistakes/Issues: + +- Line 11: "a variety of sizes": the original text uses "modern" before "a variety of sizes". +- Some parts of the original text weren't very clear, like the explanation of what a breakpoint is, so some guessing was involved. +- There was no text in the original file about PPI or pixel density being the technical term. ===================== Content prompt used: @@ -50,8 +58,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..2431332 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: How to Test Performance Using Lighthouse +description: Steps to test website performance using Lighthouse +taskInputHash: 514590b0de96e45f lang: en -ignore: '/* cSpell:locale ja,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -# How to test website performance with Lighthouse +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 that can be used to measure a website's performance, accessibility, and other aspects. To test a website's performance using Lighthouse, follow the steps below. -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 upper right corner of the browser window and select "More tools", "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 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 or other relevant 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. After Lighthouse completes the analysis, it shows the score and recommendations for improving the website's performance, accessibility, and other areas. -By following these steps, you can use `Lighthouse` to test and optimize website performance, improve user experience, and increase search engine rankings. +>By following these steps, you can test and optimize website performance using Lighthouse, which can improve user experience and search engine rankings. ===================== Content prompt used: @@ -35,7 +34,7 @@ Also carefully translate the title and description for the article; do not use & 1. Test performance with Lighthouse 2. Steps on how to test a website's performance using Lighthouse -Metadata returned1. Lighthouseによるパフォーマンスのテスト +Metadata returned1. Lighthouseを使用してパフォーマンスをテストする 2. Lighthouseを使用してウェブサイトのパフォーマンスをテストする手順 diff --git a/src/content/docs/ja/_roundtrip_picture-examples.txt b/src/content/docs/ja/_roundtrip_picture-examples.txt index 3656078..38c09bb 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: Provides examples of 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 explanations 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. +Explanation: This example uses the `` element to provide different image sources for different screen sizes. The `` element, using the "srcset" and "media" attributes, specifies the conditions under which each source is used, while the `` element is used as 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. +Explanation: This example uses the `` element to provide different image sources depending on the orientation of the device. The `` element with the "media" attribute set to "(orientation: landscape)" specifies the image source for widescreen devices, while the `` element specifies the image source for portrait screens. -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. +Explanation: This example uses the `` element to provide different image sources for different image formats. The `` element uses the "srcset" and "type" attributes to specify the different image formats and sources. The `` element is used as 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 the conditions under which the layout of a website or application changes based on the size of the viewport. Breakpoints are usually 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. -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 pixels 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, reducing page load times and improving the user experience. -Breakpoints can be defined for any screen size and using multiple breakpoints can create layouts for a wide variety of devices. By combining breakpoints with the `` element, responsive and flexible designs with great visual appearance can be created on any device. +Breakpoints can be defined for any screen size, and multiple breakpoints can be used to create layouts that are specific to different devices. By combining the `` element with breakpoints, you can create a great, flexible responsive design that works on any device. ===================== Content prompt used: @@ -60,8 +66,8 @@ Also carefully translate the title and description for the article; do not use & 1. Examples using element 2. Provides examples using the element, for responsive images, art direction and different image formats -Metadata returned1. `` 要素を使用する例 -2. レスポンシブイメージ、アートディレクション、異なる画像形式に対して、 `` 要素を使用するための例を提供します。 +Metadata returned1. 要素を使用した例 +2. 要素を使用した、レスポンシブイメージ、アートディレクション、異なる画像フォーマットに対する例を提供する Roundtrip (isolated) prompt used: diff --git a/src/content/docs/ja/_roundtrip_pixels-not-pixels.txt b/src/content/docs/ja/_roundtrip_pixels-not-pixels.txt index 3786304..52da911 100644 --- a/src/content/docs/ja/_roundtrip_pixels-not-pixels.txt +++ b/src/content/docs/ja/_roundtrip_pixels-not-pixels.txt @@ -1,23 +1,27 @@ --- -title: px ≠ Pixel -description: Device px ≠ Browser px ≠ Image px -taskInputHash: 73be94d33f113c9c +title: px ≠ Pixels +description: |- + Device Pixels ≠ Browser Pixels ≠ Image Pixels + + (Title and description do not contain any HTML elements.) +taskInputHash: c3c114c4cc3f772b lang: en -ignore: '/* cSpell:locale ja,en*/' sidebar_sort_priority: 900 -date_published: '2023-03-26' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -### Device pixels ≠ Browser pixels ≠ Image pixels +### Device Pixels ≠ Browser 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. [Check yours](https://www.mydevice.io/). -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/) +The devicePixelRatio of my desktop varies depending on the zoom of the browser, but the default is 1.5 (my `System > Display > Scale` is set to 150%). -The `devicePixelRatio` of a desktop varies with browser zoom, but defaults to 1.5 (mine is upped to 150% under `System > Display > Scale`). +Image files (excluding SVG) are decoded into a pixel grid. **It is very difficult to display image pixels perfectly in a 1:1 ratio with device pixels, but it can be achieved quite closely with `srcset`. If perfect mapping is necessary, the size of html elements can be adjusted using a bit of JavaScript after loading, but the forbidden technique will not be revealed here.** -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. +> Other absolute units (in, pc, pt, mm, cm, Q) are defined assuming the number of CSS pixels and all are at 96dpi. Developers generally avoid absolute units because it is better to use units derived from font size or viewport/container dimensions. Inconsistent units may cause the layout to break if the user adjusts the magnification of `Accessibility > Text Size`, zooms in/out of the browser or rotates the device. Needless to say, all of these should be done before shipping your site. -> 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. +{{Note that the term used here is not the technical term "pixel density," but rather "devicePixelRatio." Also, the phrase "a bit of" in "adjust using a bit of JavaScript" could be rephrased to be more precise, like "a small amount of" or "a few lines of."}} ===================== Content prompt used: @@ -31,7 +35,9 @@ 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. デバイスのピクセル ≠ ブラウザのピクセル ≠ 画像のピクセル + +(Title and description do not contain any HTML elements.) 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..5be8bc0 100644 --- a/src/content/docs/ja/_roundtrip_specify-width-height.txt +++ b/src/content/docs/ja/_roundtrip_specify-width-height.txt @@ -1,20 +1,10 @@ ---- -title: Using Width and Height -description: The benefits of using the width and height attributes in HTML code -taskInputHash: 8d1d8f5ead1a1b70 -lang: en -ignore: '/* cSpell:locale ja,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' ---- -Why is it necessary to specify width and height in HTML code? - -> 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. +Using Width and Height in HTML + +> It is recommended to include the width and height attributes for images in HTML code. This is because the web browser can 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 web page and prevent content from jumping when the image is loaded. +> +> Additionally, specifying the width and height of an image can also improve the performance of the entire web page. Knowing the size of the image in advance allows the browser to more accurately calculate the space required to display the image, and avoid unnecessary re-layout and repaint when the content is loaded. +> +> Overall, using the width and height attributes in HTML code for images can speed up content loading and improve the user experience by reducing visual issues. ===================== Content prompt used: @@ -27,8 +17,8 @@ Also carefully translate the title and description for the article; do not use & 1. Use width and height 2. Benefits of using width and height attributes in HTML code -Metadata returned1. 幅と高さの使用 -2. HTMLコードで幅と高さ属性を使用するメリット +Metadata returned1. 幅と高さを使用する +2. HTMLコードで幅と高さの属性を使用することの利点 Roundtrip (isolated) prompt used: diff --git a/src/content/docs/ja/_roundtrip_when-to-use-picture.txt b/src/content/docs/ja/_roundtrip_when-to-use-picture.txt index e9853cf..4df880a 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: Explains when 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 determine which version to display based on specific conditions. This 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. +The following are specific scenarios where you should 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 such as Apple's Retina display have a high pixel density and may display images as blurry or pixelated if not optimized for high resolution. With the `picture` element, you can provide a version of the image with twice as many pixels as the normal version, enabling clear and sharp images 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 need to display images with different aspect ratios, such as landscape and portrait, you can use the `picture` element to provide different versions of the image optimized for each aspect ratio. -* **Art Direction Layout:** There may be cases where images need to be displayed in a specific way to match the layout of other parts of the page. For example, on mobile devices, a close-up of a person's face may be preferred, while on desktop devices, a wide-angle shot may be preferred. The `picture` element can be used to provide different versions of the image that are optimized for different layouts. +* **Bandwidth Limitations:** Images are large files and use a lot of bandwidth, especially on mobile devices. With the `picture` element, you can provide smaller versions of the image for devices with small screen sizes or slow internet connections, reducing page load times. -Overall, the `picture` element is a powerful tool for providing images optimized for various use cases and achieving great display on any device or screen size. +* **Layout with Art Direction:** Sometimes you need to display images in a specific way based on the layout of other parts 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 devices. With the `picture` element, you can provide different versions of the image optimized for different layouts. + +Overall, the `picture` element is a powerful tool for optimizing images for various use cases and achieving great visuals regardless of the 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..1005f4b 100644 --- a/src/content/docs/ja/_roundtrip_width-density.txt +++ b/src/content/docs/ja/_roundtrip_width-density.txt @@ -1,22 +1,21 @@ --- -title: Width and Density Descriptor -description: 'An example of using the "srcset" attribute with width and density descriptors' -taskInputHash: 85e0a3c7357342e1 +title: Width and Density Descriptors +description: '`srcset` example using width and density descriptors' +taskInputHash: 90676cde22fe88fe lang: en -ignore: '/* cSpell:locale ja,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Understand the width (w) and density (x) descriptors in `srcset`, using examples and Markdown. +Understanding the width (`w`) and density (`x`) descriptors in `srcset`, explained using Markdown with examples. -The `srcset` attribute is an HTML attribute that allows developers to provide multiple image sources with different resolutions and pixel densities, so that the browser can select the appropriate image based on the device's display characteristics. The `srcset` attribute specifies an image using a combination of a URL and a `w` or `x` descriptor. +>`srcset` is an HTML attribute that allows developers to provide multiple image sources with different resolutions or pixel densities, so that the browser can choose the appropriate image based on the device's screen characteristics. The `srcset` attribute specifies the image using a combination of URLs and `w` or `x` descriptors. -## Width (w) Descriptor +## Width (`w`) Descriptor -The `w` descriptor is used to specify the width of an image in pixels. It provides the browser with the dimensions of the image, allowing it to choose an image that best fits the available screen space. +>The `w` descriptor is used to specify the width of the image in pixels. It is used to provide the image's dimensions to the browser if you want to serve the appropriate image that fits the screen area. -The syntax for using the `w` descriptor in `srcset` is as follows: +>The syntax to use `w` descriptor in `srcset` is as follows: ```html Example Image ``` -In the above example, three images are provided to the browser, along with their respective widths in pixels. The browser selects the image with the closest width to the available screen space. +>In the above example, we have provided three images along with their corresponding pixel widths to the browser. The browser selects the image with the most appropriate width available for the screen area. -## Density (x) Descriptor +## Density (`x`) Descriptor -The `x` descriptor is used to specify the pixel density of an image, which is the ratio of physical pixels to CSS pixels. It is used when providing different versions of the same image with different pixel densities to the browser. +>The `x` descriptor is used to specify the pixel density of the image, which is the ratio of physical pixels to CSS pixels. It is used to serve versions of the same image with different pixel densities to the browser. -The syntax for using the `x` descriptor in `srcset` is as follows: +>The syntax to use `x` descriptor in `srcset` is as follows: ```html Example Image ``` -In the above example, three images are provided to the browser, along with their respective pixel densities. The browser selects the image with the closest pixel density to the device's screen. +>In the above example, we have provided three images along with their corresponding pixel densities to the browser. The browser selects 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. +>The `w` and `x` descriptors can be used together in the same `srcset` attribute to provide 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..9bafb26 100644 --- a/src/content/docs/ja/breakpoints.md +++ b/src/content/docs/ja/breakpoints.md @@ -1,41 +1,40 @@ --- title: ブレークポイントと画像 -description: なぜ画像においていくつかの（すべてではない）ブレークポイントが重要なのか -taskInputHash: f409cdb7248e141b +description: なぜ画像にとって一部の（すべてではない）ブレークポイントが重要なのか +taskInputHash: 1fed01119b132d9d lang: ja -ignore: '/* cSpell:locale ja,en*/' -date_published: '2023-03-26' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- ### 背景 -小さなスクリーンと大きなモニターには異なるレイアウトが必要です。 `srcset` と `sizes` の目的のために、レイアウトが変更されるポイントを知る必要があります。 +小さなスクリーンと大きなモニターは異なるレイアウトが必要です。 `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)があります。 +レイアウトが変更される任意のビューポート幅を選択する必要があります。これは **breakpoint** と呼ばれます。これはCSSピクセルの任意の数値（[デバイスピクセルではなく](/en/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](/en/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..3f8497a 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属性にリストされた画像の中からどの画像を選択するかをどのように決定するのでしょうか？デバイスやビューポートに基づいて、幅指定と密度指定の両方の例を示して、ブラウザがどのように決定するかをステップバイステップで説明します。 -- HTMLの `srcset`属性を使用する場合、ブラウザは提供されたソースリストから最適な画像を選択するための一連のルールを使用します。これらのルールは、デバイスの表示特性（解像度、ピクセル密度）およびビューポートサイズに依存します。 `srcset`属性を使用すると、幅（ `w`ディスクリプタを使用）またはピクセル密度（ `x`ディスクリプタを使用）に基づいて異なる画像を指定できます。それでは、それぞれのケースについて例を挙げて説明していきましょう。 +- HTMLで'srcset'属性を使用する場合、ブラウザーは提供されたソースのリストから、最も適切な画像を選択するためのルールセットを使用します。これらのルールは、デバイスの表示特性（解像度、ピクセル密度）とビューポートサイズの両方に依存します。`srcset`属性を使用すると、幅（`w`）またはピクセル密度（`x`）に基づいて異なる画像を指定できます。では、それぞれについて例を挙げて説明していきましょう。 -1\. 幅ディスクリプタ（ `w`）: +1\. 幅指定(`w`): -次の `srcset`属性を持つ場合を想定します。 +以下の'srcset'属性があるとします。 ```html @@ -22,11 +21,11 @@ date_updated: '2023-03-31' ``` -ブラウザは、次のステップに従います。 +ブラウザーは以下の手順に従います。 -a. デバイスのDPR（デバイスピクセル比）を決定します。たとえば、標準ディスプレイのDPRは1であり、高解像度（Retina）ディスプレイのDPRは2以上です。 +a.デバイスのDPR（デバイスピクセル比）を決定します。たとえば、標準ディスプレイのDPRは1であるのに対し、高解像度（Retina）ディスプレイのDPRは2以上です。 -b. `srcset`内の各画像の効果的な幅を計算します。幅ディスクリプタをDPRで乗算します。DPRが1のデバイスの場合: +b. `srcset`内の各画像の有効な幅を計算します。幅ディスクリプターをDPRで乗算します。DPRが1のデバイスの場合: - example-small.jpg: 400 \* 1 = 400px @@ -34,12 +33,11 @@ b. `srcset`内の各画像の効果的な幅を計算します。幅ディスク - example-large.jpg: 1600 \* 1 = 1600px -c. 効果的な幅をビューポート幅と比較します。ビューポート幅が420pxであると仮定します。ブラウザは、効果的な幅がビューポート幅以上の最小の画像を選択します。この場合、 `example-medium.jpg`を選択します。 +c.各画像の幅効果をビューポート幅と比較します。ビューポート幅が420pxであると仮定します。ブラウザーは、ビューポート幅以上の幅効果を持つ最小の画像を選択します。この場合、ブラウザーは`example-medium.jpg`を選択します。 -1\. ピクセル密度ディスクリプタ（ `x`）: - -次の `srcset`属性を持つ場合を想定します。 +2. ピクセル密度指定(`x`): +以下の`srsset`属性があるとします。 ```html @@ -47,11 +45,11 @@ c. 効果的な幅をビューポート幅と比較します。ビューポー ``` -ブラウザは、次のステップに従います。 +ブラウザーは以下の手順に従います。 -a. デバイスのDPR（デバイスピクセル比）を決定します。たとえば、標準ディスプレイのDPRは1であり、高解像度（Retina）ディスプレイのDPRは2以上です。 +a. デバイスのDPR（デバイスピクセル比）を決定します。たとえば、標準ディスプレイのDPRは1であるのに対し、高解像度（Retina）ディスプレイのDPRは2以上です。 -b. デバイスのDPRを `srcset`内の `x`ディスクリプタと比較します。この場合、次のようなディスクリプタを持つ3つの画像があります。 +b. `srcset`内の`x`ディスクリプタとデバイスのDPRを比較します。この場合、次のディスクリプタがある3つの画像があります。 - example-1x.jpg: 1x @@ -59,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`を選択します。 -幅ディスクリプタ（ `w`）を使用する場合、 `srcset`属性と `sizes`属性を組み合わせて、異なるビューポート幅での画像の表示方法に関するより詳細な情報を提供することもできます。これは、特に有用です。以下は例です。 +幅指定（`w`）を使用する場合、'sizes'属性を'srcset`属性と組み合わせて使用して、異なるビューポート幅で画像が表示される方法に関するより詳細な情報を提供することもできることを覚えておくことが重要です。以下に例を示します。 ```html diff --git a/src/content/docs/ja/density-descriptors.md b/src/content/docs/ja/density-descriptors.md index 63d7906..d958734 100644 --- a/src/content/docs/ja/density-descriptors.md +++ b/src/content/docs/ja/density-descriptors.md @@ -1,35 +1,30 @@ --- -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は、各ユーザーのデバイスに最適な画像を提供するためのシンプルで効果的な方法を提供し、パフォーマンスとユーザーエクスペリエンスを向上させます。このガイドでは、密度記述子付きのSrcsetの使用の基本と、マークアップの例を提供します。 +## 密度記述子付きのSrcsetとは？ -密度指定子を使用したSrcsetは、1つの``要素に複数の画像ソースを指定できるHTML属性です。 密度指定子（`x`）は、ユーザーのディスプレイのピクセル密度に基づいて異なる解像度の画像を提供するために、Srcsetと組み合わせて使用されます。 +Srcsetは、単一の``要素に複数の画像ソースを指定するために設計されたHTML属性です。密度記述子(`x`)は、ユーザーのディスプレイのピクセル密度に基づいて異なる解像度の画像を提供するために、Srcsetと組み合わせて使用されます。 +## 密度記述子を使用する場合 -## いつSrcset with Density Descriptorsを使用しますか？ - -密度指定子を使用したSrcsetを使用すると、以下の場合に特に便利です。 - -1. 高解像度画像を高DPIディスプレイ（例：Retinaディスプレイ）に提供しながら、標準ディスプレイに低解像度の画像を提供する場合。 -2. 各ユーザーのデバイスに最適な画像サイズを提供して、ページのパフォーマンスを改善する場合。 - -## Srcset with Density Descriptorsの実装 - -密度指定子を使用したSrcsetを使用するには、次の手順に従います。 - -1. 異なる解像度で画像を準備します。 -2. ``要素に`srcset`属性を追加し、画像ソースと対応する密度指定子を含めます。 -3. 画面に表示される画像のサイズを指定する場合は、オプションの`sizes`属性を追加します。 +密度記述子付きのSrcsetを使用する場合は、特に以下の場合に便利です。 +1. 高-DPIディスプレイ（Retinaディスプレイなど）に高解像度の画像を提供しながら、標準ディスプレイに低解像度の画像を提供する場合。 +2. 各ユーザーのデバイスに最適な画像サイズを提供することにより、ページのパフォーマンスを向上させる場合。 +## 密度記述子付きのSrcsetを実装する +密度記述子付きのSrcsetを使用するには、以下の手順に従ってください。 +1. 異なる解像度の画像を準備します。 +2.画像ソースと対応する密度記述子を含む``要素に`srcset`属性を追加します。 +3.画面に表示されるイメージのサイズを指定するための`sizes`属性（オプション）を追加します。 ### マークアップ例 -以下は、マークアップで密度指定子を使用したSrcsetを実装する方法の例です。 +以下は、マークアップに密度記述子付きのSrcsetを実装する方法の例です。 ```html An example image ``` -このマークアップ例には次のものが含まれます。 - -- **src** ：ブラウザがsrcsetをサポートしていない場合に表示されるデフォルトの画像ソース。 -- **srcset** ：画像ソースとその密度指定子（1x、2x、3x）のリスト。ブラウザは、ユーザーのディスプレイに基づいて最適な画像を選択します。 -- **alt** ：アクセシビリティの目的で画像の説明。 +このマークアップ例には以下が含まれます。 +- **src**：ブラウザがSrcsetをサポートしていない場合に表示されるデフォルトの画像ソース。 +- **srcset**：画像ソースとその密度記述子（1x、2x、3x）のリスト。ブラウザは、ユーザーのディスプレイに基づいて最適な画像を選択します。 +- **alt**：アクセシビリティのための画像の説明。 -以上です！ これで、密度指定子を使用したSrcsetを正常に実装し、Webサイトのパフォーマンスとユーザーエクスペリエンスを向上させました。 +以上です!密度記述子付きのSrcsetを正常に実装し、サイトのパフォーマンスとユーザーエクスペリエンスを向上させました。 diff --git a/src/content/docs/ja/introduction.md b/src/content/docs/ja/introduction.md index 721670b..f62eb9d 100644 --- a/src/content/docs/ja/introduction.md +++ b/src/content/docs/ja/introduction.md @@ -1,21 +1,21 @@ --- -title: '`srcset` と `` の `sizes`' -description: 2023年のレスポンシブイメージの効率的で主観的なガイド -taskInputHash: fb587f981b4441f1 +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-428ピクセルの幅になっていることが多いですが、CSSピクセルあたりの多くのデバイスピクセルを持っています。 -> ブラウザウィンドウをどんなに狭くしても、画像のサイズが変わらない場合は、[density descriptor](/ja/density-descriptors) を使用する必要があります。これは、ロゴ、アイコン、ボタンなどに適しています。 +> ブラウザウィンドウをどれだけ狭くしても、画像サイズが変わらない場合は、[密度記述子を代わりに使用する](/ja/density-descriptors)必要があります。これは、ロゴ、アイコン、ボタンには適しています。 + +あなたの[ブレークポイント](/ja/breakpoints)を知っていますか？このソリューションを微調整するためにそれらの数字が必要です-少なくとも、メインコンテンツ領域が成長を停止するビューポート幅ブレークポイント。 -あなたの[ブレークポイント](/ja/breakpoints)を知っていますか？以下のソリューションを微調整するためにこれらの数値が必要になります-最小限に、メインコンテンツ領域が成長を止めるビューポート幅のブレークポイントが必要です。 ### 簡単な方法 @@ -28,12 +28,12 @@ date_updated: '2023-03-31' img.jpg?format=webp&w=1600 1600w, img.jpg?format=webp&w=2000 2000w" - sizes="(max-width: 700px) 100vw, 800px" alt="犬が自転車に乗っている画像" /> + sizes="(max-width: 700px) 100vw, 800px" alt="自転車に乗っている犬" /> - + + デベロッパーの正気のために、オンザフライの画像バリアント製造は不可欠です。--> ``` diff --git a/src/content/docs/ja/lighthouse-performance-test.md b/src/content/docs/ja/lighthouse-performance-test.md index 1214cb4..357e740 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によるパフォーマンスのテスト +title: Lighthouseを使用してパフォーマンスをテストする description: Lighthouseを使用してウェブサイトのパフォーマンスをテストする手順 -taskInputHash: 7f9c623aaf7861da +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が分析を完了すると、スコアとウェブサイトのパフォーマンス、アクセシビリティ、その他の領域を改善するための推奨事項が表示されます。 -これらの手順に従うことで、`Lighthouse`を使用してウェブサイトのパフォーマンスをテストおよび最適化し、ユーザーエクスペリエンスや検索エンジンランキングを向上することができます。 +>これらの手順に従うことで、Lighthouseを使用してウェブサイトのパフォーマンスをテストおよび最適化できます。これにより、ユーザーエクスペリエンスや検索エンジンのランキングを改善することができます。 diff --git a/src/content/docs/ja/picture-examples.md b/src/content/docs/ja/picture-examples.md index 71affa6..e5c5fa0 100644 --- a/src/content/docs/ja/picture-examples.md +++ b/src/content/docs/ja/picture-examples.md @@ -1,54 +1,56 @@ --- -title: '`` 要素を使用した例' -description: レスポンシブイメージ、アートディレクション、異なる画像フォーマットに対して、`` 要素を使用した例を提供します。 -taskInputHash: ec17d7bd226d3aa1 +title: 要素を使用した例 +description: 要素を使用した、レスポンシブイメージ、アートディレクション、異なる画像フォーマットに対する例を提供する +taskInputHash: be7eddc11abaf63a lang: ja -ignore: '/* cSpell:locale ja,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -以下は、`` 要素を使用した例とその説明です。 - -1. レスポンシブイメージの例: - -```html - - - - An image - -``` - -説明: この例では、`` 要素を使用して、画面サイズに応じて異なる画像リソースを提供しています。`` 要素は、「srcset」属性を使用して異なる画像リソースを指定し、「media」属性を使用して各リソースを使用する条件を指定します。`` 要素は、古いブラウザー用の代替方法であり、また `` 要素で指定された条件が満たされない場合にも使用されます。 - -2. アートディレクションの例: - -```html - - - An image - -``` - -説明: この例では、デバイスの向きに応じて、異なる画像リソースを提供するために、`` 要素が使用されています。`` 要素は、「media」属性を `(orientation: landscape)` に設定して、ワイドスクリーン用の画像リソースを指定していますが、`` 要素はポートレートスクリーン用の画像リソースを指定しています。 - -3. 異なる画像フォーマットの例: - -```html - - - - An image - -``` - -説明: この例では、`` 要素を使用して、異なる画像フォーマット用の異なる画像リソースを提供します。`` 要素は、「srcset」属性と「type」属性を使用して、異なる画像フォーマットを指定した異なる画像リソースを指定します。`` 要素は、`` 要素をサポートしていない古いブラウザーの代替品として使用されます。 - -## ブレークポイント - -レスポンシブデザインでは、ビューポートのサイズに基づいてウェブサイトやアプリケーションのレイアウトが変更されるタイミングを定義するために、ブレークポイントが使用されます。ブレークポイントは、通常、CSSのメディアクエリを使用して定義され、画面幅に応じて異なるスタイルが適用されます。これらのブレークポイントは、`` 要素と組み合わせて、異なる画面サイズに対して異なる画像リソースを提供するために使用することができます。 - -たとえば、最初の例では、`media` 属性を使用して、各リソースが使用されるスクリーン幅を指定しました。スクリーン幅が 768 ピクセル以上の場合、`image-large.jpg` リソースが使用されます。スクリーン幅が 480 ピクセル以上 768 ピクセル未満の場合、`image-medium.jpg` リソースが使用されます。スクリーン幅が 480 ピクセル未満の場合は、`image-small.jpg` リソースが使用されます。これにより、各デバイスに適切なサイズの画像を提供できるため、ページの読み込み時間が短縮され、ユーザー体験が向上します。 - -ブレークポイントは任意の画面サイズで定義することができ、複数のブレークポイントを使用して、様々なデバイスに対応したレイアウトを作成することができます。ブレークポイントを `` 要素と組み合わせることで、どんなデバイスでも見栄えが良くフレキシブルでレスポンシブなデザインを作成することができます。 +以下には、`` 要素の使用例とその説明がいくつかあります: + +1. レスポンシブイメージの例: + +```html + + + + 画像 + +``` + +説明: この例では、 `` 要素を使用して、さまざまな画面サイズに対して異なる画像ソースを提供しています。 `` 要素は、"srcset" 属性と "media" 属性を使用して、それぞれのソースが使用される条件を指定し、 `` 要素は、古いブラウザの場合や `` 要素で指定された条件が満たされない場合のフォールバックとして使用されます。 + +2. アートディレクションの例: + +```html + + + + 画像 + +``` + +説明: この例では、 `` 要素を使用して、デバイスの向きに応じて異なる画像ソースを提供します。 "media" 属性を "(orientation: landscape)" に設定した `` 要素は、ワイドスクリーン用の画像ソースを指定し、 `` 要素はポートレートスクリーン用の画像ソースを指定します。 + +3. 異なる画像フォーマットの例: + +```html + + + + + + 画像 + +``` + +説明: この例では、 `` 要素を使用して、異なる画像形式に対して異なる画像ソースを提供します。 `` 要素は、"srcset" 属性と "type" 属性を使用して、異なる画像形式を指定して異なる画像ソースを指定します。 `` 要素は、 `` 要素をサポートしていない古いブラウザに対するフォールバックとして使用されます。 + +## ブレークポイント + +レスポンシブデザインでは、ブレークポイントを使用して、ビューポートのサイズに基づいてウェブサイトやアプリケーションのレイアウトが変更される条件を定義します。ブレークポイントは、通常、CSSのメディアクエリを使用して定義され、画面幅に応じて異なるスタイルが適用されます。これらのブレークポイントは、 `` 要素と組み合わせて、異なる画面サイズに対して異なる画像ソースを提供するために使用できます。 + +たとえば、最初の例では、 `media` 属性を使用して、それぞれのソースが使用される画面幅を指定しました。画面幅が 768 ピクセル以上の場合は、 `image-large.jpg` ソースが使用され、画面幅が 480 ピクセル以上 768 ピクセル未満の場合は、 `image-medium.jpg` ソースが使用され、画面幅が 480 ピクセル未満の場合は `image-small.jpg` ソースが使用されます。これにより、それぞれのデバイスに適したサイズの画像を提供し、ページの読み込み時間を短縮し、ユーザーエクスペリエンスを向上させることができます。 + +ブレークポイントはどの画面サイズでも定義でき、複数のブレークポイントを使用して、さまざまなデバイスに応じたレイアウトを作成できます。 `` 要素とブレークポイントを組み合わせることで、どのデバイスでも素晴らしい柔軟なレスポンシブデザインを作成できます。 diff --git a/src/content/docs/ja/pixels-not-pixels.md b/src/content/docs/ja/pixels-not-pixels.md index 620a491..6ba9615 100644 --- a/src/content/docs/ja/pixels-not-pixels.md +++ b/src/content/docs/ja/pixels-not-pixels.md @@ -1,20 +1,22 @@ --- title: px ≠ ピクセル -description: デバイスpx ≠ ブラウザpx ≠ 画像px -taskInputHash: 73be94d33f113c9c +description: |- + デバイスのピクセル ≠ ブラウザのピクセル ≠ 画像のピクセル + + (Title and description do not contain any HTML elements.) +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 +### デバイスのピクセル ≠ ブラウザのピクセル ≠ 画像のピクセル -Appleのおかげで、CSSとHTMLのピクセル（ `px` ）は**ほとんど常に複数のデバイス/プリンターピクセルにマップされます**。私の携帯電話の `devicePixelRatio` は3.875です。[あなたのものは？](https://www.mydevice.io/) +Appleのおかげで、CSSとHTMLのピクセル(`px`)は**ほとんどの場合、複数のデバイス/プリンターのピクセルに対応**しています。私の携帯電話のdevicePixelRatioは3.875です。[あなたのも確認しましょう](https://www.mydevice.io/)。 -デスクトップの `devicePixelRatio` は、ブラウザーズームによって変化しますが、デフォルトは1.5です（私の `System> Display> Scale` は150％です）。 +私のデスクトップのdevicePixelRatioは、ブラウザのズームによって変わりますが、デフォルトは1.5です(私の `System > Display > Scale` は 150% になっています)。 -画像ファイル（SVGを除く）は、ピクセルのグリッドにデコードされます。 **画像ピクセルをデバイスピクセルと1：1の比率で完璧に表示するのは非常に難しいですが、 `srcset` を使用すれば、それに十分に近づけることができます**。ただし、完璧なマッピングが必要な正当な理由がある場合は、少しのJavaScriptを使用して、ロード後にHTML要素のサイズを調整することができます。しかし、ここではそのような禁じられた技は明かされません。 +画像ファイル(SVGを除く)は、ピクセルのグリッドに復号化されます。 **画像のピクセルをデバイスのピクセルと1：1の比率で完璧に表示することは非常に難しいですが、`srcset`を使用すると十分に近くなり、もし完璧なマッピングが必要な場合、ビットのJavaScriptを使ってhtml要素のサイズを読み込み後に調整できますが、ここではその禁断の技術は明かされません。** -> 他の絶対単位（in、pc、pt、mm、cm、Q）は、CSSピクセルの数とすべてが96dpiであると想定されています。開発者は絶対単位を避けます。なぜなら、フォントサイズまたはビューポート/コンテナの寸法から派生した単位を使用する方が一般的には良いからです。ユーザーが `Accessibility > Text Size` の乗数を調整、ブラウザーズーム、またはデバイスを回転させると、ミスマッチした単位がレイアウトを壊す可能性があります。言うまでもなく、サイトを出荷する前にこれらすべてのことを行う必要があります。 +> 他の絶対単位 (in、pc、pt、mm、cm、Q) は、CSSピクセルの数とすべてが96dpiであると仮定して定義されています。開発者は一般に、フォントサイズまたはビューポート/コンテナの寸法から派生した単位を使用した方が良いため、絶対単位を避けます。不一致な単位は、ユーザーが `Accessibility > Text Size` の倍率を調整したり、ブラウザーを拡大/縮小したり、デバイスを回転させたりすると、レイアウトが崩れる可能性があります。言うまでもなく、あなたはあなたのサイトを出荷する前にこれらすべてを行う必要があります。 diff --git a/src/content/docs/ja/specify-width-height.md b/src/content/docs/ja/specify-width-height.md index 549dadd..79d8c1e 100644 --- a/src/content/docs/ja/specify-width-height.md +++ b/src/content/docs/ja/specify-width-height.md @@ -1,17 +1,16 @@ --- -title: 幅と高さの使用 -description: HTMLコードで幅と高さ属性を使用するメリット -taskInputHash: 8d1d8f5ead1a1b70 +title: 幅と高さを使用する +description: HTMLコードで幅と高さの属性を使用することの利点 +taskInputHash: 8edb8d80ec75276c lang: ja -ignore: '/* cSpell:locale ja,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -なぜHTMLに幅と高さを指定する必要があるのでしょうか？ +HTMLに幅と高さを指定する理由 -> 画像のHTMLコードに幅と高さの属性を指定することが推奨されています。これは、ウェブブラウザーが画像のサイズを完全に読み込む前に画像の大きさを知ることを助けるためです。これにより、ブラウザーは画像に適切なスペースをウェブページに予約でき、画像が読み込まれる際にコンテンツがジャンプするのを防ぐことができます。 +> 画像に幅と高さの属性をHTMLコードに入れることを推奨されています。これは、画像が完全に読み込まれる前にWebブラウザーが画像のサイズを知ることができるためです。これにより、ブラウザーは適切なスペースをwebページの画像に予約し、画像が読み込まれる際のコンテンツのジャンプを防止します。 > -> さらに、画像の幅と高さを指定することで、ウェブページ全体のパフォーマンスを向上させることができます。ブラウザーが事前に画像のサイズを知っていると、画像を表示するために必要なスペースをより正確に計算でき、ロード中のコンテンツの不必要な再配置や再描画を回避することができます。 +> さらに、画像の幅と高さを指定することは、Webページ全体のパフォーマンスを向上させるのにも役立ちます。ブラウザーが事前に画像の大きさを知っていると、画像を表示するのに必要なスペースをより正確に計算でき、コンテンツが読み込まれる際の不必要な再レイアウトや再ペイントを回避できます。 > -> 結局のところ、画像のHTMLコードに幅と高さの属性を使用することで、コンテンツの読み込みを高速化し、ビジュアル的な不具合を減少させることで、ユーザーエクスペリエンスを向上させることができます。 +> 全体的に、画像のHTMLコードで幅と高さ属性を使用することで、コンテンツの読み込みを高速化し、ビジュアル的な問題を減らすことでユーザーエクスペリエンスを向上させることができます。 diff --git a/src/content/docs/ja/when-to-use-picture.md b/src/content/docs/ja/when-to-use-picture.md index aab2daa..d23e32b 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..c814f7e 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`）記述子の理解。例を挙げて、Markdownを使用して説明します。 -`srcset`は、開発者が異なる解像度やピクセル密度を持つ複数の画像ソースを提供し、ブラウザがデバイスの表示特性に基づいて適切な画像を選択できるようにするHTML属性です。 `srcset`属性は、`URL`と`w`または`x`ディスクリプタの組み合わせを使用して、画像を指定します。 +>`srcset`は、開発者が異なる解像度またはピクセル密度を持つ複数の画像ソースを提供し、ブラウザがデバイスの画面特性に基づいて適切な画像を選択できるようにするHTML属性です。 `srcset`属性は、 `URL`と`w`または`x`記述子の組み合わせを使用して画像を指定します。 -## Width（w）ディスクリプタ +## 幅（`w`）記述子 -`w`ディスクリプタは、画像の幅をピクセル単位で指定するために使用されます。使用すると、ブラウザに画像の寸法を提供して利用可能な画面スペースに適した画像を選択することができます。 +>`w`記述子は、画像の幅をピクセル単位で指定するために使用されます。画面領域に対応した適切な画像をブラウザに提供するために、画像の寸法をブラウザに提供したい場合に使用されます。 -`srcset`で`w`ディスクリプタを使用する構文は次のようになります。 +>`srcset`で`w`記述子を使用するための構文は次のようになります。 ```html Example Image ``` -上記の例では、3つの画像とそれぞれの幅をピクセル単位でブラウザに提供しています。ブラウザは利用可能な画面スペースに最も近い幅の画像を選択します。 -## Density（x）ディスクリプタ +> 上記の例では、3つの画像とそれらに対応するピクセル単位の幅をブラウザに提供しました。ブラウザは、利用可能な画面領域に最も近い幅を持つ画像を選択します。 -`x`ディスクリプタは、画像のピクセル密度を指定するために使用されます。これは、物理ピクセルとCSSピクセルの比率です。同じ画像の異なるピクセル密度のバージョンをブラウザに提供する場合に使用します。 +## 密度（`x`）記述子 -`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..b1c131e 100644 --- a/src/content/docs/sv/_roundtrip_breakpoints.txt +++ b/src/content/docs/sv/_roundtrip_breakpoints.txt @@ -1,32 +1,31 @@ --- 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 displays need 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 shrinks, hides, or moves on smaller screens—or more commonly, what expands, reveals, or adds on larger screens. They also have very little information to go on. Is the user on a tablet or a phone in landscape orientation—or a small browser window? -We must choose an arbitrary viewport width where the layout changes. This is called a **breakpoint**. It's an arbitrary number of CSS pixels ([not device pixels](/en/pixels-not-pixels)). Polypane has a [great article](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023) on commonly used breakpoints. +We have 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). Polypane has a [great article](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023) on commonly used breakpoints. -Some images (like logos or icons or buttons) 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 changes caused by these breakpoints (and work 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 of a page will be limited to a certain width on the largest screens, a `max-width`, but on small screens, the main content area will fill the entire viewport. -If you have more than one column at certain breakpoints, it becomes harder to calculate effective sizing rules, because the percentage of the viewport width the image takes up will change. +If you have more than one column at certain breakpoints, it will be harder to calculate the effective sizing rules, because the share of the viewport width the image occupies 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: +That said, don't overthink this. You'll probably be fine with the following approximation: -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. +1. At what size does the main column (or image container) stop growing? Up to that viewport width, we can use `100vw` for the image's `sizes` attribute to say that the image takes up 100% of the viewport width. 2. What's 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. + + +> One might think that the browser could handle all these calculations for us based on CSS. Unfortunately, browsers are eager to choose a image URL *before* stylesheets are downloaded. So we have to do the calculations ourselves, and it'll serve them right if we don't get it completely perfect. ===================== 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. Brytpunkter & bilder -2. Varför vissa (men inte alla) brytpunkter är viktiga för dina bilder +2. Varför vissa (men inte alla) brytpunkter spelar roll 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..15a0189 100644 --- a/src/content/docs/sv/_roundtrip_browser-picks-srcset.txt +++ b/src/content/docs/sv/_roundtrip_browser-picks-srcset.txt @@ -1,28 +1,31 @@ --- -title: How the browser chooses -description: How the browser chooses between images listed in the srcset attribute -taskInputHash: 3fd2b41750391cb2 +title: How the browser selects +description: How the browser selects 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 does the browser choose between images listed in the `srcset` attribute? Here is a step-by-step description, with examples of both width and density specifications, and how the browser selects 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 specified sources. These rules depend on both the device's display properties (resolution, pixel density) and the viewport size. The `srcset` attribute allows you to specify different images based on width (by using the `w` descriptor) or pixel density (by using the `x` descriptor). Let's go through each case with an example. +- When using the `srcset` attribute in HTML, the browser uses a set of rules to select the most appropriate image from a list of provided sources. These rules depend on both the device's screen properties (resolution, pixel density) and the viewport size. The `srcset` attribute allows specifying different images based on width (with the `w` descriptor) or pixel density (with the `x` descriptor). Let's go through each case with an example. 1. Width descriptor (`w`): -Assume that we have the following `srcset` attribute: +Assume we have the following `srcset` attribute: ```html -Example Image +Example image ``` -The browser follows these steps: +The browser will follow these steps: a. Determine the device's DPR (Device Pixel Ratio). For example, a standard display has a DPR of 1, while a high-resolution (Retina) display has a DPR of 2 or higher. -b. Calculate the effective width for each image in the sources. Multiply the width descriptor by DPR. For a device with a DPR of 1: +b. Calculate the effective width for each image in the `srcset`. Multiply the width descriptor by DPR. For a device with a DPR of 1: - example-small.jpg: 400 * 1 = 400px @@ -30,23 +33,23 @@ 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 width to the viewport width. Assuming the viewport width is 420px, the browser selects the smallest image with an effective width greater than or equal to the viewport width. In this case, it chooses `example-medium.jpg`. 2. Pixel density descriptor (`x`): -Assume that we have the following `srcset` attribute: +Assume we have the following `srcset` attribute: ```html -Example Image +Example image ``` -The browser follows these steps: +The browser will follow these steps: a. Determine the device's DPR (Device Pixel Ratio). For example, a standard display has a DPR of 1, while a high-resolution (Retina) display has a DPR of 2 or higher. -b. Compare the device's DPR with the `x` descriptors in `srcset`. In this case, we have three images with the following descriptors: +b. Compare the device's DPR with the `x` descriptor in `srcset`. In this case, we have three images with the following descriptors: - example-1x.jpg: 1x @@ -54,9 +57,9 @@ b. Compare the device's DPR with the `x` descriptors in `srcset`. In this case, - example-3x.jpg: 3x -c. Select the image with the `x` descriptor closest to the device's DPR. For a device with a DPR of 1, the browser selects `example-1x.jpg`. For a device with a DPR of 2, it selects `example-2x.jpg`, and so on. +c. Choose the image with the `x` descriptor closest to the device's DPR. For a device with a DPR of 1, the browser chooses `example-1x.jpg`. For a device with a DPR of 2, it chooses `example-2x.jpg`, and so on. -It is important to note that you can also use the `sizes` attribute in conjunction with the `srcset` attribute to provide more information about how the image will be displayed at different viewport widths. This is particularly useful when using the width descriptor (`w`). Here is an example: +It is important to note that one can also use the `sizes` attribute in combination with the `srcset` attribute to provide more information about how the image is displayed at various viewport widths. This is especially useful when using width descriptors (`w`). Here is an example: ```html diff --git a/src/content/docs/sv/_roundtrip_density-descriptors.txt b/src/content/docs/sv/_roundtrip_density-descriptors.txt index 250a3b5..09575e0 100644 --- a/src/content/docs/sv/_roundtrip_density-descriptors.txt +++ b/src/content/docs/sv/_roundtrip_density-descriptors.txt @@ -1,35 +1,35 @@ --- -title: Density Descriptors and Srcset -description: Examples of using density descriptors in `srcset` -taskInputHash: 55ea5bbfbf5779eb +title: Density Descriptors & srcset +description: Example of using density descriptors in `srcset` +taskInputHash: 3e4c00237cedf2c5 lang: en -ignore: '/* cSpell:locale sv,en*/' -date_published: '2023-03-26' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Srcset with density descriptors provides a simple and effective method for delivering the most appropriate image to each user's device, improving performance and user experience. This guide covers the essentials of using srcset with density descriptors and provides examples of markup for your convenience. +Srcset with density descriptors provides a simple and effective way to deliver the most appropriate image to each user's device, thereby improving performance and user experience. This guide covers the basics of using srcset with density descriptors and provides example markup code for your convenience. -## What is Srcset with Density Descriptors? +## What is Srcset with density descriptors? -Srcset is an HTML attribute designed to allow you to specify multiple image sources for a single `` element. Density descriptors (`x`) are used in combination with srcset to provide images with different resolutions based on the user's screen pixel density. +Srcset is an HTML attribute that is 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 with different resolutions based on a user's screen pixel density. -## When to Use Srcset with Density Descriptors +## When should you use Srcset with density descriptors? Using srcset with density descriptors is particularly useful when you want to: -1. Serve high-resolution images to high-DPI screens (e.g. Retina screens) while providing lower-resolution images to normal screens. +1. Display high-resolution images on high-DPI devices (e.g., Retina displays) while providing lower-resolution images on regular screens 2. Improve page performance by delivering the most appropriate image size to each user's device. -## Implementing Srcset with Density Descriptors +## Implementing Srcset with density descriptors To use srcset with density descriptors, follow these steps: + 1. Prepare your images in different resolutions. -2. Add the `srcset` attribute to the `` element, including the image sources and corresponding density descriptors. -3. Add the `sizes` attribute (optional) to specify the size of the image when displayed on the screen. +2. Add the `srcset` attribute to the `` element, including the image sources and their corresponding density descriptors. +3. Add the `sizes` attribute (optional) to specify the image size when displayed on the screen. -### Markup Example +### Example markup code -Here's an example of how to implement srcset with density descriptors in your markup: +Here is an example of how you can implement srcset with density descriptors in your markup code: ```html An example image ``` -This markup example includes: -- **src**: Default image source displayed if the browser does not support srcset. -- **srcset**: List of image sources and their density descriptors (1x, 2x, 3x). The browser selects the most appropriate image based on the user's screen. +This markup code includes: +- **src**: The default image source to be displayed if the browser does not support srcset. +- **srcset**: The list of image sources and their density descriptors (1x, 2x, 3x). The browser selects the most appropriate image based on the user's screen. - **alt**: A description of the image for accessibility purposes. And that's it! You have successfully implemented srcset with density descriptors, improving your website's performance and user experience. - -{{Note that the term "density descriptor" is not commonly used in English-speaking regions, and "pixel density descriptor" or simply "descriptor" may be more appropriate. The guide's language could be further simplified by using simpler words like "image size qualifier."}} ===================== Content prompt used: @@ -57,8 +55,8 @@ Also carefully translate the title and description for the article; do not use & 1. Density descriptors & srcset 2. Examples of using density descriptors in `srcset` -Metadata returned1. Densitetsdescriptors och srcset -2. Exempel på att använda densitetsdescriptors i `srcset` +Metadata returned1. Densitetsdeskriptorer & srcset +2. Exempel på att använda densitetsdeskriptorer i `srcset` Roundtrip (isolated) prompt used: diff --git a/src/content/docs/sv/_roundtrip_introduction.txt b/src/content/docs/sv/_roundtrip_introduction.txt index bee8e25..e5a681f 100644 --- a/src/content/docs/sv/_roundtrip_introduction.txt +++ b/src/content/docs/sv/_roundtrip_introduction.txt @@ -1,23 +1,23 @@ --- -title: srcset and sizes -description: An efficient and clear guide to responsive images for 2023 -taskInputHash: 87881becd1c9192b +title: '`srcset` and `` sizes' +description: An efficient and opinionated guide to responsive images in 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 responsive images in 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 comprehensive information. This is the quick reference for upgrading `` tags to handle modern devices of varying sizes and pixel densities. You should [know that pixels are not equal to pixels](/en/pixels-not-pixels) and `devicePixelRatio` is more likely to be around 3.875 than 1:1. Modern phones pretend to be 320-428px wide for readability (in CSS pixels), but have many device pixels per CSS pixel. ->If your image 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, consider using a [density descriptor instead](/en/density-descriptors). This often works 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 your [breakpoints](/en/breakpoints)? You'll need those numbers to fine-tune the solution below - and at least the viewport width breakpoint where the main content area stops growing. -### The simple method + +### The easy way ```html Dog riding a bike + alt="Dog riding a bicycle" /> - + - + ``` - ===================== 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 och sizes -2. En effektiv och tydlig guide till responsiva bilder för 2023 +Metadata returned1. `srcset` och ``-storlekar +2. En effektiv och åsiktsbaserad guide för responsiva bilder 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..8cba051 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 for testing website performance with 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: -> -> 1\. Open Google Chrome browser and navigate to the page you want to test. -> -> 2\. Click the three dots in the upper right corner of the browser window, then select "More tools" and then "Developer tools" or simply use the keyboard shortcut "Ctrl + Shift + I" (Windows, Linux) or "Command + Option + I" (macOS). -> -> 3\. In the Developer tools panel, click on the Lighthouse icon located on the left side of the panel or press "Ctrl+Shift+P" (Windows, Linux) or "Command+Shift+P" (macOS) to open the Command menu, then type "Lighthouse" and select "Generate report". -> -> 4\. In the Lighthouse dialog box, select Performance and other relevant options you want to test, then click "Generate report". -> -> 5\. After Lighthouse completes its analysis, you will see a report with scores and recommendations 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. +> Lighthouse is a tool that can be used to measure performance, accessibility, and other aspects of a website. To test your website's performance with Lighthouse, follow these steps: +> +> 1. Open the Google Chrome browser and navigate to the page you want to test. +> +> 2. Click on the three dots in the upper right corner of the browser window, then select "More tools" and then "Developer tools," or simply use the keyboard shortcut "Ctrl + Shift + I" (Windows, Linux) or "Command + Option + I" (macOS). +> +> 3. 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. Select the performance and other relevant options you want to test in the Lighthouse dialog box, then click "Generate report." +> +> 5. After 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 rankings. ===================== 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 att testa 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..739988b 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 with the element description: >- - Provides examples using the element for responsive images, art direction, - and different image formats. -taskInputHash: 3b4e429f7eb84ce2 + Provides examples with the element for responsive images, + art direction, 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: +Here are some examples of using the `` element and their explanations: -1. Example for responsive images: +1. Example of 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 using the "srcset" and "media" attributes to indicate the conditions under which each source should be used. The `` element is used as a fallback for older browsers or when the conditions specified in the `` elements are not met. -2. Example for art direction: +2. Example of art direction: ```html @@ -30,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 portrait screens. +Explanation: In this example, the `` element is used to provide different image sources depending on the device's orientation. The `` element with the "media" attribute set to "(orientation: landscape)" specifies an image source for wide screens, while the `` element specifies an image source for portrait screens. -3. Example for different image formats: +3. Example of 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 using the "srcset" and "type" attributes to indicate the image format. The `` element is used as a fallback for older browsers that do not support the `` element. ## Breakpoints -In responsive design, breakpoints are used to define when the layout of a website or application should change based on the viewport size. Breakpoints are typically defined with media queries in CSS, which apply different styling depending on the screen width. These breakpoints can be used in conjunction with the `` element to provide different image sources for different screen sizes. +In responsive design, breakpoints are used to define when the layout of a website or application should change depending on the viewport size. Breakpoints are typically defined using media queries in CSS, which apply different styles depending on the screen width. These breakpoints can be used in combination with the `` element to provide different image sources for different screen sizes. -For example, in the first example above, we used the `media` attribute to specify the screen width under which each source should be used. When the screen width is greater than or equal to 768 pixels, the 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 the user experience. -Breakpoints can be defined at any screen size, and multiple breakpoints can be used to create layouts that respond to a wide range of devices. By combining breakpoints with the `` element, you can create flexible and responsive designs that look great on any device. +Breakpoints can be defined for any screen size, and multiple breakpoints can be used to create layouts that respond to a wide variety of devices. By combining breakpoints with the `` element, you can create flexible and responsive designs that look great on 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. Tillhandahåller exempel med -elementet för responsiva bilder, konstnärlig riktning och olika bildformat Roundtrip (isolated) prompt used: diff --git a/src/content/docs/sv/_roundtrip_pixels-not-pixels.txt b/src/content/docs/sv/_roundtrip_pixels-not-pixels.txt index 301ba8c..c4b043a 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`) **map to multiple device pixels almost all the time**. 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%). +On desktop, the `devicePixelRatio` changes with browser zoom, but is usually 1.5 (my `System > Display > Scale` is set to 150%, after all). -Image files (excluding SVG) decode to an array of pixels. **Getting image pixels to display perfectly 1:1 with device pixels is annoyingly hard—but with `srcset` you can get *close enough***, and a little bit of JavaScript can adjust the HTML element's dimensions after loading if you have a truly compelling reason for needing that perfect match—although such forbidden sorcery shall not be revealed here. +Image files (excluding SVG) decode to a grid of pixels. **It's annoyingly hard to align image pixels 1:1 with device pixels, but with `srcset` you can get *close enough*, and some JavaScript can adjust the HTML element size after loading if you have a perfectly valid reason for needing that precise alignment, although such forbidden techniques won't be disclosed here.** -> Other absolute [units (in, pc, pt, mm, cm, Q)](https://developer.mozilla.org/en-US/docs/Web/CSS/length) are defined in terms of CSS pixels pretending everything is 96dpi. Developers mostly avoid absolute units because it's usually better to use units derived from font-size or viewport/container dimensions. Using incorrect units can break a layout if the user adjusts their `Accessibility > Text Size` multiplier, zooms the browser, or rotates their device. Needless to say, you should do all these things before launching your site. +> Other absolute [units (in, pc, pt, mm, cm, Q)](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units) are defined in terms of a number of CSS pixels and pretend everything is 96dpi. Developers avoid absolute units because it's usually better to use units derived from font size or viewport/container dimensions. Mismatched units can break a layout if the user adjusts their multiplying size scale for `Accessibility > Text Size`, zooms the browser, or rotates their device. Needless to say, do all of this before launching your website. ===================== Content prompt used: @@ -31,7 +30,7 @@ Also carefully translate the title and description for the article; do not use & 2. Device px ≠ browser px ≠ image px Metadata returned1. px ≠ pixlar -2. Enhet px ≠ webbläsare px ≠ bild px +2. Enhetspixlar ≠ webbläsarpixlar ≠ bildpixlar Roundtrip (isolated) prompt used: diff --git a/src/content/docs/sv/_roundtrip_specify-width-height.txt b/src/content/docs/sv/_roundtrip_specify-width-height.txt index 1f7977b..41edce3 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 Attributes +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 add width and height attributes in HTML code? + +> It is recommended to add width and height attributes in HTML code for images because it helps the browser to know the size of the image before it is fully loaded. This allows the browser to reserve the appropriate amount of space on the web page for the image, preventing content from jumping around as the image loads. +> +> In addition, specifying width and height attributes for images can also contribute to improving 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 reflows or repaints of the content as it loads. +> +> In summary, using width and height attributes in HTML code for images can improve the user experience by making the content faster to load and reducing visual inconsistencies. ===================== 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öjdattribut i HTML-kod. 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..7268214 100644 --- a/src/content/docs/sv/_roundtrip_when-to-use-picture.txt +++ b/src/content/docs/sv/_roundtrip_when-to-use-picture.txt @@ -1,25 +1,25 @@ --- -title: When to use the element -description: Explains in which situations you should use the element -taskInputHash: be2190453a34daf1 +title: When to Use the Element +description: Explains in which scenarios you should use the element +taskInputHash: 22cea24f0bea57f5 lang: en -ignore: '/* cSpell:locale sv,en*/' -date_published: '2023-03-27' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -The `picture` element is used to provide multiple versions of an image and determine which version to display based on certain conditions. It is particularly useful for optimizing images for different screen sizes and resolutions, and is often used in responsive web design. +The `picture` element is used to provide multiple versions of an image and decides 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 where you may want to use the `picture` element: -* **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. +* **Retina Displays:** 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 that has twice as many pixels as the normal version, so that it looks sharp and clear on Retina displays. -* **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. +* **Different Image 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 `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. +* **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. -* **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. +* **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 `picture` element allows you to provide different versions of the image that are optimized for different layouts. -In summary, the `picture` element is a powerful tool that can help you optimize your images for different use cases and ensure they look great regardless of the device or screen size they are 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 that they look good no matter what 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..78773f5 100644 --- a/src/content/docs/sv/_roundtrip_width-density.txt +++ b/src/content/docs/sv/_roundtrip_width-density.txt @@ -1,52 +1,53 @@ --- title: Width and Density Descriptors -description: Examples of using width and density descriptors in `srcset` -taskInputHash: de07e2c59a8993ce +description: Example usage of width and density descriptors in `srcset` +taskInputHash: 788dd1b49d02d6e5 lang: en -ignore: '/* cSpell:locale sv,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Understanding width (`w`) and density (`x`) descriptors in `srcset`. Use examples and markdown. +Understanding width (`w`) and density (`x`) descriptors in `srcset`. Use examples and use Markdown. -> `srcset` is an HTML attribute that allows developers to provide multiple image sources with different resolutions or pixel densities and let the browser choose the appropriate image based on the device's display characteristics. The `srcset` attribute uses a combination of `URL` and either `w` or `x` descriptors to specify the images. -## Width (`w`) Descriptor +> `srcset` is an HTML attribute that allows developers to provide multiple image sources with different resolutions or pixel densities and enables the browser to choose the appropriate image based on the device's display characteristics. The `srcset` attribute uses a combination of URLs and either width (`w`) or density (`x`) descriptors to specify the images. -> The `w` descriptor is used to specify the width of an image in pixels. It is used when we want to provide the browser with the dimensions of an image so that it can choose the right image for the available viewport. +## Width (`w`) descriptor -> The syntax for using the `w` descriptor in `srcset` looks like this: +> The `w` descriptor is used to specify the image's width 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. -````html +> The syntax for using the `w` descriptor in `srcset` is as follows: + + +```html Example Image + alt="Example image"> ``` +> In the example above, we have provided the browser with three images and their corresponding widths in pixels. The browser will choose the image that has the width closest to the available screen space. ->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 -## Density (`x`) Descriptor +> The `x` descriptor is used to specify the image's pixel density, 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` looks like this: ```html Example Image + alt="Example image"> ``` ->In the example above, we have provided the browser with three images and their corresponding pixel densities. The browser will choose the image that has the closest pixel density to the device's display. +> In the example above, we have provided the browser with three images and their corresponding pixel densities. The browser will choose the image that has the pixel density closest 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` descriptors can be used together in the same `srcset` attribute to provide the browser with more options to choose from. ===================== Content prompt used: @@ -60,7 +61,7 @@ Also carefully translate the title and description for the article; do not use & 2. Examples of using width and density descriptors in `srcset` Metadata returned1. Bredd- och densitetsbeskrivare -2. Exempel på användning av bredd- och densitetsbeskrivare i `srcset` +2. Exempel på att använda bredd- och densitetsbeskrivare i `srcset` Roundtrip (isolated) prompt used: diff --git a/src/content/docs/sv/breakpoints.md b/src/content/docs/sv/breakpoints.md index f3dc527..616a4d9 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 +description: Varför vissa (men inte alla) brytpunkter spelar roll 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 bildskä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 bestämma vad som ska krympas, döljas eller flyttas på mindre skärmar - eller vanligare, vad som ska utökas, 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 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 bredd där layouten ändras. Detta kallas en **brytpunkt**. Det är ett godtyckligt antal CSS-pixlar ([inte enhetspixlar](/sv/pixels-not-pixels)). Polypane har en [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 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)). +Några bilder (som logotyper eller ikoner eller knappar) kan vara immuna mot layoutförändringar som orsakas av dessa breakpoints (och fungera med [srcset täthetsbeskrivningar](/sv/density-descriptors)). -Huvudinnehållsbilder kommer att begränsas av storleken på deras behållare. Vanligtvis kommer huvudinnehållsområdet på en sida att begränsas till en viss bredd på de största skärmarna, en `max-width`, men på små skärmar kommer huvudinnehållsområdet att fylla hela viewporten. +Huvudinnehållsbilder kommer att begränsas av storleken på deras behållare. Vanligtvis kommer huvudinnehållsytan på en sida att vara begränsad till en viss bredd på de största skärmarna, en `max-width`, men på små skärmar kommer huvudinnehållsområdet att fylla hela 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 fler än en kolumn vid vissa breakpoints, kommer det att bli svårare att beräkna de effektiva dimensioneringsreglerna, eftersom andelen 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 det sagt, överdriv inte detta. Du kommer förmodligen att må bra av följande approximation: -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 bildbehållaren) att växa? Upp till den viewport-bredden kan vi använda `100 vw` för bildens `sizes` attribut för att säga att bilden tar upp 100 % av viewportbredden. 2. Vad är den maximala bredden som behållaren någonsin uppnår? Vi kan ställa in det som en fast `bredd` för allt annat. -Om ditt svar på 1 var 700px och ditt svar på 2 var 800px, kan du använda följande `sizes`-attribut: +Om ditt svar på 1 var 700px och ditt svar på 2 var 800px, kan du använda följande `sizes` attribut: ```html - + ``` -> Du skulle tro att webbläsaren enkelt kan hantera alla dessa beräkningar för oss baserat på CSS:en. Tyvärr är webbläsare aggressivt angelägna om att välja en bild-URL *innan* stylesheetsen laddas ner. Så vi måste göra beräkningarna själva, och det tjänar dem rätt om vi inte får det perfekt. + + +> Man skulle tro att webbläsaren kunde hantera alla dessa beräkningar för oss baserat på CSS. Tyvärr är webbläsare ivriga att välja en bild-URL *innan* stilmallarna laddas ner. Så vi måste göra beräkningarna själva, och det kommer att tjäna dem rätt om vi inte får det helt perfekt. diff --git a/src/content/docs/sv/browser-picks-srcset.md b/src/content/docs/sv/browser-picks-srcset.md index 865d27f..5a5d64d 100644 --- a/src/content/docs/sv/browser-picks-srcset.md +++ b/src/content/docs/sv/browser-picks-srcset.md @@ -1,18 +1,17 @@ --- 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 beskrivning, med exempel på både bredd- och densitetsspecifikationer och hur webbläsaren väljer baserat på enhet och visningsfönster. -- 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 ett antal regler för att välja den lämpligaste bilden från en lista med källor som tillhandahålls. Dessa regler beror på både enhetens skärmeegenskaper (upplösning, pixel densitet) och visningsfönstrets storlek. `Srcset`-attributet gör det möjligt att ange olika bilder baserat på bredd (med `w` descriptor) eller pixel densitet (med `x`-descriptor). Låt oss gå igenom varje fall med exempel. -1\. Breddspecifikation (`w`): +1. Bredd descriptor (`w`): Antag att vi har följande `srcset`-attribut: @@ -22,11 +21,11 @@ Antag att vi har följande `srcset`-attribut: ``` -Webbläsaren gör följande steg: +Webbläsaren kommer att följa dessa steg: -a. Bestäm enhetens DPR (Device Pixel Ratio). Till exempel har en standarddisplay en DPR på 1, medan en högupplö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 den effektiva bredden för varje bild i `srcset`. Multiplicera breddsdescriptorn med DPR. För en enhet med en DPR på 1: - example-small.jpg: 400 \* 1 = 400px @@ -34,9 +33,9 @@ b. Beräkna den effektiva bredden för varje bild i `srcset`. Multiplicera bredd - 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 den effektiva bredden med visningsfönstrets bredd. Anta att visningsfönstrets bredd är 420px. Webbläsaren väljer den minsta bilden med en effektiv bredd större än eller lika med visningsfönstrets bredd. I det här fallet väljer den `example-medium.jpg`. -1\. Pixeldensitetsspecifikation (`x`): +1. Pixel densitetsspecifikator (`x`): Antag att vi har följande `srcset`-attribut: @@ -46,11 +45,11 @@ Antag att vi har följande `srcset`-attribut: ``` -Webbläsaren gör följande steg: +Webbläsaren kommer att följa dessa steg: -a. Bestäm enhetens DPR (Device Pixel Ratio). Till exempel har en standarddisplay en DPR på 1, medan en högupplö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`-descriptorn i `srcset`. I det här fallet har vi tre bilder med följande descriptorer: - example-1x.jpg: 1x @@ -60,7 +59,7 @@ b. Jämför enhetens DPR med `x`-descriptorn i `srcset`. I detta fall har vi tre c. Välj bilden med `x`-descriptorn som är närmast enhetens DPR. För en enhet med en DPR på 1 väljer webbläsaren `example-1x.jpg`. För en enhet med en DPR på 2 väljer den `example-2x.jpg`, och så vidare. -Det är viktigt att notera att du också kan använda `sizes`-attributet i kombination med `srcset`-attributet för att ge mer information om hur bilden visas vid olika viewport-breder. Detta är särskilt användbart när man använder bredddescriptor (`w`). Här är ett exempel: +Det är viktigt att notera att man också kan använda `sizes`-attributet i kombination med `srcset`-attributet för att ge mer information om hur bilden visas vid olika visningsfönster bredder. Detta är särskilt användbart när man använder breddsdescriptor (`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..73a454e 100644 --- a/src/content/docs/sv/density-descriptors.md +++ b/src/content/docs/sv/density-descriptors.md @@ -1,31 +1,35 @@ --- -title: Densitetsdescriptors och srcset -description: Exempel på att använda densitetsdescriptors i `srcset` -taskInputHash: 55ea5bbfbf5779eb +title: Densitetsdeskriptorer & srcset +description: Exempel på att använda densitetsdeskriptorer 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 densitetsdeskriptorer ger en enkel och effektiv metod för att leverera den mest lämpliga bilden till varje användares enhet och därigenom förbättra prestanda och användarupplevelse. Den här guiden går igenom grunderna i att använda srcset med densitetsdeskriptorer och ger exempel på markup-kod 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 densitetsdeskriptorer? -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 ange flera bildkällor för ett enda ``-element. Densitetsdeskriptorer (`x`) används i samband med srcset för att tillhandahålla bilder med olika upplösningar baserat på användarens skärmens pixeldensitet. + +## När ska man använda Srcset med densitetsdeskriptorer? + +Att använda srcset med densitetsdeskriptorer är särskilt användbart när du vill: +1. Visa högupplösta bilder på enheter med hög DPI (t.ex. Retina-skärmar) samtidigt som du tillhandahåller lägre-upplösta bilder på vanliga skärmar. +2. Förbättra sidprestanda genom att leverera den lämpligaste bildstorleken till varje användares enhet. + +## Att implementera Srcset med densitetsdeskriptorer + +För att använda srcset med densitetsdeskriptorer, följ dessa steg: -För att använda srcset med densitetsdescriptors, 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 attributet `srcset` till ``-elementet, inklusive bildkällorna och motsvarande densitetsdeskriptorer. +3. Lägg till attributet `sizes` (valfritt) för att specificera bildens storlek när den visas på skärmen. -Här är ett exempel på hur du implementerar srcset med densitetsdescriptors i din markup: +### Exempel på markup-kod + +Här är ett exempel på hur du kan implementera srcset med densitetsdeskriptorer i din markup-kod: ```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. +Den här markup-koden inkluderar: +- **src**: Den standardbildkälla som visas om webbläsaren inte stöder srcset. +- **srcset**: Listan över bildkällor och deras densitetsdeskriptorer (1x, 2x, 3x). Webbläsaren väljer den mest lämpliga bilden baserat på användarens skärm. - **alt**: En beskrivning av bilden för tillgänglighetsändamål. - -Och det är allt! Du har framgångsrikt implementerat srcset med densitetsdescriptors, vilket förbättrar din webbplats prestanda och användarupplevelse. +Och det är allt! Du har nu framgångsrikt implementerat srcset med densitetsdeskriptorer och förbättrat din webbplats prestanda och användarupplevelse. diff --git a/src/content/docs/sv/introduction.md b/src/content/docs/sv/introduction.md index 272c473..1cb6ca3 100644 --- a/src/content/docs/sv/introduction.md +++ b/src/content/docs/sv/introduction.md @@ -1,23 +1,23 @@ --- -title: srcset och sizes -description: En effektiv och tydlig guide till responsiva bilder för 2023 -taskInputHash: 87881becd1c9192b +title: '`srcset` och ``-storlekar' +description: En effektiv och åsiktsbaserad guide för responsiva bilder 2023 +taskInputHash: 9073468e325bcbed lang: sv -ignore: '/* cSpell:locale sv,en*/' sidebar_sort_priority: 1000 -date_published: '2023-03-23' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -**En effektiv och bestämd guide till bilder för 2023** +**En effektiv och åsiktsbaserad guide för bilder 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. +Kontrollera sidofältet för grundlig information. Detta är den snabba referensen för att uppgradera `` taggar för att hantera moderna enheter med olika storlekar och pixel densiteter. Du bör [veta att pixels inte är lika med pixels](/sv/pixels-not-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-pixlar), men har många enhets-pixlar per CSS-pixel. -> Om din bild aldrig ändrar storlek, oavsett hur smalt du gör webbläsarfönstret bör du istället använda en densitetsbeskrivning. Detta är ofta lämpligt för logotyper, ikoner och knappar. +> Om din bild aldrig ändrar storlek, oavsett hur smal du gör webbläsarfönstret, bör du använda en [densitetsbeskrivning istället](/sv/density-descriptors). Detta passar ofta för logotyper, ikoner och knappar. -Vet du vad dina breakpoints är? Du kommer att behöva dessa nummer för att finslipa lösningen nedan - och som minimum viewport width breakpoint där huvudinnehållsytan slutar växa in i bredd. +Vet du vad dina [brytpunkter](/sv/breakpoints) är? Du kommer att behöva dessa nummer för att finjustera lösningen nedan - och minst visningsbreddsbrytpunkten där huvudinnehållsområdet slutar växa. -### Den enkla metoden + +### Det enkla sättet ```html @@ -30,10 +30,10 @@ Vet du vad dina breakpoints är? Du kommer att behöva dessa nummer för att fin sizes="(max-width: 700px) 100vw, 800px" alt="Hund som cyklar" /> - + + Produktion av bildvariationer på begäran är avgörande för utvecklarhälsa. --> ``` diff --git a/src/content/docs/sv/lighthouse-performance-test.md b/src/content/docs/sv/lighthouse-performance-test.md index 5c1e8f3..ca1fed0 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 att testa 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? +Hur testar du din webbplatsprestanda 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: -> -> 1\. Öppna Google Chrome webbläsare och navigera till sidan du vill testa. -> -> 2\. Klicka på de tre punkterna i det övre högra hörnet av webbläsarfönstret, välj sedan "Fler verktyg" och sedan "Utvecklarverktyg" eller använd helt enkelt tangentbordsgenvägen "Ctrl + Shift + I" (Windows, Linux) eller "Command + Option + I" (macOS). -> -> 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". -> -> 4\. I Lighthouse dialogrutan, välj prestanda och andra relevanta alternativ som du vill testa, klicka sedan på "Generera rapport". -> -> 5\. Efter att Lighthouse har slutfört sin analys, kommer du att se en rapport med poäng och rekommendationer för att förbättra din webbplats prestanda, tillgänglighet och andra områden. -> -> 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. +> 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 webbplatsprestanda med Lighthouse, följ dessa steg: +> +> 1\. Öppna Google Chrome-webbläsaren och navigera till sidan du vill testa. +> +> 2\. Klicka på de tre punkterna i övre högra hörnet på 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). +> +> 3\. Klicka på Lighthouse-ikonen som är belägen på vänster sida av panelen eller tryck på "Ctrl + Shift + P" (Windows, Linux) eller "Command + Shift + P" (macOS) för att öppna kommandomenyn, skriv sedan "Lighthouse" och välj "Generera rapport". +> +> 4\. Välj prestanda och andra relevanta alternativ du vill testa i Lighthouse-dialogrutan, klicka sedan på "Generera rapport". +> +> 5\. Efter att Lighthouse har avslutat sin analys, kommer du att se en rapport med poäng och rekommendationer för att förbättra din webbplatsprestanda, tillgänglighet och andra områden. +> +> 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 dess användarupplevelse och sökmotorrankningar. diff --git a/src/content/docs/sv/picture-examples.md b/src/content/docs/sv/picture-examples.md index 0b07de6..f0504d6 100644 --- a/src/content/docs/sv/picture-examples.md +++ b/src/content/docs/sv/picture-examples.md @@ -1,16 +1,15 @@ --- title: Exempel med -elementet description: >- - Ger exempel på användning av -elementet för responsiva bilder, + Tillhandahåller exempel med -elementet för responsiva bilder, konstnärlig riktning och olika bildformat -taskInputHash: d2042ff600a5ac1a +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: +Här är några exempel på att använda ``-elementet och deras förklaringar: 1\. Exempel på responsiva bilder: @@ -22,7 +21,7 @@ Här är några exempel på hur man använder ``-elementet och deras f ``` -Förklaring: I det här exemplet används ``-elementet för att tillhandahålla olika bildkällor för olika skärmstorlekar. ``-elementen specifierar de olika bildkällorna genom att använda attributet "srcset" och "media" för att specificera villkoren under vilka varje källa ska användas. ``-elementet används som en fallback för äldre webbläsare eller när villkoren som specificerats i ``-elementen inte uppfylls. +Förklaring: I det här exemplet används ``-elementet för att tillhandahålla olika bildkällor för olika skärmstorlekar. ``-elementen anger de olika bildkällorna med hjälp av 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: @@ -34,9 +33,9 @@ Förklaring: I det här exemplet används ``-elementet för att tillhan ``` -Förklaring: I det här exemplet används ``-elementet för att tillhandahålla olika bildkällor beroende på enhetens orientering. ``-elementet med attributet "media" satt till "(orientation: landscape)" specifierar en bildkälla för breda skärmar, medan ``-elementet specifierar en bildkälla för porträttskärmar. +Förklaring: I detta exempel används ``-elementet för att tillhandahålla olika bildkällor beroende på enhetens orientering. ``-elementet med attributet "media" som är inställt på "(orientation: landscape)" anger en bildkälla för breda skärmar, medan ``-elementet anger en bildkälla för porträttskärmar. -3\. Exempel för olika bildformat: +3\. Exempel på olika bildformat: ```html @@ -48,12 +47,12 @@ Förklaring: I det här exemplet används ``-elementet för att tillhan ``` -Förklaring: I det här exemplet används ``-elementet för att tillhandahålla olika bildkällor för olika bildformat. ``-elementen specifierar olika bildkällor genom att använda attributen "srcset" och "type" för att specificera bildformatet. ``-elementet används som en fallback för äldre webbläsare som inte stödjer ``-elementet. +Förklaring: I det här exemplet används ``-elementet för att tillhandahålla olika bildkällor för olika bildformat. ``-elementen anger olika bildkällor med hjälp av attributen "srcset" och "type" för att ange bildformatet. ``-elementet används som fallback för äldre webbläsare som inte stöder ``-elementet. ## Brytpunkter -I responsiv design används brytpunkter för att definiera när layouten på en webbplats eller applikation ska ändras baserat på storleken på viewporten. Brytpunkter definieras vanligtvis med hjälp av media queries i CSS, som tillämpar olika stilar beroende på skärmens bredd. Dessa brytpunkter kan användas i kombination med ``-elementet för att tillhandahålla olika bildkällor för olika skärmstorlekar. +I responsiv design används brytpunkter för att definiera när layouten på en webbplats eller applikation ska ändras beroende 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. -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 i det första exemplet ovan använde vi attributet `media` för att ange skärmens bredd under vilken varje källa ska användas. När skärmens bredd är större än eller lika med 768 pixlar kommer källan `image-large.jpg` att användas; när skärmens bredd är större än eller lika med 480 pixlar men mindre än 768 pixlar kommer källan `image-medium.jpg` att användas; och när skärmens bredd är mindre än 480 pixlar kommer källan `image-small.jpg` att användas. Detta gör att vi kan servera lämpligt storlek anpassade bilder för varje enhet, vilket minskar sidladdnings tiden och förbättrar användarupplevelsen. -Brytpunkter kan definieras vid vilken skärmstorlek som helst, och flera brytpunkter kan användas för att skapa layouter som svarar på ett brett utbud av enheter. Genom att kombinera brytpunkter med ``-elementet kan du skapa flexibla och responsiva design som ser bra ut på alla enheter. +Brytpunkter kan definieras för vilken skärmstorlek som helst, och flera brytpunkter kan användas för att skapa layouter som svarar på en bred mångfald av enheter. Genom att kombinera brytpunkter med ``-elementet kan du skapa flexibla och responsiva design 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..3de7397 100644 --- a/src/content/docs/sv/pixels-not-pixels.md +++ b/src/content/docs/sv/pixels-not-pixels.md @@ -1,20 +1,19 @@ --- title: px ≠ pixlar -description: Enhet px ≠ webbläsare px ≠ bild px -taskInputHash: 2b5adfa6783beef0 +description: Enhetspixlar ≠ webbläsarpixlar ≠ bildpixlar +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 +### Enhetpixlar ≠ webbläsarpixlar ≠ bildpixlar -Tack vare Apple mappar CSS och HTML pixlar (`px`) **nästan alltid mot flera enhets-/skrivar-pixlar**. devicePixelRatio på min telefon är 3,875; [vad är din?](https://www.mydevice.io/) +Tack vare Apple, så **mappar CSS- och HTML-pixlar (`px`) till nästan alltid flera enhets-/skrivarpixlar**. devicePixelRatio på min telefon är 3.875; [vad har du för värde?](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%). +Mej desktops devicePixelRatio ändras vid webbläsarzoom 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) dekodar till en grid av pixlar. **Det är irriterande svårt att få bildpixlarna att visas perfekt med en 1:1-koppling med enhetspixlar, men med `srcset` kan du komma *tillräckligt nära* , och lite Javascript kan justera html-elementstorleken efter laddning om du har helt rättvisa skäl för att behöva den perfekta kopplingen, även om sådana förbjudna tekniker 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/sv-SE/docs/Learn/CSS/Introduction_to_CSS/Values_and_units) definieras i termer av antal CSS-pixlar och låtsas att allt är 96dpi. Utvecklare undviker absoluta enheter eftersom det vanligtvis är bättre att använda enheter som härleds från teckenstorlek eller vyport/kontainerdimensioner. Mismatchade enheter kan bryta en layout om användaren justerar sin multiplicerande måttskala för `Tillgänglighet > Textstorlek`, zoomar webbläsaren eller roterar sin enhet. Onödigt att säga, så bör du göra allt detta innan du lanserar din webbplats. diff --git a/src/content/docs/sv/specify-width-height.md b/src/content/docs/sv/specify-width-height.md index f91261f..3ce7312 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öjdattribut i HTML-kod. +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 bör du lägga till 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 lägga till bredd- och höjdattribut i HTML-koden för bilder eftersom det hjälper webbläsaren att känna till bildens storlek innan den är fullständigt laddad. Detta gör det möjligt för webbläsaren att reservera lämplig 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 ange bredd- och höjdattribut för bilder också bidra till att förbättra prestandan hos webbsidan som helhet. När en webbläsare känner till storleken på 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ödiga återflöden eller ommålningar 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öjdattribut i HTML-koden för bilder förbättra användarupplevelsen genom att göra innehållet snabbare att ladda och minska visuella felaktigheter. diff --git a/src/content/docs/sv/when-to-use-picture.md b/src/content/docs/sv/when-to-use-picture.md index 30d4794..5782b0b 100644 --- a/src/content/docs/sv/when-to-use-picture.md +++ b/src/content/docs/sv/when-to-use-picture.md @@ -1,22 +1,21 @@ --- -title: När du ska använda -elementet +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 `picture` 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. +Här är några specifika scenarier där du kanske vill använda elementet `picture`: -* **Retina-skärmar:** Skärmar med hög densitet som Apples Retina-skärmar har högre pixeltäthet, vilket innebär att bilder kan se suddiga eller pixelerade ut om de inte är optimerade för hög upplösning. Med `picture`-elementet kan du tillhandahålla en version av bilden som har dubbelt så många pixlar som den vanliga versionen, så att den ser skarp och tydlig ut på Retina-skärmar. +* **Retina-displayer:** Skärmar med hög densitet som Apples Retina-displayer har en högre pixeldensitet, vilket innebär att bilder kan se suddiga eller pixelerade ut om de inte är optimerade för hög upplösning. Med elementet `picture` kan du tillhandahålla en version av bilden som har dubbelt så många pixlar som den normala versionen, så att den ser skarp och tydlig ut på Retina-displayer. -* **Olika bildformat:** Om du utformar en webbplats som behöver visa bilder med olika bildförhållanden (t.ex. liggande eller stående), kan du använda `picture`-elementet för att tillhandahålla olika versioner av bilden som är optimerade för varje bildförhållande. +* **Olika bildförhållanden:** Om du designar en webbplats som behöver visa bilder med olika bildförhållanden (som liggande vs. stående), kan du använda elementet `picture` för att tillhandahålla olika versioner av bilden som är optimerade för varje bildförhållande. -* **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. +* **Bandbreddsbegränsningar:** Bilder kan vara stora filer som tar upp mycket bandbredd, särskilt på mobila enheter. Med elementet `picture` kan du tillhandahålla mindre versioner av bilden för enheter med mindre skärmar eller långsammare internetanslutningar, vilket kan hjälpa till att minska sidlasttider. -* **Konstnärlig layout:** Ibland vill du kanske presentera en bild på ett visst sätt beroende på layouten för resten av sidan. Till exempel kan du vill visa en närbild av en persons ansikte på mobila enheter, men en bredare bild på stationära enheter. `Picture`-elementet låter dig tillhandahålla olika versioner av bilden som är optimerade för olika layouter. +* **Art-dirigerade layouter:** Ibland vill du kanske presentera en bild på ett visst sätt beroende på layouten på 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 `picture` gör att du kan tillhandahålla olika versioner av bilden som är optimerade för olika layouter. -Sammanfattningsvis är `picture`-elementet ett kraftfullt verktyg som kan hjälpa dig att optimera dina bilder för olika användningsområden och se till att de ser bra ut oavsett vilken enhet eller skärmstorlek de visas på. +Övergripande sett är elementet `picture` ett kraftfullt verktyg som kan hjälpa dig att optimera dina bilder för en rad användningsfall och se till att de ser bra ut oavsett vilken enhet eller skärmstorlek de visas på. diff --git a/src/content/docs/sv/width-density.md b/src/content/docs/sv/width-density.md index 4907c29..a9f97b9 100644 --- a/src/content/docs/sv/width-density.md +++ b/src/content/docs/sv/width-density.md @@ -1,23 +1,24 @@ --- title: Bredd- och densitetsbeskrivare -description: Exempel på användning av bredd- och densitetsbeskrivare i `srcset` -taskInputHash: de07e2c59a8993ce +description: Exempel på att använda bredd- och densitetsbeskrivare i `srcset` +taskInputHash: 788dd1b49d02d6e5 lang: sv -ignore: '/* cSpell:locale sv,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Förståelse för bredd (w) och densitet (x) deskriptorer i `srcset`. Använd exempel och använd markdown. +Förståelse för bredd (w) och densitet (x) beskrivare 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 pixeldensiteter och låter webbläsaren välja lämplig bild baserat på enhetens visningsegenskaper. `srcset`-attributen använder en kombination av `URL` och beskrivarna `w` eller `x` för att ange bilderna. -> Beskrivaren `w` används för att specificera bredden på en bild i pixlar. Den används när vi vill tillhandahålla webbläsaren med dimensionerna på en bild så att den kan välja rätt bild för den tillgängliga skärmutrymmet. +## Bredd (`w`) beskrivare -> Syntaxen för att använda beskrivaren `w` i `srcset` ser ut som följer: +> Beskrivaren `w` används för att specificera bildens bredd i pixlar. Den används när vi vill ge webbläsaren dimensionerna på en bild så att den kan välja lämplig bild för det tillgängliga skärmutrymmet. -````html +> Syntaxen för att använda beskrivaren `w` i `srcset` är följande: + + +```html I exemplet ovan har vi tillhandahållit webbläsaren med tre bilder och deras motsvarande pixeldensiteter. Webbläsaren kommer att välja bilden som har den närmaste pixeldensiteten till enhetens skärm. +> I exemplet ovan har vi gett webbläsaren tre bilder och deras motsvarande pixeldensiteter. Webbläsaren kommer att välja den bild som har den pixeldensitet som är närmast 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 beskrivarna `w` och `x` kan användas tillsammans i samma `srcset`-attribut för att ge webbläsaren fler alternativ att välja mellan. diff --git a/src/content/docs/zh/_roundtrip_breakpoints.txt b/src/content/docs/zh/_roundtrip_breakpoints.txt index cc20524..e8d726c 100644 --- a/src/content/docs/zh/_roundtrip_breakpoints.txt +++ b/src/content/docs/zh/_roundtrip_breakpoints.txt @@ -1,42 +1,41 @@ --- title: Breakpoints and Images -description: Why some (but not all) breakpoints affect your images -taskInputHash: e220f548add04019 +description: Why some (but not all) breakpoints are important 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. +Different layouts are needed for small and large screens. To use `srcset` and `sizes`, we need to know when the layout changes. -Web developers must decide what content to shrink, hide, or reposition on smaller screens, or more commonly, what content to expand, reveal, or add on larger screens. However, they have very little information to go on. Is the user on a tablet, a landscape phone, or a small browser window? +Web developers must decide what to shrink, hide, or reposition on small screens and what to expand, reveal, or add on large screens. The information they get is very limited. Are users on a tablet or a landscape phone, or in a small browser window? -We have to pick an arbitrary viewport width at which layouts change. This is called a **breakpoint**. It's an arbitrary number of CSS pixels (not device pixels). Polypane has a [great article](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023) on common breakpoints. +We have to choose an arbitrary viewport width, which is called a **breakpoint**. This is a quantity of CSS pixels ([not device pixels](/pixels-not-pixels)). Polypane has a [great article](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023) on popular breakpoints. -Some images, like logos, icons, or buttons, might be exempt from layout shifts caused by these breakpoints (and can use [srcset density descriptors](/density-descriptors)). +Some images, like logos, icons, or buttons, may not be affected by layout changes from breakpoints (and are great for using [srcset density descriptors](/density-descriptors)). -Main content images will be constrained by their container size. Typically, a page's main content area will be limited to a width on larger screens, i.e. `max-width`, but on smaller screens, the main content area will fill the entire viewport. +Main content images will be limited by the size of their container. Typically, the main content area of a page will be limited to a certain width on the largest screen, called the "max-width", but on small 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 there are multiple columns at some breakpoints, calculating effective sizing rules will become more complicated because the percentage of the viewport width that an image occupies will change. -### A simple approach +### A simple method -That being said, don't overthink it. You might be perfectly happy with these approximations: +That being said, don't overthink it. You may be very happy with the approximate values: -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. What is the size at which the main column (or container for the image) stops growing? Before that viewport width, we can use `100vw` for the `sizes` attribute to represent the image taking up the full viewport width. +2. What is the maximum width that container can grow to? We can use that as a fixed `width` for all other set values. -For example, if your answer to the first step is 700 pixels and your answer to the second step is 800 pixels, you can use the following `sizes` attribute: +If your answers are 700px and 800px, you can use the following `sizes` attribute: ```html - + ``` -> You might think the browser can handle all these calculations for us nicely based on CSS. Unfortunately, browsers are too eager to *prefetch* the image URL before they download the style sheet. So, we have to do the calculations ourselves, and blame them if we get it wrong. +> You might think that the browser can handle all these calculations well with CSS. Unfortunately, the browser is too eager to choose an image URL before downloading the stylesheets, so we have to do the calculations ourselves, and if we don't calculate perfectly, that's their fault for being too smart. ===================== Content prompt used: @@ -49,8 +48,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. 断点和图像 -2. 为什么您的图像会受到某些（但不是全部）断点的影响 +Metadata returned1. 断点和图片 +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..7d1e4a3 100644 --- a/src/content/docs/zh/_roundtrip_browser-picks-srcset.txt +++ b/src/content/docs/zh/_roundtrip_browser-picks-srcset.txt @@ -1,68 +1,67 @@ --- -title: How Browsers Choose Images -description: How browsers choose images in the `srcset` attribute -taskInputHash: 4f3d39e70c9edd79 +title: How Browsers Make Choices +description: How Browsers Choose 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 is a step-by-step process that includes width and pixel density specifications and determines the browser's choice based on the device and viewport. -- When using the `srcset` attribute in HTML, the browser uses a set of rules to choose the most appropriate image from 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 source list. These rules depend on 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 take a look at each case with examples. -1. Width descriptor (`w`): +1\. Width Descriptor (`w`): -Assuming we have the following `srcset` attribute: +Assume we have the following `srcset` attribute: ```html - Example Image - ``` -The browser will follow these steps: +The browser will go through the following steps: -a. Determine the DPR (device pixel ratio) of the device. For example, the DPR for a standard display is 1, while the DPR for high-resolution (Retina) displays is 2 or higher. +a. Determine the device's DPR (device pixel ratio). For example, standard displays have a DPR of 1, while high-resolution (Retina) displays have a DPR of 2 or higher. -b. Calculate the effective width of each image in the `srcset`. Multiply the width descriptor by the DPR. For a device with DPR of 1: +b. Calculate the effective width for each image in the `srcset` attribute. Multiply the width descriptor by the DPR. For devices 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 width with the viewport width. Assuming the viewport width is 420px. The browser will choose the smallest image with an effective width greater than or equal to the viewport width. In this case, it will choose `example-medium.jpg`. +c. Compare the effective width to the viewport width. Assume the viewport width is 420px. The browser will choose the smallest image with an effective width greater than or equal to the viewport width. In this case, it will choose `example-medium.jpg`. -2. Pixel density descriptor (`x`): +2\. Pixel Density Descriptor (`x`): -Assuming we have the following `srcset` attribute: +Assume we have the following srcset attribute: ```html - Example Image - ``` -The browser will follow these steps: +The browser will go through the following steps: -a. Determine the DPR of the device. For example, the DPR for a standard display is 1, while the DPR for high-resolution (Retina) displays is 2 or higher. +a. Determine the device's DPR (device pixel ratio). For example, standard displays have a DPR of 1, while high-resolution (Retina) displays have a DPR of 2 or higher. -b. Compare the device's DPR with the `x` descriptors in the `srcset`. In this case, we have three images with the following descriptors: +b. Compare the device's DPR to the `x` descriptors in the `srcset` attribute. 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. 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 that is closest to the device's DPR. For devices with a DPR of 1, the browser will choose `example-1x.jpg`. For devices with a DPR of 2, it will choose `example-2x.jpg`, and so on. -Note that you can also use the `sizes` attribute in conjunction with the `srcset` attribute to provide more information on how images should be displayed at different viewport widths. This is particularly useful when using the width descriptor (`w`). Here is an example: +Note that you can also use the `sizes` attribute with the `srcset` attribute to provide more information about how images should be displayed at different viewport widths. This is especially useful when using width descriptors (`w`). Here is an example: ```html - sizes -description: Efficient and subjective guide to responsive images in 2023 -taskInputHash: ff8b517c77f33d91 +title: '`srcset` and `` `sizes`' +description: An 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 - - - - +**An efficient and insightful guide to images in 2023** + +Please refer to the sidebar for a more in-depth look. This is a quick reference guide for upgrading `` tags to handle all the different sizes and pixel densities of modern devices. You should know that pixels != pixels, and `devicePixelRatio` is more likely to be 3.875 than 1:1. Modern phones pretend to be 320-428px wide (in CSS pixels) for readability, but each CSS pixel covers many device pixels. + +> If your image size won't change no matter how narrow you resize your browser window, use [density descriptors](/density-descriptors). This often applies to logos, icons, and buttons. + +Do you know what your [breakpoints](/breakpoints) are? You'll need these numbers to fine-tune the solutions below - at least the viewport width breakpoint where your main content area stops growing. + +### The quick way + +```html +A dog riding a bicycle + + + + ``` + +**Mistakes:** +- "pixels != pixels" should be "pixels != device pixels". +- "but each CSS pixel covers many device pixels" should be "but each device pixel is made up of many CSS pixels". +- "fine-tune the solutions below" should be "fine-tune the solution above". ===================== Content prompt used: @@ -48,8 +54,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` 和 `` `sizes` +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..5848a60 100644 --- a/src/content/docs/zh/_roundtrip_lighthouse-performance-test.txt +++ b/src/content/docs/zh/_roundtrip_lighthouse-performance-test.txt @@ -1,28 +1,27 @@ --- title: Testing Website Performance with Lighthouse -description: Steps for testing website performance using Lighthouse -taskInputHash: 2da1cc6b426bea24 +description: Steps for testing website performance with Lighthouse +taskInputHash: e3a6a4766e302363 lang: en -ignore: '/* cSpell:locale zh,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -How to test your website performance using Lighthouse? - -> 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. +How to Test Your Website Performance with Lighthouse? + +> Lighthouse is a tool that can be used to measure website performance, accessibility, and other aspects. Follow these steps to use Lighthouse to test your website performance: + +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 select "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 the Lighthouse icon located on the left-hand side of the panel, or type "Lighthouse" in the command menu opened with "Ctrl+Shift+P" (Windows, Linux) or "Command+Shift+P" (macOS), and select "Generate Report." + +4. In the Lighthouse dialog, select Performance and other relevant options, then click "Generate Report." + +5. When Lighthouse finishes its analysis, you will see a report with scores and suggestions about your website performance, accessibility, and other aspects. + +By following these steps, you can use Lighthouse to test and optimize your website performance, helping to improve its user experience and search engine ranking. ===================== Content prompt used: @@ -35,7 +34,7 @@ Also carefully translate the title and description for the article; do not use & 1. Test performance with Lighthouse 2. Steps on how to test a website's performance using Lighthouse -Metadata returned1. 通过 Lighthouse 测试性能 +Metadata returned1. 使用 Lighthouse 测试性能 2. 使用 Lighthouse 测试网站性能的步骤 diff --git a/src/content/docs/zh/_roundtrip_picture-examples.txt b/src/content/docs/zh/_roundtrip_picture-examples.txt index 30c6c97..78ef4b6 100644 --- a/src/content/docs/zh/_roundtrip_picture-examples.txt +++ b/src/content/docs/zh/_roundtrip_picture-examples.txt @@ -1,10 +1,13 @@ --- -title: Examples of using the element -description: Examples of using the element for responsive images, art direction, and different image formats. -taskInputHash: 84ee999fd4dc56dc +title: Example of using the element +description: Provides examples of using the element, including responsive images, artistic 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: @@ -12,42 +15,45 @@ Here are some examples of using the `` element and their explanations: - An image + Image ``` -Explanation: In this example, the `` element is used to provide different image sources for different screen sizes. The `` element uses the `srcset` and `media` attributes to specify different image sources and the conditions for using each source. When the conditions specified in the `` element are not met, the `` element is used as a fallback image for older browsers. +Explanation: In this example, the `` element is used to provide different image sources for different screen sizes. The `` element uses the "srcset" and "media" attributes to specify different image sources, specifying which source should be used under which conditions. The `` element is used as a fallback for older browsers or when conditions specified in `` element are not met. -2. Example of art direction: +2. Example of artistic direction: ```html - An image + + Image ``` -Explanation: In this example, the `` element is used to provide different image sources based on the device orientation. The `` element uses the `media` attribute and sets it to `(orientation: landscape)` to provide a landscape-oriented image source, while the `` element provides a portrait-oriented image source. +Explanation: In this example, the `` element provides different image sources based on the device's orientation. The `` element sets the "media" attribute to "(orientation: landscape)" for wide screens and `` element specifies the image source for portrait screens. 3. Example of different image formats: ```html + - An image + + Image ``` -Explanation: In this example, the `` element is used to provide different image sources for different image formats. The `` element uses the `srcset` and `type` attributes to specify different image sources and their image formats, while the `` element is used as a fallback image for older browsers that do not support the `` element. +Explanation: In this example, the `` element is used to provide different image sources for different image formats. The `` element uses the "srcset" and "type" attributes to specify different image sources and image formats. The `` element is used as 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 when the layout of a website or application changes based on the size of the viewport. Breakpoints are typically defined in CSS using media queries to apply different styles based on screen width. These breakpoints can be used together 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 the values ​​for the screen width that should be used for each source. 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 properly 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 on any screen size and multiple breakpoints can be used to create layouts that respond to various devices. By combining breakpoints with the `` element, you can create flexible and responsive designs that look great on any device. ===================== Content prompt used: @@ -60,8 +66,8 @@ Also carefully translate the title and description for the article; do not use & 1. Examples using element 2. Provides examples using the element, for responsive images, art direction and different image formats -Metadata returned1. 使用 元素的例子 -2. 提供使用 元素的示例，用于可响应式图片、艺术向导和不同的图片格式。 +Metadata returned1. 使用元素的示例 +2. 提供使用元素的示例，包括响应式图像、艺术方向和不同的图像格式。 Roundtrip (isolated) prompt used: diff --git a/src/content/docs/zh/_roundtrip_pixels-not-pixels.txt b/src/content/docs/zh/_roundtrip_pixels-not-pixels.txt index 2290d12..d5133f7 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/) +Due to Apple's influence, CSS and HTML pixels (`px`) **almost always correspond 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%). +The `devicePixelRatio` of my desktop varies with browser zoom, but defaults to 1.5 (because my `System > Display > Scale` is 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. **It's difficult to achieve perfect display of image pixels at a 1:1 ratio with device pixels, but with `srcset` you can come close**, and some JavaScript can adjust the size of HTML elements after loading to achieve a perfect match if necessary, although this taboo technique cannot 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 as quantities of CSS pixels and pretend a pixel density of 96dpi. Developers avoid absolute units because it's usually better to use units derived from font size or viewport/container size. Mismatched units can break layouts if the user adjusts the `Accessibility > Text Size` magnifier, zooms the browser, or rotates the device, needless to say all these adjustments should be tested before publishing your site. ===================== Content prompt used: @@ -31,7 +30,7 @@ Also carefully translate the title and description for the article; do not use & 2. Device px ≠ browser px ≠ image px Metadata returned1. px ≠ 像素 -2. 设备像素 ≠ 浏览器像素 ≠ 图像像素 +2. 设备像素 ≠ 浏览器像素 ≠ 图片像素 Roundtrip (isolated) prompt used: diff --git a/src/content/docs/zh/_roundtrip_specify-width-height.txt b/src/content/docs/zh/_roundtrip_specify-width-height.txt index 3839cef..85e7067 100644 --- a/src/content/docs/zh/_roundtrip_specify-width-height.txt +++ b/src/content/docs/zh/_roundtrip_specify-width-height.txt @@ -1,20 +1,10 @@ ---- -title: Using Width and Height Attributes -description: Benefits of using width and height attributes in HTML code -taskInputHash: 0c2998c00c21d9e0 -lang: en -ignore: '/* cSpell:locale zh,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' ---- -Why should you set width and height in HTML? +Why Should You Add 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. +> It is recommended to add width and height attributes to images in HTML code as this helps web browsers know the dimensions of the image before it is fully loaded. This allows browsers to reserve appropriate space for the image on the webpage and prevent content from jumbling when 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. +> Additionally, specifying the width and height attributes for images in HTML can also improve the overall performance of the webpage. When the browser knows the size of the image beforehand, it can more accurately calculate the space required to display the image, and avoid unnecessary layout or redraw of content. > -> Overall, using width and height attributes for images in HTML code can enhance the user experience, make content load faster, and reduce visual disruptions. +> Overall, using width and height attributes in HTML code can enhance the user experience by making the content load faster and reducing visual glitches. ===================== Content prompt used: diff --git a/src/content/docs/zh/_roundtrip_when-to-use-picture.txt b/src/content/docs/zh/_roundtrip_when-to-use-picture.txt index 78c0f77..3460e7a 100644 --- a/src/content/docs/zh/_roundtrip_when-to-use-picture.txt +++ b/src/content/docs/zh/_roundtrip_when-to-use-picture.txt @@ -1,26 +1,25 @@ --- -title: When to Use the `` Element -description: Explains specific cases when the `` element should be used -taskInputHash: 671b0d063b76a959 +title: When to Use the `picture` Element +description: Explains when to use the `picture` element +taskInputHash: b6307fed6c50d53f lang: en -ignore: '/* cSpell:locale zh,en*/' -date_published: '2023-03-27' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -The `picture` element is used to provide multiple versions of an image and determine which version to display based on specific conditions. It is particularly useful for optimizing images for different screen sizes and resolutions and is commonly used in responsive web design. +The `picture` element is used to provide multiple versions of an image and determine which version to display based on specific conditions. It is particularly useful for optimizing images for different screen sizes and resolutions and is widely used in responsive web design. -Here are some specific cases when you may want to use the `picture` element: +Here are some specific use cases where you might want to use the `picture` element: -* **Retina Displays:** High-density screens, such as Apple's Retina display, have a higher pixel density, which means that images may appear blurry or pixelated if they are not optimized for high resolution. With the `picture` element, you can provide a version of the image with twice the normal pixel density, so that it appears clear and crisp on Retina displays. +* **Retina Displays:** High-density screens, such as Apple's Retina displays, have higher pixel densities, which means that images that are not optimized for high resolution can appear blurry or pixelated. With the `picture` element, you can provide a version of the image with twice the pixel count, so it looks crisp and clear on Retina displays. -* **Different Aspect Ratios:** If you have a site that needs to display images with different aspect ratios, such as landscape versus portrait, you can use the `picture` element to provide different versions of the image optimized for each aspect ratio. +* **Different Aspect Ratios:** If you are designing a website that needs to display images with different aspect ratios (such as landscape vs portrait), you can use the `picture` element to provide different versions of the image optimized for each aspect ratio. -* **Bandwidth Limitations:** Images can be large files that take up a lot of bandwidth, especially on mobile devices. With the `picture` element, you can provide smaller versions of the image for devices with smaller screens or slower internet connections, helping to reduce page load times. +* **Bandwidth Limitations:** Images can be large files that consume a lot of bandwidth, especially on mobile devices. With the `picture` element, you can provide smaller versions of the image for devices with smaller screens or slower internet connections, which can help 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. +* **Layout according to Art Direction:** 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 optimized for different layouts. -Overall, the `picture` element is a powerful tool for optimizing images for a variety of use cases and ensuring they look great no matter what device or screen size they are viewed on. +Overall, the `picture` element is a powerful tool that can help you optimize images for a variety of use cases and ensure that they look great no matter where they are viewed on any device or screen size. ===================== Content prompt used: @@ -33,8 +32,8 @@ Also carefully translate the title and description for the article; do not use & 1. When to use element 2. Explains in which situations you should use the element -Metadata returned1. 何时使用``元素 -2. 解释何时应使用``元素的特定情况 +Metadata returned1. 何时使用`picture`元素 +2. 解释应在何种情况下使用`picture`元素 Roundtrip (isolated) prompt used: diff --git a/src/content/docs/zh/_roundtrip_width-density.txt b/src/content/docs/zh/_roundtrip_width-density.txt index 68f736e..90f5e05 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 +title: Width and Density Descriptors +description: Example of using width and density descriptors in srcset +taskInputHash: cb9466618b61758c lang: en -ignore: '/* cSpell:locale zh,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -Learn about width (`w`) and pixel density (`x`) descriptors in `srcset`. Use examples and Markdown. +Learn about the `width (w)` and `density (x)` descriptors in `srcset`. Use examples and present using Markdown. + +>`srcset` is an HTML attribute that allows developers to provide multiple image sources with different resolutions or pixel densities, allowing the browser to choose the appropriate image based on the display characteristics of the device. The `srcset` attribute uses a combination of `URLs` 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 `URL` and `w` or `x` descriptors to specify the image. ## Width (`w`) Descriptor ->The `w` descriptor is used to specify the width of the image in pixels. It is used when we want to provide the browser with dimensions for the image that can fit the available screen space. +>The `w` descriptor is used to specify the pixel width of an image. It is used when we want to provide the size of an image to the browser so that it can choose an image that fits the available screen space. >The syntax for using the `w` descriptor in `srcset` is as follows: ```html -Example Image + example image ``` +>In the above example, we have provided the browser with three images and their corresponding pixel width. The browser will select the image that is closest to the available screen space. +## Density (`x`) Descriptor ->In the above example, we have provided the browser with three images and their respective widths in pixels. The browser will select the image that is closest to the available screen space. -## Pixel Density (`x`) Descriptor - ->The `x` descriptor is used to specify the pixel density of the image, which is the ratio of physical pixels to CSS pixels. It is used when we want to provide the browser with different versions of the same image with different pixel densities. +>The `x` descriptor is used to specify the pixel density of an image, which is the ratio of physical pixels to CSS pixels. It is 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: ```html -Example Image + example image ``` +>In the above example, we have provided the browser with three images and their corresponding pixel density. The browser will select the image that is closest to the device screen's pixel density. ->In the above example, we have provided the browser with three images and their respective pixel densities. The browser will select the image with the pixel density that is closest to the device screen. - ->Note that the `w` and `x` descriptors can be used together in the same `srcset` attribute to provide more choices to the browser. +>Note that the `w` and `x` descriptors can be used together in the same `srcset` attribute to provide more options for the browser to choose from. ===================== Content prompt used: @@ -58,8 +56,8 @@ Also carefully translate the title and description for the article; do not use & 1. Width and density descriptors 2. Examples of using width and density descriptors in `srcset` -Metadata returned1. 宽度和像素密度描述符 -2. 在`srcset`中使用宽度和像素密度描述符的示例 +Metadata returned1. 宽度和密度描述符 +2. 在 `srcset` 中使用宽度和密度描述符的示例 Roundtrip (isolated) prompt used: diff --git a/src/content/docs/zh/breakpoints.md b/src/content/docs/zh/breakpoints.md index ac75e99..3744991 100644 --- a/src/content/docs/zh/breakpoints.md +++ b/src/content/docs/zh/breakpoints.md @@ -1,41 +1,40 @@ --- -title: 断点和图像 -description: 为什么您的图像会受到某些（但不是全部）断点的影响 -taskInputHash: e220f548add04019 +title: 断点和图片 +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) ，讲述了常用的断点。 +我们必须选择一个任意的 viewport 宽度，这被称为**断点**。这是一定数量的 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`，但在小屏幕上，主要内容区域将填满整个视口。 +主内容图片将受到其容器大小的限制。通常页面的主要内容区域在最大的屏幕上会被限制到一定的宽度，即“最大宽度”，但在小屏幕上，主内容区域将填满整个 viewport。 -如果在某些断点上有多列，则计算有效的大小规则将变得更加困难，因为图片所占视口宽度的百分比将发生变化。 +如果在某些断点上有多个列，则计算有效的大小规则将变得更加困难，因为图片所占的视口宽度的百分比将会改变。 ### 简单方法 -话虽如此，不要过分思考。您可能对以下近似值非常满意： +话虽如此，不要过多考虑这个问题。你可能会非常满意以下的近似值： -1. 主列（或图像容器）停止增长的尺寸是多少？ 在此视口宽度范围内，我们可以使用`100vw`作为图像的`sizes`属性，表示该图像占用整个视口宽度的100%。 -2. 容器的最大宽度是多少？ 我们可以将其设置为其余所有内容的固定`width`。 +1. 主列（或图片的容器）在何时停止增长的尺寸是什么？在该 viewport 宽度之前，我们可以使用 `sizes` 属性的 `100vw` 来表示图片占用视口宽度的 100%。 +2. 那个容器能够达到的最大宽度是什么？我们可以将其作为所有其他设定值的固定 `width`。 -例如，如果你的第一步答案是700像素，第二步答案是800像素，则可以使用以下`sizes`属性： +如果你的答案是 700px 和 800px，你可以使用以下 `sizes` 属性： ```html - + ``` -> 您可能认为浏览器可以根据CSS为我们很好地处理所有这些计算。不幸的是，浏览器过于热衷于在样式表下载之前*优先*选择图像URL。因此，我们必须自己进行计算，如果我们搞不清楚，那就该怪它们了。 +> 你可能认为浏览器可以根据 CSS 很好地处理所有这些计算。不幸的是，浏览器在下载样式表之前会过于着急地选择一个图片 URL，因此我们必须自己进行计算，如果我们计算不完美，那是它们自作聪明的结果。 diff --git a/src/content/docs/zh/browser-picks-srcset.md b/src/content/docs/zh/browser-picks-srcset.md index ab96ac9..d3cdc04 100644 --- a/src/content/docs/zh/browser-picks-srcset.md +++ b/src/content/docs/zh/browser-picks-srcset.md @@ -1,69 +1,62 @@ --- title: 浏览器如何选择 -description: 浏览器如何在`srcset`属性中选择图片 -taskInputHash: bee7d600f9a7bbb2 +description: 浏览器如何在srcset属性中选择图像 +taskInputHash: 20629ee8e7bb7636 lang: zh -ignore: '/* cSpell:locale zh,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -浏览器如何在`srcset`属性中选择图片？以下是一步一步的说明，包括宽度和精度规范，并根据设备和视口决定如何选择。 - -- 在HTML中使用`srcset`属性时，浏览器使用一组规则从提供的源列表中选择最合适的图像。这些规则取决于设备的显示特性（分辨率，像素密度）和视口大小。 `srcset`属性允许您根据宽度（使用`w`描述符）或像素密度（使用`x`描述符）指定不同的图像。让我们通过每个示例进行演示。 - -1.宽度描述符（`w`）： - -假设我们有以下`srcset`属性： - -```html - -Example Image - -``` - -浏览器将执行以下步骤： - -a.确定设备的DPR（设备像素比）。例如，标准显示器的DPR为1，而高分辨率（Retina）显示器的DPR为2或更高。 - -b.为`srcset`中的每个图像计算有效宽度。将宽度描述符乘以DPR。对于DPR为1的设备： - -- example-small.jpg：400 * 1 = 400px - -- example-medium.jpg：800 * 1 = 800px - -- example-large.jpg：1600 * 1 = 1600px - -c.将有效宽度与视口宽度进行比较。假设视口宽度为420px。浏览器将选择具有大于或等于视口宽度的最小有效宽度的图像。在本例中，它将选择`example-medium.jpg`。 - -2.像素密度描述符（`x`）： - -假设我们有以下`srcset`属性： - -```html - -Example Image - -``` - -浏览器将执行以下步骤： - -a.确定设备的DPR（设备像素比）。例如，标准显示器的DPR为1，而高分辨率（Retina）显示器的DPR为2或更高。 - -b.将设备的DPR与`srcset`中的`x`描述符进行比较。在这种情况下，我们有三个具有以下描述符的图像： - -- example-1x.jpg：1x - -- example-2x.jpg：2x - -- example-3x.jpg：3x - -c.选择最接近设备DPR的带有`x`描述符的图像。对于DPR为1的设备，浏览器将选择`example-1x.jpg`。对于DPR为2的设备，它将选择`example-2x.jpg`，依此类推。 - -重要的是要注意，您还可以将`sizes`属性与`srcset`属性结合使用，以提供有关在不同视口宽度下如何显示图像的更多信息。在使用宽度描述符（`w`）时，这尤其有用。以下是一个例子： - -```html - -Example Image +``` + +浏览器将按照以下步骤执行： + +a. 确定设备的 DPR（设备像素比）。例如，标准显示器的 DPR 为1，而高分辨率（Retina）显示器的 DPR 为2或更高。 + +b. 计算 `srcset` 中每个图像的有效宽度。将宽度描述符乘以 DPR。对于 DPR 为1 的设备： + +- `example-small.jpg`: 400 * 1 = 400px + +- `example-medium.jpg`: 800 * 1 = 800px + +- `example-large.jpg`: 1600 * 1 = 1600px + +c. 将有效宽度与视口宽度进行比较。假设视口宽度为 420px。浏览器将选择有效宽度大于或等于视口宽度的最小图像。在本例中，它将选择 `example-medium.jpg`。 + +2\. 像素密度描述符（`x`）： + +假设我们有以下 `srcset` 属性： + +```html +Example Image +``` + +浏览器将按照以下步骤执行： + +a. 确定设备的 DPR（设备像素比）。例如，标准显示器的 DPR 为1，而高分辨率（Retina）显示器的 DPR 为2或更高。 + +b. 将设备的 DPR 与 `srcset` 中的 `x` 描述符进行比较。在这种情况下，我们有三个带有以下描述符的图像： + +- `example-1x.jpg`: 1x + +- `example-2x.jpg`: 2x + +- `example-3x.jpg`: 3x + +c. 选择最接近设备 DPR 的 `x` 描述符的图像。对于 DPR 为1 的设备，浏览器将选择 `example-1x.jpg`。对于 DPR 为2 的设备，它将选择 `example-2x.jpg`，依此类推。 + +需要注意的是，您还可以与 `srcset` 属性一起使用 `sizes` 属性，以提供有关在不同视口宽度下如何显示图像的更多信息。当使用宽度描述符（`w`）时，这特别有用。以下是一个例子： + +```html +An example image + alt="一个示例图像"> ``` +这个标记示例包括： +- **src**：默认图像源，如果浏览器不支持srcset，则显示该源。 +- **srcset**：图像源及其密度描述符列表（1x、2x、3x）。根据用户的显示器选择最合适的图像。 +- **alt**：图像的描述，用于accessibility。 - -此标记示例包括： -- **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..7b730f9 100644 --- a/src/content/docs/zh/introduction.md +++ b/src/content/docs/zh/introduction.md @@ -1,24 +1,22 @@ --- -title: srcset 和 sizes -description: 2023 年响应式图像的高效且主观的指南 -taskInputHash: ff8b517c77f33d91 +title: '`srcset` 和 `` `sizes`' +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 像素。 +请查看侧边栏以获取深入了解。这是一个快速参考指南，用于升级``标签，以处理所有不同大小和像素密度的现代设备。您应该知道像素!=像素，`devicePixelRatio`更可能是3.875而不是1:1。现代手机为了可读性而假装宽度为320-428px（以CSS像素为单位），但每个CSS像素有很多设备像素。 -> 如果您的图像永远不会更改大小，无论您将浏览器窗口缩小到多窄，您应该使用[分辨率描述符](/zh/density-descriptors)代替。这通常适用于徽标、图标和按钮。 +> 如果您的图像大小不会改变，无论您将浏览器窗口缩小到多窄，都应该使用[密度描述符](/zh/density-descriptors)。这常常适用于标志、图标和按钮。 -您知道您的[断点](/zh/breakpoints)是什么吗？您需要这些数字来微调以下解决方案-至少是主内容区域停止增长的视口宽度断点。 +您知道自己的[断点](/zh/breakpoints)是什么吗？您需要这些数字来微调下面的解决方案-至少是主内容区域停止增长的视口宽度断点。 - -### 简单方法 +### 简便方法 ```html @@ -29,10 +27,10 @@ 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/zh/lighthouse-performance-test.md b/src/content/docs/zh/lighthouse-performance-test.md index ae8f4eb..15d0408 100644 --- a/src/content/docs/zh/lighthouse-performance-test.md +++ b/src/content/docs/zh/lighthouse-performance-test.md @@ -1,25 +1,24 @@ --- -title: 通过 Lighthouse 测试性能 +title: 使用 Lighthouse 测试性能 description: 使用 Lighthouse 测试网站性能的步骤 -taskInputHash: 2da1cc6b426bea24 +taskInputHash: e3a6a4766e302363 lang: zh -ignore: '/* cSpell:locale zh,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -如何使用 Lighthouse 测试您的网站性能？ +如何使用 Lighthouse 测试你的网站性能？ -> Lighthouse 是一款用于测量网站性能、可访问性和其他方面的工具。要使用 Lighthouse 测试您的网站性能，请按照以下步骤进行： -> -> 1. 打开 Google Chrome 网络浏览器并转到要测试的页面。 -> -> 2. 点击浏览器窗口右上角的三个点，然后选择“更多工具”，然后选择“开发者工具”，或者直接使用键盘快捷键 “Ctrl+Shift+I”（Windows，Linux）或 “Command+Option+I”（macOS）。 -> -> 3. 在开发者工具面板中，单击位于面板左侧的 Lighthouse 图标，或按 “Ctrl+Shift+P”（Windows，Linux）或 “Command+Shift+P”（macOS）打开命令菜单，然后输入 "Lighthouse" 并选择 “Generate report”。 -> -> 4. 在 Lighthouse 对话框中，选择您要测试的性能和其他相关选项，然后单击 “Generate report”。 -> -> 5. Lighthouse 完成分析后，您将看到一份报告，其中包括改进您的网站性能、可访问性和其他区域的建议和评分。 -> -> 遵循这些步骤，就可以使用 Lighthouse 来测试和优化您的网站性能，这有助于提高其用户体验和搜索引擎排名。 +> Lighthouse 是一个工具，可以用来衡量网站的性能、可访问性和其他方面。要使用 Lighthouse 测试您的网站性能，请按照以下步骤操作： + +1. 打开 Google Chrome 浏览器并导航到要测试的页面。 + +2. 单击浏览器窗口右上角的三个点，然后选择“更多工具”，然后选择“开发者工具”，或者只需使用键盘快捷键“Ctrl+Shift+I”（Windows，Linux）或“Command+Option+I”（macOS）。 + +3. 在“开发者工具”面板中，单击位于面板左侧的 Lighthouse 图标，或按“Ctrl+Shift+P”（Windows，Linux）或“Command+Shift+P”（macOS）打开命令菜单，然后键入 “Lighthouse”，并选择“生成报告”。 + +4. 在 Lighthouse 对话框中，选择性能和其他相关选项，然后单击“生成报告”。 + +5. 在 Lighthouse 完成分析后，您会看到一个报告，其中包含有关您的网站性能、可访问性和其他方面的得分和建议。 + +通过遵循这些步骤，您可以使用 Lighthouse 来测试和优化您的网站性能，从而帮助提高其用户体验和搜索引擎排名。 diff --git a/src/content/docs/zh/picture-examples.md b/src/content/docs/zh/picture-examples.md index 15bc82d..6cea8a6 100644 --- a/src/content/docs/zh/picture-examples.md +++ b/src/content/docs/zh/picture-examples.md @@ -1,54 +1,56 @@ --- -title: 使用 元素的示例 -description: 提供使用 元素的示例，包括响应式图片、艺术指导和不同的图片格式。 -taskInputHash: 14b6f48db8e81c85 +title: 使用元素的示例 +description: 提供使用元素的示例，包括响应式图像、艺术方向和不同的图像格式。 +taskInputHash: 948d982e0b7ea61f lang: zh -ignore: '/* cSpell:locale zh,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -以下是使用``元素的一些示例和它们的解释： - -1. 响应式图片示例: - -```html - - - - 一张图片 - -``` - -解释：在这个例子中，``元素用于为不同的屏幕尺寸提供不同的图像源。``元素使用`"srcset"`属性和`"media"`属性来指定在哪些条件下使用每个源。当``元素中指定的条件未达成时，``元素将作为一个回退选项呈现给旧的浏览器。 - -2. 艺术指导示例： - -```html - - - 一张图片 - -``` - -解释：在这个例子中，``元素被用于根据设备的屏幕方向提供不同的图像源。``元素中的`"media"`属性指定横屏宽屏幕的图像源，而``元素则指定竖屏设备的图像源。 - -3. 不同图片格式的示例： - -```html - - - - 一张图片 - -``` - -解释：在这个例子中，``元素用于为不同的图片格式提供不同的图像源。``元素使用`"srcset"`属性和`"type"`属性来指定图片格式。``元素则作为``元素在旧的浏览器中的回退选项。 - -## 断点 - -在响应式设计中，断点被用于定义当视口尺寸改变时网站或应用程序的布局应该如何改变。断点通常使用CSS中的媒体查询进行定义，这些查询基于屏幕宽度应用不同的样式。这些断点可以与``元素相结合，为不同的屏幕尺寸提供不同的图像源。 - -例如，在上面的第一个示例中，我们使用了`media`属性来指定每个来源应在哪个屏幕宽度下使用。当屏幕宽度大于或等于768像素时，将使用`image-large.jpg`源；当屏幕宽度大于或等于480像素但小于768像素时，将使用`image-medium.jpg`源；当屏幕宽度小于480像素时，将使用`image-small.jpg`源。这样可以为每个设备提供适当尺寸的图像，减少页面加载时间，提高用户体验。 - -断点可以在任何屏幕尺寸下定义，并且可以使用多个断点创建响应多种设备的布局。通过将断点与``元素相结合，您可以创建灵活的、响应式的设计，它们可以在任何设备上呈现出色。 +下面是使用``元素的一些示例及其说明： + +1. 响应式图像示例： + +```html + + + + 图像 + +``` + +说明：在此示例中，``元素用于为不同的屏幕尺寸提供不同的图像源。``元素使用“srcset”属性和“media”属性指定不同的图像源，以指定每个源应在哪些条件下使用。``元素用作较旧的浏览器的备用，或者当未满足``元素中指定的条件时。 + +2. 艺术方向示例： + +```html + + + + 图像 + +``` + +说明：在此示例中，``元素根据设备的方向提供不同的图像源。``元素将“media”属性设置为“(orientation: landscape)”以为宽屏幕指定图像源，而``元素则为纵向屏幕指定图像源。 + +3. 不同图像格式示例： + +```html + + + + + + 图像 + +``` + +说明：在此示例中，``元素用于为不同的图像格式提供不同的图像源。``元素使用“srcset”属性和“type”属性指定不同的图像源和图像格式。``元素用作不支持``元素的较旧的浏览器的备用。 + +## 断点 + +在响应式设计中，断点用于根据视口的大小定义网站或应用程序的布局何时更改。断点通常在CSS中使用媒体查询进行定义，根据屏幕宽度应用不同的样式。这些断点可以与``元素一起使用，以为不同的屏幕尺寸提供不同的图像源。 + +例如，在上面的第一个示例中，我们使用“media”属性指定了屏幕宽度在每个源下应使用的值。当屏幕宽度大于或等于768像素时，将使用`image-large.jpg`源；当屏幕宽度大于或等于480像素但小于768像素时，将使用`image-medium.jpg`源；当屏幕宽度小于480像素时，将使用`image-small.jpg`源。这使我们能够为每个设备提供适当大小的图像，减少页面加载时间并提高用户体验。 + +可以在任何屏幕尺寸上定义断点，并可使用多个断点创建响应各种设备的布局。通过将断点与``元素相结合，您可以创建灵活且响应灵活的设计，可在任何设备上都呈现出色。 diff --git a/src/content/docs/zh/pixels-not-pixels.md b/src/content/docs/zh/pixels-not-pixels.md index eb192de..d4f6af3 100644 --- a/src/content/docs/zh/pixels-not-pixels.md +++ b/src/content/docs/zh/pixels-not-pixels.md @@ -1,20 +1,19 @@ --- title: px ≠ 像素 -description: 设备像素 ≠ 浏览器像素 ≠ 图像像素 -taskInputHash: af021fc2c7e6641e +description: 设备像素 ≠ 浏览器像素 ≠ 图片像素 +taskInputHash: 48e3945f4c04c8a4 lang: zh -ignore: '/* cSpell:locale zh,en*/' sidebar_sort_priority: 900 -date_published: '2023-03-26' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -### 设备像素 ≠ 浏览器像素 ≠ 图像像素 +### 设备像素 ≠ 浏览器像素 ≠ 图片像素 -感谢苹果，CSS 和 HTML 的像素 (`px`) **几乎总是映射到多个设备/打印机像素上**。我的手机设备像素比是 3.875；[你的是多少？](https://www.mydevice.io/) +因为苹果的缘故，CSS 和 HTML 像素（`px`） **几乎总是对应多个设备/打印机像素**。我的手机的 devicePixelRatio 是3.875；[你的是多少？](https://www.mydevice.io/zh-hans/) -我的台式机的设备像素比在浏览器缩放时会改变，但默认为 1.5（毕竟我的 `系统 > 显示 > 缩放` 设为 150%）。 +我的桌面设备的 devicePixelRatio 会在浏览器缩放时改变，但缺省值是1.5（因为我的`系统 > 显示 > 缩放`是150%）。 -图像文件（不包括 SVG）解码为像素网格。**让图像像素以 1:1 比例完美显示在设备像素上非常困难，但通过 `srcset`，你可以得到足够接近于完美的比例**。如果你确实有需要完美映射的正当理由，一些 JavaScript 可以在加载后调整 HTML 元素大小，但此处不会透露此禁忌艺术的细节。 +图像文件（不包括 SVG）解码为像素网格。**让图像像素以与设备像素1:1的比例完美显示非常困难，但使用 `srcset` 你可以接近这个比例**，如果有必要，一些 JavaScript 可以在加载后调整 html 元素大小来实现完美映射，尽管这种禁忌的技巧不能在此揭示。 -> 其他绝对单位（如 in、pc、pt、mm、cm、Q）是用 CSS 像素数表示的，假装一切都是 96dpi。开发人员会避免使用绝对单位，因为通常最好使用从字体大小或视口/容器尺寸派生的单位。如果用户调整了他们的 `辅助功能 > 文本大小` 倍数，缩放浏览器或旋转他们的设备，不匹配的单位可能会破坏布局。不必说，你应该在发布网站之前执行所有这些操作。 +> 其他绝对单位（英寸，派卡，点，毫米，厘米，四分之一毫米）是以 CSS 像素数量定义的，并且假装每个像素密度是96dpi。开发者避免使用绝对单位，因为通常最好使用从字体大小或视口/容器尺寸派生出来的单位。如果用户调整 `辅助功能 > 文本大小` 倍增器、浏览器缩放或旋转设备，不匹配的单位可能会破坏布局。不用说，在发布您的站点之前，应该进行所有这些调整。 diff --git a/src/content/docs/zh/specify-width-height.md b/src/content/docs/zh/specify-width-height.md index da28c72..e0ef55e 100644 --- a/src/content/docs/zh/specify-width-height.md +++ b/src/content/docs/zh/specify-width-height.md @@ -1,17 +1,16 @@ --- title: 使用宽度和高度 description: 在HTML代码中使用宽度和高度属性的好处 -taskInputHash: 0c2998c00c21d9e0 +taskInputHash: e73418bc853d298b lang: zh -ignore: '/* cSpell:locale zh,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -你为什么应该在HTML中设置宽度和高度？ +为什么应该在HTML中添加宽度和高度？ -> 建议在HTML代码中为图像设置宽度和高度属性，因为它可以帮助Web浏览器在完全加载图像之前知道图像的大小。这使得浏览器可以为图像在网页上预留适当的空间，从而防止内容在图像加载时跳动。 +> 建议在HTML代码中为图像添加宽度和高度属性，因为这有助于网页浏览器在完全加载图像之前知道其大小。这允许浏览器为图像在网页上预留适当的空间，防止内容在图像加载时跳动。 > -> 此外，为图像指定宽度和高度属性还可以帮助提高网页的整体性能。当浏览器事先知道图像的大小时，它可以更准确地计算显示图像所需的空间，并避免不必要的回流或重绘内容。 +> 此外，在HTML中为图像指定宽度和高度属性也有助于提高网页的整体性能。当浏览器事先知道图像的大小时，它可以更准确地计算显示图像所需的空间，并避免不必要的重新布局或重新绘制内容。 > -> 总的来说，通过在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..5c8908c 100644 --- a/src/content/docs/zh/when-to-use-picture.md +++ b/src/content/docs/zh/when-to-use-picture.md @@ -1,23 +1,22 @@ --- -title: 何时使用``元素 -description: 解释何时应使用``元素的特定情况 -taskInputHash: 671b0d063b76a959 +title: 何时使用`picture`元素 +description: 解释应在何种情况下使用`picture`元素 +taskInputHash: 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显示器）具有更高的像素密度，这意味着如果它们未经过高分辨率优化，则图像可能会变得模糊或像素化。使用`picture`元素，您可以提供一个具有正常版本两倍像素的图像版本，因此在Retina显示器上看起来清晰明了。 +* **Retina 显示器：** 高密度屏幕，如苹果的 Retina 显示器具有更高的像素密度，这意味着如果图像未针对高分辨率进行优化，则可能会出现模糊或像素化的情况。通过 `picture` 元素，可以提供一个具有两倍像素数量的图像版本，因此在 Retina 显示器上看起来清晰明了。 -* **不同的纵横比：** 如果您设计需要显示不同纵横比（如横向对比纵向）的图像的站点，可以使用`picture`元素提供针对每个纵横比进行优化的不同版本的图像。 +* **不同的宽高比例：** 如果您设计需要显示具有不同宽高比（如横向 vs 纵向）的图像的网站，则可以使用 `picture` 元素为每种宽高比优化的图像提供不同版本。 -* **带宽限制：** 图像可以是大文件，占用大量带宽，尤其是在移动设备上。使用`picture`元素，您可以为具有较小屏幕或较慢互联网连接的设备提供较小的图像版本，从而有助于减少页面加载时间。 +* **带宽限制：** 图像可以是大文件，占用大量带宽，特别是在移动设备上。使用 `picture` 元素，您可以为具有较小屏幕或较慢互联网连接的设备提供较小的图像版本，这有助于减少页面加载时间。 -* **美术指导布局：** 有时您可能希望根据页面其余部分的布局以某种特定方式呈现图像。例如，您可能希望在移动设备上展示某个人的面部特写，但在桌面设备上展示更广阔的景象。`picture`元素允许您提供针对不同布局进行优化的不同图像版本。 +* **按艺术指导的布局：** 有时您可能希望根据页面其余部分的布局以某种方式呈现图像。例如，您可能希望在移动设备上显示一个人脸的近距离特写，但在桌面设备上显示更广的镜头。 `picture` 元素允许您提供为不同布局优化的不同图像版本。 -总的来说，`picture`元素是一个功能强大的工具，可以帮助您优化图像，以适应各种用例，并确保无论在什么设备或屏幕尺寸上查看，它们都看起来很棒。 +总的来说，`picture`元素是一个强大的工具，可以帮助您对各种用例优化图像，并确保无论在哪种设备或屏幕尺寸上查看图像，它们都能表现出色。 diff --git a/src/content/docs/zh/width-density.md b/src/content/docs/zh/width-density.md index 912dab0..d09d91f 100644 --- a/src/content/docs/zh/width-density.md +++ b/src/content/docs/zh/width-density.md @@ -1,48 +1,49 @@ --- -title: 宽度和像素密度描述符 -description: 在`srcset`中使用宽度和像素密度描述符的示例 -taskInputHash: 43b724a74c26793e +title: 宽度和密度描述符 +description: 在 `srcset` 中使用宽度和密度描述符的示例 +taskInputHash: cb9466618b61758c lang: zh -ignore: '/* cSpell:locale zh,en*/' -date_published: '2023-03-24' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- -了解在`srcset`中的宽度（w）和像素密度（x）描述符。使用示例并使用Markdown。 +了解 `srcset` 中 `width (w)` 和 `density (x)` 描述符。请使用示例并使用 Markdown 呈现。 ->`srcset`是一个HTML属性，允许开发人员提供具有不同分辨率或像素密度的多个图像源，并让浏览器根据设备的显示特性选择适当的图像。`srcset`属性使用`URL`和`w`或`x`描述符的组合来指定图像。 -## 宽度（`w`）描述符 +>`srcset` 是一个 HTML 属性，允许开发人员提供具有不同分辨率或像素密度的多个图像源，让浏览器基于设备的显示特性选择合适的图像。 `srcset` 属性使用 `URL` 和 `w` 或 `x` 描述符的组合来指定图像。 ->`w`描述符用于指定图像的宽度，以像素为单位。当我们想要提供浏览器可以选择适合可用屏幕空间的图像的维度时，就会使用它。 +## 宽度（ `w` ）描述符 ->在`srcset`中使用`w`描述符的语法如下： +>`w` 描述符用于指定像素的图像宽度。 当我们想要为浏览器提供图像的尺寸，以便它可以选择适合可用屏幕空间的图像时，会使用它。 + +>使用 `srcset` 中 `w` 描述符的语法如下所示： ```html Example Image + alt="示例图片"> ``` ->在上面的例子中，我们已经向浏览器提供了三个图像及其相应的宽度（以像素为单位）。浏览器将选择最接近可用屏幕空间的图像。 -## 像素密度（`x`）描述符 +>在上面的示例中，我们提供了浏览器三个图像及其相应的像素宽度。 浏览器将选择最接近可用屏幕空间的图像。 + +## 密度 (`x`) 描述符 ->`x`描述符用于指定图像的像素密度，即物理像素与CSS像素的比率。 当我们想要向浏览器提供具有不同像素密度的相同图像的不同版本时，我们会使用它。 +>`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..dfaceaf 100644 --- a/src/content/imgstyle/de/_roundtrip_create-a-carousel.txt +++ b/src/content/imgstyle/de/_roundtrip_create-a-carousel.txt @@ -1,23 +1,21 @@ --- -title: Create a Carousel +title: Creating a Carousel description: How to create a carousel on a website -taskInputHash: 230c6ecf771bf3cb +taskInputHash: a04b23b21eb4f8de lang: en -ignore: '/* cSpell:locale de,en*/' -date_published: '2023-03-29' -date_modified: '2023-03-31' -date_updated: '2023-03-31' +date_published: '2023-04-03' +date_modified: '2023-04-03' +date_updated: '2023-04-03' --- Here are the general steps to create an image carousel on a website: - -1. Create a new HTML file for your image carousel. You can name it, for example, "carousel.html". -2. Add the HTML structure to your file. This usually includes the head section with a title and any necessary CSS stylesheets, as well as the body section where you'll add the actual carousel. +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. This typically includes the head section with a title and any necessary CSS stylesheets, as well as the body section where you will add the actual carousel. 3. Create a container for your carousel using a `
` tag. Give it an ID or class so you can style it later. -4. Inside the container, add individual image files using the `` tag. You can set the source code to the image file path or URL and add alt text or captions as needed. -5. Add navigation buttons to your carousel using `