diff --git a/src/content/docs/de/_roundtrip_breakpoints.txt b/src/content/docs/de/_roundtrip_breakpoints.txt index d2d48bc..635b884 100644 --- a/src/content/docs/de/_roundtrip_breakpoints.txt +++ b/src/content/docs/de/_roundtrip_breakpoints.txt @@ -1,44 +1,41 @@ --- title: Breakpoints & Images description: Why some (but not all) breakpoints are important for your images -taskInputHash: 57ab72e7e951b197 +taskInputHash: c4a3c6347eb6480a lang: en -ignore: '/* cSpell:locale de,en*/' -date_published: '2023-03-26' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- ### Background -Small screens and big monitors require different layouts. For `srcset` and `sizes`, we need to know when the layout changes. +Small screens and large monitors require different layouts. For `srcset` and `sizes`, we need to know when the layout changes. -Web developers need to decide what should be scaled down, hidden, or moved on smaller screens - or decide what should be expanded, revealed, or added on larger screens. They also have very little information available. Is the user on a tablet or phone in landscape mode or in a small browser window? +Web developers need to decide what should be shrunk, hidden, or shifted on smaller screens—or, more commonly, what should be expanded, revealed, or added on larger screens. They also have very few clues. Is the user on a tablet or phone in landscape, or in a small browser window? -We have to choose an arbitrary viewport width at which the layout changes. This is called a **breakpoint**. It can be any number of CSS pixels ([not device pixels](/en/pixels-not-pixels)). Polypane has a [great article](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023) on commonly used breakpoints. +We need to choose an arbitrary viewport width at which the layout changes. This is called a **breakpoint**. It's an arbitrary number of CSS pixels ([not device pixels](/en/pixels-not-pixels)). Polypane has a [great article](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023) on 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) might be immune to layout shifts caused by these breakpoints and are fine with [srcset density descriptors](/en/density-descriptors). -Main content images are limited by the size of their container. Typically, the main area of a page layout is constrained to a specific width, a `max-width`, on the largest screens, but on small screens the main content area fills the entire viewport. +Images in the main content are constrained by the size of their container. Usually, the main content area of a page is limited to a certain width on the largest screens, a `max-width`, but on small screens, the main content area fills the entire viewport. -When you have more than one column at some breakpoints, it becomes difficult to compute the effective size rules because the percentage of viewport width taken up by the image changes. +If you have more than one column at some breakpoints, it becomes harder to calculate the effective sizing rules since the percentage of viewport width that 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: +Still, you shouldn't overthink this. With the following approach, you'll likely do just fine: -1. At what size does the main column (or the container of the image) stop growing? Until that viewport width, we can use `100vw` for the `sizes` attribute of the image to indicate that the image takes up 100% of the viewport width. -2. What is the maximum width the container will ever be? We can set that as a fixed `width` for everything else. +1. At what size does the main column (or the image's container) stop growing? Below 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 that this 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 is 700px, and your answer to 2 is 800px, you can use the following `sizes` attribute: ```html - + ``` - - -> You would think that the browser could kindly do all these calculations for us based on the CSS. Unfortunately, browsers are aggressively trying to choose an image URL *before* downloading stylesheets. So we have to do the calculations ourselves. And if we're not perfect, that's their problem. +> You might think that the browser could do all these calculations for us nicely based on CSS. Unfortunately, browsers are very eager to pick an image URL *before* downloading the stylesheets. So we have to do the calculations ourselves, and it's their prerogative to handle it gracefully if we don't get it perfect. ===================== Content prompt used: @@ -52,7 +49,7 @@ Also carefully translate the title and description for the article; do not use & 2. Why some (but not all) breakpoints matter for your images Metadata returned1. Breakpoints & Bilder -2. Warum manche (aber nicht alle) Breakpoints wichtig für Ihre Bilder sind +2. Warum einige (aber nicht alle) Breakpoints für Ihre Bilder wichtig sind Roundtrip (isolated) prompt used: diff --git a/src/content/docs/de/_roundtrip_browser-picks-srcset.txt b/src/content/docs/de/_roundtrip_browser-picks-srcset.txt index f129def..1bef728 100644 --- a/src/content/docs/de/_roundtrip_browser-picks-srcset.txt +++ b/src/content/docs/de/_roundtrip_browser-picks-srcset.txt @@ -1,66 +1,61 @@ --- -title: How the Browser selects -description: How the browser selects between images listed in the "srcset" attribute -taskInputHash: 21fa78dd27583003 +title: How the browser chooses +description: How the browser selects between images in the srcset attribute +taskInputHash: de4c5e9ccd50e3e2 lang: en +date_published: '2023-03-31' +date_modified: '2023-03-31' +date_updated: '2023-03-31' --- -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 are the steps with examples for both width and density specifications and how the browser decides based on device and viewport. -- When using the "srcset" attribute in HTML, the browser uses a set of rules to select the most suitable image from a list of provided sources. These rules depend on both the display characteristics of the device (resolution, pixel density) and the size of the viewport. The "srcset" attribute allows you to specify different images based on width (using the "w" descriptor) or pixel density (using the "x" descriptor). Let's go through examples for both cases. +- When using the `srcset` attribute in HTML, the browser uses a set of rules to select the best image from a list of provided sources. These rules depend both on the display properties of the device (resolution, pixel density) and on 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 go through each case with examples. -1. Width descriptor ("w"): +1. Width descriptor (`w`): -Assuming we have the following "srcset" attribute: +Assume we have the following `srcset` attribute: ```html - Example image - ``` The browser will perform the following steps: -a. Determine the DPR (Device Pixel Ratio) of the device. For instance, a standard display has a DPR of 1, while a high-resolution (Retina) display has a DPR of 2 or higher. +a. Determine the DPR (device pixel ratio) of the device. For example, a standard display has a DPR of 1, while a high-resolution (Retina) screen has a DPR of 2 or higher. -b. Calculate the effective width for each image in the "srcset". Multiply the width descriptor by the DPR. For a device with a DPR of 1: +b. Calculate the effective width for each image in the `srcset`. Multiply the width descriptor by the DPR. For a device with a DPR of 1: - example-small.jpg: 400 * 1 = 400px - - example-medium.jpg: 800 * 1 = 800px - - example-large.jpg: 1600 * 1 = 1600px -c. Compare the effective widths to the viewport width. Assuming the viewport width is 420px, the browser selects the smallest image whose effective width is greater than or equal to the viewport width. In this case, "example-medium.jpg" is selected. +c. Compare the effective widths to 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 selects `example-medium.jpg`. -2. Density descriptor ("x"): +2. Density descriptor (`x`): -Assuming we have the following "srcset" attribute: +Assume we have the following `srcset` attribute: ```html - Example image - ``` The browser will perform the following steps: -a. Determine the DPR (Device Pixel Ratio) of the device. For instance, a standard display has a DPR of 1, while a high-resolution (Retina) display has a DPR of 2 or higher. +a. Determine the DPR (device pixel ratio) of the device. For example, a standard display has a DPR of 1, while a high-resolution (Retina) screen has a DPR of 2 or higher. -b. Compare the device's DPR with the "x" descriptors in the "srcset". In this case, we have three images with the following descriptors: +b. Compare the device's DPR with the `x` descriptors in the `srcset`. In this case, we have three images with the following descriptors: - example-1x.jpg: 1x - - example-2x.jpg: 2x - - example-3x.jpg: 3x -c. Select the image with the "x" descriptor closest to the device's DPR. For a device with a DPR of 1, the browser selects "example-1x.jpg". For a device with a DPR of 2, it selects "example-2x.jpg", and so on. +c. Select the image with the `x` descriptor that is closest to the device's DPR. For a device with a DPR of 1, the browser selects `example-1x.jpg`. For a device with a DPR of 2, it selects `example-2x.jpg`, and so on. -It is important to note that you can also use the "sizes" attribute in combination with the "srcset" attribute to provide further information on how the image should display at different viewport widths. This is particularly useful when using the width descriptor ("w"). Here is an example: +It's important to note that you can use the `sizes` attribute in conjunction with the `srcset` attribute to provide more information on how the image will be displayed at different viewport widths. This is particularly useful when using the width descriptor (`w`). Here's an example: ```html - ` 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 with srcset to provide images with different resolutions according to the pixel density of the user's screen. -## 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 achieve the following: -## Implementing srcset with density descriptors +1. Provide high-resolution images on high-resolution displays (e.g., retina displays) while providing low-resolution images on standard displays. +2. Improve page performance by providing the most suitable image size for each user's device. + +## Implementing Srcset with Density Descriptors + +To use Srcset with Density Descriptors, follow these steps: -To use srcset with density descriptors, follow these steps: 1. Prepare your images in different resolutions. -2. Add the `srcset` attribute to the `` element, including the image sources and corresponding density descriptors. -3. Optionally, add the `sizes` attribute to set the size of the image on the screen. +2. Add the `srcset` attribute to the `` element, and specify the image sources along with the corresponding Density Descriptors. +3. Add the `sizes` attribute (optional) to specify the size of the image on the screen. -### Markup example +### Markup Example -Here is an example of how to implement srcset with density descriptors in your markup: +Here 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 decisive guide to responsive images until 2023 +taskInputHash: 8444ab4d2d09446e lang: en -ignore: '/* cSpell:locale de,en*/' sidebar_sort_priority: 1000 -date_published: '2023-03-23' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -**An efficient and definitive guide to images until 2023** +**An Efficient and Decisive Guide to Images until 2023** -See the sidebar for the detailed analysis. This is the quick reference for updating these `` tags to support modern devices of all sizes and pixel densities. You should [know that pixel ≠ pixel](/en/pixel-not-a-pixel) and `devicePixelRatio` is more likely to be 3.875 than 1:1. Modern phones pretend to be 320-428px wide to improve legibility (in CSS pixels), but have many device pixels per CSS pixel. +Check the sidebar for the intensive dive. This is a quick reference to upgrading these `` tags to handle modern devices of all their various sizes and pixel densities. You should [know that pixels ≠ pixels](/en/pixel-not-pixel) and `devicePixelRatio` is more like 3.875 than 1:1. Modern phones pretend to be 320-428px wide (in CSS pixels) for readability reasons, 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 instead](/en/density-descriptors). This is often suitable for logos, icons, and buttons. -Do you know what your [breakpoints](/en/breakpoints) are? You’ll need those numbers to 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 optimize the solution below - and at least the viewport breakpoint at which the main content stops growing. -### The easy method + +### The Easy 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 on a bike" /> + And that below that viewport width, this image takes up 100% of the width, but + when the viewport is wider, the image is capped at 800 CSS pixels --> - + ``` ===================== @@ -48,8 +47,8 @@ Also carefully translate the title and description for the article; do not use & 1. srcset & sizes 2. An Efficient and Opinionated Guide to Responsive Images for 2023 -Metadata returned1. srcset und sizes - 2. Ein effizienter und dezidierter Leitfaden für responsive Bilder bis 2023 +Metadata returned1. srcset & sizes +2. Ein effizienter und entschiedener Leitfaden für Responsive Bilder bis 2023 Roundtrip (isolated) prompt used: diff --git a/src/content/docs/de/_roundtrip_lighthouse-performance-test.txt b/src/content/docs/de/_roundtrip_lighthouse-performance-test.txt index de4e2f1..e5baf77 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: How to Conduct Performance Testing with Lighthouse +description: Guide to testing a website's performance using Lighthouse +taskInputHash: ee309b39be1bb10f lang: en -ignore: '/* cSpell:locale de,en*/' -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- How do you test your website's performance using Lighthouse? -> Lighthouse is a tool that allows for the measurement of a website's performance, accessibility, and other aspects. To test your website's performance using Lighthouse, follow these steps: -> -> 1. Open the Google Chrome web browser and navigate to the page you wish to test. -> -> 2. Click on the three dots in the upper right corner of the browser window, then select "More Tools" and then "Developer Tools," or simply use the keyboard shortcut "Ctrl+Shift+I" (Windows, Linux) or "Command+Option+I" (macOS). -> -> 3. In the Developer Tools window, click on the Lighthouse icon on the left side of the window, or press "Ctrl+Shift+P" (Windows, Linux) or "Command+Shift+P" (macOS) to open the Command Menu. Type "Lighthouse" and select "Generate report." -> -> 4. In the Lighthouse dialog box, select the performance and other relevant options you wish to test, then click "Generate report." -> -> 5. Once Lighthouse completes its analysis, you will see a report with scores and recommendations for improving your website's performance, accessibility, and other areas. -> -> By following these steps, you can use Lighthouse to test and optimize your website's performance, which can improve user experience and search engine rankings. +> Lighthouse is a tool that can be used to measure a website's performance, accessibility, and other aspects. Follow these steps to test your website's performance using Lighthouse: +> +> 1\. Open the Google Chrome web browser and navigate to the page you want to test. +> +> 2\. Click on the three dots in the top right corner of the browser window and then select "More Tools" and then "Developer Tools" or simply use the keyboard shortcut "Ctrl+Shift+I" (Windows, Linux) or "Command+Option+I" (macOS). +> +> 3\. In the Developer Tools panel, click on the Lighthouse icon 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 that you want to test, and then click "Generate Report". +> +> 5\. After Lighthouse completes its analysis, a report will be displayed with ratings 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 the user experience and ranking in search engines. ===================== Content prompt used: @@ -35,8 +34,8 @@ Also carefully translate the title and description for the article; do not use & 1. Test performance with Lighthouse 2. Steps on how to test a website's performance using Lighthouse -Metadata returned1. Testen der Leistung mit Lighthouse -2. Schritte zum Testen der Leistung einer Website mit Lighthouse +Metadata returned1. Leistungstest mit Lighthouse durchführen +2. Anleitung zum Testen der Leistung einer Website mit Lighthouse Roundtrip (isolated) prompt used: diff --git a/src/content/docs/de/_roundtrip_picture-examples.txt b/src/content/docs/de/_roundtrip_picture-examples.txt index b3a5396..e2673b4 100644 --- a/src/content/docs/de/_roundtrip_picture-examples.txt +++ b/src/content/docs/de/_roundtrip_picture-examples.txt @@ -1,54 +1,61 @@ ---- -title: Examples for usage of element -description: >- - Provides examples for the usage of the element for responsive images, art direction, and various image formats. -taskInputHash: aace1b3e0a9751e5 -lang: en ---- -Here are a few examples for the usage of the `` element and their explanations: - -1. Example for responsive images: - -```html - - - - An image - -``` - -Explanation: In this example, the `` element is used to provide different image sources for different screen sizes. The `` elements specify the different image sources using the `srcset` attribute and the `media` attribute to define the conditions under which each source should be used. The `` element is used as fallback for older browsers or if the conditions specified in the `` elements are not met. - -2. Example for Art Direction: - -```html - - - An image - -``` - -Explanation: In this example, the `` element is used to provide different image sources based on the orientation of the device. The `` element with the `media` attribute set to `(orientation: landscape)` specifies an image source for wide screens while the `` element specifies an image source for portrait screens. - -3. Example for various image formats: - -```html - - - - An image - -``` - -Explanation: In this example, the `` element is used to provide different image sources for various image formats. The `` elements specify different image sources using the `srcset` attribute and the `type` attribute to define the image format. The `` element is used as fallback for older browsers that do not support the `` element. - -## Breakpoints - -In responsive design, breakpoints are used to define when the layout of a website or application should change based on the size of the viewport. Breakpoints are typically defined with media queries in CSS that apply different styles depending on the screen width. These breakpoints can be used in conjunction with the `` element to provide different image sources for different screen sizes. - -In the first example above, we used the `media` attribute to specify the screen width at which each source should be used. If the screen width is greater than or equal to 768 pixels, the `image-large.jpg` source will be used. If the screen width is greater than or equal to 480 pixels but less than 768 pixels, `image-medium.jpg` source will be used. If the screen width is less than 480 pixels, the `image-small.jpg` source will be used. This allows appropriately sized images to be provided for each device, reducing page load times and improving the user experience. - -Breakpoints can be defined for any screen size, and multiple breakpoints can be used to create layouts that respond to a wide range of devices. By combining breakpoints with the `` element, flexible and responsive designs can be created that look great on any device. +--- +title: Examples for the usage of the element +description: >- + Provides examples for the usage of the element for responsive + images, art direction and different image formats. +taskInputHash: 379fda90621fb364 +lang: en +date_published: '2023-03-31' +date_modified: '2023-03-31' +date_updated: '2023-03-31' +--- +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 a fallback for older browsers or if the conditions in the `` elements are not met. + +2. Example for art direction: + +```html + + + + An image + +``` + +Explanation: In this example, the `` element is used to provide different image sources depending on the orientation of the device. The `` element with the "media" attribute set to "(orientation: landscape)" specifies an image source for wide screens, while the `` element specifies an image source for portrait screens. + +3. Example for different image formats: + +```html + + + + + + An image + +``` + +Explanation: In this example, the `` element is used to provide different image sources for different image formats. The `` elements specify different image sources using the "srcset" attribute and the "type" attribute to specify the image format. The `` element is used as a fallback for older browsers that do not support the `` element. + +## Breakpoints + +In responsive design, breakpoints are used to determine when the layout of a website or application should be changed based on the size of the viewport. Breakpoints are usually defined using media queries in CSS, which apply different styles depending on screen width. These breakpoints can be used in conjunction with the `` element to provide different image sources for different screen sizes. + +For example, in the first example above, we used the `media` attribute to define 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 is used; if the screen width is greater than or equal to 480 pixels but less than 768 pixels, the `image-medium.jpg` source is used; and if 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 user experience. + +Breakpoints can be defined for each 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: diff --git a/src/content/docs/de/_roundtrip_pixels-not-pixels.txt b/src/content/docs/de/_roundtrip_pixels-not-pixels.txt index 0055c57..5da9ed3 100644 --- a/src/content/docs/de/_roundtrip_pixels-not-pixels.txt +++ b/src/content/docs/de/_roundtrip_pixels-not-pixels.txt @@ -1,23 +1,22 @@ --- title: px ≠ Pixel description: Device Pixels ≠ Browser Pixels ≠ Image Pixels -taskInputHash: 6bf2840ae3339b2e +taskInputHash: 6f6956959c7aeb38 lang: en -ignore: '/* cSpell:locale de,en*/' sidebar_sort_priority: 900 -date_published: '2023-03-26' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -### Device Pixels ≠ Browser Pixels ≠ Image Pixels +### Device Pixels ≠ Browser PX ≠ Image PX -Thanks to Apple, CSS and HTML pixels (`px`) almost never correspond to a single device/printer pixel. The `devicePixelRatio` on my phone is 3.875; [how high is yours?](https://www.mydevice.io/) +Thanks to Apple, CSS and HTML pixels (`px`) **almost never correspond 1:1 to the actual pixels of the device/printer**. The devicePixelRatio of my phone is 3.875; [what's yours?](https://www.mydevice.io/) -My desktop `devicePixelRatio` changes as I zoom in on the browser, but it is typically 1.5 (my `System > Display > Scale` is set to 150%, after all). +The devicePixelRatio of my desktop changes when I zoom in the browser, but the default value is 1.5 (after all, my `System > Display > Scale` is set to 150%). -Image files (except for SVG) decode to a grid of pixels. **Unfortunately, it is difficult to display image pixels perfectly at a 1:1 ratio with device pixels -- but with `srcset`, you can get *close enough*, and some JavaScript can adjust the size of the HTML element after it loads if you have a really compelling reason for perfect parity, though such black arts will not be revealed here.** +Image files (except SVGs) decode to a raster of pixels. **It's annoyingly difficult to display the image's pixels at a 1:1 ratio to device pixels, but with `srcset`, you can get *close enough* and a little JavaScript can adjust the size of the HTML element after loading if you have really good reasons for a perfect match. However, 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/Web/CSS/length) are defined in relation to the number of CSS pixels and assume everything is at 96dpi. Developers avoid absolute units since it's generally better to use units derived from font size or the viewport/container dimensions. Inappropriate units can destroy the layout if the user changes their `Settings > Text Size` multiplier, browser zoom, or device rotation. So you should try all these things out before publishing your page. ===================== 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..d9418e9 100644 --- a/src/content/docs/de/_roundtrip_specify-width-height.txt +++ b/src/content/docs/de/_roundtrip_specify-width-height.txt @@ -1,10 +1,19 @@ -Why should you include width and height in HTML? - -> It is recommended to include width and height attributes in the HTML code for images, as they help the web browser to know the size of the image before it is fully loaded. This allows the browser to reserve the appropriate space on the webpage for the image, which prevents content from jumping when the image is loaded. -> -> Additionally, specifying width and height attributes for images can help improve the overall performance of the webpage. If a browser knows the size of an image in advance, it can more accurately calculate how much space is needed to display the image and avoid unnecessary reflows or repaints of the content during loading. -> -> Overall, the use of width and height attributes in HTML code for images can improve the user experience by loading content faster and reducing visual errors. +--- +title: Using Width and Height Attributes +description: Benefits of using width and height attributes in HTML code +taskInputHash: 6c1b5df412fca6c8 +lang: en +date_published: '2023-03-31' +date_modified: '2023-03-31' +date_updated: '2023-03-31' +--- +Why should you include width and height in HTML? + +> It is recommended to include width and height attributes in HTML code for images as 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 content from shifting during image load. +> +> Additionally, specifying the width and height attributes for images can also improve the overall performance of the webpage. When a browser knows the size of an image beforehand, it can more accurately calculate the space needed to display the image, avoiding unnecessary reflows or repaints of content during loading. +> +> Overall, using width and height attributes in HTML code for images can improve user experience by speeding up content loading and reducing visual glitches. ===================== Content prompt used: @@ -17,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. Verwendung von Breite und Höhe -2. Vorteile der Verwendung von Breite und Höhe Attributen im HTML-Code +Metadata returned1. Breite und Höhe verwenden +2. Vorteile der Verwendung von Breiten- und Höhenattributen im HTML-Code Roundtrip (isolated) prompt used: diff --git a/src/content/docs/de/_roundtrip_when-to-use-picture.txt b/src/content/docs/de/_roundtrip_when-to-use-picture.txt index 508508a..70b1cb6 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 +title: When to Use the `` Element description: 'Explains in which situations to use the element.' -taskInputHash: 0d098655c456a3e4 +taskInputHash: 248d52873ac64bfe lang: en -ignore: '/* cSpell:locale de,en*/' -date_published: '2023-03-27' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -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 to display. It is particularly useful for optimizing images for different screen sizes and resolutions and is often used in responsive web design. -Here are some specific scenarios in which you would want to use the `picture` element: +Here are some specific scenarios in which you should use the `picture` element: -* **Retina displays:** High-resolution screens such as Apple's Retina displays have a higher pixel density, which means that images can look blurry or pixelated if they are not optimized for high resolutions. With the `picture` element, you can provide a version of the image that has twice as many pixels as the normal version, so it looks sharp and clear on Retina displays. +* **Retina Displays:** High-resolution screens 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 resolutions. 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 aspect ratios:** If you are designing a website that needs to display images with different aspect ratios (e.g. landscape vs. portrait), you can use the `picture` element to provide different versions of the image that are optimized for each aspect ratio. +* **Different Aspect Ratios:** When designing a website that needs to display images with different aspect ratios (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. -* **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 the page load time. -* **Art-directed layouts:** Sometimes you want to present an image in a certain way depending on the layout of the rest of the page. For example, you might want to show a close-up of a person's face on mobile devices, but a wider view on desktop devices. The `picture` element allows you to provide different versions of the image that are optimized for different layouts. +* **Layouts with art direction:** Sometimes you want to present an image in a specific way depending on the layout of the rest of the page. For example, you may want to show a close-up of a person's face on mobile devices, but a different 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 that can help you optimize your images for a variety of use cases and ensure that they look great regardless of the device or screen size. ===================== Content prompt used: @@ -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..0e67049 100644 --- a/src/content/docs/de/_roundtrip_width-density.txt +++ b/src/content/docs/de/_roundtrip_width-density.txt @@ -1,50 +1,49 @@ --- -title: Width and Density Adapters -description: Examples of using width and density adapters in `srcset` -taskInputHash: 2171ff4767b5d45d +title: Width and density descriptors +description: Examples of using width and density descriptors in `srcset` +taskInputHash: 766c94def2d2bba4 lang: en -ignore: '/* cSpell:locale de,en*/' -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -Understanding width (`w`) and density (`x`) adapters in `srcset`. Use examples and markdown. +Understanding width (`w`) and density (`x`) descriptors in `srcset`. Using examples and markdown. -> `srcset` is an HTML attribute that allows developers to provide multiple image sources with different resolutions or pixel densities and let the browser choose the appropriate image based on the display properties of the device. The `srcset` attribute uses a combination of `URL` and `w-` or `x-` adapters to specify the images. +> `srcset` is an HTML attribute that allows developers to provide multiple image sources with different resolutions or pixel densities and let the browser choose the appropriate image based on the device display properties. 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 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-` adapter in `srcset` looks like this: +> The syntax for using the `w` descriptor in `srcset` is as follows: -```html +````html Example Image -``` + alt="Example image"> +```` -> In the above example, we have provided the browser with three images and their corresponding widths in pixels. The browser selects the image with the closest width to the available screen space. +> In the above example, we have provided the browser with three images and their corresponding widths in pixels. The browser 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, i.e. the ratio of physical pixels to CSS pixels. It is used when we want to provide the browser with different versions of the same image with different pixel densities. -> The syntax for using the `x-` adapter in `srcset` looks like this: +> The syntax for using the `x` descriptor in `srcset` is as follows: -```html +````html Example Image -``` + alt="Example image"> +```` -> In the above example, we have provided the browser with three images and their corresponding pixel densities. The browser selects the image with the closest pixel density to the device screen. +> In the above example, we have provided the browser with three images and their corresponding pixel densities. The browser chooses the image with the nearest pixel density of the device. -> 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 give the browser more options. ===================== Content prompt used: @@ -57,8 +56,8 @@ Also carefully translate the title and description for the article; do not use & 1. Width and density descriptors 2. Examples of using width and density descriptors in `srcset` -Metadata returned1. Breiten- und Dichteadapter -2. Beispiele für die Verwendung von Breiten- und Dichteadaptern in `srcset` +Metadata returned1. Breiten- und Dichtebeschreibungen +2. Beispiele für die Verwendung von Breiten- und Dichtebeschreibungen in `srcset` Roundtrip (isolated) prompt used: diff --git a/src/content/docs/de/breakpoints.md b/src/content/docs/de/breakpoints.md index 98ebd65..78b7798 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: c4a3c6347eb6480a lang: de -ignore: '/* cSpell:locale de,en*/' -date_published: '2023-03-26' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- ### Hintergrund -Kleine Bildschirme und große Monitore benötigen unterschiedliche Layouts. Für `srcset` und `sizes` müssen wir wissen, wann das Layout geändert wird. +Kleine Bildschirme und große Monitore erfordern unterschiedliche Layouts. Für `srcset` und `sizes` müssen wir wissen, wann das Layout geändert wird. -Webentwickler müssen entscheiden, was auf kleineren Bildschirmen verkleinert, ausgeblendet oder verschoben werden soll - oder sie müssen entscheiden, was auf größeren Bildschirmen erweitert, aufgedeckt oder hinzugefügt werden soll. Sie haben auch sehr wenig Informationen zur Verfügung. Befindet sich der Benutzer auf einem Tablet oder Telefon im Landscape-Modus oder in einem kleinen Browserfenster? +Webentwickler müssen entscheiden, was auf kleineren Bildschirmen geschrumpft, ausgeblendet oder verschoben werden soll - oder häufiger, was auf größeren Bildschirmen erweitert, enthüllt oder hinzugefügt werden soll. Sie haben auch sehr wenige Informationen zur Verfügung. Befindet sich der Benutzer auf einem Tablet oder einem Telefon im Querformat oder einem kleinen Browserfenster? -Wir müssen eine beliebige Viewport-Breite wählen, an der das Layout geändert wird. Dies wird als **Breakpoint** bezeichnet. Es handelt sich um eine beliebige Anzahl von CSS-Pixeln ([nicht Gerätepixeln](/de/pixels-not-pixels)). Polypane hat einen [großartigen Artikel](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023) über gebräuchliche Breakpoints. +Wir müssen eine willkürliche Viewport-Breite wählen, an der das Layout geändert wird. Dies wird als **Breakpoint** bezeichnet. Es ist eine willkürliche Anzahl von CSS-Pixel ([nicht Gerätepixel](/de/pixels-not-pixels)). Polypane hat einen [großartigen Artikel](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023) über 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, Symbole oder Schaltflächen) sind möglicherweise immun gegen die durch diese Breakpoints verursachten Layoutverschiebungen (und sind in Ordnung mit [srcset-Dichte-Deskriptoren](/de/density-descriptors)). -Hauptinhaltbilder werden durch die Größe ihres Containers begrenzt. Typischerweise ist der Hauptbereich eines Seitenlayouts auf den größten Bildschirmen auf eine bestimmte Breite begrenzt, eine `max-width`, aber auf kleinen Bildschirmen füllt der Hauptinhaltbereich den gesamten Viewport aus. +Bilder im Hauptinhalt werden durch die Größe ihres Behälters begrenzt. Normalerweise wird der Hauptinhaltbereich einer Seite auf den größten Bildschirmen auf eine bestimmte Breite begrenzt, eine `max-width`, aber auf kleinen Bildschirmen füllt der Hauptinhaltbereich den gesamten Viewport aus. -Wenn Sie bei einigen Breakpoints mehr als eine Spalte haben, wird es schwieriger, die effektiven Größenregeln zu berechnen, da sich der Prozentsatz der Viewport-Breite, den das Bild einnimmt, ändert. +Wenn Sie bei einigen Breakpoints mehr als eine Spalte haben, wird es schwieriger, die effektiven Sizing-Regeln zu berechnen, da sich der Prozentsatz 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: +Trotzdem sollten Sie das nicht überdenken. Mit der folgenden Annäherung sollten Sie wahrscheinlich sehr gut zurechtkommen: -1. Bei welcher Größe hört die Hauptspalte (oder der Container des Bildes) auf zu wachsen? Bis zu dieser Viewport-Breite können wir `100vw` für das `sizes`-Attribut des Bildes verwenden, um anzugeben, dass das Bild 100% der Viewport-Breite einnimmt. -2. Was ist die maximale Breite, die der Container jemals erreicht? Wir können das als festgelegte `width` für alles andere setzen. +1. Bei welcher Größe hört die Hauptspalte (oder der Behälter des Bildes) auf zu wachsen? Bis zu dieser Viewport-Breite können wir `100vw` für das `sizes`-Attribut des Bildes verwenden, um zu sagen, dass das Bild 100% der Viewport-Breite einnimmt. +2. Was ist die maximale Breite, die dieser Behälter je erreicht? Wir können das als feste `Breite` 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: ```html - - + + ``` -> Man würde denken, dass der Browser all diese Berechnungen netterweise für uns basierend auf dem CSS übernehmen könnte. Leider sind Browser aggressiv darum bemüht, eine Bild-URL *vor* dem Herunterladen von Stylesheets zu wählen. Also müssen wir die Berechnungen selbst durchführen. Und wenn wir nicht perfekt sind, ist es ihr Problem. +> Man könnte meinen, dass der Browser alle diese Berechnungen schön für uns anhand von CSS erledigen könnte. Leider sind Browser sehr eifrig, eine Bild-URL *vor* dem Herunterladen der Stylesheets auszuwählen. Also müssen wir die Berechnungen selbst durchführen, und es ist ihr gutes 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..e828b06 100644 --- a/src/content/docs/de/browser-picks-srcset.md +++ b/src/content/docs/de/browser-picks-srcset.md @@ -1,70 +1,68 @@ --- -title: Wie der Browser wählt -description: Wie der Browser zwischen in srcset aufgelisteten Bildern wählt -taskInputHash: 565e2cc4a65e54bd +title: Wie der Browser auswählt +description: Wie der Browser zwischen Bildern im srcset-Attribut auswählt +taskInputHash: de4c5e9ccd50e3e2 lang: de -ignore: '/* cSpell:locale de,en*/' -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -Wie wählt der Browser zwischen den in srcset angegebenen Bildern? Hier sind die Schritte mit Beispielen für sowohl Width- als auch Density-Spezifikationen und wie der Browser basierend auf Gerät und Viewport entscheidet: - -- Wenn man das `srcset`-Attribut in HTML verwendet, verwendet der Browser eine Grundsätze zur Auswahl des geeignetsten Bildes aus der Liste der bereitgestellten Quellen. Diese Grundsätze hängen sowohl von den Anzeigeeigenschaften des Geräts (Auflösung, Pixeldichte) als auch von der Viewport-Größe ab. Das `srcset`-Attribut ermöglicht es Ihnen, verschiedene Bilder auf der Grundlage der Breite (mit Breiten-Beschreibung `w`) oder der Pixeldichte (mit X-Beschreibung `x`) zu spezifizieren. Lassen Sie uns jeden Fall mit Beispielen durchgehen. - -1\. Width-Beschreibung (`w`): - -Angenommen, wir haben das folgende `srcset`-Attribut: - -```html - -Beispielbild - -``` - -Der Browser wird die folgenden Schritte ausführen: - -a. Bestimmen Sie die DPR (Gerätepikselverhältnis) des Geräts. Ein Standardbildschirm hat beispielsweise eine DPR von 1, während ein hochauflösender (Retina-)Bildschirm eine DPR von 2 oder höher hat. - -b. Berechnen Sie die effektive Breite für jedes Bild im `srcset`. Multiplizieren Sie die Breiten-Beschreibung mit der DPR. Für ein Gerät mit einem DPR von 1: - -- Beispiel-small.jpg: 400 * 1 = 400px - -- Beispiel-medium.jpg: 800 * 1 = 800px - -- Beispiel-large.jpg: 1600 * 1 = 1600px - -c. Vergleichen Sie die effektiven Breiten mit der Viewport-Breite. Angenommen, die Viewport-Breite beträgt 420px. Der Browser wählt das kleinste Bild mit einer effektiven Breite, die größer als oder gleich der Viewport-Breite ist. In diesem Fall wählt er `example-medium.jpg`. - - -2\. Pixeldichte-Beschreibung (`x`): - -Angenommen, wir haben das folgende `srcset`-Attribut: - -```html - -Beispielbild - -``` - -Der Browser wird die folgenden Schritte ausführen: - -a. Bestimmen Sie die DPR (Gerätepikselverhältnis) des Geräts. Ein Standardbildschirm hat beispielsweise eine DPR von 1, während ein hochauflösender (Retina-)Bildschirm eine DPR von 2 oder höher hat. - -b. Vergleichen Sie die DPR des Geräts mit den `x`-Beschreibungen im `srcset`. In diesem Fall haben wir drei Bilder mit den folgenden Beschreibungen: - -- Beispiel-1x.jpg: 1x - -- Beispiel-2x.jpg: 2x - -- Beispiel-3x.jpg: 3x - -c. Wählen Sie das Bild mit der `x`-Beschreibung aus, die der DPR des Geräts am nächsten kommt. Für ein Gerät mit einem DPR von 1 wählt der Browser `example-1x.jpg` aus. Für ein Gerät mit einem DPR von 2 wählt er `example-2x.jpg` aus und so weiter. - -Es ist wichtig zu beachten, dass man auch das `sizes`-Attribut in Kombination mit dem `srcset`-Attribut verwenden kann, um weitere Informationen darüber zu liefern, wie das Bild bei unterschiedlichen Viewport-Breiten dargestellt wird. Dies ist besonders nützlich bei Verwendung der Breitenbeschreibung (`w`). Hier ist ein Beispiel: - -```html - -Beispielbild + +``` + +Der Browser wird folgende Schritte durchführen: + +a. Bestimmen Sie den DPR (Gerätepixelverhältnis) des Geräts. Ein Standard-Display hat zum Beispiel ein DPR von 1, während ein hochauflösender (Retina) Bildschirm ein DPR von 2 oder höher hat. + +b. Berechnen Sie die effektive Breite für jedes Bild im `srcset`. Multiplizieren Sie den Breitendeskriptor mit dem DPR. Für ein Gerät mit einem DPR von 1: + +- example-small.jpg: 400 \* 1 = 400px + +- example-medium.jpg: 800 \* 1 = 800px + +- example-large.jpg: 1600 \* 1 = 1600px + +c. Vergleichen Sie die effektiven Breiten mit der Viewport-Breite. Angenommen, die Viewport-Breite beträgt 420px. Der Browser wählt das kleinste Bild mit einer effektiven Breite, die größer oder gleich der Viewport-Breite ist. In diesem Fall wählt er `example-medium.jpg`. + +2\. Dichtedeskriptor (`x`): + +Angenommen, wir haben das folgende `srcset`-Attribut: + +```html + +Beispielbild + +``` + +Der Browser wird folgende Schritte durchführen: + +a. Bestimmen Sie den DPR (Gerätepixelverhältnis) des Geräts. Ein Standard-Display hat zum Beispiel ein DPR von 1, während ein hochauflösender (Retina) Bildschirm ein DPR von 2 oder höher hat. + +b. Vergleichen Sie den DPR des Geräts mit den `x`-Deskriptoren im `srcset`. In diesem Fall haben wir drei Bilder mit den folgenden Deskriptoren: + +- example-1x.jpg: 1x + +- example-2x.jpg: 2x + +- example-3x.jpg: 3x + +c. Wählen Sie das Bild mit dem `x`-Deskriptor aus, das am nächsten am DPR des Geräts liegt. Für ein Gerät mit einem DPR von 1 wählt der Browser `example-1x.jpg` aus. Bei einem Gerät mit einem DPR von 2 wählt er `example-2x.jpg` und so weiter. + +Es ist wichtig zu beachten, dass Sie das `sizes`-Attribut in Verbindung mit dem `srcset`-Attribut verwenden können, um mehr Informationen darüber zu geben, wie das Bild bei unterschiedlichen Viewport-Breiten angezeigt wird. Dies ist besonders nützlich beim Verwenden des Breitendeskriptors (`w`). Hier ist ein Beispiel: + +```html + +Ein Beispielbild ``` -Dieses Markup-Beispiel enthält: -- **src**: Die Standardbildquelle, die angezeigt wird, wenn der Browser srcset nicht unterstützt. -- **srcset**: Die Liste der Bildquellen und ihrer Density Descriptors (1x, 2x, 3x). Der Browser wählt das am besten geeignete Bild basierend auf dem Display des Benutzers aus. -- **alt**: Eine Beschreibung des Bildes zu Zwecken der Barrierefreiheit. -Und das war es schon! Sie haben srcset mit Density Descriptors erfolgreich implementiert und damit die Leistung und Benutzererfahrung Ihrer Website verbessert. +Dieses Markup-Beispiel umfasst Folgendes: + +- **src** : Die Standardbildquelle, die angezeigt wird, wenn der Browser Srcset nicht unterstützt. +- **srcset** : Die Liste der Bildquellen und ihrer Density Descriptors (1x, 2x, 3x). Der Browser wählt das geeignetste Bild entsprechend dem Display des Benutzers aus. +- **alt** : Eine Beschreibung des Bildes für Barrierefreiheitszwecke. + +Und das war's! Sie haben Srcset mit Density Descriptors erfolgreich implementiert und die Leistung und Benutzererfahrung Ihrer Website verbessert. diff --git a/src/content/docs/de/introduction.md b/src/content/docs/de/introduction.md index cbef95e..63383ae 100644 --- a/src/content/docs/de/introduction.md +++ b/src/content/docs/de/introduction.md @@ -1,21 +1,21 @@ --- -title: srcset und sizes -description: Ein effizienter und dezidierter Leitfaden für responsive Bilder bis 2023 -taskInputHash: f8e7c31ccf577572 +title: srcset & sizes +description: Ein effizienter und entschiedener Leitfaden für Responsive Bilder bis 2023 +taskInputHash: 8444ab4d2d09446e lang: de -ignore: '/* cSpell:locale de,en*/' sidebar_sort_priority: 1000 -date_published: '2023-03-23' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -**Ein effizienter und dezidierter Leitfaden für Bilder bis 2023** +**Ein effizienter und entschiedener Leitfaden für Bilder bis 2023** -Sehen Sie sich die Seitenleiste für die detaillierte Analyse an. Dies ist die Kurzreferenz zum Aktualisieren dieser ``-Tags, um moderne Geräte in allen Größen und Pixeldichten zu unterstützen. Sie sollten [wissen, dass Pixel ≠ Pixel](/de/pixel-nicht-pixel) und `devicePixelRatio` wahrscheinlicher bei 3,875 als bei 1:1 liegt. Moderne Handys geben vor, 320-428px breit zu sein, um die Lesbarkeit zu verbessern (in CSS-Pixeln), haben aber viele Gerätepixel pro CSS-Pixel. +Überprüfen Sie die Seitenleiste für den intensiven Einstieg. Dies ist eine schnelle Referenz, um diese ``-Tags aufzurüsten, um moderne Geräte in all ihren verschiedenen Größen und Pixeldichten zu handhaben. Sie sollten [wissen, dass Pixel ≠ Pixel sind](/de/pixel-not-pixel) und `devicePixelRatio` eher 3,875 als 1:1 ist. Moderne Handys geben vor, aus Gründen der Lesbarkeit 320-428px breit zu sein (in CSS-Pixeln), 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 eine [Dichte-Deskriptor stattdessen 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 Lösung unten zu optimieren - 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 auf einem Fahrrad" /> - + - + ``` diff --git a/src/content/docs/de/lighthouse-performance-test.md b/src/content/docs/de/lighthouse-performance-test.md index b794f4e..2ae4da0 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 durchführen +description: Anleitung zum Testen der Leistung einer Website mit Lighthouse +taskInputHash: ee309b39be1bb10f lang: de -ignore: '/* cSpell:locale de,en*/' -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- Wie testen Sie die Leistung Ihrer Website mit Lighthouse? -> Lighthouse ist ein Tool, mit dem die Leistung, Zugänglichkeit und andere Aspekte von Websites gemessen werden können. Um die Leistung Ihrer Website mit Lighthouse zu testen, befolgen Sie diese Schritte: +> Lighthouse ist ein Tool, das zur Messung der Leistung, Barrierefreiheit und anderer Aspekte einer Website verwendet werden kann. Führen Sie diese Schritte aus, um die Leistung Ihrer Website mit Lighthouse zu testen: > -> 1\. Öffnen Sie den Google Chrome Webbrowser und navigieren Sie zur Seite, die Sie testen möchten. +> 1\. Öffnen Sie den Google Chrome Webbrowser und navigieren Sie zu der Seite, die Sie testen möchten. > -> 2\. Klicken Sie auf die drei Punkte in der oberen rechten Ecke des Browserfensters und wählen Sie dann "Weitere Tools" und dann "Entwicklertools" oder verwenden Sie einfach die Tastenkombination "Strg+Shift+I" (Windows, Linux) oder "Befehl+Option+I" (macOS). +> 2\. Klicken Sie auf die drei Punkte in der oberen rechten Ecke des Browserfensters und wählen Sie dann "Weitere Tools" und anschließend "Entwicklertools" oder verwenden Sie einfach die Tastenkombination "Strg + Shift + I" (Windows, Linux) oder "Befehl + Alt + 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 "Befehl + Shift + P" (macOS), um das Command-Menü zu öffnen, geben Sie dann "Lighthouse" ein und wählen Sie "Bericht generieren". > > 4\. Wählen Sie im Lighthouse-Dialogfeld die Leistung und andere relevante Optionen aus, die Sie testen möchten, und klicken Sie dann auf "Bericht generieren". > -> 5\. Nach Abschluss der Analyse durch Lighthouse sehen Sie einen Bericht mit Scores und Empfehlungen zur Verbesserung der Leistung, Zugänglichkeit und anderer Bereiche Ihrer Website. +> 5\. Nach Abschluss der Analyse durch Lighthouse wird ein Bericht mit Bewertungen und Empfehlungen zur Verbesserung der Leistung, Barrierefreiheit und anderer Bereiche Ihrer Website angezeigt. > -> Indem Sie diesen Schritten folgen, können Sie Lighthouse verwenden, um die Leistung Ihrer Website zu testen und zu optimieren, was dazu beitragen kann, die Benutzererfahrung und die Suchmaschinenrankings zu verbessern. +> Indem Sie diesen Schritten folgen, können Sie Lighthouse verwenden, um die Leistung Ihrer Website zu testen und zu optimieren, was dazu beitragen kann, das Nutzererlebnis und das Ranking in Suchmaschinen zu verbessern. diff --git a/src/content/docs/de/picture-examples.md b/src/content/docs/de/picture-examples.md index 018820d..c1f05e2 100644 --- a/src/content/docs/de/picture-examples.md +++ b/src/content/docs/de/picture-examples.md @@ -1,18 +1,17 @@ --- -title: Beispiele zur Verwendung des -Elements +title: Beispiele für die Verwendung des -Elements description: >- - Beispiele zur Verwendung des -Elements für responsive Bilder, Art - Direction und unterschiedliche Bildformate -taskInputHash: d2a1e2234ca5c46c + Bietet Beispiele für die Verwendung des -Elements für responsive + Bilder, Art Direction und verschiedene Bildformate. +taskInputHash: 379fda90621fb364 lang: de -ignore: '/* cSpell:locale de,en*/' -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -Hier sind ein paar Beispiele für die Verwendung des `` Elements und deren Erklärungen: +Hier sind ein paar Beispiele für die Verwendung des ``-Elements und deren Erklärungen: -1\. Beispiel für Responsive Bilder: +1\. Beispiel für responsive Bilder: ```html @@ -22,7 +21,7 @@ Hier sind ein paar Beispiele für die Verwendung des `` Elements und de ``` -Erklärung: In diesem Beispiel wird das `` Element verwendet, um verschiedene Bildquellen für verschiedene Bildschirmgrößen bereitzustellen. Die `` Elemente geben die verschiedenen Bildquellen mit dem Attribut "srcset" und dem Attribut "media" an, um die Bedingungen festzulegen, unter denen jede Quelle verwendet werden soll. Das `` Element wird als Fallback für ältere Browser oder wenn die Bedingungen in den `` Elementen nicht erfüllt sind verwendet. +Erklärung: In diesem Beispiel wird das ``-Element verwendet, um verschiedene Bildquellen für verschiedene Bildschirmgrößen bereitzustellen. Die ``-Elemente geben die verschiedenen Bildquellen mittels des "srcset"-Attributs und des "media"-Attributs an, um die Bedingungen festzulegen, unter denen jede Quelle verwendet werden sollte. Das ``-Element wird als Fallback für ältere Browser oder wenn die Bedingungen in den ``-Elementen nicht erfüllt sind, verwendet. 2\. Beispiel für Art Direction: @@ -34,9 +33,9 @@ Erklärung: In diesem Beispiel wird das `` Element verwendet, um versch ``` -Erklärung: In diesem Beispiel wird das `` Element verwendet, um verschiedene Bildquellen je nach Ausrichtung des Geräts bereitzustellen. Das `` Element mit dem Attribut "media" auf "(orientation: landscape)" gibt eine Bildquelle für breite Bildschirme an, während das `` Element eine Bildquelle für Portraitbildschirme angibt. +Erklärung: In diesem Beispiel wird das ``-Element verwendet, um verschiedene Bildquellen je nach Ausrichtung des Geräts bereitzustellen. Das ``-Element mit dem Attribut "media", das auf "(orientation: landscape)" festgelegt ist, gibt eine Bildquelle für Breitbildschirme an, während das ``-Element eine Bildquelle für Portrait-Bildschirme angibt. -3\. Beispiel für unterschiedliche Bildformate: +3\. Beispiel für verschiedene Bildformate: ```html @@ -48,12 +47,12 @@ Erklärung: In diesem Beispiel wird das `` Element verwendet, um versch ``` -Erklärung: In diesem Beispiel wird das `` Element verwendet, um verschiedene Bildquellen für unterschiedliche Bildformate bereitzustellen. Die `` Elemente geben unterschiedliche Bildquellen mit dem Attribut "srcset" und dem Attribut "type" an, um das Bildformat anzugeben. Das `` Element wird als Fallback für ältere Browser verwendet, die das `` Element nicht unterstützen. +Erklärung: In diesem Beispiel wird das ``-Element verwendet, um verschiedene Bildquellen für verschiedene Bildformate bereitzustellen. Die ``-Elemente geben verschiedene Bildquellen mittels des "srcset"-Attributs und des "type"-Attributs an, um das Bildformat zu spezifizieren. Das ``-Element wird als Fallback für ältere Browser, die das ``-Element nicht unterstützen, verwendet. ## Breakpoints -In Responsive Design werden Breakpoints verwendet, um festzulegen, wann das Layout einer Website oder Anwendung basierend auf der Größe des Viewports geändert werden sollte. Breakpoints werden typischerweise mit Medienabfragen in CSS definiert, die je nach Bildschirmbreite unterschiedliche Stile anwenden. Diese Breakpoints können in Verbindung mit dem `` Element verwendet werden, um verschiedene Bildquellen für verschiedene Bildschirmgrößen bereitzustellen. +Im responsive Design werden Breakpoints verwendet, um festzulegen, wann das Layout einer Website oder Anwendung basierend auf der Größe des Viewports geändert werden sollte. Breakpoints werden in der Regel mit Media Queries in CSS definiert, die je nach Bildschirmbreite verschiedene Stile anwenden. Diese Breakpoints können in Verbindung mit dem ``-Element verwendet werden, um verschiedene Bildquellen für verschiedene Bildschirmgrößen bereitzustellen. -Zum Beispiel haben wir im obigen ersten Beispiel das Attribut `media` verwendet, um die Bildschirmbreite festzulegen, unter der jede Quelle verwendet werden soll. Wenn die Bildschirmbreite größer oder gleich 768 Pixel ist, wird die Quelle `image-large.jpg` verwendet; wenn die Bildschirmbreite größer oder gleich 480 Pixel, aber weniger als 768 Pixel ist, wird die Quelle `image-medium.jpg` verwendet; und wenn die Bildschirmbreite kleiner als 480 Pixel ist, wird die Quelle `image-small.jpg` verwendet. Dies ermöglicht es uns, für jedes Gerät geeignete Bildgrößen bereitzustellen, um Ladezeiten zu reduzieren und die Benutzererfahrung zu verbessern. +Zum Beispiel haben wir im ersten Beispiel oben das `media`-Attribut verwendet, um die Bildschirmbreite festzulegen, unter der jede Quelle verwendet werden sollte. Wenn die Bildschirmbreite größer als oder gleich 768 Pixel ist, wird die Quelle `image-large.jpg` verwendet; wenn die Bildschirmbreite größer als oder gleich 480 Pixel, aber kleiner als 768 Pixel ist, wird die Quelle `image-medium.jpg` verwendet; und wenn die Bildschirmbreite kleiner als 480 Pixel ist, wird die Quelle `image-small.jpg` verwendet. Dies ermöglicht es uns, für jedes Gerät entsprechend dimensionierte Bilder bereitzustellen, was die Ladezeiten der Seiten reduziert und die Benutzererfahrung verbessert. -Breakpoints können für jede Bildschirmgröße definiert werden und mehrere Breakpoints können verwendet werden, um Layouts zu erstellen, die auf eine breite Palette von Geräten reagieren. Durch die Kombination von Breakpoints mit dem `` Element können flexible und reaktionsschnelle Designs erstellt werden, die auf jedem Gerät gut aussehen. +Breakpoints können für jede Bildschirmgröße definiert werden, und mehrere Breakpoints können verwendet werden, um Layouts zu erstellen, die auf eine Vielzahl von Geräten reagieren. Durch die Kombination von Breakpoints mit dem ``-Element können Sie flexible und responsive 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..3567533 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: 6f6956959c7aeb38 lang: de -ignore: '/* cSpell:locale de,en*/' sidebar_sort_priority: 900 -date_published: '2023-03-26' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -### Gerätepixel ≠ Browser px ≠ Bild px +### Gerätepixel ≠ Browser-PX ≠ Bild-PX -Dank Apple entspricht CSS- und HTML-Pixel (`px`) **fast nie genau einem einzigen Geräte-/Druckerpixel**. Der devicePixelRatio auf meinem Handy beträgt 3,875; [wie hoch ist deiner?](https://www.mydevice.io/) +Dank Apple entsprechen CSS und HTML Pixel (`px`) **fast nie 1:1 den tatsächlichen Pixeln des Geräts/ Druckers**. Die 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%). +Die devicePixelRatio meines Desktops ändert sich beim Zoomen im Browser, aber der Standardwert ist 1,5 (meine `System > Anzeige > Skalierung` beträgt schließlich 150 %). -Bilddateien (mit Ausnahme von SVG) entschlüsseln zu einem Raster von Pixeln. **Es ist ärgerlicherweise schwer, Bildpixel perfekt mit Gerätepixeln im Verhältnis 1:1 anzuzeigen - aber mit `srcset` kann man *nahe genug* kommen**, und etwas Javascript kann die Größe des HTML-Elements nach dem Laden anpassen, wenn man wirklich triftige Gründe für eine perfekte Zuordnung hat, obwohl solche verbotenen Künste hier nicht enthüllt werden. +Bilddateien (außer SVG) dekodieren zu einem Raster von Pixeln. **Es ist ärgerlicherweise schwierig, die Pixel des Bildes in einem 1:1-Verhältnis zu den Gerätepixeln darzustellen - aber mit `srcset` kannst du dich *annähernd* daran halten**, und ein wenig JavaScript kann die Größe des HTML-Elements nach dem Laden anpassen, wenn du wirklich gute Gründe für eine perfekte Abbildung hast. Solche verbotenen Künste werden hier jedoch nicht enthüllt. -> Andere absolute [Einheiten (in, pc, pt, mm, cm, Q)](https://developer.mozilla.org/de/docs/Web/CSS/length) werden in Bezug auf die Anzahl von CSS-Pixeln definiert und tun so, als ob alles 96 dpi hat. Entwickler meiden absolute Einheiten, weil es in der Regel besser ist, Einheiten zu verwenden, die sich von der Schriftgröße oder den Abmessungen des Viewports/Containers ableiten. Nicht übereinstimmende Einheiten können ein Layout brechen, wenn der Benutzer den `Barrierefreiheit > Textgröße`-Multiplikator anpasst, den Browser zoomt oder das Gerät dreht. Selbstverständlich solltest du all diese Dinge vor dem Veröffentlichen deiner Website ausprobieren. +> Andere absolute [Einheiten (in, pc, pt, mm, cm, Q)](https://developer.mozilla.org/de/docs/Web/CSS/length) werden in Bezug auf die Anzahl der CSS-Pixel definiert und tun so, als ob alles bei 96dpi liegt. Entwickler vermeiden absolute Einheiten, da es generell besser ist, Einheiten zu verwenden, die aus der Schriftgröße oder den Abmessungen des Viewports/Containers abgeleitet sind. Nicht passende Einheiten können das Layout zerstören, wenn der Benutzer seinen `Einstellungen > Textgröße`-Multiplikator, die Browser-Zoom- oder Geräte-Rotation ändert. Du solltest all diese Dinge also ausprobieren, bevor du deine Seite veröffentlichst. diff --git a/src/content/docs/de/specify-width-height.md b/src/content/docs/de/specify-width-height.md index 06c16be..824d0fe 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: Breite und Höhe verwenden +description: Vorteile der Verwendung von Breiten- und Höhenattributen im HTML-Code +taskInputHash: 6c1b5df412fca6c8 lang: de -ignore: '/* cSpell:locale de,en*/' -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- Warum sollten Sie Breite und Höhe in HTML einfügen? -> 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. -> -> 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. -> -> 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. +> Es wird empfohlen, die Breiten- und Höhenattribute im HTML-Code für Bilder einzufügen, da dies dem Webbrowser hilft, die Größe des Bildes zu kennen, bevor es vollständig geladen ist. Dies ermöglicht es dem Browser, den entsprechenden Platz auf der Webseite für das Bild zu reservieren, was verhindert, dass sich der Inhalt während des Ladens des Bildes verschiebt. +> +> Zusätzlich kann das Angeben der Breiten- und Höhenattribute für Bilder auch die Gesamtleistung der Webseite verbessern. Wenn ein Browser die Größe eines Bildes im Voraus kennt, kann er den benötigten Platz zum Anzeigen des Bildes genauer berechnen und unnötige Reflows oder Repaints des Inhalts beim Laden vermeiden. +> +> Insgesamt kann die Verwendung der Breiten- und Höhenattribute im HTML-Code für Bilder das Nutzererlebnis verbessern, indem der Inhalt schneller geladen wird und visuelle Glitches 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..630c569 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: 248d52873ac64bfe lang: de -ignore: '/* cSpell:locale de,en*/' -date_published: '2023-03-27' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -Das `picture`-Element wird verwendet, um mehrere Versionen eines Bildes bereitzustellen und anhand bestimmter Bedingungen zu entscheiden, welche Version des Bildes angezeigt werden soll. Es ist besonders nützlich, um Bilder für verschiedene Bildschirmgrößen und Auflösungen zu optimieren und wird häufig in responsivem Webdesign verwendet. +Das `picture`-Element wird verwendet, um mehrere Versionen eines Bildes bereitzustellen und basierend auf bestimmten Bedingungen zu bestimmen, welche Version des Bildes angezeigt wird. Es ist besonders nützlich für die Optimierung von Bildern für unterschiedliche Bildschirmgrößen und Auflösungen und wird oft im Responsive Webdesign eingesetzt. -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 (z.B. Landschaft vs. Porträt), können Sie mit dem `picture`-Element verschiedene Versionen des Bildes bereitstellen, 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 Ladezeit der Seite zu reduzieren. -* **Art-directed Layouts:** Manchmal möchten Sie ein Bild auf bestimmte Weise präsentieren, abhängig vom Layout des Rests der Seite. Beispielsweise möchten Sie auf mobilen Geräten eine Nahaufnahme des Gesichts einer Person zeigen, auf Desktop-Geräten jedoch eine breitere Ansicht. Das `picture`-Element ermöglicht es Ihnen, verschiedene Versionen des Bildes bereitzustellen, die für unterschiedliche Layouts optimiert sind. +* **Layouts mit Kunstregie:** Manchmal möchten Sie ein Bild auf eine bestimmte Weise präsentieren, je nach Layout des Rests der Seite. Zum Beispiel möchten Sie auf mobilen Geräten eine Nahaufnahme des Gesichts einer Person zeigen, auf Desktop-Geräten jedoch eine weitere Aufnahme. Mit dem `picture`-Element können Sie verschiedene Versionen des Bildes bereitstellen, die für unterschiedliche Layouts optimiert sind. -Insgesamt ist das `picture`-Element ein leistungsstarkes Werkzeug, mit dem Sie Ihre Bilder für eine Vielzahl von Anwendungsfällen optimieren und sicherstellen können, dass sie unabhängig vom Gerät oder der Bildschirmgröße großartig aussehen. +Insgesamt ist das `picture`-Element ein leistungsstarkes Werkzeug, das Ihnen helfen kann, Ihre Bilder für eine Vielzahl von Anwendungsfällen zu optimieren und sicherzustellen, dass sie unabhängig vom 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..2fef3c1 100644 --- a/src/content/docs/de/width-density.md +++ b/src/content/docs/de/width-density.md @@ -1,47 +1,46 @@ --- -title: Breiten- und Dichteadapter -description: Beispiele für die Verwendung von Breiten- und Dichteadaptern in `srcset` -taskInputHash: 2171ff4767b5d45d +title: Breiten- und Dichtebeschreibungen +description: Beispiele für die Verwendung von Breiten- und Dichtebeschreibungen in `srcset` +taskInputHash: 766c94def2d2bba4 lang: de -ignore: '/* cSpell:locale de,en*/' -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -Verständnis für Breiten- (w) und Dichteadapter (x) in `srcset`. Verwenden Sie Beispiele und Markdown. +Verständnis von Breiten- (w) und Dichtebeschreibungen (x) in `srcset`. Verwenden von Beispielen und Markdown. -> `srcset` ist ein HTML-Attribut, das Entwicklern ermöglicht, mehrere Bildquellen mit unterschiedlichen Auflösungen oder Pixeldichten bereitzustellen, und den Browser das geeignete Bild basierend auf den Anzeigeeigenschaften des Geräts auswählen zu lassen. Das `srcset`-Attribut verwendet eine Kombination aus `URL`- und `w-` oder `x-`Adaptern, um die Bilder zu spezifizieren. +> `srcset` ist ein HTML-Attribut, das Entwicklern ermöglicht, mehrere Bildquellen mit unterschiedlichen Auflösungen oder Pixeldichten 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` Beschreibungen, um die Bilder zu spezifizieren. -## Breiten- (`w`) Adapter +## Breiten- (`w`) Beschreibung -> 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. +> Die `w` Beschreibung wird verwendet, um die Breite eines Bildes in Pixeln anzugeben. Sie wird verwendet, wenn wir dem Browser die Abmessungen eines Bildes zur Verfügung stellen möchten, damit er das geeignete Bild für den verfügbaren 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 der `w` Beschreibung in `srcset` lautet wie folgt: -```html +````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. +> In dem 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ächstgelegenen Breite zum verfügbaren Bildschirmplatz. -## Dichteadapter (`x`) +## Dichtebeschreibung (`x`) -> Der `x-`Adapter wird verwendet, um die Pixel-Dichte eines Bildes anzugeben, was das Verhältnis von physischen Pixeln zu CSS-Pixeln ist. Er wird verwendet, wenn wir dem Browser verschiedene Versionen desselben Bildes mit unterschiedlichen Pixeldichten zur Verfügung stellen wollen. +> Die `x` Beschreibung wird verwendet, um die Pixeldichte eines Bildes anzugeben, d.h. das Verhältnis von physikalischen Pixeln zu CSS-Pixeln. Sie wird verwendet, wenn wir dem Browser verschiedene Versionen desselben Bildes mit unterschiedlicher Pixeldichte zur Verfügung stellen möchten. -> Die Syntax für die Verwendung des `x-`Adapters in `srcset` sieht wie folgt aus: +> Die Syntax für die Verwendung der `x` Beschreibung in `srcset` lautet wie folgt: -```html +````html Beispielbild -``` +```` -> Im obigen Beispiel haben wir dem Browser drei Bilder und ihre entsprechenden Pixeldichten zur Verfügung gestellt. Der Browser wählt das Bild mit der nächstgelegenen Pixeldichte für den Gerätebildschirm aus. +> In dem 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 des Geräts. -> 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` Beschreibungen in demselben `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..2a73979 100644 --- a/src/content/docs/en/breakpoints.md +++ b/src/content/docs/en/breakpoints.md @@ -1,7 +1,7 @@ --- title: Breakpoints & images description: Why some (but not all) breakpoints matter for your images -date_published: '2023-03-26' +date_published: '2023-03-31' date_modified: '2023-03-31' --- diff --git a/src/content/docs/en/browser-picks-srcset.md b/src/content/docs/en/browser-picks-srcset.md index 43ecbc0..d3305b0 100644 --- a/src/content/docs/en/browser-picks-srcset.md +++ b/src/content/docs/en/browser-picks-srcset.md @@ -1,7 +1,7 @@ --- title: How the browser chooses description: How the browser chooses between images listed in the srcset attribute -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' --- diff --git a/src/content/docs/en/density-descriptors.md b/src/content/docs/en/density-descriptors.md index e72dabd..beb6f55 100644 --- a/src/content/docs/en/density-descriptors.md +++ b/src/content/docs/en/density-descriptors.md @@ -1,7 +1,7 @@ --- title: Density descriptors & srcset description: Examples of using density descriptors in `srcset` -date_published: '2023-03-26' +date_published: '2023-03-31' date_modified: '2023-03-31' --- diff --git a/src/content/docs/en/introduction.md b/src/content/docs/en/introduction.md index c529f64..4eda01a 100644 --- a/src/content/docs/en/introduction.md +++ b/src/content/docs/en/introduction.md @@ -2,7 +2,7 @@ title: 'srcset & sizes ' description: An Efficient and Opinionated Guide to Responsive Images for 2023 sidebar_sort_priority: 1000 -date_published: '2023-03-23' +date_published: '2023-03-31' date_modified: '2023-03-31' --- diff --git a/src/content/docs/en/lighthouse-performance-test.md b/src/content/docs/en/lighthouse-performance-test.md index 04fb5b5..775d8df 100644 --- a/src/content/docs/en/lighthouse-performance-test.md +++ b/src/content/docs/en/lighthouse-performance-test.md @@ -1,7 +1,7 @@ --- title: Test performance with Lighthouse description: Steps on how to test a website's performance using Lighthouse -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' --- diff --git a/src/content/docs/en/picture-examples.md b/src/content/docs/en/picture-examples.md index 3d3b6d8..6e5e6ec 100644 --- a/src/content/docs/en/picture-examples.md +++ b/src/content/docs/en/picture-examples.md @@ -3,7 +3,7 @@ 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_published: '2023-03-31' date_modified: '2023-03-31' --- diff --git a/src/content/docs/en/pixels-not-pixels.md b/src/content/docs/en/pixels-not-pixels.md index e4c638f..737882d 100644 --- a/src/content/docs/en/pixels-not-pixels.md +++ b/src/content/docs/en/pixels-not-pixels.md @@ -2,7 +2,7 @@ title: px ≠ pixels description: Device px ≠ browser px ≠ image px sidebar_sort_priority: 900 -date_published: '2023-03-26' +date_published: '2023-03-31' date_modified: '2023-03-31' --- diff --git a/src/content/docs/en/specify-width-height.md b/src/content/docs/en/specify-width-height.md index 1eb09b0..6409957 100644 --- a/src/content/docs/en/specify-width-height.md +++ b/src/content/docs/en/specify-width-height.md @@ -1,7 +1,7 @@ --- title: Use width and height description: Benefits of using width and height attributes in HTML code -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' --- diff --git a/src/content/docs/en/when-to-use-picture.md b/src/content/docs/en/when-to-use-picture.md index 66e7244..ade00f6 100644 --- a/src/content/docs/en/when-to-use-picture.md +++ b/src/content/docs/en/when-to-use-picture.md @@ -1,7 +1,7 @@ --- title: When to use element description: Explains in which situations you should use the element -date_published: '2023-03-27' +date_published: '2023-03-31' date_modified: '2023-03-31' --- 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. diff --git a/src/content/docs/en/width-density.md b/src/content/docs/en/width-density.md index 1e00293..e7a7617 100644 --- a/src/content/docs/en/width-density.md +++ b/src/content/docs/en/width-density.md @@ -1,7 +1,7 @@ --- title: Width and density descriptors description: Examples of using width and density descriptors in `srcset` -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' --- diff --git a/src/content/docs/es/_roundtrip_breakpoints.txt b/src/content/docs/es/_roundtrip_breakpoints.txt index 186ad39..244ef5d 100644 --- a/src/content/docs/es/_roundtrip_breakpoints.txt +++ b/src/content/docs/es/_roundtrip_breakpoints.txt @@ -2,43 +2,43 @@ title: Breakpoints and Images description: >- Why some (but not all) breakpoints matter for your images -taskInputHash: cc4be952df3fef63 +taskInputHash: b397ae1275526f48 lang: en -ignore: '/* cSpell:locale es,en*/' -date_published: '2023-03-26' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -### 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 screens and large monitors need different designs. For `srcset` and `sizes` purposes, we need to know at which point the design changes. -Web developers must decide what shrinks, hides, or relocates on smaller screens - or more commonly, what expands, reveals, or adds on larger screens. They also have very little information to work with. Is the user on a tablet or on a horizontally oriented phone - or in a small browser window? +Web developers have to decide what to reduce, hide, or relocate on smaller screens - or more commonly, what to expand, reveal, or add on larger screens. They also have very little information. Is the user on a tablet or a phone in landscape 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 reference viewport width where the design 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) might be immune to design changes caused by these breakpoints (and be fine with [srcset density descriptors](/en/density-descriptors)). +Some images (like logos, icons, or buttons) may be immune to design changes caused by these breakpoints (and be fine with [srcset density descriptors](/en/density-descriptors)). -Main content images will be limited by their container's size. Typically, a page's main content area will be limited to a certain width on larger screens, a `max-width`, but on smaller screens, the main content area will fill the entire viewport. +Main content images will be limited by the size of their container. Typically, 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 occupy the full width of the viewport. -If you have multiple columns at some breakpoints, it will be harder to calculate effective size rules, as the percentage of the viewport width the image takes up will change. +If you have more than one column at certain breakpoints, it will be harder to calculate effective size rules as the percentage of the viewport's width occupied by the image will change. ### The Easy Method That being said, don't overcomplicate things. You'll probably be just fine with the following approach: -1. At what size does the main column (or the image container) stop growing? Up to that viewport width, we can use `100vw` for the image `sizes` attribute to indicate the image takes up the full width of the viewport. -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 viewport width, we can use `100vw` for the `sizes` attribute of the image to say the image occupies 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. -If your answer to 1 was 700px and your answer to 2 was 800px, you can use the following `sizes` attribute: +If your answer to 1 is 700px and your answer to 2 is 800px, you can use the following `sizes` attribute: ```html ``` -> You'd think the browser could handle all these calculations for us based on CSS. Unfortunately, browsers are eager to choose an image URL *before* stylesheets are downloaded. So we have to do the calculations ourselves, and they serve us well if we don't get them perfectly right. + +> You might expect the browser to handle all of these calculations easily based on the CSS. Unfortunately, browsers are aggressively eager to pick an image URL *before* stylesheets are downloaded. So we have to do the calculations ourselves, and they are fine if we don't do them perfectly. ===================== Content prompt used: @@ -51,8 +51,8 @@ Also carefully translate the title and description for the article; do not use & 1. Breakpoints & images 2. Why some (but not all) breakpoints matter for your images -Metadata returned1. Breakpoints e imágenes -2. Por qué algunos (pero no todos) los puntos de interrupción son importantes para tus imágenes +Metadata returned1. Puntos de quiebre e imágenes +2. Por qué algunos (pero no todos) los puntos de quiebre son importantes para tus imágenes Roundtrip (isolated) prompt used: diff --git a/src/content/docs/es/_roundtrip_browser-picks-srcset.txt b/src/content/docs/es/_roundtrip_browser-picks-srcset.txt index 4443f64..b5e2980 100644 --- a/src/content/docs/es/_roundtrip_browser-picks-srcset.txt +++ b/src/content/docs/es/_roundtrip_browser-picks-srcset.txt @@ -1,14 +1,17 @@ --- -title: How browsers choose -description: How browsers choose between images listed in the srcset attribute -taskInputHash: 5d7773a8c6385fd7 +title: How the browser chooses +description: How the browser chooses between images listed in the srcset attribute +taskInputHash: 6f7ac89a293c1299 lang: en +date_published: '2023-03-31' +date_modified: '2023-03-31' +date_updated: '2023-03-31' --- -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 images listed in the `srcset` attribute? Here we present a series of steps, with examples for both width and density specifications, and how the browser decides based on the device and viewport. -- When using the `srcset` attribute in HTML, the browser 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 appropriate image from a given list of 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 a `w` descriptor) or pixel density (using an `x` descriptor). Let's review each case with examples. -1\. Width descriptor (`w`): +1. Width descriptor (`w`): Suppose we have the following `srcset` attribute: @@ -20,19 +23,19 @@ Suppose we have the following `srcset` attribute: The browser will follow these steps: -a. Determine the DPR (Device Pixel Ratio) of the device. For example, a standard screen has a DPR of 1, while a high-resolution (Retina) screen has a DPR of 2 or higher. +a. Determine the DPR (Device Pixel Ratio) of the device. For example, a standard screen has a DPR of 1, while a high-resolution (Retina) screen has a DPR of 2 or more. -b. Calculate the effective width for each image in the `srcset`. Multiply the width descriptor by the DPR. For a device with a DPR of 1: +b. Calculate the effective width for each image in the `srcset`. Multiply width descriptor by DPR. For a device with a DPR of 1: -- small-example.jpg: 400 * 1 = 400 pixels +- small-example.jpg: 400 \* 1 = 400px -- medium-example.jpg: 800 * 1 = 800 pixels +- medium-example.jpg: 800 \* 1 = 800px -- large-example.jpg: 1600 * 1 = 1600 pixels +- large-example.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 width of the viewport. Suppose the viewport width is 420px. The browser will choose the smallest image with an effective width greater than or equal to the viewport width. In this case, it will select `medium-example.jpg`. -2\. Pixel density descriptor (`x`): +2. Pixel density descriptor (`x`): Suppose we have the following `srcset` attribute: @@ -44,9 +47,9 @@ Suppose we have the following `srcset` attribute: The browser will follow these steps: -a. Determine the DPR (Device Pixel Ratio). For example, a standard screen has a DPR of 1, while a high-resolution (Retina) screen has a DPR of 2 or higher. +a. Determine the DPR (Device Pixel Ratio) of the device. For example, a standard screen has a DPR of 1, while a high-resolution (Retina) screen has a DPR of 2 or more. -b. Compare the device DPR with the `x` descriptors in the `srcset`. In this case, we have three images with the following descriptors: +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 @@ -54,9 +57,9 @@ b. Compare the device DPR with the `x` descriptors in the `srcset`. In this case - 3x-example.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 `1x-example.jpg`. For a device with a DPR of 2, it will choose `2x-example.jpg`, and so on. -It is important to note that the `sizes` attribute can also be used in combination with the `srcset` attribute to provide more information about how the image will be displayed at different window widths. This is especially useful when using the width descriptor (`w`). Here's an example: +It is important to note that the `sizes` attribute can also be used in combination with the `srcset` attribute to provide more information about how the image will be displayed at different viewport widths. This is especially useful when using the width descriptor (`w`). Here is an example: ```html @@ -75,8 +78,8 @@ Also carefully translate the title and description for the article; do not use & 1. How the browser chooses 2. How the browser chooses between images listed in the srcset attribute -Metadata returned1. Cómo elige el navegador -2. Cómo elige el navegador entre imágenes listadas en el atributo srcset +Metadata returned1. Cómo el navegador elige +2. Cómo el navegador elige entre las imágenes listadas en el atributo srcset Roundtrip (isolated) prompt used: diff --git a/src/content/docs/es/_roundtrip_density-descriptors.txt b/src/content/docs/es/_roundtrip_density-descriptors.txt index c382673..ec6d361 100644 --- a/src/content/docs/es/_roundtrip_density-descriptors.txt +++ b/src/content/docs/es/_roundtrip_density-descriptors.txt @@ -1,33 +1,33 @@ --- -title: Density Descriptors and Srcset +title: Density descriptors and srcset description: Examples of using density descriptors in `srcset` -taskInputHash: 0815d17ede67caab +taskInputHash: eb85f323eb9a08fb lang: en -ignore: '/* cSpell:locale es,en*/' -date_published: '2023-03-26' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -Srcset with density descriptors provides a simple and effective method for delivering the most suitable image for each user's device, improving performance and user experience. This guide will walk you through the essentials of using srcset with density descriptors and provide sample markup for your convenience. +Srcset with density descriptors provides a simple and effective method to deliver the most suitable image to each user's device, 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. ## What is Srcset with Density Descriptors? -Srcset is an HTML attribute designed to allow you to specify multiple image sources for a single `` element. Density descriptors (`x`) are used in conjunction with srcset to provide images of different resolutions based on the user's screen pixel density. +Srcset is an HTML attribute designed to allow specifying multiple image sources for a single `` element. Density descriptors (`x`) are used in conjunction with srcset to provide images of different resolutions based on the user's screen pixel density. ## When to Use Srcset with Density Descriptors Using srcset with density descriptors is especially useful when you want to: -1. Serve high-resolution images to high pixel density screens (e.g. Retina displays) while providing lower-resolution images to standard screens. -2. Improve page performance by delivering the most suitable image size for each user's device. +1. Serve high-resolution images to high DPI screens (e.g., Retina displays) while providing low-resolution images to standard screens. +2. Improve page performance by delivering the most appropriate image size to each user's device. ## Implementing Srcset with Density Descriptors To use srcset with density descriptors, follow these steps: + 1. Prepare your images 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 image size as it will appear on the screen. -### Sample Markup +### Example Markup Here's an example of how to implement srcset with density descriptors in your markup: @@ -37,12 +37,14 @@ Here's an example of how to implement srcset with density descriptors in your ma alt="An example image"> ``` -This sample markup includes: -- **src**: The default image source, displayed if the browser doesn't support srcset. -- **srcset**: The list of image sources and their density descriptors (1x, 2x, 3x). The browser chooses the most suitable image based on the user's screen. +This markup example includes: +- **src**: The default image source, which 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. + +{{Note that density descriptors can also be represented as width descriptors (`w`), which specify image sources based on the width of the image container instead of pixel density.}} ===================== Content prompt used: @@ -55,7 +57,7 @@ Also carefully translate the title and description for the article; do not use & 1. Density descriptors & srcset 2. Examples of using density descriptors in `srcset` -Metadata returned1. Descriptores de densidad y Srcset +Metadata returned1. Descriptores de densidad y srcset 2. Ejemplos de uso de descriptores de densidad en `srcset` diff --git a/src/content/docs/es/_roundtrip_introduction.txt b/src/content/docs/es/_roundtrip_introduction.txt index 7d7d4de..7d2fcca 100644 --- a/src/content/docs/es/_roundtrip_introduction.txt +++ b/src/content/docs/es/_roundtrip_introduction.txt @@ -1,42 +1,44 @@ --- -title: srcset and sizes attributes for -description: An efficient and opinionated guide to responsive images for 2023 -taskInputHash: c0bfd3a988eb464d +title: srcset and sizes +description: >- + An efficient and opinionated guide to responsive images for 2023 +taskInputHash: 695481b378338d63 lang: en -ignore: '/* cSpell:locale es,en*/' sidebar_sort_priority: 1000 -date_published: '2023-03-23' +date_published: '2023-03-31' 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. +See sidebar for deep dive. This is the quick reference for improving those `` tags to handle modern devices and their various sizes and pixel densities. You should [know that pixels are not all equal](/en/pixels-not-pixels) and that `devicePixelRatio` is more likely to be around 3.875 than 1:1. Modern phones pretend to be 320-428px wide for legibility (in CSS pixels) but have many device pixels per CSS pixel. -> If your image never changes size no matter how narrow the browser window, you should use a [density descriptor](/en/density-descriptors). This is often suitable for logos, icons, and buttons. +> If your image never resizes, no matter how narrow the browser window, 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 — at minimum, the viewport width breakpoint where the main content area stops growing. +Do you know your [breakpoints](/en/breakpoints)? You'll need those numbers to fine-tune the following solution - at minimum the viewport width breakpoint at which the main content area stops growing. -### The easy method -```html - -Dog riding a bicycle +### The Easy Method - - - -``` +```html + Dog riding bike + + + + +``` + +{{Note that the term used here is not the technical term "breakpoint". Rather, it's being used to mean the width at which the layout changes. Also, RIAPI should be spelled RIPE.}} ===================== Content prompt used: @@ -50,7 +52,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 enfocada a la opinión sobre imágenes responsivas para el 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..5734420 100644 --- a/src/content/docs/es/_roundtrip_lighthouse-performance-test.txt +++ b/src/content/docs/es/_roundtrip_lighthouse-performance-test.txt @@ -1,28 +1,27 @@ --- -title: Performance testing with Lighthouse +title: Test Performance with Lighthouse description: Steps on how to test the performance of a website using Lighthouse -taskInputHash: d6d69f5336f685c3 +taskInputHash: f6259e4f76167d60 lang: en -ignore: '/* cSpell:locale es,en*/' -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -How to test the performance of your site with Lighthouse? +How to 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. > -> 2\. Click on the three dots in the upper right corner of the browser window, then select "More Tools" and then "Developer Tools" or simply use the keyboard shortcut "Ctrl + Shift + I" (Windows, Linux) or "Command + Option + I" (macOS). +> 2\. Click on the three dots in the top right corner of the browser window, then select "More tools" and then "Developer tools" or simply use the keyboard shortcut "Ctrl+Shift+I" (Windows, Linux) or "Command+Option+I" (macOS). > -> 3\. In the Developer Tools panel, click on the Lighthouse icon located on the left side of the panel or press "Ctrl + Shift + P" (Windows, Linux) or "Command + Shift + P" (macOS) to open the command menu, type "Lighthouse", and select "Generate report". +> 3\. In the Developer tools panel, click on the Lighthouse icon located on the left side of the panel or press "Ctrl+Shift+P" (Windows, Linux) or "Command+Shift+P" (macOS) to open the Command Menu, then type "Lighthouse" and select "Generate report". > -> 4\. In the Lighthouse dialog box, select the performance and other relevant options you want to test, then click "Generate report". +> 4\. In the Lighthouse dialog window, select the relevant performance and other options you want to test, then click "Generate report". > -> 5\. After Lighthouse completes its analysis, you will see a report with scores and recommendations for improving the performance, accessibility, and other areas of your website. +> 5\. After Lighthouse completes its analysis, you will see a report with scores and recommendations to improve 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 test and optimize the performance of your website, which can help improve your user experience and search engine ranking. ===================== Content prompt used: @@ -35,8 +34,8 @@ Also carefully translate the title and description for the article; do not use & 1. Test performance with Lighthouse 2. Steps on how to test a website's performance using Lighthouse -Metadata returned1. Prueba de rendimiento con Lighthouse -2. Pasos sobre cómo probar el rendimiento de un sitio web utilizando Lighthouse +Metadata returned1. Prueba el rendimiento con Lighthouse +2. Pasos sobre cómo probar el rendimiento de un sitio web usando Lighthouse Roundtrip (isolated) prompt used: diff --git a/src/content/docs/es/_roundtrip_picture-examples.txt b/src/content/docs/es/_roundtrip_picture-examples.txt index 9103a02..0bbf939 100644 --- a/src/content/docs/es/_roundtrip_picture-examples.txt +++ b/src/content/docs/es/_roundtrip_picture-examples.txt @@ -2,10 +2,13 @@ title: Examples using the element description: >- Provides examples using the element for responsive images, art direction, and different image formats. -taskInputHash: aa9de5a15f947b5e +taskInputHash: 301fae33335f1d72 lang: en +date_published: '2023-03-31' +date_modified: '2023-03-31' +date_updated: '2023-03-31' --- -Here are some examples of using the `` element and their explanations: +Here are some examples of how to use the `` element and their explanations: 1. Example for responsive images: @@ -29,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 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 layout should change based on the viewport size. Breakpoints are typically defined using CSS media queries, which apply different styles based on screen width. These breakpoints can be used in conjunction with the `` element to provide different image sources for different screen sizes. -For example, in the first example above, we used the `media` attribute to specify the screen width under which each source should be used. When the screen width is greater than or equal to 768 pixels, the `image-large.jpg` source will be used; when the screen width is greater than or equal to 480 pixels but less than 768 pixels, the `image-medium.jpg` source will be used; and when the screen width is less than 480 pixels, the `image-small.jpg` source will be used. This allows us to serve appropriately sized images for each device, reducing page load times and improving the user experience. +For example, in the first example above, we used the `media` attribute to specify the screen width at which each 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 images with the appropriate size 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 variety of devices. By combining breakpoints with the `` element, flexible and responsive designs can be created that look great on any device. ===================== Content prompt used: @@ -64,8 +67,8 @@ Also carefully translate the title and description for the article; do not use & 1. Examples using element 2. Provides examples using the element, for responsive images, art direction and different image formats -Metadata returned1. Ejemplos utilizando el elemento -2. Proporciona ejemplos utilizando el elemento para imágenes responsivas, dirección de arte y diferentes formatos de imagen. +Metadata returned1. Ejemplos usando el elemento +2. Proporciona ejemplos usando el elemento para imágenes responsivas, dirección de arte y diferentes formatos de imagen. Roundtrip (isolated) prompt used: diff --git a/src/content/docs/es/_roundtrip_pixels-not-pixels.txt b/src/content/docs/es/_roundtrip_pixels-not-pixels.txt index 80ec2d2..28b16e0 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 +description: Device pixels ≠ browser px ≠ image px +taskInputHash: fa5ed4d660ea8716 lang: en -ignore: '/* cSpell:locale es,en*/' sidebar_sort_priority: 900 -date_published: '2023-03-26' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- ### 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**. The devicePixelRatio on my phone is 3.875; [what's yours?](https://www.mydevice.io/) -My desktop devicePixelRatio changes with the browser zoom, but is set to 1.5 by default (after all, my `System > Display > Scale` is set to 150%). +The devicePixelRatio of my desktop computer changes when zooming in the browser, but is set to 1.5 by default (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 (excluding SVG) are decoded into a grid of pixels. **It's annoying to get the image pixels to display perfectly in a 1:1 ratio with device pixels - but with `srcset` you can get close enough**, and a bit of JavaScript can adjust HTML element size after loading if you have really justified reasons for needing that perfect match, though such 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 (inches), pc (picas), pt (point types), mm (millimeters), cm (centimeters), Q (quarters)](https://developer.mozilla.org/en-US/docs/Web/CSS/length) are defined in terms of the number of CSS pixels and assume everything is 96ppi. Developers avoid absolute units because it's generally better to use units derived from font size or container dimensions. Incompatible units can break layout if the user adjusts their `Accessibility > Text size` multiplier, zooms in the browser, or rotates their device. Needless to say, you should test all of this 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 del dispositivo ≠ px del navegador ≠ px de la 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..9aa0b98 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 description: Benefits of using width and height attributes in HTML code -taskInputHash: c1840d188c21b829 +taskInputHash: bc70264022c9bec6 lang: en -ignore: '/* cSpell:locale es,en*/' -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- +Why should you use width and height in HTML code? -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. +> It is recommended to use the **width** and **height** attributes in HTML code for images because it helps the web browser to know the size of the image before it 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 as 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. +> Additionally, specifying the width and height attributes for images can also help improve the overall performance of the web page. When the browser knows the size of an image in advance, it can more accurately calculate the amount of space needed to display the image and avoid unnecessary reflow or repaint of the content as it loads. > -> Overall, using width and height attributes in HTML code for images can improve the user experience by making content load faster and reducing visual glitches. +> In general, using the width and height attributes in HTML code for images can improve the user experience by making the content load faster and reducing display failures. ===================== 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. Usa ancho y alto +2. Beneficios de usar los atributos de ancho y alto en el código HTML Roundtrip (isolated) prompt used: diff --git a/src/content/docs/es/_roundtrip_when-to-use-picture.txt b/src/content/docs/es/_roundtrip_when-to-use-picture.txt index 088b3f2..ff45988 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: af86a8e0c8137bbe lang: en -ignore: '/* cSpell:locale es,en*/' -date_published: '2023-03-27' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -The `picture` element is used to provide multiple versions of an image and determine which version of the image to display based on certain conditions. It is particularly useful for optimizing images for different screen sizes and resolutions, and is commonly used in responsive web design. +The `picture` element is used to provide multiple versions of an image and determine which version of the image to display based on certain conditions. It is particularly useful for optimizing images for different screen sizes and resolutions, and it 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 cases in which you might want to use the `picture` element: -* **Retina displays:** High-density displays such as Apple's Retina displays have a higher pixel density, which means images can appear blurry or pixelated if they are not optimized for high resolution. With the `picture` element, you can provide a version of the image that has twice the pixels of the normal version, so it appears sharp and clear on Retina displays. +* **Retina Displays:** High-density displays like Apple's Retina displays have a higher pixel density, which means 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 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 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 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. -* **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 Layout:** Sometimes you may want to present an image in a certain way depending on the layout of the rest of the page. For example, you may want to show a close-up of a person's face on mobile devices, but a wider shot on desktop devices. The `picture` element allows you to provide different versions of the image that are optimized for different layouts. -Overall, the `picture` element is a powerful tool that can help you optimize your images for a variety of use cases and ensure that they look great no matter what device or screen size they are being viewed on. +In general, the `picture` element is a powerful tool that can help you optimize your images for a variety of use cases and ensure that they look great no matter what device or screen size they are being viewed on. ===================== 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. Cuándo usar el elemento -2. Explica en qué situaciones se debe usar el elemento +2. Explica en qué situaciones debes 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..e685c19 100644 --- a/src/content/docs/es/_roundtrip_width-density.txt +++ b/src/content/docs/es/_roundtrip_width-density.txt @@ -1,20 +1,19 @@ --- title: Width and Density Descriptors -description: Examples of using width and density descriptors in `srcset` -taskInputHash: 74b8eb2869d948a0 +description: Examples of how to use width and density descriptors in `srcset` +taskInputHash: 5b1efd1f64f5865b lang: en -ignore: '/* cSpell:locale es,en*/' -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -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 sources of images with different resolutions or pixel densities and let the browser choose the appropriate image according to the display characteristics of the device. The `srcset` attribute uses a combination of the `URL` and the `w` or `x` descriptors to specify the images. -## Width Descriptors (`w`) +## Width Descriptor (`w`) -> The `w` descriptor is used to specify the width of an image in pixels. It is used when you want to provide the browser with the dimensions of an image so it can choose the appropriate image for the available space on the screen. +> The `w` descriptor is used to specify the width of an image in pixels. It is used when we want to provide the browser the dimensions of an image so it can choose the appropriate image for the available screen space. > The syntax for using the `w` descriptor in `srcset` is as follows: @@ -23,14 +22,14 @@ Understanding Width (`w`) and Density (`x`) Descriptors in `srcset`. Use example srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" - alt="Example Image"> + alt="Image example"> ``` -> 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="Image example"> ``` -> 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 screen. -> It is important to note that `w` and `x` descriptors can be used together in the same `srcset` attribute to provide the browser with more options to choose from. +> It's important to note that the `w` and `x` descriptors can be used together in the same `srcset` attribute to provide the browser with more options to select from. ===================== Content prompt used: @@ -58,7 +57,7 @@ Also carefully translate the title and description for the article; do not use & 2. Examples of using width and density descriptors in `srcset` Metadata returned1. Descriptores de ancho y densidad -2. Ejemplos de uso de descriptores de ancho y densidad en `srcset` +2. Ejemplos de cómo usar descriptores de ancho y densidad en `srcset` Roundtrip (isolated) prompt used: diff --git a/src/content/docs/es/breakpoints.md b/src/content/docs/es/breakpoints.md index fe98f82..a56ac1c 100644 --- a/src/content/docs/es/breakpoints.md +++ b/src/content/docs/es/breakpoints.md @@ -1,43 +1,42 @@ --- -title: Breakpoints e imágenes +title: Puntos de quiebre e imágenes description: >- - Por qué algunos (pero no todos) los puntos de interrupción son importantes - para tus imágenes -taskInputHash: cc4be952df3fef63 + Por qué algunos (pero no todos) los puntos de quiebre son importantes para tus + imágenes +taskInputHash: b397ae1275526f48 lang: es -ignore: '/* cSpell:locale es,en*/' -date_published: '2023-03-26' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -### 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 los monitores grandes necesitan diseños diferentes. Con el propósito de `srcset` y `sizes`, necesitamos saber en qué punto se produce el cambio de 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 lo que van a reducir, ocultar o reubicar en las pantallas más pequeñas - o más comúnmente, lo que van a expandir, revelar o añadir en las pantallas más grandes. También tienen muy poca información. ¿El usuario está en una tableta o teléfono en modo apaisado, 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 vista de referencia arbitrario donde el diseño cambia. Esto se llama un **punto de quiebre**. Es un número arbitrario de píxeles CSS ([no píxeles de dispositivo](/es/pixeles-no-pixeles)). Polypane tiene un [gran artículo](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023) sobre 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 de srcset](/es/descriptores-de-densidad)). -Las imágenes del contenido principal estarán limitadas por el tamaño de su contenedor. Por lo general, el área de contenido principal de una página se limitará a un ancho determinado en las pantallas más grandes, un `max-width`, pero en las pantallas pequeñas, el área de contenido principal llenará todo el viewport. +Las imágenes de contenido principal estarán limitadas por el tamaño de su contenedor. Normalmente, 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 ocupará todo el ancho de la vista. -Si tiene más de una columna en algunos puntos de interrupción, será más difícil calcular las reglas de tamaño efectivas, ya que el porcentaje del ancho de viewport que ocupa la imagen cambiará. +Si tienes más de una columna en ciertos puntos de quiebre, será más difícil calcular las reglas de tamaño efectivo, ya que el porcentaje del ancho de la vista que la imagen ocupa cambiará. ### El método fácil Dicho esto, no te compliques demasiado. Probablemente estarás muy bien con la siguiente aproximación: -1. ¿A qué tamaño el columna principal (o el contenedor de la imagen) deja de crecer? Hasta ese ancho de viewport, podemos usar `100vw` para el atributo `sizes` de la imagen para indicar que la imagen ocupa el 100% del ancho del viewport. -2. ¿Cuál es el ancho máximo que el contenedor jamás alcanza? Podemos fijar eso como una `width` fija para todo lo demás. +1. ¿En qué tamaño deja de crecer la columna principal (o el contenedor de la imagen)? Hasta ese ancho de vista, podemos usar `100vw` para el atributo `sizes` de la imagen para decir que la imagen ocupa el 100% del ancho de vista. +2. ¿Cuál es el ancho máximo que el contenedor jamás alcanza? Podemos establecer eso como una `width` fija para todo lo demás. -Si tu respuesta a 1 fue 700px y tu respuesta a 2 fue 800px, puedes usar el siguiente atributo `sizes`: +Si tu respuesta para 1 fue 700px y tu respuesta para 2 fue 800px, puedes utilizar el siguiente atributo `sizes`: ```html - + ``` -> Pensarías que el navegador podría manejar todos estos cálculos por nosotros en función de CSS. Desafortunadamente, los navegadores están ávidos de elegir una URL de imagen *antes* de que se descarguen las hojas de estilo. Así que tenemos que hacer los cálculos nosotros mismos, y les sirve bien si no lo hacemos perfecto. +> Podrías pensar que el navegador podría manejar todas estas calculaciones de forma sencilla basándose en el CSS. Desafortunadamente, los navegadores están agresivamente ansiosos por 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 va 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..7b83e89 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 listadas en el atributo srcset +taskInputHash: 6f7ac89a293c1299 lang: es -ignore: '/* cSpell:locale es,en*/' -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -¿Cómo el navegador elige entre las imágenes listadas en el atributo `srcset`? Aquí hay un paso a paso, con ejemplos para especificaciones tanto de ancho como de densidad y cómo decide el navegador en función del dispositivo y el tamaño de la ventana gráfica. +¿Cómo el navegador elige entre las imágenes listadas en el atributo `srcset`? Aquí presentamos una serie de pasos, con ejemplos tanto para especificaciones de anchura (width) como de densidad (density), y cómo el navegador decide en base al dispositivo y al viewport. -- Al usar el atributo `srcset` en HTML, el navegador utiliza un conjunto de reglas para elegir la imagen más apropiada de una lista de fuentes proporcionadas. Estas reglas dependen tanto de las características de la pantalla del dispositivo (resolución, densidad de píxeles), como del tamaño de la ventana gráfica. El atributo `srcset` te permite especificar diferentes imágenes según el ancho (usando el descriptor `w`) o la densidad de píxeles (usando el descriptor `x`). Repasemos cada caso con ejemplos. +- Al utilizar el atributo `srcset` en HTML, el navegador utiliza un conjunto de reglas para elegir la imagen apropiada de una lista de fuentes proporcionada. Estas reglas dependen tanto de las características de visualización del dispositivo (resolución, densidad de píxeles) como del tamaño del viewport. El atributo `srcset` te permite especificar diferentes imágenes basadas en la anchura (usando un descriptor `w`) o en la densidad de píxeles (usando un descriptor `x`). Vamos a repasar cada caso con ejemplos. -1\. Descriptor de ancho (`w`): +1. Descriptor de anchura (`w`): Supongamos que tenemos el siguiente atributo `srcset`: ```html -Ejemplo de imagen +Ejemplo de Imagen ``` -El navegador seguirá los siguientes pasos: +El navegador seguirá estos pasos: -a. Determina la DPR (Relación de píxeles del dispositivo) del dispositivo. Por ejemplo, una pantalla estándar tiene una DPR de 1, mientras que una pantalla de alta resolución (Retina) tiene una DPR de 2 o más. +a. Determinar el DPR (Ratio de Píxeles del 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. Calcula el ancho efectivo para cada imagen en `srcset`. Multiplica el descriptor de ancho por la DPR. Para un dispositivo con una DPR de 1: +b. Calcular la anchura efectiva para cada imagen en el `srcset`. Multiplica el descriptor de anchura por el DPR. Para un dispositivo con un DPR de 1: -- example-small.jpg: 400 \* 1 = 400px +- ejemplo-pequeño.jpg: 400 \* 1 = 400px -- example-medium.jpg: 800 \* 1 = 800px +- ejemplo-mediano.jpg: 800 \* 1 = 800px -- example-large.jpg: 1600 \* 1 = 1600px +- ejemplo-grande.jpg: 1600 \* 1 = 1600px -c. Compara los anchos efectivos con el ancho de la ventana gráfica (viewport). Supongamos que el ancho de la ventana gráfica es de 420px. El navegador elegirá la imagen más pequeña con un ancho efectivo mayor o igual al ancho de la ventana gráfica. En este caso, seleccionará `example-medium.jpg`. +c. Compara las anchuras efectivas con el ancho del viewport. Supongamos que el ancho del viewport es 420px. El navegador elegirá la imagen más pequeña con una anchura efectiva mayor o igual al ancho del viewport. En este caso, seleccionará `ejemplo-mediano.jpg`. -2\. Descriptor de densidad de píxeles (`x`): +2. Descriptor de densidad de píxeles (`x`): Supongamos que tenemos el siguiente atributo `srcset`: ```html -Ejemplo de imagen +Ejemplo de Imagen ``` -El navegador seguirá los siguientes pasos: +El navegador seguirá estos pasos: -a. Determina la DPR (Relación de píxeles de dispositivo) del dispositivo. Por ejemplo, una pantalla estándar tiene una DPR de 1, mientras que una pantalla de alta resolución (Retina) tiene una DPR de 2 o más. +a. Determinar el DPR (Ratio de Píxeles del 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 la DPR del dispositivo con los descriptores `x` en `srcset`. En este caso, tenemos tres imágenes con los siguientes descriptores: +b. Compara el DPR del dispositivo con los descriptores `x` en el `srcset`. En este caso, tenemos tres imágenes con los siguientes descriptores: -- example-1x.jpg: 1x +- ejemplo-1x.jpg: 1x -- example-2x.jpg: 2x +- ejemplo-2x.jpg: 2x -- example-3x.jpg: 3x +- ejemplo-3x.jpg: 3x -c. Elige la imagen con el descriptor `x` que se acerque más a la DPR del dispositivo. Para un dispositivo con una DPR de 1, el navegador seleccionará `example-1x.jpg`. Para un dispositivo con una DPR de 2, elegirá `example-2x.jpg`, y así sucesivamente. +c. Elegir la imagen con el descriptor `x` que esté más cercano al DPR del dispositivo. Para un dispositivo con un DPR de 1, el navegador seleccionará `ejemplo-1x.jpg`. Para un dispositivo con un DPR de 2, elegirá `ejemplo-2x.jpg`, y así sucesivamente. -Es importante tener en cuenta que también se puede utilizar el atributo `sizes` en combinación con el atributo `srcset` para proporcionar más información sobre cómo se mostrará la imagen en diferentes anchos de ventana gráfica. Esto es particularmente útil cuando se utiliza el descriptor de anchura (`w`). Aquí hay un ejemplo: +Es importante tener en cuenta que también 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 anchuras del viewport. Esto es especialmente útil cuando se utiliza el descriptor de anchura (`w`). Aquí hay un ejemplo: ```html -Una imagen de ejemplo ``` Este ejemplo de marcado incluye: -- **src**: La fuente de imagen predeterminada, se muestra si el navegador no admite srcset. -- **srcset**: La lista de fuentes de imagen y sus descriptores de densidad (1x, 2x, 3x). El navegador elegirá la imagen más adecuada según la pantalla del usuario. -- **alt**: Una descripción de la imagen con fines de accesibilidad. +- **src** : La fuente de imagen predeterminada, que se muestra si el navegador no admite srcset. +- **srcset** : La lista de fuentes de imagen y sus descriptores de densidad (1x, 2x, 3x). El navegador elegirá la imagen más apropiada en función de la pantalla del usuario. +- **alt** : Una descripción de la imagen con fines de accesibilidad. -¡Y eso es todo! Ha implementado con éxito srcset con descriptores de densidad, mejorando el rendimiento y la experiencia del usuario de su sitio web. +¡Y eso es todo! Has implementado exitosamente srcset con descriptores de densidad, mejorando el rendimiento y la experiencia de usuario de tu sitio web. diff --git a/src/content/docs/es/introduction.md b/src/content/docs/es/introduction.md index a374792..84bfdea 100644 --- a/src/content/docs/es/introduction.md +++ b/src/content/docs/es/introduction.md @@ -1,22 +1,24 @@ --- title: srcset y tamaños de -description: Una guía eficiente y con opiniones sobre imágenes responsivas para 2023 -taskInputHash: c0bfd3a988eb464d +description: >- + Una guía eficiente y enfocada a la opinión sobre imágenes responsivas para el + 2023 +taskInputHash: 695481b378338d63 lang: es -ignore: '/* cSpell:locale es,en*/' sidebar_sort_priority: 1000 -date_published: '2023-03-23' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -**Una guía eficiente y con opiniones sobre imágenes para 2023** +**Una guía eficiente y enfocada a la opinión sobre las imágenes para el 2023** -Consulte la barra lateral para obtener información detallada. Esta es la referencia rápida para actualizar las etiquetas `` y manejar los dispositivos modernos en todas sus diferentes tamaños y densidades de píxeles. Debe [saber que los píxeles no son iguales](/es/pixels-not-pixels) y que `devicePixelRatio` es más probable que esté alrededor de 3,875 en lugar de 1:1. Los teléfonos modernos fingen tener 320-428 píxeles de ancho para la legibilidad (en píxeles CSS), pero tienen muchos píxeles de dispositivo por píxel CSS. +Consulta la barra lateral para una inmersión profunda. Esta es la referencia rápida para mejorar esas tags `` para manejar los dispositivos modernos en todas sus distintas tamaños y densidades de píxeles. Debes [saber que los píxeles no son iguales](/es/pixels-not-pixels) y que `devicePixelRatio` es más probable que sea alrededor de 3,875 que 1:1. Los teléfonos modernos simulan ser de 320-428px de ancho para legibilidad (en píxeles CSS), pero tienen muchos píxeles de dispositivo por píxel CSS. + +> Si tu imagen nunca cambia de tamaño, no importa qué tan estrecha hagas la ventana del navegador, deberías usar un [descriptor de densidad en su lugar](/es/density-descriptors). Esto es a menudo adecuado para logos, iconos y botones. + +¿Sabes cuáles son tus [breakpoints](/es/breakpoints)? Necesitarás esos números para afinar la solución siguiente - y como mínimo el breakpoint de la anchura del viewport donde el área de contenido principal deja de crecer. -> Si su imagen nunca cambia de tamaño, no importa cuán estrecha haga la ventana del navegador, debe utilizar un [descriptor de densidad](/es/density-descriptors). Esto a menudo es adecuado para logotipos, iconos y botones. -¿Sabe cuáles son sus [puntos de interrupción](/es/breakpoints)? Necesitará esos números para ajustar la solución a continuación, como mínimo, el punto de interrupción del ancho del viewport donde el área de contenido principal deja de crecer. - ### El método fácil ```html @@ -28,12 +30,12 @@ Consulte la barra lateral para obtener información detallada. Esta es la refere img.jpg?format=webp&w=1600 1600w, img.jpg?format=webp&w=2000 2000w" - sizes="(max-width: 700px) 100vw, 800px" alt="Perro montando en bicicleta" /> + sizes="(max-width: 700px) 100vw, 800px" alt="Perro montando bicicleta" /> - + - + ``` diff --git a/src/content/docs/es/lighthouse-performance-test.md b/src/content/docs/es/lighthouse-performance-test.md index 823fd93..027f314 100644 --- a/src/content/docs/es/lighthouse-performance-test.md +++ b/src/content/docs/es/lighthouse-performance-test.md @@ -1,25 +1,24 @@ --- -title: Prueba de rendimiento con Lighthouse -description: Pasos sobre cómo probar el rendimiento de un sitio web utilizando Lighthouse -taskInputHash: d6d69f5336f685c3 +title: Prueba el rendimiento con Lighthouse +description: Pasos sobre cómo probar el rendimiento de un sitio web usando Lighthouse +taskInputHash: f6259e4f76167d60 lang: es -ignore: '/* cSpell:locale es,en*/' -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -¿Cómo se prueba el rendimiento del sitio con Lighthouse? +¿Cómo se prueba el rendimiento de un sitio web con Lighthouse? -> Lighthouse es una herramienta que se puede utilizar para medir el rendimiento, accesibilidad y otros aspectos de un sitio web. Para probar el rendimiento de tu sitio web con Lighthouse, sigue estos pasos: -> -> 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. +> Lighthouse es una herramienta que se puede utilizar para medir el rendimiento, la accesibilidad y otros aspectos de un sitio web. Para probar el rendimiento de su sitio web con Lighthouse, siga estos pasos: +> +> 1\. Abra el navegador web Google Chrome y navegue hasta la página que desea probar. +> +> 2\. Haga clic en los tres puntos en la esquina superior derecha de la ventana del navegador, luego seleccione "Más herramientas" y después "Herramientas de desarrollador" o simplemente use el atajo de teclado "Ctrl+Shift+I" (Windows, Linux) o "Command+Option+I" (macOS). +> +> 3\. En el panel de Herramientas de desarrollador, haga clic en el icono de Lighthouse ubicado en el lado izquierdo del panel o presione "Ctrl+Shift+P" (Windows, Linux) o "Command+Shift+P" (macOS) para abrir el Menú de Comandos, luego escriba "Lighthouse" y seleccione "Generar informe". +> +> 4\. En la ventana de diálogo de Lighthouse, seleccione las opciones de rendimiento y otros relevantes que desea probar, luego haga clic en "Generar informe". +> +> 5\. Después de que Lighthouse completa su análisis, verá un informe con puntajes y recomendaciones para mejorar el rendimiento, la accesibilidad y otros aspectos de su sitio web. +> +> Siguiendo estos pasos, puede utilizar Lighthouse para probar y optimizar el rendimiento de su sitio web, lo que puede ayudar a mejorar su experiencia de usuario y su clasificación en los motores de búsqueda. diff --git a/src/content/docs/es/picture-examples.md b/src/content/docs/es/picture-examples.md index 2d49689..1c24d4b 100644 --- a/src/content/docs/es/picture-examples.md +++ b/src/content/docs/es/picture-examples.md @@ -1,12 +1,11 @@ --- title: Ejemplos usando el elemento description: >- - Proporciona ejemplos utilizando el elemento , para imágenes - responsivas, dirección de arte y diferentes formatos de imagen. -taskInputHash: 6db4516ee45090eb + Proporciona ejemplos usando el elemento para imágenes responsivas, + dirección de arte y diferentes formatos de imagen. +taskInputHash: 301fae33335f1d72 lang: es -ignore: '/* cSpell:locale es,en*/' -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- @@ -22,7 +21,7 @@ Aquí hay algunos ejemplos de cómo usar el elemento `` y sus explicaci ``` -Explicación: En este ejemplo, el elemento `` se utiliza para proporcionar diferentes fuentes de imágenes para diferentes tamaños de pantalla. Los elementos `` especifican las diferentes fuentes de imagen utilizando el atributo "srcset" y el atributo "media" para especificar las condiciones en las que se debe utilizar cada fuente. El elemento `` se utiliza como alternativa para navegadores antiguos o cuando no se cumplen las condiciones especificadas en los elementos ``. +Explicación: En este ejemplo, el elemento `` se usa para proporcionar diferentes fuentes de imagen para diferentes tamaños de pantalla. Los elementos `` especifican las diferentes fuentes de imagen mediante el atributo "srcset" y el atributo "media" para especificar las condiciones bajo las cuales se debe utilizar cada fuente. El elemento `` se usa como alternativa para navegadores antiguos o cuando no se cumplen las condiciones especificadas en los elementos ``. 2\. Ejemplo para dirección de arte: @@ -34,7 +33,7 @@ Explicación: En este ejemplo, el elemento `` se utiliza para proporcio ``` -Explicación: En este ejemplo, el elemento `` se utiliza para proporcionar diferentes fuentes de imágenes según la orientación del dispositivo. El elemento `` con el atributo "media" establecido en "(orientation: landscape)" especifica una fuente de imagen para pantallas anchas, mientras que el elemento `` especifica una fuente de imagen para pantallas verticales. +Explicación: En este ejemplo, el elemento `` se usa 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 amplias, mientras que el elemento `` especifica una fuente de imagen para pantallas en vertical. 3\. Ejemplo para diferentes formatos de imagen: @@ -48,12 +47,12 @@ Explicación: En este ejemplo, el elemento `` se utiliza para proporcio ``` -Explicación: En este ejemplo, el elemento `` se utiliza para proporcionar diferentes fuentes de imágenes para diferentes formatos de imagen. Los elementos `` especifican diferentes fuentes de imagen utilizando el atributo "srcset" y el atributo "type" para especificar el formato de imagen. El elemento `` se utiliza como alternativa para navegadores antiguos que no admiten el elemento ``. +Explicación: En este ejemplo, el elemento `` se usa para proporcionar diferentes fuentes de imagen para diferentes formatos de imagen. Los elementos `` especifican diferentes fuentes de imagen mediante el atributo "srcset" y el atributo "type" para especificar el formato de imagen. El elemento `` se usa como alternativa 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 debería cambiar el diseño de un sitio web o aplicación en función del tamaño del viewport. Los puntos de interrupción normalmente se definen utilizando consultas multimedia en CSS, que aplican diferentes estilos según el ancho de pantalla. Estos puntos de interrupción se pueden usar 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, usamos 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 `image-large.jpg`; cuando el ancho de pantalla es mayor o igual a 480 píxeles pero menor que 768 píxeles, se utilizará la fuente `image-medium.jpg`; y cuando el ancho de pantalla es menor que 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 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 usar múltiples puntos de interrupción para crear diseños que respondan a una amplia variedad de dispositivos. Al combinar los puntos de interrupción con el elemento ``, se pueden crear diseños flexibles y responsivos que se vean geniales en cualquier dispositivo. diff --git a/src/content/docs/es/pixels-not-pixels.md b/src/content/docs/es/pixels-not-pixels.md index 00b7cef..d4e8fee 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 del dispositivo ≠ px del navegador ≠ px de la imagen +taskInputHash: fa5ed4d660ea8716 lang: es -ignore: '/* cSpell:locale es,en*/' sidebar_sort_priority: 900 -date_published: '2023-03-26' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -### Píxeles de dispositivo ≠ píxeles del navegador ≠ píxeles de imagen +### Pixels de dispositivo ≠ px de navegador ≠ px de imagen -Gracias a Apple, los píxeles de CSS y HTML (`px`) **casi siempre se asignan a múltiples píxeles de dispositivo/impresora**. El devicePixelRatio de mi teléfono es 3,875; [¿cuál es el tuyo?](https://www.mydevice.io/) +Gracias a Apple, los píxeles CSS y HTML (`px`) **casi siempre se asignan a múltiples píxeles de dispositivo/impresora**. La devicePixelRatio en mi teléfono es 3.875; [¿cuál es la tuya?](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%). +La devicePixelRatio de mi computadora de escritorio cambia al hacer zoom en el navegador, pero se establece en 1.5 por defecto (mi `Sistema > Pantalla > Escala` es 150%, después de todo). -Los archivos de imagen (excluyendo SVG) se decodifican a una cuadrícula de píxeles. **Es molestoamente difícil obtener que los píxeles de la imagen se muestren perfectamente a una relación 1:1 con los píxeles de dispositivo -pero con `srcset` puedes llegar lo *suficientemente* cerca**, y un poco de Javascript puede ajustar el tamaño del elemento html después de la carga si realmente tienes razones justificadas para necesitar ese mapeo perfecto, aunque dichas artes prohibidas no serán reveladas aquí. +Los archivos de imagen (excluyendo SVG) se decodifican en una cuadrícula de píxeles. **Es molesto conseguir que los píxeles de la imagen se muestren perfectamente en una relación 1:1 con los píxeles del dispositivo - pero con `srcset` puedes acercarte lo suficiente**, y un poco de Javascript puede ajustar el tamaño del elemento HTML después de cargarse si tienes razones realmente justificadas para necesitar esa asignación perfecta, aunque tales artes prohibidos no se revelarán 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 [en (pulgadas), pc (picas), pt (puntos tipográficos), mm (milímetros), cm (centímetros), Q (cuartos)](https://developer.mozilla.org/es/docs/Web/CSS/length) están definidas 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 contenedor. Las unidades incompatibles pueden romper una disposición si el usuario ajusta su multiplicador de `Accesibilidad > Tamaño de texto`, hace zoom en el navegador o rota su dispositivo. No hace falta decir que debes probar todo esto 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..2ccdc52 100644 --- a/src/content/docs/es/specify-width-height.md +++ b/src/content/docs/es/specify-width-height.md @@ -1,17 +1,16 @@ --- -title: Usa ancho y altura -description: Beneficios de usar los atributos de ancho y altura en el código HTML -taskInputHash: c1840d188c21b829 +title: Usa ancho y alto +description: Beneficios de usar los atributos de ancho y alto en el código HTML +taskInputHash: bc70264022c9bec6 lang: es -ignore: '/* cSpell:locale es,en*/' -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -¿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 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 a medida que se carga la imagen. > -> Además, especificar los atributos de ancho y altura para las imágenes también puede ayudar a mejorar el rendimiento general de la página web. Cuando un navegador conoce el tamaño de una imagen de antemano, puede calcular con mayor precisión la cantidad de espacio necesario para mostrar la imagen y evitar reflujo innecesarios o repintados del contenido a medida que se carga. +> Además, especificar los atributos de ancho y alto para las imágenes también puede ayudar a mejorar el rendimiento general de la página web. Cuando el 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, usar los atributos de ancho y alto en el código HTML de las imágenes puede mejorar la experiencia del usuario al hacer que el contenido se cargue más rápido y reducir las fallas en la visualización. diff --git a/src/content/docs/es/when-to-use-picture.md b/src/content/docs/es/when-to-use-picture.md index 2c26e07..ecf72ea 100644 --- a/src/content/docs/es/when-to-use-picture.md +++ b/src/content/docs/es/when-to-use-picture.md @@ -1,23 +1,22 @@ --- title: Cuándo usar el elemento -description: Explica en qué situaciones se debe usar el elemento -taskInputHash: 97265d75f3229eaa +description: Explica en qué situaciones debes usar el elemento +taskInputHash: af86a8e0c8137bbe lang: es -ignore: '/* cSpell:locale es,en*/' -date_published: '2023-03-27' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -El elemento `picture` se utiliza para proporcionar múltiples versiones de una imagen y determina cuál versión de la imagen mostrar en función de ciertas condiciones. Es particularmente útil para optimizar imágenes para diferentes tamaños de pantalla y resoluciones, y se utiliza comúnmente en diseño web adaptable. +El elemento `picture` se utiliza para proporcionar múltiples versiones de una imagen y determinar qué versión de la imagen mostrar según ciertas condiciones. Es particularmente útil para optimizar imágenes para diferentes tamaños y resoluciones de pantalla, y se utiliza comúnmente en el diseño web adaptable. -Aquí hay algunos escenarios específicos donde podría querer utilizar el elemento `picture`: +Aquí hay algunos casos específicos en los que 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 se optimizan para una resolución alta. Con el elemento `picture`, puede proporcionar una versión de la imagen que tiene el doble de píxeles que la versión normal, para que se vea nítida y clara en las pantallas Retina. +* **Pantallas Retina:** Las pantallas de alta densidad como las pantallas Retina de Apple tienen una densidad de píxeles más alta, 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` , puede proporcionar una versión de la imagen que tenga el doble de píxeles que la versión normal, por lo que se ve nítida y clara en las pantallas Retina. -* **Diferentes relaciones de aspecto:** Si está diseñando un sitio que debe mostrar imágenes con diferentes relaciones de aspecto (como paisaje vs. retrato), puede utilizar el elemento `picture` para proporcionar diferentes versiones de la imagen que estén optimizadas para cada relación de aspecto. +* **Diferentes relaciones de aspecto:** Si está diseñando un sitio que necesita mostrar imágenes con diferentes relaciones de aspecto (como paisaje frente a retrato), puede utilizar el elemento `picture` para proporcionar diferentes versiones de la imagen que estén optimizadas para cada relación de aspecto. -* **Limitaciones de ancho de banda:** Las imágenes pueden ser archivos grandes que ocupan mucho ancho de banda, especialmente en dispositivos móviles. Con el elemento `picture`, puede proporcionar versiones más pequeñas de la imagen para dispositivos con pantallas más pequeñas o conexiones de Internet más lentas, lo que puede ayudar a reducir los tiempos de carga de la página. +* **Limitaciones de ancho de banda:** Las imágenes pueden ser archivos grandes que ocupan mucho ancho de banda, especialmente en dispositivos móviles. Con el elemento `picture` , puede proporcionar versiones más pequeñas de la imagen para dispositivos con pantallas más pequeñas o conexiones a Internet más lentas, lo que puede ayudar a reducir los tiempos de carga de la página. -* **Diseños dirigidos por arte:** A veces puede desear presentar una imagen de cierta manera según el diseño del resto de la página. Por ejemplo, puede querer mostrar un primer plano del rostro de una persona en dispositivos móviles, pero una toma más amplia en dispositivos de escritorio. El elemento `picture` le permite proporcionar diferentes versiones de la imagen que estén optimizadas para diferentes diseños. +* **Diseño de arte dirigido:** A veces puede 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` le permite proporcionar diferentes versiones de la imagen que están optimizadas para diferentes diseños. -En general, el elemento `picture` es una herramienta poderosa que puede ayudarlo a optimizar sus imágenes para una variedad de casos de uso y asegurarse de que se vean geniales sin importar en qué dispositivo o tamaño de pantalla se estén viendo. +En general, el elemento `picture` es una herramienta poderosa que puede ayudarlo a optimizar sus imágenes para una variedad de casos de uso y asegurarse de que se vean excelentes 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..0a998a5 100644 --- a/src/content/docs/es/width-density.md +++ b/src/content/docs/es/width-density.md @@ -1,47 +1,46 @@ --- title: Descriptores de ancho y densidad -description: Ejemplos de uso de descriptores de ancho y densidad en `srcset` -taskInputHash: 74b8eb2869d948a0 +description: Ejemplos de cómo usar descriptores de ancho y densidad en `srcset` +taskInputHash: 5b1efd1f64f5865b lang: es -ignore: '/* cSpell:locale es,en*/' -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -Entendiendo los descriptores de ancho (w) y densidad (x) en `srcset`. Usa ejemplos y Markdown. +Entendiendo los descriptores de ancho (w) y densidad (x) en `srcset`. Usa ejemplos y usa Markdown. -> `srcset` es un atributo HTML que permite a los desarrolladores proporcionar múltiples fuentes de imágenes con diferentes resoluciones o densidades de píxeles, y permitir que el navegador seleccione la imagen adecuada en función de las características de visualización del dispositivo. El atributo `srcset` utiliza una combinación de la `URL` y los descriptores `w` o `x` para especificar las imágenes. -## Descriptores de Ancho (`w`) +> `srcset` es un atributo HTML que permite a los desarrolladores proporcionar múltiples fuentes de imágenes con diferentes resoluciones o densidades de píxeles, y dejar que el navegador seleccione la imagen adecuada según las características de visualización del dispositivo. El atributo `srcset` usa una combinación de la `URL` y los descriptores `w` o `x` para especificar las imágenes. -> El descriptor `w` se utiliza para especificar el ancho de una imagen en píxeles. Se utiliza cuando se desea proporcionar al navegador las dimensiones de una imagen para que pueda elegir la imagen adecuada para el espacio disponible en la pantalla. +## Descriptor de ancho (`w`) -> La sintaxis para utilizar el descriptor `w` en `srcset` es la siguiente: +> El descriptor `w` se usa para especificar el ancho de una imagen en píxeles. Se utiliza cuando queremos proporcionar al navegador las dimensiones de una imagen para que pueda elegir la imagen adecuada para el espacio de pantalla disponible. + +> La sintaxis para usar el descriptor `w` en `srcset` es la siguiente: ```html Ejemplo de Imagen + alt="Ejemplo de imagen"> ``` +> En el ejemplo anterior, hemos proporcionado al navegador tres imágenes y sus anchos correspondientes en píxeles. El navegador seleccionará la imagen con el ancho más cercano al espacio de pantalla disponible. -> En el ejemplo anterior, hemos proporcionado al navegador tres imágenes y sus anchos correspondientes en píxeles. El navegador seleccionará la imagen con el ancho más cercano al espacio disponible en la pantalla. -## Descriptores de Densidad (`x`) +## Descriptor de densidad (`x`) -> El descriptor `x` se utiliza para especificar la densidad de píxeles de una imagen, que es la relación de píxeles físicos a píxeles CSS. Se utiliza cuando se desea proporcionar al navegador diferentes versiones de la misma imagen con diferentes densidades de píxeles. +> El descriptor `x` se utiliza para especificar la densidad de píxeles de una imagen, que es la relación de píxeles físicos a píxeles CSS. Se usa cuando queremos proporcionar al navegador diferentes versiones de la misma imagen con diferentes densidades de píxeles. -> La sintaxis para utilizar el descriptor `x` en `srcset` es la siguiente: +> La sintaxis para usar el descriptor `x` en `srcset` es la siguiente: ```html Ejemplo de Imagen + alt="Ejemplo de imagen"> ``` +> En el ejemplo anterior, hemos proporcionado al navegador tres imágenes y sus 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 diferentes densidades de píxeles correspondientes. El navegador seleccionará la imagen con la densidad de píxeles más cercana a la pantalla del dispositivo. - -> Es importante notar que los descriptores `w` y `x` se pueden usar juntos en el mismo atributo `srcset` para proporcionar al navegador más opciones para elegir. +> Es importante notar que los descriptores `w` y `x` se pueden utilizar juntos en el mismo atributo `srcset` para proporcionar al navegador más opciones para seleccionar. diff --git a/src/content/docs/fr/_roundtrip_breakpoints.txt b/src/content/docs/fr/_roundtrip_breakpoints.txt index ff1e785..67aa1fd 100644 --- a/src/content/docs/fr/_roundtrip_breakpoints.txt +++ b/src/content/docs/fr/_roundtrip_breakpoints.txt @@ -2,10 +2,9 @@ title: Breakpoints and Images description: >- Why some breakpoints (but not all) matter for your images -taskInputHash: b9dc6c0d27d7c8b7 +taskInputHash: 5a77d053d4f47978 lang: en -ignore: '/* cSpell:locale fr,en*/' -date_published: '2023-03-26' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- @@ -13,31 +12,32 @@ date_updated: '2023-03-31' Small screens and large monitors require different layouts. For the needs of `srcset` and `sizes`, we need to know when the layout changes. -Web developers need to decide what to reduce, hide or move on small screens - or more commonly, what to stretch, reveal or add on large screens. They also have very little information. Is the user on a tablet or a phone in landscape mode - or a small browser window? +Web developers need to decide what to reduce, hide, or move on small screens - or more commonly, what to enlarge, reveal, or add on large screens. They also have very little information. Is the user on a tablet or phone in landscape mode - or a small browser window? -We need to choose an arbitrary viewport width where the layout changes. This is called a **breakpoint**. It's an arbitrary number of CSS pixels ([not device pixels](/en/pixels-not-pixels)). Polypane has an [excellent article](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023) on commonly used breakpoints. +We need to choose an arbitrary viewport width where the layout changes. This is called a **breakpoint**. This is an arbitrary number of CSS pixels ([not device pixels](/en/pixels-not-pixels)). Polypane has an [excellent article](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023) on commonly used breakpoints. -Some images (like logos or icons or buttons) may be immune to layout changes caused by these breakpoints (and be fine with [srcset density descriptors](/en/density-descriptors)). +Some images (such as logos, icons, or buttons) might be immune to layout changes caused by these breakpoints (and be satisfied with [srcset density descriptors](/en/density-descriptors)). -Images in the main content will be constrained by the size of their container. Typically, the main content area of a page will be limited to some width on larger screens, a `max-width`, but on smaller screens, the main content area will fill the entire viewport. +Main content images will be limited by the size of their container. Generally, 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 because the percentage of the viewport width that the image takes up will change. -### The easy way +### The Easy Method -That being said, don't think too much about this. You'll probably be just fine with the following approximation method: +That being said, don't worry too much. You'll probably be just fine with the following approximation: -1. At what size does the main column (or image container) stop growing? Up to this viewport width, we can use `100vw` for the `sizes` attribute of the image to say that the image takes up 100% of the viewport width. -2. What is the maximum width the container ever reaches? We can set that as a fixed width for everything else. +1. At what size does the main column (or image container) stop growing? Until this viewport width, we can use `100vw` for the `sizes` attribute of the image to indicate that the image takes up 100% of the viewport width. +2. What is the maximum width that the 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: +If your answer to question 1 was 700px and your answer to question 2 was 800px, you can use the following `sizes` attribute: ```html - + ``` -> You thought the browser might handle all these calculations for us based on CSS. Unfortunately, browsers are aggressively keen to choose an image URL *before* downloading style sheets. We have to do the calculations ourselves, and they're well worth it if we don't get them perfectly. + +> You might have thought that the browser could do all this math for us based on the CSS. Unfortunately, browsers are extremely eager to pick an image URL *before* stylesheets have downloaded. So we have to do the math ourselves, and they're better off if we're not perfect at it. ===================== Content prompt used: diff --git a/src/content/docs/fr/_roundtrip_browser-picks-srcset.txt b/src/content/docs/fr/_roundtrip_browser-picks-srcset.txt index e7bf5a7..e34d0e7 100644 --- a/src/content/docs/fr/_roundtrip_browser-picks-srcset.txt +++ b/src/content/docs/fr/_roundtrip_browser-picks-srcset.txt @@ -1,60 +1,63 @@ --- -title: How does the browser choose between images listed in the srcset attribute -description: How the browser chooses between images listed in the srcset attribute -taskInputHash: df517c34368094dc +title: How the browser selects from images listed in the srcset attribute +description: How the browser chooses between images listed in the srcset attribute based on width and pixel density, and device and viewport considerations. +taskInputHash: 510de28bcb47eb08 lang: en +date_published: '2023-03-31' +date_modified: '2023-03-31' +date_updated: '2023-03-31' --- -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's a step-by-step explanation, with examples for both width and density specifications, and how the browser decides based on device and viewport considerations. -- 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 sources provided. These rules depend on both the display characteristics of the device (resolution, pixel density) and the size of the viewport. The `srcset` attribute allows for specifying different images based on either width (using the `w` descriptor) or pixel density (using the `x` descriptor). Let's look at each case with examples. 1. Width Descriptor (`w`): -Assuming we have the following `srcset` attribute: +Say we have the following `srcset` attribute: -```html +```html -Example image +Example Image ``` -The browser follows these steps: +The browser will follow these steps: -a. Determine the DPR (Device Pixel Ratio) of the device. For example, a regular screen has a DPR of 1, while a high-resolution (Retina) screen has a DPR of 2 or more. +a. Determine the DPR (Device Pixel Ratio) of the device. For example, a standard display has a DPR of 1, whereas a high-resolution (Retina) display has a DPR of 2 or more. -b. Calculate the effective width for each image in `srcset`. Multiply the width descriptor by DPR. For a device with a DPR of 1: +b. Calculate the effective width for each image in the `srcset`. Multiply the width descriptor by the DPR. For a device with a DPR of 1: -- example-small.jpg: 400 * 1 = 400 px -- example-medium.jpg: 800 * 1 = 800 px -- example-large.jpg: 1600 * 1 = 1600 px +- example-small.jpg: 400 * 1 = 400px +- example-medium.jpg: 800 * 1 = 800px +- example-large.jpg: 1600 * 1 = 1600px -c. Compare the effective widths with the viewport width. Suppose the viewport width is 420 px. The browser selects the smallest image with an effective width greater than or equal to the viewport width. In this case, it selects `example-medium.jpg`. +c. Compare the effective widths with the 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 select `example-medium.jpg`. 2. Pixel Density Descriptor (`x`): -Assuming we have the following `srcset` attribute: +Say we have the following `srcset` attribute: -```html +```html -Example image +Example Image ``` -The browser follows these steps: +The browser will follow these steps: -a. Determine the DPR (Device Pixel Ratio) of the device. For example, a regular screen has a DPR of 1, while a high-resolution (Retina) screen has a DPR of 2 or more. +a. Determine the DPR (Device Pixel Ratio) of the device. For example, a standard display has a DPR of 1, whereas a high-resolution (Retina) display has a DPR of 2 or more. -b. Compare the device DPR with the `x` descriptors in `srcset`. In this case, we have three images with the following descriptors: +b. Compare the device'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 closest to the device's DPR. For a device with a DPR of 1, the browser will choose `example-1x.jpg`. For a device with a DPR of 2, it will choose `example-2x.jpg`, and so on. -It is important to note that 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's important to note that you can also use the `sizes` attribute in conjunction with the `srcset` attribute to provide more information on how the image will be displayed at different viewport widths. This is particularly useful when using the width descriptor (`w`). Here's an example: -```html +```html sizes -description: An efficient and subjective guide for responsive images in 2023 -taskInputHash: 2f3bd9fa4d308fbc +title: srcset and sizes `` +description: An efficient and categorical guide to responsive images in 2023 +taskInputHash: 299bd294fbb5e88c lang: en -ignore: '/* cSpell:locale fr,en*/' sidebar_sort_priority: 1000 -date_published: '2023-03-23' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -**An efficient and subjective guide for images in 2023** +**An efficient and categorical guide to images in 2023** -Check the sidebar for a deeper dive. This is a quick reference for updating those `` tags to support modern devices in all their varied sizes and pixel densities. You need to [know that pixels != pixels](/en/pixels-not-pixels) and `devicePixelRatio` is more likely to be around 3.875 than 1:1. Modern phones claim a width of 320 to 428 pixels for legibility (in CSS pixels), but have many pixels per CSS pixel. +Check the sidebar for an in-depth analysis. This is the quick reference for upgrading `` tags to support modern devices in all their different sizes and pixel densities. You should know that pixels != pixels and that `devicePixelRatio` is more likely to be around 3.875 than 1:1. Modern phones claim to be 320-428px wide for legibility (in CSS pixels) but have many device pixels per CSS pixel. -> If your image never changes size, no matter how 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 resize the browser window, you should use a [density descriptor](/en/density-descriptors). This often applies to 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](/en/breakpoints)? You'll need these numbers to fine-tune the solution below – at a minimum the display 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 riding a bike" /> + And that under this display width, this image takes up 100% of the width, but + when the display area is larger, the image is limited to 800 CSS pixels --> - + ``` + +{{Note that "density descriptors" and "breakpoints" were left untranslated in the text as they are technical terms}}. + +{{It is not clear what "RIAPI" means in the context of Imageflow. It could benefit from an explanation.}} ===================== Content prompt used: @@ -48,8 +51,8 @@ Also carefully translate the title and description for the article; do not use & 1. srcset & sizes 2. An Efficient and Opinionated Guide to Responsive Images for 2023 -Metadata returned1. srcset et tailles d' -2. Un guide efficace et subjectif pour les images réactives en 2023 +Metadata returned1. srcset et tailles `` + 2. Un guide efficace et catégorique pour les images réactives en 2023 Roundtrip (isolated) prompt used: diff --git a/src/content/docs/fr/_roundtrip_lighthouse-performance-test.txt b/src/content/docs/fr/_roundtrip_lighthouse-performance-test.txt index fa42679..81754ca 100644 --- a/src/content/docs/fr/_roundtrip_lighthouse-performance-test.txt +++ b/src/content/docs/fr/_roundtrip_lighthouse-performance-test.txt @@ -1,28 +1,27 @@ --- title: Testing Performance with Lighthouse -description: Steps for testing a website's performance using Lighthouse -taskInputHash: 8e6d39610c052ea3 +description: Steps for testing the performance of a website using Lighthouse +taskInputHash: 0bbadab1d72e06b0 lang: en -ignore: '/* cSpell:locale fr,en*/' -date_published: '2023-03-24' +date_published: '2023-03-31' 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 Using 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 performance, accessibility, and other aspects of a website. To test the performance of your website with Lighthouse, follow these steps: +> +> 1\. Open the Google Chrome web browser and navigate to the page you want to test. +> +> 2\. Click on the three dots in the top-right corner of the browser window, then select "More tools" and "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, then type "Lighthouse" and select "Generate report". +> +> 4\. In the Lighthouse dialog box, select the performance options and other relevant options that you want to test, then click "Generate report". +> +> 5\. After the Lighthouse analysis, you will receive a report with scores and recommendations to improve the performance, accessibility, and other areas of your website. +> +> By following these steps, you can use Lighthouse to test and optimize the performance of your website, which can help improve the user experience and search engine ranking. ===================== Content prompt used: diff --git a/src/content/docs/fr/_roundtrip_picture-examples.txt b/src/content/docs/fr/_roundtrip_picture-examples.txt index 10f80e1..c611698 100644 --- a/src/content/docs/fr/_roundtrip_picture-examples.txt +++ b/src/content/docs/fr/_roundtrip_picture-examples.txt @@ -1,16 +1,16 @@ --- -title: Examples using the element +title: Examples of using the element description: >- - Provides examples using the element, for responsive images, art direction, and different image formats. -taskInputHash: 9b88532218099931 + Provides examples of using the element for adaptive images, art direction, and different image formats. +taskInputHash: 8360be5b329508bb lang: en -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -Here are some examples of using the `` element with explanations: +Here are some examples of using the `` element and their explanations: -1. Example for responsive images: +1. Example of adaptive images: ```html @@ -20,9 +20,9 @@ Here are some examples of using the `` element with explanations: ``` -Explanation: In this example, the `` element is used to provide different image sources for different screen sizes. The `` elements specify different image sources using the "srcset" attribute and the "media" attribute to specify the conditions under which each source should be used. The `` element is used as a fallback for older browsers or when the conditions specified in the `` elements are not met. +Explanation: In this example, the `` element is used to provide different image sources for different screen sizes. The `` elements specify the different image sources using the "srcset" attribute and the "media" attribute to specify the conditions under which each source should be used. The `` element is used as a fallback for older browsers or when the conditions specified in the `` elements are not met. -2. Example for art direction: +2. Example of art direction: ```html @@ -32,9 +32,9 @@ Explanation: In this example, the `` element is used to provide differe ``` -Explanation: In this example, the `` element is used to provide different image sources based on the orientation of the device. The `` element with the "media" attribute set to "(orientation: landscape)" specifies an image source for wide screens, while the `` element specifies an image source for portrait screens. +Explanation: In this example, the `` element is used to provide different image sources based on the device orientation. The `` element with the "media" attribute set to "(orientation: landscape)" specifies an image source for wide screens, while the `` element specifies an image source for portrait screens. -3. Example for different image formats: +3. Example of different image formats: ```html @@ -50,11 +50,11 @@ Explanation: In this example, the `` element is used to provide differe ## Breakpoints -In responsive design, breakpoints are used to define when the layout of a website or application should change based on the size of the display window. Breakpoints are usually defined using media queries in CSS, which apply different styles based on the screen width. These breakpoints can be used in conjunction with the `` element to provide different image sources for different screen sizes. +In 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. -For example, in the first example above, we used the `media` attribute to specify the screen width under which each source should be used. When the screen width is greater than or equal to 768 pixels, the `image-large.jpg` source will be used; when the screen width is greater than or equal to 480 pixels but less than 768 pixels, the `image-medium.jpg` source will be used; and when the screen width is less than 480 pixels, the `image-small.jpg` source will be used. This allows us to provide appropriately sized images for each device, thus reducing page loading times and improving the user experience. +For example, in the first example above, we used the `media` attribute to specify the screen width at which each source should be used. When the screen width is greater than or equal to 768 pixels, the `image-large.jpg` source will be used; when the screen width is greater than or equal to 480 pixels but less than 768 pixels, the `image-medium.jpg` source will be used; and when the screen width is less than 480 pixels, the `image-small.jpg` source will be used. This allows us to serve appropriately sized images for each device, reducing page load times and improving the user experience. -Breakpoints can be defined at any screen size, and multiple breakpoints can be used to create layouts that respond to a wide range of devices. By combining breakpoints with the `` element, you can create flexible and responsive designs that look great on any device. +Breakpoints can be set 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, adaptive designs that look great on any device. ===================== Content prompt used: @@ -67,8 +67,8 @@ Also carefully translate the title and description for the article; do not use & 1. Examples using element 2. Provides examples using the element, for responsive images, art direction and different image formats -Metadata returned1. Exemples utilisant l'élément -2. Fournit des exemples utilisant l'élément , pour des images réactives, la direction artistique et différents formats d'image. +Metadata returned1. Exemples d'utilisation de l'élément +2. Fournit des exemples d'utilisation de l'élément pour des images adaptatives, la direction artistique et différents formats d'image. Roundtrip (isolated) prompt used: diff --git a/src/content/docs/fr/_roundtrip_pixels-not-pixels.txt b/src/content/docs/fr/_roundtrip_pixels-not-pixels.txt index 991ed47..1590434 100644 --- a/src/content/docs/fr/_roundtrip_pixels-not-pixels.txt +++ b/src/content/docs/fr/_roundtrip_pixels-not-pixels.txt @@ -1,23 +1,22 @@ --- title: px ≠ pixels -description: Screen pixels ≠ browser pixels ≠ image pixels -taskInputHash: 7dfd1c9b5c352f62 +description: Device pixels ≠ browser px ≠ image px +taskInputHash: 78cd82f73186df54 lang: en -ignore: '/* cSpell:locale fr,en*/' sidebar_sort_priority: 900 -date_published: '2023-03-26' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -### Screen pixels ≠ browser pixels ≠ image pixels +### Device Pixels ≠ Browser PX ≠ Image PX -Thanks to Apple, CSS and HTML pixels (`px`) **almost always correspond to multiple screen/printer pixels**. The devicePixelRatio of my phone is 3.875; [what about yours?](https://www.mydevice.io/) +Thanks to Apple, CSS and HTML pixels (`px`) **almost always correspond to multiple device/printer pixels**. My phone's devicePixelRatio is 3.875; [what's yours?](https://www.mydevice.io/) -The devicePixelRatio of my desktop computer changes based on the zoom level of the browser, but is by default 1.5 (my display scaling is 150% in `System > Display`). +My desktop computer's devicePixelRatio changes when zooming in the browser, but is typically 1.5 (because my `System > Display > Scale` is set to 150%). -Image files (with the exception of SVGs) decode into a grid of pixels. **Getting a perfect one-to-one match between image pixels and screen pixels is surprisingly difficult, but with `srcset`, you can get pretty close, and a little bit of JavaScript can adjust the size of the HTML element after loading if you have a valid reason to require a perfect match, although these dark arts will not be revealed here.** +Image files (except for SVGs) are decoded into a grid of pixels. **Displaying image pixels at a 1:1 ratio with device pixels is unpleasantly difficult—but with `srcset` you can get a close enough approximation**, and a little JavaScript can adjust the size of the HTML element after loading if you have a really good reason for a perfect mapping, though these 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_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 based on the number of CSS pixels and claim that everything is 96dpi. Developers avoid absolute units because it is generally better to use units derived from font size or viewport/container dimensions. Incompatible units can break a layout if the user adjusts their Accessibility > Text Size multiplier, zooms the browser, or rotates their device. Needless to say, you should do all of 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 ≠ px de navigateur ≠ px d'image Roundtrip (isolated) prompt used: diff --git a/src/content/docs/fr/_roundtrip_specify-width-height.txt b/src/content/docs/fr/_roundtrip_specify-width-height.txt index 64e5c23..ae40585 100644 --- a/src/content/docs/fr/_roundtrip_specify-width-height.txt +++ b/src/content/docs/fr/_roundtrip_specify-width-height.txt @@ -1,21 +1,20 @@ --- -title: Using Width and Height +title: Using width and height description: >- Benefits of using width and height attributes in HTML code -taskInputHash: b09c49dc5d3a4a2d +taskInputHash: cf7432b512e77c12 lang: en -ignore: '/* cSpell:locale fr,en*/' -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -Why should you include width and height in HTML? +Why should you use width and height in HTML code? -> It is recommended to include width and height attributes in the HTML code of images because it helps the web browser to know the size of the image before it is fully loaded. This allows the browser to reserve the appropriate space on the web page for the image, which prevents content from jumping around while the image is loading. +> It is recommended to include width and height attributes in the HTML code of images because it allows the web browser to know the size of the image before it is fully loaded. This allows the browser to reserve an appropriate amount of space on the web page for the image, preventing content from jumping during image 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. +> Additionally, specifying width and height attributes for images can also help to improve overall web 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 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. +> Overall, the use of width and height attributes in HTML code for images can enhance the user experience by making content load faster and reducing visual anomalies. ===================== Content prompt used: diff --git a/src/content/docs/fr/_roundtrip_when-to-use-picture.txt b/src/content/docs/fr/_roundtrip_when-to-use-picture.txt index 1e5b634..05557c6 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 Element +description: Explains in what situations you should use the element. +taskInputHash: e8d6a3bdae286229 lang: en -ignore: '/* cSpell:locale fr,en*/' -date_published: '2023-03-27' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- 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: -* **Retina Displays:** High-density displays such as Apple's Retina displays have a higher pixel density, which means that images may look blurry or pixelated if they are not optimized for high resolution. With the `picture` element, you can provide a version of the image that has twice as many pixels as the normal version, making it sharp and clear on Retina displays. +* **Retina Displays:** High-density displays like Apple's Retina displays have a higher pixel density, which means that images may 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 number of pixels as the normal version, so it looks sharp and clear on Retina displays. -* **Different Aspect Ratios:** If you are designing a site that needs to display images with different aspect ratios (such as landscape vs. portrait), you can use the `picture` element to provide different versions of the image optimized for each aspect ratio. +* **Different Aspect Ratios:** If you're designing a site that needs to display images with different aspect ratios (like landscape vs. portrait), you can use the `picture` element to provide different versions of the image that are optimized for each aspect ratio. -* **Bandwidth Limitations:** Images can be large files that consume a lot of bandwidth, especially on mobile devices. With the `picture` element, you can provide smaller versions of the image for devices with smaller screens or slower internet connections, which can help reduce page load times. +* **Bandwidth Constraints:** Images can be large files that consume a lot of bandwidth, especially on mobile devices. With the `picture` element, you can provide smaller versions of the image for devices with smaller screens or slower internet connections, which can help reduce page load times. -* **Art Direction Layout:** Sometimes, you may want to present an image in a certain way based on the layout of the rest of the page. For example, you may want to display a close-up of a person's face on mobile devices, but a wider shot on desktop computers. The `picture` element allows you to provide different versions of the image optimized for different layouts. +* **Art-directed Layouts:** Sometimes you may want to present an image in a certain way based on the layout of the rest of the page. For example, you may want to show a close-up of a person's face on mobile devices, but a wider shot on desktop devices. The `picture` element allows you to provide different versions of the image that are optimized for different layouts. -Overall, the `picture` element is a powerful tool that can help you optimize your images for a variety of use cases and ensure that they look great no matter which device or screen size they are displayed on. +Overall, the `picture` element is a powerful tool that can help you optimize your images for a variety of use cases and ensure that they look great no matter what device or screen size they're viewed on. ===================== Content prompt used: diff --git a/src/content/docs/fr/_roundtrip_width-density.txt b/src/content/docs/fr/_roundtrip_width-density.txt index 23025c9..d1ea0f0 100644 --- a/src/content/docs/fr/_roundtrip_width-density.txt +++ b/src/content/docs/fr/_roundtrip_width-density.txt @@ -1,18 +1,17 @@ --- -title: Width and Density Descriptors +title: Width and Density descriptors description: Examples of using width and density descriptors in `srcset` -taskInputHash: 569fd1065931e1e0 +taskInputHash: 488b21785c094954 lang: en -ignore: '/* cSpell:locale fr,en*/' -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -Understanding the 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 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 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. -## Width Descriptor (`w`) +## Width descriptor (`w`) > The `w` descriptor is used to specify the width of an image in pixels. It is used when we want to provide the browser with the dimensions of an image so that it can choose the appropriate image for the available screen space. @@ -23,12 +22,12 @@ Understanding the width (`w`) and density (`x`) descriptors in `srcset`. Use exa srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" - alt="Example Image"> + alt="Example 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`) +## Density descriptor (`x`) > The `x` descriptor is used to specify the pixel density of an image, which is the ratio of physical pixels to CSS pixels. It is used when we want to provide the browser with different versions of the same image with different pixel densities. @@ -39,12 +38,12 @@ Understanding the width (`w`) and density (`x`) descriptors in `srcset`. Use exa srcset="small.jpg 1x, medium.jpg 2x, large.jpg 3x" - alt="Example Image"> + alt="Example 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 even more options to choose from. ===================== Content prompt used: @@ -57,7 +56,7 @@ Also carefully translate the title and description for the article; do not use & 1. Width and density descriptors 2. Examples of using width and density descriptors in `srcset` -Metadata returned1. Descripteurs de largeur et de densité +Metadata returned1. Descripteurs de largeur et de densité 2. Exemples d'utilisation des descripteurs de largeur et de densité dans `srcset` diff --git a/src/content/docs/fr/breakpoints.md b/src/content/docs/fr/breakpoints.md index eb1cb9e..b3de0ce 100644 --- a/src/content/docs/fr/breakpoints.md +++ b/src/content/docs/fr/breakpoints.md @@ -3,41 +3,40 @@ title: Points de rupture et images description: >- Pourquoi certains points de rupture (mais pas tous) sont importants pour vos images -taskInputHash: b9dc6c0d27d7c8b7 +taskInputHash: 5a77d053d4f47978 lang: fr -ignore: '/* cSpell:locale fr,en*/' -date_published: '2023-03-26' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- ### Contexte -Les petits écrans et les grands moniteurs nécessitent des mises en page différentes. Pour les besoins de `srcset` et de `sizes`, nous devons savoir à quel moment la mise en page change. +Les petits écrans et les grands moniteurs nécessitent des mises en page différentes. Pour les besoins de `srcset` et `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'ils doivent réduire, masquer ou déplacer sur les petits écrans - ou plus couramment, ce qu'ils doivent agrandir, 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 ? -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 vue arbitraire où la mise en page change. Cela s'appelle un **point de rupture**. C'est un nombre arbitraire de pixels CSS ([pas les pixels de l'appareil](/fr/pixels-not-pixels)). Polypane a un [excellent article](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023) sur les points de rupture couramment utilisés. -Certaines images (comme les logos ou les icônes ou les boutons) pourraient être immunisées contre les changements de mise en page causés par ces points de rupture (et être fines avec les [descripteurs de densité srcset](/fr/density-descriptors)). +Certaines images (comme les logos, les icônes ou les boutons) pourraient être immunisées contre les changements de mise en page causés par ces points de rupture (et être satisfaites des [descripteurs de densité srcset](/fr/density-descriptors)). -Les images du contenu principal seront limitées par la taille de leur conteneur. En règle générale, la zone de contenu principal d'une page sera limitée à une certaine largeur sur les plus grands écrans, une `max-width`, mais sur les petits écrans, la zone de contenu principal remplira l'ensemble du viewport. +Les images de contenu principal seront limitées par la taille de leur conteneur. Généralement, la zone de contenu principal d'une page sera limitée à une certaine largeur sur les plus grands écrans, une `max-width`, mais sur les petits écrans, la zone de contenu principal remplira l'ensemble de la vue. -Si vous avez plus d'une colonne à certains points de rupture, il sera plus difficile de calculer les règles de dimensionnement effectives, car le pourcentage de la largeur du viewport que l'image occupe changera. +Si vous avez plus d'une colonne à certains points de rupture, il sera plus difficile de calculer les règles de dimensionnement effectives, car le pourcentage de la largeur de la vueport que prend l'image va changer. ### La méthode facile -Cela étant dit, ne pensez pas trop à cela. Vous serez probablement très bien avec la méthode d'approximation suivante : +Cela dit, ne vous inquiétez pas trop. Vous serez probablement très bien avec l'approximation suivante : -1. À quelle taille la colonne principale (ou le conteneur de l'image) cesse-t-elle de croître ? Jusqu'à cette largeur de viewport, nous pouvons utiliser `100vw` pour l'attribut `sizes` de l'image pour dire que l'image occupe 100 % de la largeur du viewport. -2. Quelle est la largeur maximale que le conteneur atteint jamais ? Nous pouvons fixer cela comme une largeur fixe pour tout le reste. +1. À quelle taille la colonne principale (ou le conteneur de l'image) cesse-t-elle de croître ? Jusqu'à cette largeur de vueport, nous pouvons utiliser `100vw` pour l'attribut `sizes` de l'image pour indiquer que l'image prend 100% de la largeur de la vueport. +2. Quelle est la largeur maximale que le conteneur atteint ? Nous pouvons définir cela comme une `largeur` fixe pour tout le reste. -Si votre réponse à 1 était 700px et votre réponse à 2 était 800px, vous pouvez utiliser l'attribut `sizes` suivant : +Si votre réponse à la question 1 était de 700 px et votre réponse à la question 2 était de 800 px, vous pouvez utiliser l'attribut `sizes` suivant : ```html - + ``` -> Vous pensiez que le navigateur pourrait gérer toutes ces calculs pour nous en fonction des CSS. Malheureusement, les navigateurs sont agressivement désireux de choisir une URL d'image *avant* le téléchargement des feuilles de style. Nous devons donc effectuer les calculs nous-mêmes, et ils méritent bien si nous ne les obtenons pas parfaitement. +> Vous pensiez que le navigateur pouvait gérer toutes ces calculs pour nous en fonction du 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 c'est tant mieux pour eux si nous ne le faisons pas parfaitement. diff --git a/src/content/docs/fr/browser-picks-srcset.md b/src/content/docs/fr/browser-picks-srcset.md index 42e2dfc..c40a7a6 100644 --- a/src/content/docs/fr/browser-picks-srcset.md +++ b/src/content/docs/fr/browser-picks-srcset.md @@ -1,71 +1,68 @@ --- title: Comment le navigateur choisit -description: >- - Comment le navigateur choisit entre les images répertoriées dans l'attribut - srcset -taskInputHash: 1ad7279bfa827840 +description: Comment le navigateur choisit entre les images listées dans l'attribut srcset +taskInputHash: 510de28bcb47eb08 lang: fr -ignore: '/* cSpell:locale fr,en*/' -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -Comment le navigateur choisit-il entre les images répertoriées dans l'attribut srcset ? Voici les étapes détaillées, avec des exemples pour les spécifications de largeur et de densité et comment le navigateur décide en fonction de l'appareil et du viewport. - -- Lorsque l'on utilise l'attribut `srcset` en HTML, le navigateur utilise un ensemble de règles pour choisir l'image la plus appropriée à partir d'une liste de sources fournies. Ces règles dépendent à la fois des caractéristiques d'affichage de l'appareil (résolution, densité de pixels) et de la taille du viewport. L'attribut `srcset` vous permet de spécifier des images différentes en fonction de la largeur (en utilisant le descripteur `w`) ou de la densité de pixels (en utilisant le descripteur `x`). Examinons chaque cas avec des exemples. - -1. Descripteur de largeur (`w`): - -Supposons que nous avons l'attribut `srcset` suivant : - -```html - -Image d'exemple - -``` - -Le navigateur suivra ces étapes: - -a. Déterminer le DPR (Device Pixel Ratio) de l'appareil. Par exemple, un écran standard a un DPR de 1, tandis qu'un écran haute résolution (Retina) a un DPR de 2 ou plus. - -b. Calculer la largeur effective pour chaque image dans le `srcset`. Multipliez le descripteur de largeur par le DPR. Pour un appareil avec un DPR de 1: - -- example-small.jpg: 400 \* 1 = 400px - -- example-medium.jpg: 800 \* 1 = 800px - -- example-large.jpg: 1600 \* 1 = 1600px - -c. Comparer les largeurs effectives avec la largeur du viewport. Supposons que la largeur du viewport est de 420px. Le navigateur choisira l'image la plus petite avec une largeur effective supérieure ou égale à la largeur de viewport. Dans ce cas, il sélectionnera `example-medium.jpg`. - -2. Descripteur de densité de pixels (`x`): - -Supposons que nous avons l'attribut `srcset` suivant : - -```html - -Image d'exemple - -``` - -Le navigateur suivra ces étapes: - -a. Déterminer le DPR (Device Pixel Ratio) de l'appareil. Par exemple, un écran standard a un DPR de 1, tandis qu'un écran haute résolution (Retina) a un DPR de 2 ou plus. - -b. Comparer le DPR de l'appareil avec le descripteur `x` dans le `srcset`. Dans ce cas, nous avons trois images avec les descripteurs suivants : - -- example-1x.jpg: 1x - -- example-2x.jpg: 2x - -- example-3x.jpg: 3x - -c. Choisir l'image avec le descripteur `x` le plus proche du DPR de l'appareil. Pour un appareil avec un DPR de 1, le navigateur sélectionnera `example-1x.jpg`. Pour un appareil avec un DPR de 2, il choisira `example-2x.jpg`, et ainsi de suite. - -Il est important de noter que l'on peut également utiliser l'attribut `sizes` en combinaison avec l'attribut `srcset` pour fournir plus d'informations sur la façon dont l'image sera affichée à différentes largeurs de viewport. Ceci est particulièrement utile lors de l'utilisation du descripteur de largeur (`w`). Voici un exemple : - -```html - -Exemple d'image + +``` + +Le navigateur suivra ces étapes : + +a. Déterminer le DPR (Device Pixel Ratio) de l'appareil. Par exemple, un affichage standard a un DPR de 1, tandis qu'un affichage haute résolution (Retina) a un DPR de 2 ou plus. + +b. Calculer la largeur effective pour chaque image dans le `srcset`. Multipliez le descripteur de largeur par le DPR. Pour un appareil avec un DPR de 1 : + +- example-small.jpg : 400 * 1 = 400px + +- example-medium.jpg : 800 * 1 = 800px + +- example-large.jpg : 1600 * 1 = 1600px + +c. Comparez les largeurs effectives avec la largeur du viewport. Supposons que la largeur du viewport soit de 420px. Le navigateur choisira la plus petite image ayant une largeur effective supérieure ou égale à la largeur du viewport. Dans ce cas, il sélectionnera `example-medium.jpg`. + +2. Descripteur de densité de pixels (`x`): + +Supposons que nous avons l'attribut `srcset` suivant : + +```html + +Exemple d'image + +``` + +Le navigateur suivra ces étapes : + +a. Déterminer le DPR (Device Pixel Ratio) de l'appareil. Par exemple, un affichage standard a un DPR de 1, tandis qu'un affichage haute résolution (Retina) a un DPR de 2 ou plus. + +b. Comparez le DPR de l'appareil avec les descripteurs `x` dans le `srcset`. Dans ce cas, nous avons trois images avec les descripteurs suivants : + +- example-1x.jpg : 1x + +- example-2x.jpg : 2x + +- example-3x.jpg : 3x + +c. Choisissez l'image avec le descripteur `x` le plus proche du DPR de l'appareil. Pour un appareil avec un DPR de 1, le navigateur choisira `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 vous pouvez également utiliser l'attribut `sizes` en combinaison avec l'attribut `srcset` pour fournir plus d'informations sur la façon dont l'image sera affichée à différentes largeurs de viewport. Cela est particulièrement utile lors de l'utilisation du descripteur de largeur (`w`). Voici un exemple : + +```html + +Une image d'exemple ``` - - -Cet exemple de balisage comprend : +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 leurs descripteurs de densité (1x, 2x, 3x). Le navigateur choisira l'image la plus appropriée en fonction de l'écran de l'utilisateur. - **alt** : Une description de l'image à des fins d'accessibilité. - -Et voilà ! Vous avez implémenté avec succès srcset avec descripteurs de densité, améliorant les performances et l'expérience utilisateur de votre site Web. +Et voilà! Vous avez mis en œuvre avec succès srcset avec descripteurs de densité, améliorant les performances et l'expérience utilisateur de votre site web. diff --git a/src/content/docs/fr/introduction.md b/src/content/docs/fr/introduction.md index c65a76f..6724dc2 100644 --- a/src/content/docs/fr/introduction.md +++ b/src/content/docs/fr/introduction.md @@ -1,21 +1,20 @@ --- -title: srcset et tailles d' -description: Un guide efficace et subjectif pour les images réactives en 2023 -taskInputHash: 2f3bd9fa4d308fbc +title: srcset et tailles `` +description: Un guide efficace et catégorique pour les images réactives en 2023 +taskInputHash: 299bd294fbb5e88c lang: fr -ignore: '/* cSpell:locale fr,en*/' sidebar_sort_priority: 1000 -date_published: '2023-03-23' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -**Un guide efficace et subjectif pour les images en 2023** +**Un guide efficace et catégorique pour les images en 2023** -Consultez la barre latérale pour une plongée plus profonde. Ceci est une référence rapide pour mettre à jour ces balises `` pour prendre en charge les appareils modernes dans toutes leurs tailles et densités de pixels variées. Vous devez [savoir que les pixels != pixels](/en/pixels-not-pixels) et `devicePixelRatio` est plus susceptible d'être autour de 3,875 que de 1:1. Les téléphones modernes prétendent avoir une largeur de 320 à 428 pixels pour la lisibilité (en pixels CSS), mais ont de nombreux pixels par pixel CSS. +Consultez la barre latérale pour une analyse approfondie. Ceci est la référence rapide pour la mise à niveau des balises `` pour prendre en charge les appareils modernes dans toutes leurs tailles et densités de pixels différentes. Vous devez savoir que les pixels != pixels et que `devicePixelRatio` est plus susceptible d'être autour de 3.875 que de 1:1. Les téléphones modernes prétendent être larges de 320 à 428px pour la lisibilité (en pixels CSS), mais ont de nombreux pixels de périphérique par pixel CSS. -> Si votre image ne change jamais de taille, peu importe la taille réduite de la fenêtre du navigateur, vous devriez utiliser un [descripteur de densité à la place](/en/density-descriptors). Ceci convient souvent aux logos, aux icônes et aux boutons. +> Si votre image ne change jamais de taille, peu importe à quel point vous réduisez la fenêtre du navigateur, vous devriez utiliser un [descripteur de densité](/fr/descripteurs-de-densite). Ceci convient souvent aux logos, icônes et boutons. -Savez-vous ce que sont vos [points de rupture](/en/breakpoints)? Vous aurez besoin de ces numéros pour affiner la solution ci-dessous, et au minimum le point de rupture de la largeur d'affichage où la zone de contenu principal cesse de s'agrandir. +Savez-vous quelles sont vos [points de rupture](/fr/points-de-rupture)? Vous aurez besoin de ces chiffres pour affiner la solution ci-dessous - et au minimum le point de rupture de la largeur d'affichage où la zone du contenu principal cesse de croître. ### La méthode facile @@ -29,12 +28,12 @@ Savez-vous ce que sont vos [points de rupture](/en/breakpoints)? Vous aurez beso img.jpg?format=webp&w=1600 1600w, img.jpg?format=webp&w=2000 2000w" - sizes="(max-width: 700px) 100vw, 800px" alt="Chien faisant de la bicyclette" /> + sizes="(max-width: 700px) 100vw, 800px" alt="Chien faisant du vélo" /> + Et que sous cette largeur d'affichage, cette image prend 100% de la largeur, mais + lorsque la zone d'affichage est plus grande, l'image est limitée à 800 pixels CSS --> - + ``` diff --git a/src/content/docs/fr/lighthouse-performance-test.md b/src/content/docs/fr/lighthouse-performance-test.md index 9a772bf..6036ea2 100644 --- a/src/content/docs/fr/lighthouse-performance-test.md +++ b/src/content/docs/fr/lighthouse-performance-test.md @@ -1,10 +1,9 @@ --- title: Tester les performances avec Lighthouse description: Étapes pour tester les performances d'un site web en utilisant Lighthouse -taskInputHash: 8e6d39610c052ea3 +taskInputHash: 0bbadab1d72e06b0 lang: fr -ignore: '/* cSpell:locale fr,en*/' -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- @@ -12,14 +11,14 @@ Comment tester les performances de votre site avec Lighthouse? > Lighthouse est un outil qui peut être utilisé pour mesurer les performances, l'accessibilité et d'autres aspects d'un site web. Pour tester les performances de votre site web avec Lighthouse, suivez ces étapes: > -> 1\. Ouvrez le navigateur Web Google Chrome et accédez à la page que vous souhaitez tester. +> 1\. Ouvrez le navigateur web Google Chrome et accédez à la page que vous 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). +> 2\. Cliquez sur les trois points en haut à droite de la fenêtre du navigateur, sélectionnez ensuite "Plus d'outils" puis "Outils de développement" ou utilisez simplement le raccourci clavier "Ctrl+Shift+I" (Windows, Linux) ou "Command+Option+I" (macOS). > -> 3\. Dans le panneau Outils de développement, cliquez sur l'icône Lighthouse située sur le côté gauche du panneau ou appuyez sur "Ctrl+Shift+P" (Windows, Linux) ou "Command+Shift+P" (macOS) pour ouvrir le menu Commandes, puis tapez "Lighthouse" et sélectionnez "Générer un rapport". +> 3\. Dans le volet Outils de développement, cliquez sur l'icône Lighthouse située sur le côté gauche du volet 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". +> 4\. Dans la boîte de dialogue Lighthouse, sélectionnez les options de performance et autres options pertinentes que vous souhaitez tester, puis cliquez sur "Générer un rapport". > -> 5\. Après que Lighthouse a terminé son analyse, vous verrez un rapport avec des scores et des recommandations pour améliorer les performances, l'accessibilité et d'autres domaines de votre site web. +> 5\. Après l'analyse de Lighthouse, vous obtiendrez 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. +> En suivant ces étapes, vous pouvez utiliser Lighthouse pour tester et optimiser les performances de votre site web, ce qui peut contribuer à améliorer l'expérience utilisateur et le classement sur les moteurs de recherche. diff --git a/src/content/docs/fr/picture-examples.md b/src/content/docs/fr/picture-examples.md index 5fe61a0..78d0fff 100644 --- a/src/content/docs/fr/picture-examples.md +++ b/src/content/docs/fr/picture-examples.md @@ -1,17 +1,17 @@ --- -title: Exemples utilisant l'élément +title: Exemples d'utilisation de l'élément description: >- - Fournit des exemples utilisant l'élément , pour des images réactives, - la direction artistique et différents formats d'image. -taskInputHash: 9b88532218099931 + Fournit des exemples d'utilisation de l'élément pour des images + adaptatives, la direction artistique et différents formats d'image. +taskInputHash: 8360be5b329508bb lang: fr -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -Voici quelques exemples d'utilisation de l'élément `` avec leurs explications : +Voici quelques exemples d'utilisation de l'élément `` et leurs explications : -1\. Exemple pour les images réactives : +1\. Exemple d'images adaptatives : ```html @@ -21,9 +21,9 @@ Voici quelques exemples d'utilisation de l'élément `` avec leurs expl ``` -Explication : Dans cet exemple, l'élément `` est utilisé pour fournir différentes sources d'image pour différentes tailles d'écran. Les éléments `` spécifient les différentes sources d'image en utilisant l'attribut "srcset" et l'attribut "media" pour spécifier les conditions dans lesquelles chaque source doit être utilisée. L'élément `` est utilisé comme substitution pour les anciens navigateurs ou lorsque les conditions spécifiées dans les éléments `` ne sont pas remplies. +Explication : Dans cet exemple, l'élément `` est utilisé pour fournir différentes sources d'image pour différentes tailles d'écran. Les éléments `` spécifient les différentes sources d'image en utilisant l'attribut "srcset" et l'attribut "media" pour spécifier les conditions sous lesquelles chaque source doit être utilisée. L'élément `` est utilisé comme solution de secours pour les navigateurs plus anciens ou lorsque les conditions spécifiées dans les éléments `` ne sont pas remplies. -2\. Exemple pour la direction artistique : +2\. Exemple de direction artistique : ```html @@ -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'image en fonction de l'orientation de l'appareil. L'élément `` avec l'attribut "media" réglé sur "(orientation: landscape)" spécifie une source d'image pour les écrans larges, tandis que l'élément `` spécifie une source d'image pour les écrans en portrait. -3\. Exemple pour différents formats d'image : +3\. Exemple de différents formats d'image : ```html @@ -47,12 +47,12 @@ Explication : Dans cet exemple, l'élément `` est utilisé pour fourni ``` -Explication : Dans cet exemple, l'élément `` est utilisé pour fournir différentes sources d'image pour différents formats d'image. Les éléments `` spécifient différentes sources d'image en utilisant l'attribut "srcset" et l'attribut "type" pour spécifier le format d'image. L'élément `` est utilisé comme substitution pour les anciens navigateurs qui ne supportent pas l'élément ``. +Explication : Dans cet exemple, l'élément `` est utilisé pour fournir différentes sources d'image pour différents formats d'image. Les éléments `` spécifient différentes sources d'image en utilisant l'attribut "srcset" et l'attribut "type" pour spécifier le format d'image. L'élément `` est utilisé comme solution de secours pour les navigateurs plus anciens qui ne prennent pas en charge l'élément ``. ## Points de rupture -En design réactif, les points de rupture sont utilisés pour définir quand la mise en page d'un site web ou d'une application doit changer en fonction de la taille de la fenêtre d'affichage. Les points de rupture sont généralement définis à l'aide de requêtes média en CSS, qui appliquent différents styles en fonction de la largeur de l'écran. Ces points de rupture peuvent être utilisés en conjonction avec l'élément `` pour fournir différentes sources d'image pour différentes tailles d'écran. +En design adaptatif, 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 du viewport. 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 conjointement avec l'élément `` pour fournir différentes sources d'image pour différentes tailles d'écran. -Par exemple, dans le premier exemple ci-dessus, nous avons utilisé l'attribut `media` pour spécifier la largeur d'écran sous laquelle chaque source doit être utilisée. Lorsque la largeur d'écran est supérieure ou égale à 768 pixels, la source `image-large.jpg` sera utilisée ; lorsque la largeur d'écran est supérieure ou égale à 480 pixels mais inférieure à 768 pixels, la source `image-medium.jpg` sera utilisée ; et lorsque la largeur d'écran est inférieure à 480 pixels, la source `image-small.jpg` sera utilisée. Cela nous permet de fournir des images aux tailles appropriées pour chaque appareil, réduisant ainsi les temps de chargement des pages et améliorant l'expérience utilisateur. +Par exemple, dans le premier exemple ci-dessus, nous avons utilisé l'attribut `media` pour spécifier la largeur 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 servir des images de taille appropriée pour chaque appareil, réduisant 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 adaptatifs qui ont fière allure sur n'importe quel appareil. diff --git a/src/content/docs/fr/pixels-not-pixels.md b/src/content/docs/fr/pixels-not-pixels.md index f6eef92..90a00c7 100644 --- a/src/content/docs/fr/pixels-not-pixels.md +++ b/src/content/docs/fr/pixels-not-pixels.md @@ -1,20 +1,19 @@ --- title: px ≠ pixels -description: Pixels d'écran ≠ pixels de navigateur ≠ pixels d'image -taskInputHash: 7dfd1c9b5c352f62 +description: Pixels d'appareil ≠ px de navigateur ≠ px d'image +taskInputHash: 78cd82f73186df54 lang: fr -ignore: '/* cSpell:locale fr,en*/' sidebar_sort_priority: 900 -date_published: '2023-03-26' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -### Pixels d'écran ≠ pixels de navigateur ≠ pixels d'image +### Pixels de l'appareil ≠ px du navigateur ≠ px des images -Grâce à Apple, les pixels CSS et HTML (`px`) **correspondent presque toujours à plusieurs pixels d'écran/imprimante**. Le devicePixelRatio de mon téléphone est de 3,875 ; [et le vôtre ?](https://www.mydevice.io/) +Grâce à Apple, les pixels CSS et HTML (`px`) **correspondent presque toujours à plusieurs pixels d'appareil/imprimante**. Le devicePixelRatio de mon téléphone est de 3,875; [et vous ?](https://www.mydevice.io/) -Le devicePixelRatio de mon ordinateur de bureau change en fonction du zoom du navigateur, mais est par défaut de 1,5 (ma sacle d'affichage est de 150 % dans `Système > Affichage`). +Le devicePixelRatio de mon ordinateur de bureau change lors du zoom du navigateur, mais est en général de 1,5 (car mon `Système > Affichage > Échelle` est 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'image (à l'exception des SVG) se décodent en une grille de pixels. **Il est désagréablement difficile d'afficher les pixels d'image avec un rapport 1:1 avec les pixels de l'appareil - mais avec `srcset` vous pouvez obtenir une approximation suffisante**, et un peu de JavaScript peut ajuster la taille de l'élément HTML après le chargement si vous avez des raisons vraiment justifiées pour avoir un mappage parfait, bien que ces arts interdits ne seront pas révélés ici. -> Les autres unités absolues ([in, pc, pt, mm, cm, Q)](https://developer.mozilla.org/fr/docs/Web/CSS/Longueurs-et-dimensions_typographiques) sont définies en fonction du nombre de pixels CSS et prétendent que tout est à 96 dpi. Les développeurs évitent les unités absolues car il est généralement préférable d'utiliser des unités dérivées de la taille de police ou des dimensions de la fenêtre d'affichage/du conteneur. Des unités incompatibles peuvent casser la mise en page si l'utilisateur augmente la taille de texte, zoome le navigateur ou pivote son appareil. Inutile de dire qu'il faut faire toutes ces choses avant de publier votre site. +> D'autres unités absolues [in, pc, pt, mm, cm, Q](https://developer.mozilla.org/fr/docs/Web/CSS/length) sont définies en fonction du nombre de pixels CSS et prétendent que tout est en 96 dpi. Les développeurs évitent les unités absolues car il est généralement préférable d'utiliser des unités qui sont déduites de la taille de police ou des dimensions de la vue/du conteneur. Des unités incompatibles peuvent casser une mise en page si l'utilisateur ajuste leur multiplicateur Accessibilité > Taille de texte, zoome le navigateur, ou fait pivoter leur appareil. Inutile de dire que vous devez 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..bfe52fb 100644 --- a/src/content/docs/fr/specify-width-height.md +++ b/src/content/docs/fr/specify-width-height.md @@ -3,17 +3,16 @@ title: Utiliser la largeur et la hauteur description: >- Avantages de l'utilisation des attributs de largeur et de hauteur dans le code HTML -taskInputHash: b09c49dc5d3a4a2d +taskInputHash: cf7432b512e77c12 lang: fr -ignore: '/* cSpell:locale fr,en*/' -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -Pourquoi devriez-vous mettre la largeur et la hauteur dans le HTML ? +Pourquoi faut-il mettre la largeur et la hauteur dans le HTML? -> Il est recommandé de mettre les attributs de largeur et de hauteur dans le code HTML des images car cela aide le navigateur web à connaître la taille de l'image avant qu'elle ne soit entièrement chargée. Cela permet au navigateur de réserver l'espace approprié sur la page Web pour l'image, ce qui empêche le contenu de sauter pendant que l'image se charge. +> Il est recommandé de mettre les attributs de largeur et de hauteur dans le code HTML des images car cela permet au navigateur web de connaître la taille de l'image avant qu'elle soit entièrement chargée. Cela permet au navigateur de réserver une quantité appropriée d'espace sur la page web pour l'image, ce qui empêche le contenu de sauter pendant le chargement de l'image. > -> De plus, spécifier les attributs de largeur et de hauteur pour les images peut également contribuer à améliorer les performances globales de la page web. Lorsqu'un navigateur connaît la taille d'une image à l'avance, il peut calculer avec précision la quantité d'espace nécessaire pour afficher l'image et éviter des recharges ou des redessinages inutiles du contenu lors du chargement. +> De plus, spécifier les attributs de largeur et de hauteur pour les images peut également aider à améliorer les performances globales de la page web. Lorsqu'un navigateur connaît la taille d'une image à l'avance, il peut calculer plus précisément la quantité d'espace nécessaire pour afficher l'image et éviter les reflows ou repaints inutiles du contenu pendant le chargement. > -> En somme, l'utilisation des attributs de largeur et de hauteur dans le code HTML des images peut améliorer l'expérience utilisateur en accélérant le chargement du contenu et en réduisant les problèmes visuels. +> Dans l'ensemble, l'utilisation des attributs de largeur et de hauteur dans le code HTML pour les images peut améliorer l'expérience utilisateur en rendant le contenu plus rapide à charger et en réduisant les anomalies visuelles. diff --git a/src/content/docs/fr/when-to-use-picture.md b/src/content/docs/fr/when-to-use-picture.md index cac06f6..a265d96 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: e8d6a3bdae286229 lang: fr -ignore: '/* cSpell:locale fr,en*/' -date_published: '2023-03-27' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -L'élément `picture` est utilisé pour fournir plusieurs versions d'une image et détermine quelle version de l'image afficher en fonction de certaines conditions. Il est particulièrement utile pour optimiser des images pour différentes tailles d'écran et résolutions, et est couramment utilisé dans la conception de sites Web adaptatifs. -Voici quelques scénarios spécifiques où vous voudriez utiliser l'élément `picture` : +L'élément `picture` est utilisé pour fournir plusieurs versions d'une image et détermine quelle version de l'image afficher en fonction de certaines conditions. Il est particulièrement utile pour optimiser les images pour différentes tailles et résolutions d'écran, et est couramment utilisé dans la conception web responsive. -* **É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 voudriez 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é comme les écrans Retina d'Apple ont une densité de pixels plus élevée, ce qui signifie que les images peuvent sembler floues ou pixelisées si elles ne sont pas optimisées pour une 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 hauteur/largeur:** Si vous concevez un site qui doit afficher des images avec des rapports hauteur/largeur différents (comme paysage vs portrait), vous pouvez utiliser l'élément `picture` pour fournir différentes versions de l'image qui sont optimisées pour chaque rapport hauteur/largeur. -* **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 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. -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 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 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 des versions différentes de l'image qui sont optimisées pour des mises en page différentes. + +Dans l'ensemble, l'élément `picture` est un outil puissant qui peut vous aider à optimiser vos images pour une variété de cas d'utilisation et vous assurer qu'elles ont un aspect formidable quel que soit le dispositif ou la taille d'écran sur lequel elles sont vues. diff --git a/src/content/docs/fr/width-density.md b/src/content/docs/fr/width-density.md index 805d0c9..2ca8e5a 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: 488b21785c094954 lang: fr -ignore: '/* cSpell:locale fr,en*/' -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -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'images avec différentes résolutions ou densités de pixels, et de laisser le navigateur sélectionner l'image appropriée en fonction des caractéristiques d'affichage de l'appareil. L'attribut `srcset` utilise une combinaison de l'URL et des descripteurs `w` ou `x` pour spécifier les images. -> `srcset` est un attribut HTML qui permet aux développeurs de fournir plusieurs sources d'images avec différentes résolutions ou densités de pixels, et de laisser le navigateur sélectionner l'image appropriée en fonction des caractéristiques d'affichage de l'appareil. L'attribut `srcset` utilise une combinaison de l'`URL` et des descripteurs `w` ou `x` pour spécifier les images. ## Descripteur de largeur (`w`) > Le descripteur `w` est utilisé pour spécifier la largeur d'une image en pixels. Il est utilisé lorsque nous voulons fournir au navigateur les dimensions d'une image afin qu'il puisse choisir l'image appropriée pour l'espace d'écran disponible. -> La syntaxe pour utiliser le descripteur `w` dans `srcset` est la suivante: +> La syntaxe pour utiliser le descripteur `w` dans `srcset` est la suivante : ```html Exemple d'image ``` - - > 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 aux pixels CSS. Il est utilisé lorsque nous voulons fournir au navigateur différentes versions de la même image avec des densités de pixels différentes. -> La syntaxe pour utiliser le descripteur `x` dans `srcset` est la suivante: +> La syntaxe pour utiliser le descripteur `x` dans `srcset` est la suivante : ```html Exemple d'image ``` - > Dans l'exemple ci-dessus, nous avons fourni au navigateur trois images et leurs densités de pixels correspondantes. Le navigateur sélectionnera l'image avec la densité de pixels la plus proche de l'écran de l'appareil. -> 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 à choisir. diff --git a/src/content/docs/it/_roundtrip_breakpoints.txt b/src/content/docs/it/_roundtrip_breakpoints.txt index e7fe41c..cd1ced5 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: 4cd3b7b3f9496282 lang: en -ignore: '/* cSpell:locale it,en*/' -date_published: '2023-03-26' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- ### Context -Small screens and large displays require different layouts. In order for `srcset` and `sizes` to work, we need to know at what point the layout change occurs. +Small screens and large monitors require different layouts. For the purpose of `srcset` and `sizes`, we need to know at what point the layout changes. -Web developers need to decide what to shrink, hide, or move up on smaller screens - or more commonly, what to expand, reveal, or add on larger screens. They also have little information to go on. Is the user using a tablet or a smartphone in landscape mode - or a small browser window? +Web developers have to decide what to reduce, hide or move to smaller screens - or more commonly, what to expand, reveal or add to 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? -We need to choose an arbitrary viewport width at which the layout change occurs. This is called a **breakpoint**. It is an arbitrary CSS pixel value ([not device pixels](/en/pixels-not-pixels)). Polypane has a [great article](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023) on commonly used breakpoints. +We have to choose an arbitrary viewport width at which the layout changes. This is called a **breakpoint**. It's an arbitrary number of CSS pixels ([not device pixels](/en/pixel-vs-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 changes caused by these breakpoints (and be fine with [srcset density descriptors](/en/density-descriptors)). -Main content images will be constrained by the size of their container. Typically, the main content area 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. +Content images will be constrained by their container's dimensions. Usually, 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. -If you have more than one column at certain breakpoints, it becomes harder to calculate the actual sizing rules, as the percentage of the viewport width the image takes up will change. +If you have more than one column at certain breakpoints, it will be harder to calculate the actual sizing rules, since the percentage of viewport width the image occupies will change. -### The Easy Way +### The easy method -That being said, you don't need to overthink it. You'll probably be just fine with the following approximation: +That being said, you don't have to get too bogged down. The following approximation is likely good enough: -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 width do main columns (or image container) stop growing? Until that viewport width, we can use `100vw` for the `sizes` attribute of the image to indicate that the image takes up the full width of the viewport. +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 point 1 was 700px and the answer to point 2 was 800px, you can use the following `sizes` attribute: +If the answer to question 1 is 700px and to question 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 can handle all of these calculations for us based on CSS. Unfortunately, browsers are extremely eager to select an image URL *before* stylesheets are loaded. So we have to do the calculations ourselves, and if we don't do it perfectly, it's only right that we suffer the consequences. ===================== 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. Breakpoint e immagini -2. Perché alcuni (ma non tutti) i breakpoint sono importanti per le tue immagini +Metadata returned1. Breakpoints e immagini +2. Perché alcuni (ma non tutti) breakpoint sono importanti per le tue immagini Roundtrip (isolated) prompt used: diff --git a/src/content/docs/it/_roundtrip_browser-picks-srcset.txt b/src/content/docs/it/_roundtrip_browser-picks-srcset.txt index ba677da..82db54b 100644 --- a/src/content/docs/it/_roundtrip_browser-picks-srcset.txt +++ b/src/content/docs/it/_roundtrip_browser-picks-srcset.txt @@ -1,12 +1,15 @@ --- -title: How the browser chooses -description: How the browser chooses among the images listed in the srcset attribute -taskInputHash: 5f305bd3a8d992cf +title: How browsers choose +description: How browsers choose between images listed in the srcset attribute +taskInputHash: 726308147432824c lang: en +date_published: '2023-03-31' +date_modified: '2023-03-31' +date_updated: '2023-03-31' --- -How does the browser choose among the images listed in the `srcset` attribute? Here are the detailed steps, with examples for both width and density specifications and how the browser chooses based on the device and viewport: +How does a web browser choose between images listed in the `srcset` attribute? Here's a step-by-step guide, with examples for width and density specifications and how the browser chooses based on the device and viewport. -- When using the `srcset` attribute in HTML, the browser uses a set of rules to choose the most appropriate image from a list of provided sources. These rules depend on the display characteristics of the device (resolution, pixel density) and the size of the viewport. The `srcset` attribute allows to specify different images based on width (using the `w` descriptor) or pixel density (using the `x` descriptor). Let's look at each case with examples. +- When using the `srcset` attribute in HTML, the browser follows a set of rules to choose the most appropriate image from a provided list of sources. These rules depend on the viewing characteristics of the device (resolution, pixel density) and the size of the viewport. The `srcset` attribute allows you to specify different images based on width (using the `w` descriptor) or pixel density (using the `x` descriptor). Let's examine each case with examples. 1\. Width descriptor (`w`): @@ -22,7 +25,7 @@ The browser follows these steps: a. Determine the DPR (Device Pixel Ratio) of the device. For example, a standard display has a DPR of 1, while a high-resolution (Retina) display has a DPR of 2 or higher. -b. Calculate the effective width for each image in `srcset`. Multiply the width descriptor by the DPR. For a device with a DPR of 1: +b. Calculate the actual width for each image in the `srcset` attribute. Multiply the width descriptor by the DPR. For a device with a DPR of 1: - example-small.jpg: 400 * 1 = 400px @@ -30,9 +33,9 @@ b. Calculate the effective width for each image in `srcset`. Multiply the width - example-large.jpg: 1600 * 1 = 1600px -c. Compare the effective widths with the viewport width. Suppose the viewport width is 420px. The browser will select the smallest image with an effective width greater than or equal to the viewport width. In this case, it will select `example-medium.jpg`. +c. Compare the actual widths with the width of the viewport. Suppose the viewport width is 420px. The browser chooses the smallest image with an actual width greater than or equal to the viewport width. In this case, it will choose `example-medium.jpg`. -1\. Pixel density descriptor (`x`): +2\. Pixel density descriptor (`x`): Suppose we have the following `srcset` attribute: @@ -46,7 +49,7 @@ The browser follows these steps: a. Determine the DPR (Device Pixel Ratio) of the device. For example, a standard display has a DPR of 1, while a high-resolution (Retina) display has a DPR of 2 or higher. -b. Compare the device's DPR with the `x` descriptors in `srcset`. In this case, we have three images with the following descriptors: +b. Compare the device DPR with the `x` descriptors in the `srcset` attribute. In this case, we have three images with the following descriptors: - example-1x.jpg: 1x @@ -54,9 +57,9 @@ b. Compare the device's DPR with the `x` descriptors in `srcset`. In this case, - example-3x.jpg: 3x -c. Choose the image with the `x` descriptor closest to the device's DPR. For a device with a DPR of 1, the browser will select `example-1x.jpg`. For a device with a DPR of 2, it will choose `example-2x.jpg`, and so on. +c. Choose the image with the `x` descriptor closest to the device DPR. For a device with a DPR of 1, the browser selects `example-1x.jpg`. For a device with a DPR of 2, it will choose `example-2x.jpg`, and so on. -It is important to note that it is also possible to use the `sizes` attribute in combination with the `srcset` attribute to provide additional information on how the image will be displayed at different viewport widths. This is particularly useful when using the width descriptor (`w`). Here is an example: +It's important to note that the `sizes` attribute can also be used in combination with the `srcset` attribute to provide additional information on how the image will be displayed at different viewport widths. This is especially useful when using the width descriptor (`w`). Here's an example: ```html diff --git a/src/content/docs/it/_roundtrip_density-descriptors.txt b/src/content/docs/it/_roundtrip_density-descriptors.txt index 85b40cf..0572f93 100644 --- a/src/content/docs/it/_roundtrip_density-descriptors.txt +++ b/src/content/docs/it/_roundtrip_density-descriptors.txt @@ -1,37 +1,34 @@ --- title: Density descriptors & srcset description: Examples of using density descriptors in `srcset` -taskInputHash: cf54e3343feb0a22 +taskInputHash: 062749d734c5a681 lang: en -ignore: '/* cSpell:locale it,en*/' -date_published: '2023-03-26' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -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 appropriate image to the user's device, improving performance and user experience. In this guide, we'll show you the essentials of how to use srcset with density descriptors and provide some markup examples for your convenience. ## What is Srcset with density descriptors? -Srcset is an HTML attribute designed to allow specifying multiple image sources for a single `` element. Density descriptors (`x`) are used together with srcset to provide images at different resolutions based on the pixel density of the user's display. +Srcset is an HTML attribute that allows you to specify multiple image sources for a single `` element. Density descriptors (`x`) are used in conjunction with srcset to provide images at different resolutions based on the user's display pixel density. ## When to use Srcset with density descriptors Using srcset with density descriptors is particularly useful when you want to: +1. Provide high-resolution images to high-pixel-density screens (e.g. Retina displays) while concurrently providing low-resolution images to standard displays. +2. Improve page performance by delivering the most appropriate image for each user's device. -1. Provide high-resolution images to high DPI displays (such as Retina displays) while providing lower resolution images to standard displays. -2. Improve page performance by providing the most appropriate images for each user's device. - -## Implementing Srcset with density descriptors +## How to implement 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 their respective density descriptors. +3. Add the `sizes` attribute (optional) to specify the size of the image as it will be displayed on the screen. -1. Prepare images at different resolutions. -2. Add the `srcset` attribute to the `` element, including the image sources and corresponding density descriptors. -3. Add the `sizes` attribute (optional) to specify image dimensions as it will be displayed on the screen. - -### Example Markup +### Example markup -Here's an example of how to implement srcset with density descriptors in your markup: +Here's an example of how to implement srcset with density descriptors in your HTML page: ```html An example image ``` -This example markup includes: - -- **src**: the default image source, shown if the browser doesn't support srcset. -- **srcset**: the list of image sources and their corresponding density descriptors (1x, 2x, 3x). The browser will choose the most appropriate image based on the user's display. -- **alt**: an image description for accessibility purposes. +This markup example includes: +- **src**: The default image source, displayed if the browser does not support srcset. +- **srcset**: The list of image sources and their density descriptors (1x, 2x, 3x). The browser will choose the most appropriate image based on the user's display. +- **alt**: A description of the image for accessibility purposes. And that's it! You have successfully implemented srcset with density descriptors, improving your website's performance and user experience. ===================== @@ -59,7 +55,7 @@ Also carefully translate the title and description for the article; do not use & 2. Examples of using density descriptors in `srcset` Metadata returned1. Descrittori di densità & srcset -2. Esempi di utilizzo di descrittori di densità in `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..09017d4 100644 --- a/src/content/docs/it/_roundtrip_introduction.txt +++ b/src/content/docs/it/_roundtrip_introduction.txt @@ -1,43 +1,42 @@ --- -title: srcset and tag dimensions -description: An Efficient and Opinionated Guide to Responsive Images for 2023 -taskInputHash: 770938b4f7895424 +title: srcset and sizes in the tag +description: An efficient and opinionated guide to responsive images in 2023 +taskInputHash: 6b7b5ba1b8a64b31 lang: en -ignore: '/* cSpell:locale it,en*/' sidebar_sort_priority: 1000 -date_published: '2023-03-23' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -**An Efficient and Opinionated Guide to Images for 2023** +**An Efficient and Opinionated Guide to Responsive Images in 2023** -Check the sidebar for an in-depth analysis. This is a quick overview for updating `` tags to accommodate modern devices of varying sizes and pixel densities. You need to [know that pixels aren't equal](/en/pixels-not-pixels) and that `devicePixelRatio` tends to be around 3.875 rather than 1:1. Modern phones pretend to be 320-428px wide for readability (in CSS pixels), but have many device pixels per CSS pixel. +Check the sidebar for a thorough breakdown. This is the quick guide to updating those `` tags to handle modern devices in all their different sizes and pixel densities. You need to [know that pixels aren’t equal](/en/pixels-arent-equal) and `devicePixelRatio` is more likely to be around 3.875 than 1:1. And modern phones pretend to be wider between 320 and 428 CSS pixels for legibility, but have many more device pixels per CSS pixel. -> If your image never changes size no matter how narrow the browser window is, you should use a [density descriptor](/en/density-descriptors). This is often appropriate for logos, icons, and buttons. +> If your image never changes size no matter how small you shrink the browser window, you should use a [density descriptor](/en/density-descriptors). This is often suitable for logos, icons, and buttons. -Do you know what your [breakpoints](/en/breakpoints) are? You'll need those numbers to refine the solution below - at least the viewport width breakpoint where the primary content area stops growing. +Do you know your [breakpoints](/en/breakpoints)? You’ll need those numbers to refine the solution below - and at least the viewport width breakpoint where the main content area stops growing. -### The Easy Way -```html +### The Easy Method +```html Dog riding a bicycle - - - - + + ``` -{{This seems to be a correctly translated technical documentation with no grammar or clumsy phrasing mistakes.}} + +{{The original text used some HTML entities that were not necessary to be escaped in this context.}} ===================== Content prompt used: @@ -50,8 +49,8 @@ Also carefully translate the title and description for the article; do not use & 1. srcset & sizes 2. An Efficient and Opinionated Guide to Responsive Images for 2023 -Metadata returned1. srcset e le dimensioni delle tag -2. Una Guida Efficient and Opinionated alle Immagini Responsive per il 2023 +Metadata returned1. srcset e sizes del tag +2. Una guida efficiente e orientata alle opinioni per le immagini reattive del 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..c832f01 100644 --- a/src/content/docs/it/_roundtrip_lighthouse-performance-test.txt +++ b/src/content/docs/it/_roundtrip_lighthouse-performance-test.txt @@ -1,28 +1,27 @@ --- -title: Test Performance with Lighthouse -description: Steps on how to test website performance using Lighthouse -taskInputHash: 174be49cc119f58b +title: Testing Performance with Lighthouse +description: Steps for testing website performance using Lighthouse +taskInputHash: 10043c8387c8285d lang: en -ignore: '/* cSpell:locale it,en*/' -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -How to Test Your Website Performance with Lighthouse? +How to test website 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 for measuring website performance, accessibility, and other aspects. To test your website's performance with Lighthouse, follow these steps: > -> 1. Open the Google Chrome web browser and go to the page you want to test. +> 1. Open Google Chrome web browser and navigate to the page you want to test. > -> 2. Click on the three dots in the upper right corner of the browser window, then select "More Tools" and then "Developer Tools" or use the keyboard shortcut "Ctrl+Shift+I" (Windows, Linux) or "Command+Option+I" (macOS). +> 2. Click on the three dots at the top right of the browser window, then select "More tools" and then "Developer tools" or use the keyboard shortcut "Ctrl+Shift+I" (Windows, Linux) or "Command+Option+I" (macOS). > -> 3. In the Developer Tools panel, click on the Lighthouse icon on the left side of the panel or press "Ctrl+Shift+P" (Windows, Linux) or "Command+Shift+P" (macOS) to open the Command menu, then type "Lighthouse" and select "Generate report." +> 3. In the Developer tools panel, click on the Lighthouse icon located on the left side of the panel or press "Ctrl+Shift+P" (Windows, Linux) or "Command+Shift+P" (macOS) to open the Command menu, then type "Lighthouse" and select "Generate report." > > 4. In the Lighthouse dialog box, select the performance and other relevant options you want to test, then click "Generate report." > -> 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 completes its analysis, you will see a report with scores and recommendations for improving the performance, accessibility, and other areas of your website. > -> By following these steps, you can use Lighthouse to test and optimize the performance of your website, which can help improve user experience and search engine ranking. +> By following these steps, you can use Lighthouse to test and optimize your website's performance, which can help improve user experience and search engine ranking. ===================== Content prompt used: @@ -36,7 +35,7 @@ Also carefully translate the title and description for the article; do not use & 2. Steps on how to test a website's performance using Lighthouse Metadata returned1. Testare la performance con Lighthouse -2. Passaggi su come testare la performance di un sito web usando Lighthouse +2. I passaggi per 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..54cc63c 100644 --- a/src/content/docs/it/_roundtrip_picture-examples.txt +++ b/src/content/docs/it/_roundtrip_picture-examples.txt @@ -1,10 +1,12 @@ --- -title: Examples of Using the Element +title: Examples of using the element description: >- - Provides examples of using the element for responsive images, - art direction, and different image formats. -taskInputHash: 23abfd2c45089cf6 + Provides examples of using the element for responsive images, art direction, and different image formats. +taskInputHash: 180f9751ca9f568c lang: en +date_published: '2023-03-31' +date_modified: '2023-03-31' +date_updated: '2023-03-31' --- Here are some examples of using the `` element and their explanations: @@ -18,41 +20,40 @@ Here are some examples of using the `` element and their explanations: ``` -Explanation: In this example, the `` element is used to provide different image sources for different screen sizes. The `` elements specify the different image sources using the "srcset" attribute and the "media" attribute to specify the conditions under which each source should be used. The `` element is used as a fallback for older browsers or when the conditions specified in the `` elements are not met. +Explanation: In this example, the `` element is used to provide different image sources for different screen sizes. The `` elements specify the different image sources using the "srcset" attribute and the "media" attribute to specify the conditions under which each source is used. The `` element is used as a fallback for older browsers or when the conditions specified in the `` elements are not met. + 2. Example for art direction: ```html - An image ``` -Explanation: In this example, the `` element is used to provide different image sources depending on the orientation of the device. The `` element with the "media" attribute set to "(orientation: landscape)" specifies an image source for wide screens, while the `` element specifies an image source for vertical screens. +Explanation: In this example, the `` element is used to provide different image sources based on the orientation of the device. The `` element with the "media" attribute set to "(orientation: landscape)" specifies an image source for wide screens, while the `` element specifies an image source for vertical screens. 3. Example for different image formats: ```html - - An image ``` Explanation: In this example, the `` element is used to provide different image sources for different image formats. The `` elements specify different image sources using the "srcset" attribute and the "type" attribute to specify the image format. The `` element is used as a fallback for older browsers that do not support the `` element. + ## Breakpoints -In responsive design, breakpoints are used to define when the layout of a website or application should change based on the size of the viewport. Breakpoints are typically defined using media queries in CSS, which apply different styles based on the screen width. These breakpoints can be used in combination with the `` element to provide different image sources for different screen sizes. +In responsive design, breakpoints are used to define when the layout of a website or application should change based on the viewport size. Breakpoints are typically defined using media queries in CSS, which apply different styles based on the screen width. These breakpoints can be used in conjunction with the `` element to provide different image sources for different screen sizes. -For example, in the first example above, we used the `media` attribute to specify the screen width under which each source should be used. When the screen width is greater than or equal to 768 pixels, the `image-large.jpg` source will be used; when the screen width is greater than or equal to 480 pixels but less than 768 pixels, the `image-medium.jpg` source will be used; and when the screen width is less than 480 pixels, the `image-small.jpg` source will be used. This allows us to serve appropriately sized images for each device, reducing page loading times and improving the user experience. +For example, in the first example above we used the `media` attribute to specify the screen width at 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 serve appropriately sized images for each device, reducing page load times and improving the user experience. -Breakpoints can be defined at any screen size and many breakpoints can be used to create layouts that respond to a wide range of devices. By combining breakpoints with the `` element, flexible and responsive designs can be created that adapt perfectly to any device. +Breakpoints can be defined at any screen size and multiple breakpoints can be used to create layouts that respond to a wide range of devices. By combining breakpoints with the `` element, flexible and responsive designs that look great on any device can be created. ===================== Content prompt used: @@ -66,7 +67,7 @@ Also carefully translate the title and description for the article; do not use & 2. Provides examples using the element, for responsive images, art direction and different image formats Metadata returned1. Esempi di utilizzo dell'elemento -2. Fornisce esempi di utilizzo dell'elemento per immagini responsive, direzione artistica e diversi formati di immagine. +2. Fornisce esempi di utilizzo dell'elemento per immagini responsive, art direction e diversi formati di immagine. Roundtrip (isolated) prompt used: diff --git a/src/content/docs/it/_roundtrip_pixels-not-pixels.txt b/src/content/docs/it/_roundtrip_pixels-not-pixels.txt index 3d40d5b..4455e4b 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: 1cbad5edbe7ce59e lang: en -ignore: '/* cSpell:locale it,en*/' sidebar_sort_priority: 900 -date_published: '2023-03-26' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -### 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`) **are almost always mapped to multiple device/printer pixels**. My phone's devicePixelRatio is 3.875; [what's yours?](https://www.mydevice.io/) -My desktop's devicePixelRatio changes with the browser zoom, but it's 1.5 by default (my `System > Display > Scale` is set to 150%, after all). +My desktop's devicePixelRatio changes during browser zoom, but it's default at 1.5 (my `System > Display > Scale` is 150%, after all). -Image files (excluding SVGs) decode a grid of pixels. **It's annoyingly difficult to display image pixels perfectly 1:1 with device pixels, but with the `srcset` attribute, you can come close enough**, and some JavaScript can adjust the size of the HTML element after loading if you have a really good reason to need that perfect correspondence, although such forbidden tricks won't be revealed here. +Image files (excluding SVG) are decoded into a grid of pixels. **It's annoyingly difficult to get the image pixel display perfectly 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 good justification for the need for perfect matching, though these dark arts won't be revealed here. -> Other absolute units [in, pc, pt, mm, cm, Q](https://developer.mozilla.org/en-US/docs/Web/CSS/length) are defined based on the number of CSS pixels and pretend that everything is at 96dpi. Developers avoid absolute units because it's generally better to use units that are derived from font or viewport/container sizes. Discordant units can break a layout if the user adjusts their `Accessibility > Text Size` multiplier, enlarges the browser, or rotates the device. Needless to say, you should do all these things before publishing your site. - -{{Note that the term used here is not the technical term...}}. +> Other absolute units [in, pc, pt, mm, cm, Q](https://developer.mozilla.org/en-US/docs/Web/CSS/length) are defined in terms of CSS pixels and pretend that everything is 96dpi. Developers avoid absolute units because it's generally better to use units based on font size or viewport/container size. Mismatched units can break a layout if the user adjusts their `Accessibility > Text size multiplier`, zooms the browser, or rotates their device. Needless to say, you should do all these things before publishing your site. ===================== Content prompt used: @@ -33,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. Pixel del dispositivo ≠ pixel del browser ≠ pixel dell'immagine +2. I pixel del dispositivo ≠ i pixel del browser ≠ i pixel dell'immagine Roundtrip (isolated) prompt used: diff --git a/src/content/docs/it/_roundtrip_specify-width-height.txt b/src/content/docs/it/_roundtrip_specify-width-height.txt index a9eb002..af53a1e 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 description: Benefits of using width and height attributes in HTML code -taskInputHash: 34a145dde0e451eb +taskInputHash: 5d70aae845c3ec2d lang: en -ignore: '/* cSpell:locale it,en*/' -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -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. -> -> Additionally, specifying width and height attributes for images can also contribute to improving the overall performance of the webpage. When a browser knows the dimensions of an image in advance, it can more accurately calculate the amount of space needed to display the image, avoiding unnecessary reorganizations or repaints of content while it is loading. -> -> Ultimately, using width and height attributes in the HTML code of images can improve the user experience by making content load faster and reducing visual flicker. +> It is recommended to include width and height attributes in HTML code for images because it helps the web browser to know the size of the images before they are fully loaded. This allows the browser to reserve the appropriate amount of space on the web page for the image, which prevents content from jumping around while the image is loading. +> +> Additionally, specifying the width and height attributes for images can also help improve the overall performance of the web page. When a browser knows the dimensions of an image in advance, it can more accurately calculate the amount of space needed to display the image and avoid unnecessary content bounces or repaints during loading. +> +> In general, using width and height attributes in HTML code for images can improve the user experience by loading content faster and reducing visual anomalies. ===================== Content prompt used: @@ -27,8 +26,8 @@ Also carefully translate the title and description for the article; do not use & 1. Use width and height 2. Benefits of using width and height attributes in HTML code -Metadata returned1. Utilizza larghezza e altezza -2. Vantaggi dell'utilizzo degli attributi di larghezza e altezza nel codice HTML +Metadata returned1. Usa larghezza ed altezza +2. Vantaggi dell'utilizzo degli attributi di larghezza ed 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..aa3a053 100644 --- a/src/content/docs/it/_roundtrip_when-to-use-picture.txt +++ b/src/content/docs/it/_roundtrip_when-to-use-picture.txt @@ -1,24 +1,25 @@ --- -title: When to Use the Element -description: Explains in which scenarios the element should be used -taskInputHash: 583a9afd2e45d56a +title: When to use the element +description: Explains in which situations it is appropriate to use the element +taskInputHash: f0a09d38c77f74ac lang: en -ignore: '/* cSpell:locale it,en*/' -date_published: '2023-03-27' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -The `picture` element is used to provide multiple versions of an image and determine which version of the image to display based on certain conditions. It is particularly useful for optimizing images for different screen sizes and resolutions and is commonly used in responsive web design. Here are some specific scenarios in which you may want to use the `picture` element: +The `picture` element is used to provide multiple versions of an image and determine which version of the image to display based on certain conditions. It is particularly useful for optimizing images for different screen sizes and resolutions, and is commonly used in responsive web design. -* **Retina Display:** High-density screens like Apple's Retina display have a higher pixel density, which means that images can appear blurry or pixelated if they are not optimized for high resolution. With the `picture` element, you can provide a version of the image that has twice the pixels of the normal version so that it appears sharp and clear on Retina displays. +Here are some specific scenarios where you might want to use the `picture` element: -* **Different Proportions:** If you're designing a site that needs to display images with different proportions (such as landscape vs portrait), you can use the `picture` element to provide different versions of the image optimized for each proportion. +* **Retina screens:** High-density 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 appears sharp and clear on Retina displays. -* **Bandwidth Limitations:** Images can be large files that take up a lot of bandwidth, especially on mobile devices. With the `picture` element, you can provide smaller versions of the image for devices with smaller screens or slower internet connections, which can help reduce page load times. +* **Different aspect ratios:** If you are designing a 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. -* **Art-directed Layouts:** Sometimes you may want to present an image in a certain way depending on the layout of the rest of the page. For example, you might want to show a close-up of a person's face on mobile devices, but a wider shot on desktop devices. The `picture` element allows you to provide different versions of the image optimized for different layouts. +* **Bandwidth limitations:** Images can be large files that take up a lot of bandwidth, especially on mobile devices. With the `picture` element, you can provide smaller versions of the image for devices with smaller screens or slower internet connections, which can help reduce page loading times. -Overall, the `picture` element is a powerful tool that can help optimize images for a variety of use cases and ensure that they look great on any device or screen size they are displayed on. +* **Art-directed layout:** Sometimes you may want to present an image in a certain way depending on the layout of the rest of the page. For example, you may want to show a close-up of a person's face on mobile devices, but a wider shot on desktop devices. The `picture` element allows you to provide different versions of the image optimized for different layouts. + +In general, the `picture` element is a powerful tool that can help you optimize your images for a variety of use cases and ensure that they look great regardless of the device or screen size on which they are viewed. ===================== Content prompt used: @@ -31,8 +32,8 @@ Also carefully translate the title and description for the article; do not use & 1. When to use element 2. Explains in which situations you should use the element -Metadata returned1. Quando utilizzare l'elemento -2. Spiega in quali situazioni si dovrebbe utilizzare l'elemento +Metadata returned1. Quando usare l'elemento +2. Spiega in quali situazioni è opportuno utilizzare l'elemento Roundtrip (isolated) prompt used: diff --git a/src/content/docs/it/_roundtrip_width-density.txt b/src/content/docs/it/_roundtrip_width-density.txt index 10692ac..f14472f 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: 5c413195efc76ce4 lang: en -ignore: '/* cSpell:locale it,en*/' -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -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 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 the browser with multiple images with different resolutions or pixel densities and let the browser select the appropriate image based on the device's display characteristics. The `srcset` attribute uses a combination of `URL`s and `w` or `x` descriptors to specify the images. ## Width Descriptor (`w`) -> The `w` descriptor is used to specify the width of an image in pixels. It is used when we want to provide the browser with the size of an image so that it can choose the appropriate image for the available space on the screen. +> The `w` descriptor is used to specify an image's width in pixels. It is used when you want to provide the browser with an image's dimensions 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 Image"> ``` -> In the example above, we have provided the browser with three images and their corresponding widths in pixels. The browser will select the image with the width closest to the available space on the screen. +> In the example above, we have provided the browser with three images and their corresponding widths in pixels. The browser will select the image with the closest width to the available screen space. ## Density Descriptor (`x`) -> The `x` descriptor is used to specify the pixel density of an image, which is the ratio of physical pixels to CSS pixels. It is used when we want to provide the browser with different versions of the same image with different pixel densities. +> The `x` descriptor is used to specify an image's pixel density, 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 syntax for using the `x` descriptor in `srcset` is as follows: @@ -39,12 +38,14 @@ Understanding Width (`w`) and Density (`x`) Descriptors in `srcset`. Use example srcset="small.jpg 1x, medium.jpg 2x, large.jpg 3x" - alt="Example image"> + alt="Example Image"> ``` -> In the example above, we have provided the browser with three images and their corresponding pixel densities. The browser will select the image with the pixel density closest to the device screen. +> 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. > 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/it/breakpoints.md b/src/content/docs/it/breakpoints.md index 39943b9..addbde8 100644 --- a/src/content/docs/it/breakpoints.md +++ b/src/content/docs/it/breakpoints.md @@ -1,35 +1,34 @@ --- -title: Breakpoint e immagini -description: Perché alcuni (ma non tutti) i breakpoint sono importanti per le tue immagini -taskInputHash: 7714cadfe55d82ca +title: Breakpoints e immagini +description: Perché alcuni (ma non tutti) breakpoint sono importanti per le tue immagini +taskInputHash: 4cd3b7b3f9496282 lang: it -ignore: '/* cSpell:locale it,en*/' -date_published: '2023-03-26' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- ### Contesto -Schermi piccoli e monitor grandi richiedono layout diversi. Per lo scopo di `srcset` e `sizes`, dobbiamo sapere a che punto avviene il cambio di layout. +Schermi piccoli e grandi monitor richiedono layout differenti. Per lo scopo di `srcset` e `sizes`, dobbiamo sapere a che punto avviene il cambio di layout. -I web developer devono decidere cosa ridurre, nascondere o spostare su schermi più piccoli - o più comunemente, cosa espandere, rivelare o aggiungere su schermi più grandi. Inoltre hanno poche informazioni a disposizione. L'utente sta utilizzando un tablet o uno smartphone in modalità landscape - o una finestra di browser piccola? +I web developer devono decidere cosa 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 del browser piccola? -Dobbiamo scegliere una larghezza di viewport arbitraria in cui avviene il cambio di layout. Questo viene chiamato un **breakpoint**. È un valore arbitrario in pixel CSS ([non pixel dispositivo](/it/pixels-non-pixels)). Polypane ha un [ottimo articolo](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023) sui breakpoint comunemente usati. +Dobbiamo scegliere una larghezza viewport arbitraria in cui avviene il cambio di layout. Questo è chiamato un **breakpoint**. Si tratta di un numero arbitrario di pixel CSS ([non di 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 variazioni di layout causate da questi breakpoint (e star bene con [densità di pixel di srcset](/it/density-descriptors)). -Le immagini del contenuto principale saranno limitate dalle dimensioni del loro contenitore. In genere, l'area del contenuto principale di una pagina sarà limitata a una determinata larghezza sui più grandi schermi, una `max-width`, ma su schermi più piccoli l'area del contenuto principale riempirà l'intero viewport. +Le immagini del contenuto principale saranno limitate dalle dimensioni del loro contenitore. Di solito, l'area del contenuto principale di una pagina sarà limitata a una certa larghezza sui più grandi schermi, una `max-width`, ma sui piccoli schermi, l'area del contenuto principale riempirà l'intero viewport. -Se si hanno più di una colonna a determinati breakpoint, diventa più difficile calcolare le regole di dimensionamento effettive, poiché la percentuale della larghezza del viewport che l'immagine occupa cambierà. +Se avete più di una colonna a determinati breakpoint, sarà più difficile calcolare le regole di dimensionamento effettive, poiché la percentuale della larghezza viewport occupata dall'immagine cambierà. ### Il metodo facile -Detto questo, non bisogna sovrapensare. Probabilmente sarete molto OK con la seguente approssimazione: +Detto ciò, non bisogna complicarsi troppo. Molto probabilmente andrà bene la seguente approssimazione: -1. A che dimensione la colonna principale (o il contenitore dell'immagine) smette di crescere? Fino a quella larghezza di viewport, possiamo utilizzare `100vw` per l'attributo `sizes` dell'immagine per indicare che l'immagine occupa il 100% della larghezza del viewport. -2. Qual è la larghezza massima che il contenitore raggiunge? Possiamo impostare quella larghezza fissa per tutto il resto. +1. A che larghezza colonne principali (o contenitore dell'immagine) smettono di crescere? Fino a quella larghezza viewport, possiamo utilizzare `100vw` per l'attributo `sizes` dell'immagine per indicare che l'immagine occupa il 100% della larghezza viewport. +2. Quale è la larghezza massima che il contenitore raggiunge mai? Possiamo impostarla 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 alla domanda 1 è 700px e alla domanda 2 è 800px, è possibile utilizzare il seguente attributo `sizes`: ```html @@ -38,4 +37,4 @@ Se la vostra risposta al punto 1 è stata 700px e la risposta al punto 2 è stat -> 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. +> Si potrebbe pensare che il browser possa gestire tutti questi calcoli per noi in base al CSS. Sfortunatamente, i browser sono estremamente desiderosi di selezionare un URL dell'immagine *prima* che i fogli di stile siano scaricati. Quindi dobbiamo fare i calcoli da soli e se non li facciamo perfettamente, è giusto che subiscano le conseguenze. diff --git a/src/content/docs/it/browser-picks-srcset.md b/src/content/docs/it/browser-picks-srcset.md index fba5b78..0cbdd63 100644 --- a/src/content/docs/it/browser-picks-srcset.md +++ b/src/content/docs/it/browser-picks-srcset.md @@ -1,16 +1,15 @@ --- title: Come sceglie il browser description: Come il browser sceglie tra le immagini elencate nell'attributo srcset -taskInputHash: 0eb976f059b10502 +taskInputHash: 726308147432824c lang: it -ignore: '/* cSpell:locale it,en*/' -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -Come sceglie il browser tra le immagini elencate nell'attributo srcset? Ecco una procedura dettagliata, con esempi sia per le specifiche di larghezza che di densità e come il browser decide in base al dispositivo e alla viewport. +Come fa il browser a scegliere tra le immagini elencate nell'attributo srcset? Ecco una guida passo-passo, con esempi per le specifiche di larghezza e densità e come il browser decide in base al dispositivo e alla viewport. -- Quando si utilizza l'attributo `srcset` in HTML, il browser utilizza un insieme di regole per scegliere l'immagine più appropriata da un elenco di fonti fornite. Queste regole dipendono dalle caratteristiche dello schermo del dispositivo (risoluzione, densità dei pixel) e dalle dimensioni della viewport. L'attributo `srcset` consente di specificare diverse immagini in base alla larghezza (utilizzando il descrittore `w`) o alla densità dei pixel (utilizzando il descrittore `x`). Vediamo ogni caso con degli esempi. +- Quando si utilizza l'attributo `srcset` in HTML, il browser utilizza un insieme di regole per scegliere l'immagine più appropriata da un elenco di fonti fornite. Queste regole dipendono dalle caratteristiche di visualizzazione 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`). Analizziamo ogni caso con esempi. 1\. Descrittore di larghezza (`w`): @@ -18,52 +17,52 @@ Supponiamo di avere il seguente attributo `srcset`: ```html -Example Image +Immagine di esempio ``` 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. +a. Determina il DPR (Device Pixel Ratio) del dispositivo. Ad esempio, un display standard ha un DPR di 1, mentre un display ad alta risoluzione (Retina) ha un DPR di 2 o superiore. -b. Calcolare la larghezza efficace per ogni immagine nella `srcset`. Moltiplicare il descrittore di larghezza per il DPR. Per un dispositivo con un DPR di 1: +b. Calcola la larghezza effettiva per ogni immagine nell'attributo `srcset`. Moltiplica 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. Confronta le larghezze effettive con la larghezza della viewport. Supponiamo che la larghezza della viewport sia 420px. Il browser sceglierà l'immagine più piccola con una larghezza effettiva maggiore o uguale alla larghezza della viewport. In questo caso, selezionerà `esempio-medio.jpg`. -2\. Descrittore di densità dei pixel (`x`): +1\. Descrittore di densità dei pixel (`x`): Supponiamo di avere il seguente attributo `srcset`: ```html -Example Image +Immagine di esempio ``` 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. +a. Determina il DPR (Device Pixel Ratio) del dispositivo. Ad esempio, un display standard ha un DPR di 1, mentre un display ad alta risoluzione (Retina) ha un DPR di 2 o superiore. -b. Confrontare il DPR del dispositivo con i descrittori `x` presenti nella `srcset`. In questo caso, abbiamo tre immagini con i seguenti descrittori: +b. Confronta il DPR del dispositivo con i descrittori `x` nell'attributo `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. Scegli l'immagine con il descrittore `x` 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 sarà visualizzata a diverse larghezze della viewport. Questo è particolarmente utile quando si utilizza il descrittore di larghezza (`w`). Ecco un esempio: ```html - -description: Una Guida Efficient and Opinionated alle Immagini Responsive per il 2023 -taskInputHash: 770938b4f7895424 +title: srcset e sizes del tag +description: >- + Una guida efficiente e orientata alle opinioni per le immagini reattive del + 2023 +taskInputHash: 6b7b5ba1b8a64b31 lang: it -ignore: '/* cSpell:locale it,en*/' sidebar_sort_priority: 1000 -date_published: '2023-03-23' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -**Una Guida Efficient and Opinionated sulle Immagini per il 2023** +**Una Guida Efficace e Orientata alle Opinion per le Immagini del 2023** -Controlla la sidebar per un'analisi approfondita. Questa è una rapida panoramica per l'aggiornamento dei tag `` per gestire i dispositivi moderni delle varie dimensioni e densità di pixel. Devi [sapere che i pixel non sono uguali](/it/pixels-not-pixels) e che il `devicePixelRatio` tende a essere verso 3,875 piuttosto che 1:1. I telefoni moderni fingono di essere larghi da 320-428px per la leggibilità (in pixel CSS), ma hanno molti pixel del dispositivo per ogni pixel CSS. +Controlla la barra laterale per un'analisi approfondita. Questa è la guida rapida per aggiornare quei tag `` per gestire i dispositivi moderni in tutte le loro diverse dimensioni e densità di pixel. Devi [sapere che i pixel non sono uguali](/it/pixels-non-uguali) e `devicePixelRatio` è più probabile che sia intorno a 3,875 che 1:1. I telefoni moderni fingono di essere larghi tra 320 e 428 pixel per la leggibilità (in pixel CSS), ma hanno molti pixel del dispositivo 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 la tua immagine non cambia mai dimensione, indipendentemente da quanto riduci la finestra del browser, dovresti utilizzare un [descrittore di densità](/it/density-descriptors). Questo è spesso adatto per loghi, icone e pulsanti. + +Sai quali sono i tuoi [punti di interruzione](/it/breakpoints)? Avrai bisogno di quei numeri per raffinare la soluzione di seguito - e almeno il punto di interruzione della larghezza del viewport in cui 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..08fae10 100644 --- a/src/content/docs/it/lighthouse-performance-test.md +++ b/src/content/docs/it/lighthouse-performance-test.md @@ -1,25 +1,24 @@ --- title: Testare la performance con Lighthouse -description: Passaggi su come testare la performance di un sito web usando Lighthouse -taskInputHash: 174be49cc119f58b +description: I passaggi per testare la performance di un sito web utilizzando Lighthouse +taskInputHash: 10043c8387c8285d lang: it -ignore: '/* cSpell:locale it,en*/' -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -Come si testa la performance del tuo sito con Lighthouse? +Come si testa la performance del 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 vai alla 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\. Clicca sui tre puntini in alto a destra della finestra del browser, poi seleziona "Altri strumenti" e poi "Strumenti per sviluppatori" oppure usa la scorciatoia da tastiera "Ctrl+Shift+I" (Windows, Linux) o "Command+Option+I" (macOS). > -> 3\. Nel riquadro degli Strumenti per sviluppatori, fai clic sull'icona di Lighthouse situata sul lato sinistro del riquadro o premi "Ctrl+Shift+P" (Windows, Linux) o "Command+Shift+P" (macOS) per aprire il menu Comandi, quindi digita "Lighthouse" e seleziona "Genera rapporto". +> 3\. Nel pannello Strumenti per sviluppatori, fai clic sull'icona di Lighthouse situata sul lato sinistro del pannello o premi "Ctrl+Shift+P" (Windows, Linux) o "Command+Shift+P" (macOS) per aprire il menu Comandi, poi digita "Lighthouse" e seleziona "Genera rapporto". > -> 4\. Nella finestra di dialogo di Lighthouse, seleziona le opzioni di performance e altre pertinenti che desideri testare, quindi fai clic su "Genera rapporto". +> 4\. Nella finestra di dialogo di Lighthouse, seleziona le opzioni di performance e altre pertinenti che vuoi testare, poi clicca su "Genera rapporto". > > 5\. Dopo che Lighthouse ha completato la sua analisi, vedrai un rapporto con punteggi e raccomandazioni per migliorare la performance, l'accessibilità e altre aree del tuo sito web. > -> Seguendo questi passaggi, puoi utilizzare Lighthouse per testare e ottimizzare la performance del tuo sito web, il che può contribuire a migliorare l'esperienza degli utenti e il posizionamento sui motori di ricerca. +> Seguendo questi passaggi, puoi usare Lighthouse per testare e ottimizzare la performance del tuo sito web, il che può contribuire a migliorare l'esperienza dell'utente e il posizionamento nei motori di ricerca. diff --git a/src/content/docs/it/picture-examples.md b/src/content/docs/it/picture-examples.md index f33fbe9..553fe8c 100644 --- a/src/content/docs/it/picture-examples.md +++ b/src/content/docs/it/picture-examples.md @@ -1,16 +1,15 @@ --- title: Esempi di utilizzo dell'elemento description: >- - Fornisce esempi di utilizzo dell'elemento , per immagini responsive, - direzione artistica e diversi formati di immagine -taskInputHash: 1eedb92f6cc7cb3e + Fornisce esempi di utilizzo dell'elemento per immagini responsive, + art direction e diversi formati di immagine. +taskInputHash: 180f9751ca9f568c lang: it -ignore: '/* cSpell:locale it,en*/' -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -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: @@ -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 `` è utilizzato per fornire diverse fonti di immagine per diverse dimensioni dello schermo. Gli elementi `` specificano le diverse fonti di immagine utilizzando l'attributo "srcset" e l'attributo "media" per specificare le condizioni in base alle quali viene utilizzata ogni fonte. L'elemento `` viene utilizzato come fallback per i vecchi browser o quando non vengono soddisfatte le condizioni specificate negli elementi ``. -2. Esempio per la direzione artistica: +2. Esempio per art direction: ```html @@ -34,7 +33,7 @@ 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 `` è utilizzato per fornire diverse fonti di immagine in base all'orientamento del dispositivo. L'elemento `` con l'attributo "media" impostato su "(orientation: landscape)" specifica una fonte di immagine per schermi larghi, mentre l'elemento `` specifica una fonte di immagine per schermi verticali. 3. Esempio per diversi formati di immagine: @@ -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 `` è utilizzato per fornire diverse fonti di immagine per diversi formati di immagine. Gli elementi `` specificano diverse fonti di immagine utilizzando l'attributo "srcset" e l'attributo "type" per specificare il formato dell'immagine. L'elemento `` viene utilizzato come fallback per i vecchi browser 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 alla dimensione del viewport. I breakpoints vengono tipicamente definiti utilizzando media queries in CSS, che applicano diversi stili in base alla larghezza dello schermo. Questi breakpoints possono essere utilizzati in combinazione con l'elemento `` per fornire diverse fonti di immagine per diverse dimensioni dello schermo. -Ad esempio, nel primo esempio sopra, abbiamo utilizzato l'attributo `media` per specificare la larghezza dello schermo in base alla quale utilizzare ciascuna fonte. Quando la larghezza dello schermo è maggiore o uguale a 768 pixel, verrà utilizzata la fonte "image-large.jpg"; quando la larghezza dello schermo è maggiore o uguale a 480 pixel ma inferiore a 768 pixel, verrà utilizzata la fonte "image-medium.jpg"; e quando la larghezza dello schermo è inferiore a 480 pixel, verrà utilizzata la fonte "image-small.jpg". Questo ci consente di servire immagini delle dimensioni appropriate per ogni dispositivo, riducendo i tempi di caricamento delle pagine e migliorando l'esperienza dell'utente. +Ad esempio, nel primo esempio sopra abbiamo utilizzato l'attributo `media` per specificare la larghezza dello schermo in base alla quale viene utilizzata ciascuna 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 minore di 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`. Questo ci consente di servire immagini di dimensioni appropriate per ciascun dispositivo, riducendo i tempi di caricamento della pagina e migliorando l'esperienza dell'utente. -I punti di interruzione possono essere definiti a qualsiasi dimensione dello schermo e possono essere utilizzati più punti di interruzione per creare layout che rispondono a una vasta gamma di dispositivi. Combina i punti di interruzione con l'elemento ``, puoi creare design flessibili e reattivi che hanno un bell'aspetto su qualsiasi dispositivo. +I breakpoints possono essere definiti a qualsiasi dimensione dello schermo e possono essere utilizzati più breakpoints per creare layout che rispondono a una vasta gamma di dispositivi. Combinando i breakpoints con l'elemento ``, è possibile creare design flessibili e responsivi che sembrano ottimi su qualsiasi dispositivo. diff --git a/src/content/docs/it/pixels-not-pixels.md b/src/content/docs/it/pixels-not-pixels.md index d2c40e8..69a2137 100644 --- a/src/content/docs/it/pixels-not-pixels.md +++ b/src/content/docs/it/pixels-not-pixels.md @@ -1,20 +1,19 @@ --- title: px ≠ pixel -description: Pixel del dispositivo ≠ pixel del browser ≠ pixel dell'immagine -taskInputHash: 9e3d515b23db4c50 +description: I pixel del dispositivo ≠ i pixel del browser ≠ i pixel dell'immagine +taskInputHash: 1cbad5edbe7ce59e lang: it -ignore: '/* cSpell:locale it,en*/' sidebar_sort_priority: 900 -date_published: '2023-03-26' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -### 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 sono mappati su multipli 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 devicePixelRatio del mio desktop cambia durante lo zoom del browser, ma di default è 1,5 (il mio `Sistema > Display > Scala` è 150%, dopotutto). -I file di immagine (escludendo gli SVG) decodificano una griglia di pixel. **È fastidiosamente difficile ottenere la visualizzazione dei pixel dell'immagine perfettamente a un rapporto 1:1 con i pixel del dispositivo - ma con l'attributo `srcset` puoi avvicinarti abbastanza**, e un po' di Javascript può regolare la dimensione dell'elemento HTML dopo il caricamento se hai motivi davvero giustificati per necessitare di quella corrispondenza perfetta, anche se tali arti proibite non saranno svelate qui. +I file immagine (escludendo SVG) vengono decodificati in una griglia di pixel. **È fastidiosamente difficile ottenere la visualizzazione dei pixel dell'immagine in modo perfetto con un rapporto di 1:1 con i pixel del dispositivo - ma con `srcset` puoi avvicinarti abbastanza**, e un po' di Javascript può regolare la dimensione dell'elemento html dopo il caricamento se hai ragioni veramente giustificate per il bisogno di un'appaiamento perfetto, anche se queste arti proibite non saranno rivelate qui. -> Altre unità assolute [in, pc, pt, mm, cm, Q](https://developer.mozilla.org/it/docs/Web/CSS/length) sono definite in base al numero di pixel CSS e fingono che tutto sia a 96dpi. Gli sviluppatori evitano le unità assolute perché in genere è meglio utilizzare unità che derivano dalle dimensioni del carattere o del viewport/contenitore. Unità discordanti possono rompere un layout se l'utente regola il loro moltiplicatore `Accessibility > Text Size`, ingrandisce il browser o ruota il dispositivo. Inutile dire che dovresti fare tutte queste cose prima di pubblicare il tuo sito. +> Altre unità assolute [in, pc, pt, mm, cm, Q](https://developer.mozilla.org/it/docs/Web/CSS/length) sono definite in termini di numero di pixel CSS e fingono che tutto sia a 96 dpi. Gli sviluppatori evitano le unità assolute perché è generalmente meglio utilizzare unità derivate dalla dimensione del carattere o dalle dimensioni del viewport/contenitore. Unità non corrispondenti possono rompere un layout se l'utente regola il moltiplicatore di `Accessibilità > Dimensioni testo`, ingrandisce il browser o ruota il proprio dispositivo. Inutile dire che dovresti fare tutte queste cose prima di pubblicare il tuo sito. diff --git a/src/content/docs/it/specify-width-height.md b/src/content/docs/it/specify-width-height.md index 1d94fdd..2c2d6c9 100644 --- a/src/content/docs/it/specify-width-height.md +++ b/src/content/docs/it/specify-width-height.md @@ -1,17 +1,16 @@ --- -title: Utilizza larghezza e altezza -description: Vantaggi dell'utilizzo degli attributi di larghezza e altezza nel codice HTML -taskInputHash: 34a145dde0e451eb +title: Usa larghezza ed altezza +description: Vantaggi dell'utilizzo degli attributi di larghezza ed altezza nel codice HTML +taskInputHash: 5d70aae845c3ec2d lang: it -ignore: '/* cSpell:locale it,en*/' -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -Perché dovresti inserire larghezza e altezza nell'HTML? +Perché si dovrebbero inserire larghezza ed altezza nell'HTML? -> Si consiglia di inserire gli attributi di larghezza e altezza nel codice HTML delle immagini poiché aiuta il browser web a conoscere le dimensioni dell'immagine prima che sia completamente caricata. Questo permette al browser di riservare la quantità appropriata di spazio sulla pagina web per l'immagine, evitando che il contenuto salti mentre l'immagine viene caricata. +> Si consiglia di inserire gli attributi di larghezza e altezza nel codice HTML per le immagini perché aiuta il browser web a conoscere le dimensioni delle immagini prima che siano completamente caricate. Ciò consente al browser di riservare la quantità appropriata di spazio sulla pagina web per l'immagine, il che impedisce al contenuto di saltellare mentre l'immagine viene caricata. > -> Inoltre, specificare gli attributi di larghezza e altezza per le immagini può anche contribuire a migliorare le prestazioni complessive della pagina web. Quando un browser conosce le dimensioni di un'immagine in anticipo, può calcolare più accuratamente la quantità di spazio necessaria per visualizzare l'immagine evitando riorganizzazioni o ripaints inutili del contenuto mentre viene caricata. +> 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ù precisamente la quantità di spazio necessaria per visualizzare l'immagine e evitare rimbalzi o repaint non necessari 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 facendo caricare il contenuto più rapidamente 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..1d5a775 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 è opportuno utilizzare l'elemento +taskInputHash: f0a09d38c77f74ac lang: it -ignore: '/* cSpell:locale it,en*/' -date_published: '2023-03-27' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -L'elemento `picture` viene utilizzato per fornire più versioni di un'immagine e determina quale versione dell'immagine visualizzare in base a determinate condizioni. È particolarmente utile per ottimizzare le immagini per diverse dimensioni e risoluzioni dello schermo ed è comunemente usato nel web design responsive. +L'elemento `picture` viene utilizzato per fornire più versioni di un'immagine e determina quale versione dell'immagine visualizzare in base a determinate condizioni. È particolarmente utile per ottimizzare le immagini per diverse dimensioni e risoluzioni dello schermo, ed è comunemente utilizzato nel design web responsivo. Ecco alcuni scenari specifici in cui potresti voler utilizzare l'elemento `picture`: -* **Display Retina:** gli schermi ad alta densità come i display Retina di Apple hanno una densità di pixel maggiore, il che significa che le immagini possono sembrare sfocate o pixelate se non sono ottimizzate per l'alta risoluzione. Con l'elemento `picture`, è possibile fornire una versione dell'immagine che ha il doppio dei pixel della versione normale, in modo che appaia nitida e chiara sui display Retina. +* **Schermi Retina:** I display ad alta densità come i display Retina di Apple hanno una densità di pixel più elevata, il che significa che le immagini possono apparire sfocate o pixelate se non sono ottimizzate per l'alta risoluzione. Con l'elemento `picture`, puoi fornire una versione dell'immagine che ha il doppio dei pixel della versione normale, in modo che appaia nitida e chiara sui display Retina. -* **Proporzioni diverse:** se stai progettando un sito che deve visualizzare immagini con diverse proporzioni (come paesaggio vs ritratto), puoi utilizzare l'elemento `picture` per fornire diverse versioni dell'immagine ottimizzate per ciascuna proporzione. +* **Diversi rapporti di aspetto:** Se stai progettando un sito che deve visualizzare immagini con diversi rapporti di aspetto (come paesaggio vs. ritratto), puoi utilizzare l'elemento `picture` per fornire diverse versioni dell'immagine ottimizzate per ciascun rapporto di aspetto. -* **Limitazioni della larghezza di banda:** le immagini possono essere file di grandi dimensioni che occupano molta larghezza di banda, specialmente su dispositivi mobili. Con l'elemento `picture`, è possibile fornire versioni più piccole dell'immagine per dispositivi con schermi più piccoli o connessioni Internet più lente, il che può aiutare a ridurre i tempi di caricamento della pagina. +* **Limiti di larghezza di banda:** Le immagini possono essere grandi file che occupano molta larghezza di banda, specialmente sui dispositivi mobili. Con l'elemento `picture`, puoi fornire versioni più piccole dell'immagine per dispositivi con schermi più piccoli o connessioni Internet più lente, il che può contribuire a ridurre i tempi di caricamento della pagina. -* **Layout diretti dall'arte:** a volte si può desiderare di presentare un'immagine in un certo modo a seconda del layout del resto della pagina. Ad esempio, si potrebbe voler mostrare un primo piano del viso di una persona sui dispositivi mobili, ma una ripresa più ampia sui dispositivi desktop. L'elemento `picture` consente di fornire diverse versioni dell'immagine ottimizzate per diversi layout. +* **Layout diretto dall'arte:** A volte potresti voler presentare un'immagine in un certo modo a seconda del layout del resto della pagina. Ad esempio, potresti voler mostrare un primo piano del viso di una persona sui dispositivi mobili, ma una ripresa più ampia sui dispositivi desktop. L'elemento `picture` ti 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. +In generale, l'elemento `picture` è uno strumento potente che può aiutarti a ottimizzare le tue immagini per una varietà di casi d'uso e assicurarti che siano fantastiche 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..7c48927 100644 --- a/src/content/docs/it/width-density.md +++ b/src/content/docs/it/width-density.md @@ -1,48 +1,47 @@ --- title: Descrittori di larghezza e densità description: Esempi di utilizzo dei descrittori di larghezza e densità in `srcset` -taskInputHash: ea49fc07cb749a51 +taskInputHash: 5c413195efc76ce4 lang: it -ignore: '/* cSpell:locale it,en*/' -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -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`. Usa esempi e usa Markdown. -> `srcset` è un attributo HTML che consente agli sviluppatori di fornire più sorgenti di immagini con diverse risoluzioni o densità di pixel e consentire al browser di selezionare l'immagine appropriata in base alle caratteristiche del display del dispositivo. L'attributo `srcset` utilizza una combinazione di `URL` e descrittori `w` o `x` per specificare le immagini. +> `srcset` è un attributo HTML che consente agli sviluppatori di fornire al browser più immagini con diverse risoluzioni o densità di pixel e di lasciare che il browser selezioni 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. +> Il descrittore `w` viene utilizzato per specificare la larghezza di un'immagine in pixel. Viene utilizzato quando si desidera fornire al browser le dimensioni di un'immagine in modo che possa scegliere l'immagine appropriata per lo spazio dello schermo disponibile. -> La sintassi per utilizzare il descrittore `w` in `srcset` è la seguente: +> La sintassi per l'utilizzo del descrittore `w` in `srcset` è la seguente: ```html Esempio immagine + alt="Immagine di esempio"> ``` -> Nell'esempio sopra, abbiamo fornito al browser tre immagini e le loro larghezze corrispondenti in pixel. Il browser selezionerà l'immagine con la larghezza più vicina allo spazio disponibile sullo schermo. +> Nell'esempio sopra, abbiamo fornito al browser tre immagini e le loro larghezze corrispondenti in pixel. Il browser selezionerà l'immagine con la larghezza più vicina allo spazio schermo disponibile. ## Descrittore di densità (`x`) -> Il descrittore `x` viene utilizzato per specificare la densità di pixel di un'immagine, che è il rapporto tra pixel fisici e pixel CSS. Viene utilizzato quando vogliamo fornire al browser diverse versioni della stessa immagine con diverse densità di pixel. +> Il descrittore `x` viene utilizzato per specificare la densità di pixel di un'immagine, che è il rapporto tra i pixel fisici e i pixel CSS. Viene utilizzato quando si desidera fornire al browser diverse versioni della stessa immagine con diverse densità di pixel. -> La sintassi per utilizzare il descrittore `x` in `srcset` è la seguente: +> La sintassi per l'utilizzo del descrittore `x` in `srcset` è la seguente: ```html Esempio immagine + alt="Immagine di esempio"> ``` > Nell'esempio sopra, abbiamo fornito al browser tre immagini e le loro densità di pixel corrispondenti. Il browser selezionerà l'immagine con la densità di pixel più vicina allo schermo del dispositivo. -> Notare che i descrittori `w` e `x` possono essere utilizzati insieme nello stesso attributo `srcset` per fornire al browser più opzioni di scelta. +> Notare che i descrittori `w` e `x` possono essere utilizzati insieme nello stesso attributo `srcset` per fornire al browser più opzioni da cui scegliere. diff --git a/src/content/docs/ja/_roundtrip_breakpoints.txt b/src/content/docs/ja/_roundtrip_breakpoints.txt index 588b9bd..1dae221 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 your images +taskInputHash: 720fac70c8e52c09 lang: en -ignore: '/* cSpell:locale ja,en*/' -date_published: '2023-03-26' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- ### Background -Different layouts are needed for small screens and large monitors. To achieve the purposes of `srcset` and `sizes`, you need to know the points at which the layout changes. +Different screen sizes require different layouts. In order to use `srcset` and `sizes` for their intended purpose, you need to know where the layout changes. -Web developers need to decide what to shrink, hide, or move on small screens or, more generally, what to enlarge, expose, or add on large screens. They have very little information. Is the user using a tablet, landscape phone, or small browser window? +Web developers need to determine what to shrink, hide, or move for small screens (and what to enlarge, reveal, or add for larger screens more generally). There is very little information for them to go on. They don’t know if the user is on a tablet or landscape phone or if it’s a small browser window. -You need to choose any viewport width at which the layout changes. This is called a **breakpoint**. It's any number of CSS pixels (not device pixels) and Polypane has a great article on [common breakpoints](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023). +You need to choose any viewport width where the layout changes; these are called **breakpoints**. They are any number of CSS pixels (not device pixels) ([see “Pixels, not Pixels”](/en/pixels-not-pixels)). There is an excellent article on commonly used breakpoints on Polypane, ["The Breakpoints We Tested in 2021 (and the ones to test in 2022)"](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023). -Some images (such as logos, icons, buttons, etc.) are immune to layout changes caused by these breakpoints, and there are no issues with density descriptors in `srcset`. +There are also some images—such as logos, icons, and buttons—that are immune to layout shifts caused by these breakpoints (and whose density descriptors are enough). -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. +For images that are part of the main content, they are constrained by the size of the container. Typically, the main content area of the page is constrained to a particular width on the largest screens (`max-width`), while on smaller screens, the main content area fills the entire viewport. -When there are multiple columns at some breakpoints, it becomes more difficult to calculate valid sizing rules because the percentage of viewport width occupied by the image changes. +If you have multiple columns at several breakpoints, it becomes more difficult to calculate valid size determination rules, because the percentage of the viewport width that the image occupies changes. -### A Simple Way +### The Easy Way -So don't make this too complicated. You can probably get a very reasonable answer with the following approximations. +That said, don’t stress about it too much. You’re probably fine with the following approximations: -1. At what size does the main column (or image container) stop growing? If the viewport width is less than that, you can specify that the image occupies 100% of the viewport width using `100vw` in the `sizes` attribute. -2. What is the maximum width for the container to reach? You can set that as a fixed `width` for everything else. +1. What size is the point at which the main column (or the container of the image) stops growing? Up to that viewport width, you can specify that the image should take up 100% of the viewport width by using `100vw` in the `sizes` attribute of the image. +2. What is the maximum width that the container achieves? You can set that as a fixed `width` for everything else. If the answer to #1 is 700px and the answer to #2 is 800px, you can use the following `sizes` attribute: ```html - + ``` - - -> You may think that the browser can calculate it because it selects the image URL before it downloads the CSS. Unfortunately, web browsers select the image URL first, so we have to calculate it ourselves. It doesn't have to be perfect, though. +> You might think that the browser can handle these calculations neatly based on CSS. Unfortunately, the browser tries to actively select the image URL before the stylesheet is downloaded. That is why we have to do the calculation ourselves, and it doesn’t have to be perfect. ===================== Content prompt used: @@ -52,7 +49,7 @@ Also carefully translate the title and description for the article; do not use & 2. Why some (but not all) breakpoints matter for your images Metadata returned1. ブレークポイントと画像 -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..f6658f1 100644 --- a/src/content/docs/ja/_roundtrip_browser-picks-srcset.txt +++ b/src/content/docs/ja/_roundtrip_browser-picks-srcset.txt @@ -1,25 +1,29 @@ --- -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 +description: Selecting from Images Listed in the srcset Attribute +taskInputHash: 74bc392324c46c8c lang: en +date_published: '2023-03-31' +date_modified: '2023-03-31' +date_updated: '2023-03-31' --- -How does a browser select which image to display from those listed in the `srcset` attribute? We'll explain step-by-step, providing examples for both width and density descriptors based on device and viewport. +Browsers use a series of rules to select the best image from those listed in the `srcset` attribute. These rules depend on the display characteristics (resolution, pixel density) of the device and the size of the viewport. With the `srcset` attribute, you can specify different images based on width (using the `w` descriptor) or based on pixel density (using the `x` descriptor). Let's take a closer look at each case with some 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: +1. Width Descriptor (`w`): -1. Width descriptor (`w`): - -Assume we have the following `srcset` attribute: +Consider the following `srcset` attribute: ```html + Example Image + ``` -The browser follows these steps: -a. Determine the device's DPR (Device Pixel Ratio). For example, the standard display has a DPR of 1, and high-resolution (Retina) displays have a DPR of 2 or more. +The browser follows these steps: + +a. Determine the device's 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` by multiplying the width descriptor by the DPR. For a device with a DPR of 1: - example-small.jpg: 400 * 1 = 400px @@ -27,21 +31,23 @@ b. Calculate the effective width for each image in `srcset` by multiplying its w - example-large.jpg: 1600 * 1 = 1600px -c. Compare each effective width with the viewport width. The browser chooses the smallest image with an effective width larger than the viewport width. In this case, `example-medium.jpg` would be chosen if the viewport width is assumed to be 420px. +c. Compare the effective widths to the viewport's width. Assuming a viewport width of 420px, the browser selects the image with the smallest effective width that is greater than or equal to the viewport width. In this case, it selects `example-medium.jpg`. -2. Density descriptor (`x`): +2. Pixel Density Descriptor (`x`): -Assume we have the following `srcset` attribute: +Consider the following `srcset` attribute: ```html + Example Image + ``` The browser follows these steps: -a. Determine the device's DPR (Device Pixel Ratio). For example, the standard display has a DPR of 1, and high-resolution (Retina) displays have a DPR of 2 or more. +a. Determine the device's DPR. 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 the DPR to the `x` descriptors in the `srcset`. In this case, there are three images with the following descriptors: - example-1x.jpg: 1x @@ -49,12 +55,14 @@ b. Compare each image's `x` descriptor in `srcset` with the device's DPR. In thi - example-3x.jpg: 3x -c. The browser chooses the image with the closest descriptor to the device's DPR. With a DPR of 1, the browser will choose `example-1x.jpg`. With a DPR of 2, the browser will choose `example-2x.jpg`. +c. Select the image with the `x` descriptor closest to the device's DPR. For a device with a DPR of 1, the browser selects `example-1x.jpg`. For a device with a DPR of 2, it selects `example-2x.jpg`. -When using width descriptors (`w`), you can also provide detailed information about how the image should be displayed on different viewport widths by combining the `sizes` and `srcset` attributes. Here's an example: +When using the width descriptor (`w`), you can also combine the `srcset` attribute with the `sizes` attribute to provide more detailed information about how the images will be displayed at different viewport widths. This can be especially useful. Here's an example: ```html + An example image + alt="Example image"> ``` -This markup example includes the following: +This markup example includes: +- **src**: The default image source displayed if the browser doesn't support `srcset`. +- **srcset**: A list of image sources and their density descriptors (either 1x, 2x, or 3x). The browser chooses the optimal image based on the user's display. +- **alt**: Description of the image for accessibility purposes. -- **src**: The default image source to display if the browser does not support srcset. -- **srcset**: A list of image sources and their density descriptors (1x, 2x, 3x). The browser selects the optimal image based on the user's display. -- **alt**: The description of the image for accessibility purposes. - -That's it! You have successfully implemented Srcset with density descriptors and improved your website's performance and user experience. +That's it! With this implementation of `srcset` with density descriptors, you've successfully improved your website's performance and user experience. ===================== Content prompt used: @@ -56,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. 密度指定子と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..e583676 100644 --- a/src/content/docs/ja/_roundtrip_introduction.txt +++ b/src/content/docs/ja/_roundtrip_introduction.txt @@ -1,43 +1,41 @@ --- -title: '`srcset` and `sizes` for ``' -description: An Efficient and Subjective Guide to Responsive Images in 2023 -taskInputHash: fb587f981b4441f1 +title: srcset and sizes +description: Efficient and opinionated guide to responsive images in 2023 +taskInputHash: 79b83d6850663960 lang: en -ignore: '/* cSpell:locale ja,en*/' sidebar_sort_priority: 1000 -date_published: '2023-03-23' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -**An Efficient and Subjective Guide to Responsive Images in 2023** +**Efficient and Opinionated Guide to Responsive Images in 2023** -For a deeper dive, consult the sidebar. This is a quick reference to upgrade your `` game, covering how to handle various image sizes and pixel densities in the modern age. You need to know that pixels != pixels [{{Note that the term used here is not the technical term}}](/en/pixels-not-pixels), and that `devicePixelRatio` is more like 3.875 than 1:1. Modern smartphones have many device pixels per CSS pixel, and they are often declared to have a viewport width in CSS pixels that's different from their physical width in device pixels. +Please refer to the sidebar for more information. This is a quick reference for upgrading `` tags to accommodate the various sizes and pixel densities of modern devices. It is important to know that pixels are not always pixels, as explained [here](/en/pixels-not-pixels), and that `devicePixelRatio` is often around 3.875, rather than 1:1. Modern phones are assumed to have a width of 320-428px (in CSS pixels) for legibility, but many device pixels correspond to one CSS pixel. -> If an image has to be the same size irrespective of the browser window, [a density descriptor](/en/density-descriptors) should be used. This is suitable for logos, icons, buttons, etc. +> If the size of an image does not change no matter how narrow the browser window is, a [density descriptor](/en/density-descriptors) must be used. This is often appropriate for logos, icons, and buttons. -Do you know your [breakpoints](/en/breakpoints)? You'll need these numbers to fine-tune the following solutions— at a minimum, you need the breakpoint at which the main content area stops expanding and the viewport width. +Do you know about [breakpoints](/en/breakpoints)? You will need these numbers to fine-tune the following solutions. At least one viewport width breakpoint is necessary to halt the expansion of the main content area. -### The Easy Solution + +### Simple Method ```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="Image of a dog riding a bike" /> + + + + ``` - -{{The translation is complete and accurate.}} ===================== Content prompt used: @@ -50,8 +48,8 @@ Also carefully translate the title and description for the article; do not use & 1. srcset & sizes 2. An Efficient and Opinionated Guide to Responsive Images for 2023 -Metadata returned1. `srcset` と `` の `sizes` -2. 2023年のレスポンシブイメージの効率的で主観的なガイド +Metadata returned1. srcsetとサイズ +2. 2023年のレスポンシブ画像に対する効率的で偏見を持ったガイド Roundtrip (isolated) prompt used: diff --git a/src/content/docs/ja/_roundtrip_lighthouse-performance-test.txt b/src/content/docs/ja/_roundtrip_lighthouse-performance-test.txt index 5c84db5..bec145f 100644 --- a/src/content/docs/ja/_roundtrip_lighthouse-performance-test.txt +++ b/src/content/docs/ja/_roundtrip_lighthouse-performance-test.txt @@ -1,28 +1,25 @@ --- -title: Testing website performance with Lighthouse +title: Testing performance with Lighthouse description: Steps for testing website performance using Lighthouse -taskInputHash: 7f9c623aaf7861da +taskInputHash: d2cc434dd3e4b8ce lang: en -ignore: '/* cSpell:locale ja,en*/' -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -# How to test website performance with Lighthouse - -`Lighthouse` is a tool used for measuring website performance, accessibility, and more. To test a website's performance with `Lighthouse`, follow these steps: +Here are the steps to test the performance of your site using Lighthouse: 1. Open the Google Chrome web browser and navigate to the page you want to test. -2. Click the three dots in the top-right corner of the browser window, select "More Tools," then "Developer Tools," or use the keyboard shortcut "Ctrl+Shift+I" (Windows, Linux) or "Command+Option+I" (macOS). +2. Click the three dots in the top right corner of the browser window and select "More tools" > "Developer tools" OR use the keyboard shortcut "Ctrl+Shift+I" (Windows, Linux) or "Command+Option+I" (macOS). -3. In the Developer Tools panel, click the `Lighthouse` icon on the left side of the panel, or open the command menu by pressing "Ctrl+Shift+P" (Windows, Linux) or "Command+Shift+P" (macOS), type "Lighthouse," and select "Generate report." +3. In the Developer Tools panel, click 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 desired performance and 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. Once Lighthouse completes the analysis, a report will be displayed that includes scores, recommendations for improvement in areas such as accessibility and website performance. -By following these steps, you can use `Lighthouse` to test and optimize website performance, improve user experience, and increase search engine rankings. +By following these steps, you can use Lighthouse to test and optimize the performance of your website, improving the user experience and search engine rankings. ===================== Content prompt used: @@ -35,8 +32,8 @@ Also carefully translate the title and description for the article; do not use & 1. Test performance with Lighthouse 2. Steps on how to test a website's performance using Lighthouse -Metadata returned1. Lighthouseによるパフォーマンスのテスト -2. Lighthouseを使用してウェブサイトのパフォーマンスをテストする手順 +Metadata returned1. Lighthouseでパフォーマンスをテストする +2. Lighthouseを使用してWebサイトのパフォーマンスをテストする手順 Roundtrip (isolated) prompt used: diff --git a/src/content/docs/ja/_roundtrip_picture-examples.txt b/src/content/docs/ja/_roundtrip_picture-examples.txt index 3656078..0a2c074 100644 --- a/src/content/docs/ja/_roundtrip_picture-examples.txt +++ b/src/content/docs/ja/_roundtrip_picture-examples.txt @@ -1,10 +1,13 @@ --- -title: Examples of using the `` element +title: Examples of Using the `` Element description: Provides examples of using the `` element for responsive images, art direction, and different image formats. -taskInputHash: 4cec70ff1dc4182d +taskInputHash: 9536d1f27d70b2a5 lang: en +date_published: '2023-03-31' +date_modified: '2023-03-31' +date_updated: '2023-03-31' --- -Below are examples and explanations for using the `` element: +Below are some examples and explanations of how to use the `` element. 1. Example of a responsive image: @@ -12,22 +15,22 @@ Below are examples and explanations for using the `` element: - An image + Image ``` -Explanation: In this example, the `` element is used to provide different image sources for different screen sizes. The `` element specifies the conditions for using each source using the `srcset` and `media` attributes. The `` element is used as a fallback for older browsers or if the conditions specified in the `` element are not met. +Explanation: In this example, the `` element is used to provide different image sources for different screen sizes. The `` element specifies the conditions for using each source using the "srcset" and "media" attributes. The `` element is used as a fallback for devices that do not support the conditions specified in the `` element. 2. Example of art direction: ```html - An image + Image ``` -Explanation: In this example, the `` element is used to provide different image sources depending on the device's orientation. The `` element with the `media` attribute set to `(orientation: landscape)` specifies the image source for wide screens, while the `` element specifies the image source for portrait screens. +Explanation: The `` element is used in this example to provide different image sources depending on the device orientation. The `` element with the "media" attribute set to "(orientation: landscape)" specifies an image source for wide screens, while the `` element specifies an image source for portrait screens. 3. Example of different image formats: @@ -35,19 +38,19 @@ Explanation: In this example, the `` element is used to provide differe - An image + Image ``` -Explanation: In this example, the `` element is used to provide different image sources for different image formats. The `` element uses the `srcset` and `type` attributes to specify the image format. The `` element is used as a fallback for older browsers that do not support the `` element. +Explanation: The `` element is used in this example to provide different image sources for different image formats. The `` element specifies different image sources using the "srcset" and "type" attributes. The `` element is used as a fallback for older browsers that don't support the `` element. ## Breakpoints -In responsive design, breakpoints define when a website or application's layout changes based on the size of the viewport. Breakpoints are typically defined using CSS media queries, which apply different styles based on screen width. These breakpoints can be used in combination with the `` element to provide different image sources for different screen sizes. +In responsive design, breakpoints are defined places where the layout of a website or application changes based on the size of the viewport. Breakpoints are defined using CSS media queries, which apply different styles depending on the screen width. These breakpoints can be combined with the `` element to provide different image sources for different screen sizes. -For example, in the first example, 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 which image source to use for each screen width. If the screen width is 768 pixels or more, the `image-large.jpg` source is used; if the screen width is between 480 and 768 pixels, the `image-medium.jpg` source is used; and if the screen width is less than 480 pixels, the `image-small.jpg` source is used. This allows for faster page loading times and improved user experience by providing appropriately sized images for each device. -Breakpoints can be defined for any screen size and using multiple breakpoints can create layouts for a wide variety of devices. By combining breakpoints with the `` element, responsive and flexible designs with great visual appearance can be created on any device. +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: @@ -61,7 +64,7 @@ Also carefully translate the title and description for the article; do not use & 2. Provides examples using the element, for responsive images, art direction and different image formats Metadata returned1. `` 要素を使用する例 -2. レスポンシブイメージ、アートディレクション、異なる画像形式に対して、 `` 要素を使用するための例を提供します。 +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..ef0c29d 100644 --- a/src/content/docs/ja/_roundtrip_pixels-not-pixels.txt +++ b/src/content/docs/ja/_roundtrip_pixels-not-pixels.txt @@ -1,23 +1,22 @@ --- -title: px ≠ Pixel -description: Device px ≠ Browser px ≠ Image px -taskInputHash: 73be94d33f113c9c +title: px ≠ Pixels +description: Device px ≠ browser px ≠ image px +taskInputHash: b8052e1577931156 lang: en -ignore: '/* cSpell:locale ja,en*/' sidebar_sort_priority: 900 -date_published: '2023-03-26' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -### Device pixels ≠ Browser pixels ≠ Image pixels +### Device pixels ≠ browser pixels ≠ image pixels -Thanks to Apple, CSS and HTML pixels (`px`) map to **multiple device/printer pixels almost all the time**. The `devicePixelRatio` on my mobile phone is 3.875, what's yours? [Find out here](https://www.mydevice.io/) +Thanks to Apple, CSS and HTML pixels (`px`) are typically mapped to multiple device/printer pixels. The `devicePixelRatio` of my phone is 3.875; [what's yours?](https://www.mydevice.io/) -The `devicePixelRatio` of a desktop varies with browser zoom, but defaults to 1.5 (mine is upped to 150% under `System > Display > Scale`). +The `devicePixelRatio` of desktops varies with browser zoom, but the default value is 1.5 (my `System > Display > Scale` is 150%). -Image files (excluding SVG) are decoded onto a pixel grid. **It is very hard to display image pixels perfectly at a 1:1 ratio with device pixels, but using `srcset` can get you close enough**. If there's a legitimate reason for needing a perfect mapping, a bit of JavaScript can adjust the size of the HTML element after loading. However, we won't delve into such frowned upon techniques here. +Image files (except SVG) are decoded on a grid of pixels. **It's very difficult to display image pixels perfectly at a 1:1 ratio with device pixels, but using `srcset` can give you *almost* the same result**. And if there's a valid reason for needing a perfect mapping, you can use a little JavaScript to adjust the size of the HTML element after it loads. But we won't go into such a taboo here. -> Other absolute units (`in`, `pc`, `pt`, `mm`, `cm`, `Q`) are assumed to represent a number of CSS pixels, which all happen to be 96dpi. Developers should avoid absolute units. Because it's generally better to use units derived from font size or viewport/container dimensions. Mismatched units could break the layout if the user adjusts the multiplicative factor of `Accessibility > Text Size`, browser zoom, or rotates the device. Needless to say, all of these should be done before shipping the site. +>Other absolute [units (in, pc, pt, mm, cm, Q)](https://developer.mozilla.org/en-US/docs/Web/CSS/length) are defined based on CSS pixel counts and treated as though all have 96dpi. Developers should avoid absolute units because it's generally better to use units derived from font size or viewport/container dimensions. Mismatched units can break layouts when users adjust their "accessibility > text size" multiplier, zoom the browser, or rotate the device. Of course, all of these things should be done before shipping the site. ===================== Content prompt used: @@ -31,7 +30,7 @@ Also carefully translate the title and description for the article; do not use & 2. Device px ≠ browser px ≠ image px Metadata returned1. px ≠ ピクセル -2. デバイスpx ≠ ブラウザpx ≠ 画像px +2. デバイスのpx ≠ ブラウザのpx ≠ 画像のpx Roundtrip (isolated) prompt used: diff --git a/src/content/docs/ja/_roundtrip_specify-width-height.txt b/src/content/docs/ja/_roundtrip_specify-width-height.txt index 878dc2d..60d7ba7 100644 --- a/src/content/docs/ja/_roundtrip_specify-width-height.txt +++ b/src/content/docs/ja/_roundtrip_specify-width-height.txt @@ -1,20 +1,19 @@ --- -title: Using Width and Height -description: The benefits of using the width and height attributes in HTML code -taskInputHash: 8d1d8f5ead1a1b70 +title: Using Width and Height Attributes +description: Benefits of using width and height attributes in HTML code +taskInputHash: 33f9615c5fb584f4 lang: en -ignore: '/* cSpell:locale ja,en*/' -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -Why is it necessary to specify width and height in HTML code? +What is the reason for adding the width and height attributes to HTML? -> It is recommended to specify the width and height attributes in HTML code for images. This is to help web browsers know the size of the image before it is fully loaded. With this information, the browser can reserve the appropriate space for the image in the web page, preventing content from jumping when the image is loaded. -> -> 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. +> It is recommended to specify the width and height attributes of an image in HTML code 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 for the image on the web page and prevent the content from shifting while the image loads. + +> Additionally, specifying the width and height attributes of an image can potentially improve the overall performance of the web page. If the browser knows the size of the image beforehand, it can more accurately calculate the space required to display the image and avoid unnecessary reflows or repaints during content loading. + +> Overall, by specifying the width and height attributes of an image in HTML code, the content loads faster and visual defects are reduced, thus improving the user experience. ===================== Content prompt used: @@ -28,7 +27,7 @@ Also carefully translate the title and description for the article; do not use & 2. Benefits of using width and height attributes in HTML code Metadata returned1. 幅と高さの使用 -2. HTMLコードで幅と高さ属性を使用するメリット +2. HTMLコードで幅と高さの属性を使用することの利点 Roundtrip (isolated) prompt used: diff --git a/src/content/docs/ja/_roundtrip_when-to-use-picture.txt b/src/content/docs/ja/_roundtrip_when-to-use-picture.txt index e9853cf..4e5fc39 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,23 @@ --- -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: 8f2c032dcbcce4b3 lang: en -ignore: '/* cSpell:locale ja,en*/' -date_published: '2023-03-27' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -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 of the image to display based on specific conditions. It is commonly used in responsive web design to provide images optimized for different screen sizes and resolutions. Below are specific scenarios where the `picture` element should be used: -* **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. +- **Retina Displays**: High-density displays such as Apple's Retina display have a high pixel density, and if an image is not optimized for high resolution, it can appear blurry or pixelated. By using the `picture` element, a version of the image with twice as many pixels as the regular version can be provided to display clearly and sharply on Retina displays. -* **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. +- **Different Aspect Ratios**: When images need to be displayed with different aspect ratios, such as landscape and portrait, the `picture` element can be used to provide different versions of the image optimized for each aspect ratio. -* **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. +- **Bandwidth Limitations**: Images are large files and can occupy a lot of bandwidth, especially on mobile devices. By using the `picture` element, smaller versions of images can be provided for devices with smaller screen sizes or slower network connections, reducing page load times. -* **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. +- **Art Direction Layout**: There may be cases where images need to be displayed in a specific way to fit the page layout. For example, displaying a close-up of a person's face on mobile devices and a wider range on desktop devices. The `picture` element can be used to provide different versions of the image optimized for different layouts. -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. +Overall, the `picture` element is a powerful tool for providing images optimized for various use cases and ensuring impressive appearance on any device or screen size. ===================== Content prompt used: @@ -31,8 +30,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..0903977 100644 --- a/src/content/docs/ja/_roundtrip_width-density.txt +++ b/src/content/docs/ja/_roundtrip_width-density.txt @@ -1,23 +1,24 @@ --- -title: Width and Density Descriptor -description: 'An example of using the "srcset" attribute with width and density descriptors' -taskInputHash: 85e0a3c7357342e1 +title: Width and Density Descriptors +description: 'Example usage of width and density descriptors in `srcset`' +taskInputHash: 1a17063392ab34ef lang: en -ignore: '/* cSpell:locale ja,en*/' -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -Understand the width (w) and density (x) descriptors in `srcset`, using examples and Markdown. +Understanding the width (`w`) and density (`x`) descriptors in `srcset`. Usage in 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 provides multiple image sources with different resolutions and pixel densities, allowing the browser to choose the appropriate image based on the device's display characteristics. The `srcset` attribute specifies the image using a combination of a `URL` and either a `w` or `x` 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. +## Width (`w`) Descriptor + +The `w` descriptor is used to specify the width of the image in pixels. It is used when the browser needs to choose an appropriate image for the available screen space, by providing the browser with the dimensions of the image. The syntax for using the `w` descriptor in `srcset` is as follows: + ```html ``` -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, three images and their corresponding widths in pixels are provided to the browser. The browser chooses the image with the closest width to the available screen space. + -## Density (x) Descriptor +## Density (`x`) Descriptor -The `x` descriptor is used to specify the pixel density of an image, which is the ratio of physical pixels to CSS pixels. It is used when providing different versions of the same image with different pixel densities to the browser. +The `x` descriptor is used to specify the pixel density of the image, which is the ratio of physical pixels to CSS pixels. It is used when different versions of the same image with different pixel densities need to be provided to the browser. The syntax for using the `x` descriptor in `srcset` is as follows: + ```html ``` -In the above example, three images are provided to the browser, along with their respective pixel densities. The browser selects the image with the closest pixel density to the device's screen. +In the above example, three images and their corresponding pixel densities are provided to the browser. The browser chooses the image with the closest pixel density to the device screen. + -Both `w` and `x` descriptors can be used together within the same `srcset` attribute, providing the browser with choices. +Note that it is possible to use both the `w` and `x` descriptors in the same `srcset` attribute to provide the browser with selection options. ===================== Content prompt used: @@ -57,8 +61,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..845d062 100644 --- a/src/content/docs/ja/breakpoints.md +++ b/src/content/docs/ja/breakpoints.md @@ -1,41 +1,38 @@ --- title: ブレークポイントと画像 -description: なぜ画像においていくつかの（すべてではない）ブレークポイントが重要なのか -taskInputHash: f409cdb7248e141b +description: なぜいくつかの（すべてではない）ブレークポイントがあなたの画像に関係するのか +taskInputHash: 720fac70c8e52c09 lang: ja -ignore: '/* cSpell:locale ja,en*/' -date_published: '2023-03-26' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- ### 背景 -小さなスクリーンと大きなモニターには異なるレイアウトが必要です。 `srcset` と `sizes` の目的のために、レイアウトが変更されるポイントを知る必要があります。 +小さな画面と大きなモニターでは異なるレイアウトが必要です。 `srcset`と`sizes`の目的のために、レイアウトが変更されるポイントを知る必要があります。 -Web開発者は、小さなスクリーンでは何を縮小、非表示、または移動するか、またはより一般的には大きなスクリーンでは何を拡大、公開、または追加するかを決定する必要があります。彼らは非常に少ない情報しか持っていません。ユーザーはタブレット、または横向きの電話、または小さなブラウザウィンドウを使用していますか？ +Webデベロッパーは、小さい画面では何を縮小、非表示、または移動するか（さらに一般的には、大きい画面では何を拡大、明らかにするか、または追加するか）を決定する必要があります。彼らが行くための情報は非常に少ないです。ユーザーがタブレットか、横向きの電話なのか、それとも小さなブラウザーウィンドウなのかを知らないのです。 -レイアウトが変更される任意のビューポート幅を選択する必要があります。これを **ブレークポイント** と呼びます。これは CSS ピクセルの任意の数字であり（[デバイスピクセルではありません](/ja/pixels-not-pixels)）、Polypane には共通に使用されるブレークポイントに関する[優れた記事](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023)があります。 +レイアウトが変更される任意のビューポート幅を選択する必要があります。これを **ブレークポイント** と呼びます。これはCSSピクセルの任意の数です ([デバイスピクセルではありません](/ja/pixels-not-pixels))。Polypaneには、よく使用されるブレークポイントについての[素晴らしい記事](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023)があります。 -一部の画像（ロゴやアイコン、ボタンなど）は、これらのブレークポイントによって引き起こされるレイアウトの変更に免疫があり、[srcset 密度記述子](/ja/density-descriptors)で問題ありません。 +ロゴやアイコン、ボタンのように、これらのブレークポイントに起因するレイアウトのシフトに免疫のあるいくつかの画像（密度記述子で十分なもの）もあります。 -メインコンテンツの画像は、そのコンテナのサイズに制限されます。通常、ページのメインコンテンツ領域は、最大のスクリーンである特定の幅に制限されます。つまり、 `max-width` が指定されますが、小さなスクリーンでは、メインコンテンツ領域がビューポート全体を占めます。 +メインコンテンツの画像は、コンテナーのサイズに制限されます。通常、ページのメインコンテンツ領域は、最大のスクリーンではある特定の幅に制限されます（ `max-width` ）、小さなスクリーンでは、メインコンテンツ領域はビューポート全体を埋めます。 -いくつかのブレークポイントで複数の列がある場合、画像が占めるビューポート幅の割合が変わるため、有効なサイズ指定ルールを計算することがより困難になります。 +いくつかのブレークポイントで複数の列を持っている場合、画像が占めるビューポートの幅の割合が変化するため、有効なサイズ決定ルールを計算するのがより難しくなります。 ### 簡単な方法 -それでは、これを過度に複雑にしたりしないでください。おそらく次の近似値で非常に妥当な答えが得られます。 +とはいえ、これを過剰に考えないでください。おそらく、次の近似値で非常にOKです。 -1. メイン列（または画像のコンテナ）がどのサイズで成長を止めるのですか？ビューポート幅がそれ以下の場合、 `sizes` 属性に `100vw` を使用して画像がビューポート幅の100％を占めるように指定できます。 -2. コンテナが最大で達する幅は何ですか？ それを、それ以外のすべてに対して固定された `width` として設定できます。 +1. メインカラム（または画像のコンテナ）が伸びなくなるサイズは何ですか？そのビューポート幅まで、画像の`sizes`属性に`100vw`を使用して、画像がビューポート幅の100％を占めることを指定できます。 +2. コンテナが達成する最大幅は何ですか？それを他のすべてのものに固定の `width` として設定できます。 -1番の答えが700pxで2番の答えが800pxの場合、次の `sizes` 属性を使用できます。 +1の答えが700pxで、2の答えが800pxの場合、次の`sizes`属性を使用できます。 ```html - + ``` - - -> ブラウザーが CSS をダウンロードする前に画像のURLを選択するのが非常に早いため、ブラウザーが計算することができると思うかもしれません。残念ながら、Webブラウザーは先に画像 URL を選択してしまうため、私たちは自分自身で計算する必要があります。完璧でなくても構わないのです。 +> CSSに基づいてブラウザーがこれらの計算をきれいに処理できると思うかもしれません。残念ながら、ブラウザーはスタイルシートがダウンロードされる*前に*画像URLを積極的に選択しようとします。だからこそ、私たちが自分で計算しなければならず、完璧にならなくても良いのです。 diff --git a/src/content/docs/ja/browser-picks-srcset.md b/src/content/docs/ja/browser-picks-srcset.md index 37cde17..1ade985 100644 --- a/src/content/docs/ja/browser-picks-srcset.md +++ b/src/content/docs/ja/browser-picks-srcset.md @@ -1,20 +1,17 @@ --- title: ブラウザが選択する方法 -description: '`srcset`属性にリストされた画像からブラウザが選択する方法' -taskInputHash: 4ad7cdb54859d445 +description: srcset属性にリストされた画像の選択方法 +taskInputHash: 74bc392324c46c8c lang: ja -ignore: '/* cSpell:locale ja,en*/' -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -ブラウザは、`srcset`属性にリストされた画像からどの画像を選択するのでしょうか？ デバイスとビューポートに基づき、幅と密度のそれぞれの指定について例を挙げて、ブラウザがどのように決定するかをステップバイステップで説明します。 +ブラウザは、`srcset` 属性にリストされた画像から最適な画像を選択するために、一連のルールを使用します。これらのルールは、デバイスのディスプレイ特性（解像度、ピクセル密度）およびビューポートのサイズに依存します。`srcset` 属性を使用すると、幅に基づいて異なる画像を指定することができます（`w` 記述子を使用する）、またはピクセル密度に基づいて異なる画像を指定することができます（`x` 記述子を使用する）。それぞれの場合について、例を交えて詳しく見ていきましょう。 -- HTMLの `srcset`属性を使用する場合、ブラウザは提供されたソースリストから最適な画像を選択するための一連のルールを使用します。これらのルールは、デバイスの表示特性（解像度、ピクセル密度）およびビューポートサイズに依存します。 `srcset`属性を使用すると、幅（ `w`ディスクリプタを使用）またはピクセル密度（ `x`ディスクリプタを使用）に基づいて異なる画像を指定できます。それでは、それぞれのケースについて例を挙げて説明していきましょう。 +1. 幅記述子（`w`）: -1\. 幅ディスクリプタ（ `w`）: - -次の `srcset`属性を持つ場合を想定します。 +次の `srcset` 属性を持つ場合を考えます: ```html @@ -22,11 +19,11 @@ date_updated: '2023-03-31' ``` -ブラウザは、次のステップに従います。 +ブラウザは、以下の手順に従います: 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 +31,11 @@ b. `srcset`内の各画像の効果的な幅を計算します。幅ディスク - example-large.jpg: 1600 \* 1 = 1600px -c. 効果的な幅をビューポート幅と比較します。ビューポート幅が420pxであると仮定します。ブラウザは、効果的な幅がビューポート幅以上の最小の画像を選択します。この場合、 `example-medium.jpg`を選択します。 - -1\. ピクセル密度ディスクリプタ（ `x`）: +c. 効果的な幅とビューポートの幅を比較します。ビューポートの幅が420pxであると仮定すると、ブラウザは、ビューポート幅以上の最小の効果的な幅の画像を選択します。この場合、`example-medium.jpg` を選択します。 -次の `srcset`属性を持つ場合を想定します。 +2. ピクセル密度記述子（`x`）: +次の `srcset` 属性を持つ場合を考えます: ```html @@ -47,11 +43,11 @@ c. 効果的な幅をビューポート幅と比較します。ビューポー ``` -ブラウザは、次のステップに従います。 +ブラウザは、以下の手順に従います: a. デバイスのDPR（デバイスピクセル比）を決定します。たとえば、標準ディスプレイのDPRは1であり、高解像度（Retina）ディスプレイのDPRは2以上です。 -b. デバイスのDPRを `srcset`内の `x`ディスクリプタと比較します。この場合、次のようなディスクリプタを持つ3つの画像があります。 +b. デバイスのDPRと `srcset` 内の `x` 記述子 を比較します。この場合、以下の説明子を持つ3つの画像があります: - example-1x.jpg: 1x @@ -59,9 +55,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..d2ec7cc 100644 --- a/src/content/docs/ja/density-descriptors.md +++ b/src/content/docs/ja/density-descriptors.md @@ -1,46 +1,43 @@ --- -title: 密度指定子とsrcset -description: '`srcset`内で密度指定子を使用する例' -taskInputHash: 00a6fe116a4f2366 +title: 密度記述子とSrcset +description: '`srcset`で密度記述子を使用する例' +taskInputHash: d3386e003eb5e0da lang: ja -ignore: '/* cSpell:locale ja,en*/' -date_published: '2023-03-26' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -## Srcset with Density Descriptorsとは何ですか？ +密度記述子を備えたSrcsetは、最適な画像を各ユーザーのデバイスに配信するための、簡単で効果的な方法を提供し、パフォーマンスとユーザーエクスペリエンスを向上させます。このガイドでは、Srcsetと密度記述子の基本とマークアップ例を提供します。 +##密度記述子を備えたSrcsetとは？ -密度指定子を使用したSrcsetは、1つの``要素に複数の画像ソースを指定できるHTML属性です。 密度指定子（`x`）は、ユーザーのディスプレイのピクセル密度に基づいて異なる解像度の画像を提供するために、Srcsetと組み合わせて使用されます。 +Srcsetは、単一の``要素に複数の画像ソースを指定できるように設計されたHTML属性です。密度記述子（`x`）は、ユーザーのディスプレイのピクセル密度に基づいて異なる解像度の画像を提供するために、srcsetと一緒に使用されます。 +##密度記述子を備えたSrcsetの使用時期 -## いつSrcset with Density Descriptorsを使用しますか？ +密度記述子を備えたsrcsetを使用するのは特に以下の場合に役立ちます。 +1.高DPIディスプレイ（Retinaディスプレイなど）に高解像度画像を提供しながら、標準ディスプレイに低解像度画像を提供する。 +2.各ユーザーのデバイスに最適な画像サイズを配信することで、ページのパフォーマンスを向上させる。 +##密度記述子を備えたSrcsetの実装 -密度指定子を使用したSrcsetを使用すると、以下の場合に特に便利です。 +密度記述子を備えたsrcsetを使用するには、次の手順に従います。 +1.さまざまな解像度の画像を準備してください。 +2.``要素に `srcset`属性を追加し、画像ソースとそれに対応する密度記述子を含めます。 +3.必要に応じて、画像のサイズを画面に表示されるサイズで指定する `sizes`属性を追加します。 +###マークアップ例 -1. 高解像度画像を高DPIディスプレイ（例：Retinaディスプレイ）に提供しながら、標準ディスプレイに低解像度の画像を提供する場合。 -2. 各ユーザーのデバイスに最適な画像サイズを提供して、ページのパフォーマンスを改善する場合。 - -## Srcset with Density Descriptorsの実装 - -密度指定子を使用したSrcsetを使用するには、次の手順に従います。 - -1. 異なる解像度で画像を準備します。 -2. ``要素に`srcset`属性を追加し、画像ソースと対応する密度指定子を含めます。 -3. 画面に表示される画像のサイズを指定する場合は、オプションの`sizes`属性を追加します。 - -### マークアップ例 - -以下は、マークアップで密度指定子を使用したSrcsetを実装する方法の例です。 +ここでは、マークアップで密度記述子を備えたsrcsetを実装する方法の例を示します。 ```html An example image + alt="例の画像"> ``` + + このマークアップ例には次のものが含まれます。 +- **src** : ブラウザがsrcsetをサポートしていない場合に表示されるデフォルトの画像ソース。 +- **srcset** : 画像ソースとその密度記述子（1x、2x、3x）のリスト。ブラウザは、ユーザーのディスプレイに基づいて最適な画像を選択します。 +- **alt** : アクセシビリティ目的で画像の説明。 -- **src** ：ブラウザがsrcsetをサポートしていない場合に表示されるデフォルトの画像ソース。 -- **srcset** ：画像ソースとその密度指定子（1x、2x、3x）のリスト。ブラウザは、ユーザーのディスプレイに基づいて最適な画像を選択します。 -- **alt** ：アクセシビリティの目的で画像の説明。 -以上です！ これで、密度指定子を使用したSrcsetを正常に実装し、Webサイトのパフォーマンスとユーザーエクスペリエンスを向上させました。 +以上です！これで、密度記述子を備えたsrcsetを正常に実装し、あなたのウェブサイトのパフォーマンスとユーザーエクスペリエンスを向上させました。 diff --git a/src/content/docs/ja/introduction.md b/src/content/docs/ja/introduction.md index 721670b..df3a1d6 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: 79b83d6850663960 lang: ja -ignore: '/* cSpell:locale ja,en*/' sidebar_sort_priority: 1000 -date_published: '2023-03-23' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -**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程度である可能性が高いことを知っておくべきです。現代の電話は、可読性のために320〜428px幅であると想定されています（CSSピクセル単位）、しかし、多くのデバイスピクセルが1つのCSSピクセルに対応しています。 -> ブラウザウィンドウをどんなに狭くしても、画像のサイズが変わらない場合は、[density descriptor](/ja/density-descriptors) を使用する必要があります。これは、ロゴ、アイコン、ボタンなどに適しています。 +> ブラウザウィンドウをどのように狭くしても画像のサイズが変わらない場合は、[density descriptor](/ja/density-descriptors)を使用する必要があります。これは、ロゴやアイコン、ボタンにしばしば適しています。 + +[ブレークポイント](/ja/breakpoints)を知っていますか？以下の解決策を微調整するためにこれらの数字が必要になります。少なくともメインコンテンツエリアの拡大を停止するビューポート幅ブレークポイントが必要です。 -あなたの[ブレークポイント](/ja/breakpoints)を知っていますか？以下のソリューションを微調整するためにこれらの数値が必要になります-最小限に、メインコンテンツ領域が成長を止めるビューポート幅のブレークポイントが必要です。 ### 簡単な方法 @@ -30,10 +30,10 @@ date_updated: '2023-03-31' 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..539c782 100644 --- a/src/content/docs/ja/lighthouse-performance-test.md +++ b/src/content/docs/ja/lighthouse-performance-test.md @@ -1,25 +1,22 @@ --- -title: Lighthouseによるパフォーマンスのテスト -description: Lighthouseを使用してウェブサイトのパフォーマンスをテストする手順 -taskInputHash: 7f9c623aaf7861da +title: Lighthouseでパフォーマンスをテストする +description: Lighthouseを使用してWebサイトのパフォーマンスをテストする手順 +taskInputHash: d2cc434dd3e4b8ce lang: ja -ignore: '/* cSpell:locale ja,en*/' -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -# 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が分析を完了すると、スコアやWebサイトのパフォーマンス、アクセシビリティ、その他の分野の改善に関する推奨事項が記載されたレポートが表示されます。 -5. `Lighthouse`が解析を完了すると、ウェブサイトのパフォーマンス、アクセシビリティ、その他の領域を改善するためのスコアと推奨事項が記載されたレポートが表示されます。 - -これらの手順に従うことで、`Lighthouse`を使用してウェブサイトのパフォーマンスをテストおよび最適化し、ユーザーエクスペリエンスや検索エンジンランキングを向上することができます。 +これらのステップに従うことで、Lighthouseを使ってWebサイトのパフォーマンスをテストし、最適化することができます。これにより、ユーザーエクスペリエンスや検索エンジンランキングを向上させることができます。 diff --git a/src/content/docs/ja/picture-examples.md b/src/content/docs/ja/picture-examples.md index 71affa6..090af24 100644 --- a/src/content/docs/ja/picture-examples.md +++ b/src/content/docs/ja/picture-examples.md @@ -1,54 +1,53 @@ --- -title: '`` 要素を使用した例' -description: レスポンシブイメージ、アートディレクション、異なる画像フォーマットに対して、`` 要素を使用した例を提供します。 -taskInputHash: ec17d7bd226d3aa1 +title: '`` 要素を使用する例' +description: レスポンシブ画像、アートディレクション、異なる画像フォーマットに対して、`` 要素を使用する例を提供する。 +taskInputHash: 9536d1f27d70b2a5 lang: ja -ignore: '/* cSpell:locale ja,en*/' -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -以下は、`` 要素を使用した例とその説明です。 - -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" 属性を使用して、異なる画像ソースを指定します。 `` 要素は、 `` 要素をサポートしていない古いブラウザーのフォールバックとして使用されます。 + +## ブレークポイント + +レスポンシブデザインでは、ビューポートのサイズに基づいて、Webサイトやアプリケーションのレイアウトを変更する定義された場所をブレークポイントと呼ばれます。ブレークポイントは、CSSでメディアクエリを使用して定義され、画面幅に応じて異なるスタイルを適用します。これらのブレークポイントは、 `` 要素と組み合わせて、異なる画面サイズに対して異なる画像ソースを提供するために使用できます。 + +例えば、最初の例で、`media`属性を使用して、それぞれの画像ソースを使用する画面幅を指定しています。画面幅が768ピクセル以上の場合は、 `image-large.jpg` ソースが使用されます。画面幅が768ピクセル以上で480ピクセル未満の場合は、 `image-medium.jpg` ソースが使用されます。画面幅が480ピクセル未満の場合は、 `image-small.jpg` ソースが使用されます。これにより、各デバイス向けに適切なサイズの画像を提供することで、ページの読み込み時間の短縮やユーザーエクスペリエンスの向上が図れます。 + +ブレークポイントは任意の画面サイズで定義でき、複数のブレークポイントを使用して、広範囲なデバイスに応答するレイアウトを作成できます。ブレークポイントを `` 要素と組み合わせることで、柔軟でレスポンシブなデザインを作成し、どのデバイスでも素晴らしい見た目を実現できます。 diff --git a/src/content/docs/ja/pixels-not-pixels.md b/src/content/docs/ja/pixels-not-pixels.md index 620a491..24593f4 100644 --- a/src/content/docs/ja/pixels-not-pixels.md +++ b/src/content/docs/ja/pixels-not-pixels.md @@ -1,20 +1,19 @@ --- title: px ≠ ピクセル -description: デバイスpx ≠ ブラウザpx ≠ 画像px -taskInputHash: 73be94d33f113c9c +description: デバイスのpx ≠ ブラウザのpx ≠ 画像のpx +taskInputHash: b8052e1577931156 lang: ja -ignore: '/* cSpell:locale ja,en*/' sidebar_sort_priority: 900 -date_published: '2023-03-26' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -### デバイスピクセル ≠ ブラウザpx ≠ 画像px +### デバイスのピクセル ≠ ブラウザのpx ≠ 画像のpx -Appleのおかげで、CSSとHTMLのピクセル（ `px` ）は**ほとんど常に複数のデバイス/プリンターピクセルにマップされます**。私の携帯電話の `devicePixelRatio` は3.875です。[あなたのものは？](https://www.mydevice.io/) +Appleのおかげで、CSSとHTMLのピクセル（`px`）はほとんどの場合、複数のデバイス/プリンタピクセルにマップされます。私の電話の`devicePixelRatio`は3.875です; [あなたのものは何ですか？] (https://www.mydevice.io/) -デスクトップの `devicePixelRatio` は、ブラウザーズームによって変化しますが、デフォルトは1.5です（私の `System> Display> Scale` は150％です）。 +デスクトップの`devicePixelRatio`はブラウザのズームに応じて変化しますが、デフォルト値は1.5です（私の`System> Display> Scale`は150％です）。 -画像ファイル（SVGを除く）は、ピクセルのグリッドにデコードされます。 **画像ピクセルをデバイスピクセルと1：1の比率で完璧に表示するのは非常に難しいですが、 `srcset` を使用すれば、それに十分に近づけることができます**。ただし、完璧なマッピングが必要な正当な理由がある場合は、少しのJavaScriptを使用して、ロード後にHTML要素のサイズを調整することができます。しかし、ここではそのような禁じられた技は明かされません。 +画像ファイル（SVGを除く）はピクセルのグリッドにデコードされます。 **画像ピクセルをデバイスピクセルと1：1の比率で完璧に表示するのは非常に困難ですが、`srcset`を使用すると*ほぼ同じ*結果を得ることができます**。そして、完璧なマッピングが必要な正当な理由がある場合は、少しのJavaScriptを使用して、html要素のサイズを読み込んだ後に調整することができます。ただし、ここではそのような禁じ手は明かされません。 -> 他の絶対単位（in、pc、pt、mm、cm、Q）は、CSSピクセルの数とすべてが96dpiであると想定されています。開発者は絶対単位を避けます。なぜなら、フォントサイズまたはビューポート/コンテナの寸法から派生した単位を使用する方が一般的には良いからです。ユーザーが `Accessibility > Text Size` の乗数を調整、ブラウザーズーム、またはデバイスを回転させると、ミスマッチした単位がレイアウトを壊す可能性があります。言うまでもなく、サイトを出荷する前にこれらすべてのことを行う必要があります。 +>その他の絶対値の[単位（in、pc、pt、mm、cm、Q）]（https://developer.mozilla.org/en-US/docs/Web/CSS/length）は、CSSのピクセル数に基づいて定義され、すべてが96dpiであるかのように扱われます。開発者は、フォントサイズまたはビューポート/コンテナの寸法から派生した単位を使用する方が一般的に良いため、絶対単位を避けます。ミスマッチした単位は、ユーザがその「アクセシビリティ>テキストサイズ」マルチプライヤを調整、ブラウザをズームしたり、デバイスを回転させたりすると、レイアウトを壊す可能性があります。もちろん、サイトを出荷する前にこれらのことをすべてやる必要があります。 diff --git a/src/content/docs/ja/specify-width-height.md b/src/content/docs/ja/specify-width-height.md index 549dadd..a594506 100644 --- a/src/content/docs/ja/specify-width-height.md +++ b/src/content/docs/ja/specify-width-height.md @@ -1,17 +1,16 @@ --- title: 幅と高さの使用 -description: HTMLコードで幅と高さ属性を使用するメリット -taskInputHash: 8d1d8f5ead1a1b70 +description: HTMLコードで幅と高さの属性を使用することの利点 +taskInputHash: 33f9615c5fb584f4 lang: ja -ignore: '/* cSpell:locale ja,en*/' -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -なぜHTMLに幅と高さを指定する必要があるのでしょうか？ +HTMLにwidthとheight属性を付ける理由は何ですか？ -> 画像のHTMLコードに幅と高さの属性を指定することが推奨されています。これは、ウェブブラウザーが画像のサイズを完全に読み込む前に画像の大きさを知ることを助けるためです。これにより、ブラウザーは画像に適切なスペースをウェブページに予約でき、画像が読み込まれる際にコンテンツがジャンプするのを防ぐことができます。 -> -> さらに、画像の幅と高さを指定することで、ウェブページ全体のパフォーマンスを向上させることができます。ブラウザーが事前に画像のサイズを知っていると、画像を表示するために必要なスペースをより正確に計算でき、ロード中のコンテンツの不必要な再配置や再描画を回避することができます。 -> -> 結局のところ、画像のHTMLコードに幅と高さの属性を使用することで、コンテンツの読み込みを高速化し、ビジュアル的な不具合を減少させることで、ユーザーエクスペリエンスを向上させることができます。 +> 画像のHTMLコードに幅と高さの属性を指定することが推奨されているのは、画像が完全に読み込まれる前にWebブラウザが画像のサイズを知るのに役立つからです。これにより、ブラウザは画像のために適切なスペースをWebページに予約し、画像が読み込まれる間にコンテンツが移動するのを防ぐことができます。 + +> さらに、画像の幅と高さの属性を指定すると、Webページ全体のパフォーマンスも向上する可能性があります。ブラウザが事前に画像のサイズを知っている場合、画像を表示するために必要なスペースをより正確に計算でき、コンテンツが読み込まれる際の不必要なリフローや再描画を回避することができます。 + +> 全体的に、画像に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..3289581 100644 --- a/src/content/docs/ja/when-to-use-picture.md +++ b/src/content/docs/ja/when-to-use-picture.md @@ -1,22 +1,20 @@ --- -title: '``要素の使用方法' -description: '``要素を使用すべき状況について説明します。' -taskInputHash: 09553a05f76abc73 +title: 要素を使用するタイミング +description: どのような状況で要素を使用すべきかを説明します。 +taskInputHash: 8f2c032dcbcce4b3 lang: ja -ignore: '/* cSpell:locale ja,en*/' -date_published: '2023-03-27' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -`picture`要素は、複数のバージョンの画像を提供し、特定の条件に基づいて表示するために使用されます。異なる画面サイズや解像度に最適化するために役立ち、レスポンシブWebデザインで一般的に使用されます。 -ここでは、`picture`要素を使用する特定のシナリオをいくつか紹介します。 +`picture`要素は、画像の複数バージョンを提供し、特定の条件に基づいて表示する画像のバージョンを決定するために使用されます。特に、異なる画面サイズや解像度に最適化された画像を提供するために、レスポンシブウェブデザインでよく使用されます。以下は、`picture`要素を使用する特定のシナリオです。 -* **Retinaディスプレイ：** AppleのRetinaディスプレイのような高密度なスクリーンは、高解像度に最適化されていない場合、画像がぼやけたり、ピクセル化したりする可能性があります。 `picture`要素を使用すると、通常のバージョンの2倍のピクセルを持つ画像のバージョンを提供して、Retinaディスプレイでクリアで鮮明な表示を実現できます。 +- **Retinaディスプレイ**：AppleのRetinaディスプレイのような高密度ディスプレイは画素密度が高く、高解像度に最適化されていない場合、画像がぼやけたり、粗く見えたりすることがあります。 `picture`要素を使用すると、通常のバージョンよりも2倍のピクセル数を持つバージョンの画像を提供して、Retinaディスプレイでクリアで鮮明に表示させることができます。 -* **異なるアスペクト比：** 横長と縦長のような異なるアスペクト比を持つ画像を表示する必要があるサイトを設計している場合、 `picture`要素を使用して、各アスペクト比に最適化された異なるバージョンの画像を提供できます。 +- **異なるアスペクト比**：ランドスケープとポートレートのように異なるアスペクト比で画像を表示する必要がある場合、`picture`要素を使用して、各アスペクト比に最適化された異なるバージョンの画像を提供できます。 -* **帯域制限：** 画像は大きなファイルで、特にモバイルデバイスでは多くのバンド幅を占有する可能性があります。 `picture`要素を使用すると、画面サイズが小さいデバイスまたはインターネット接続が遅いデバイス向けに、より小さいバージョンの画像を提供できます。これによりページの読み込み時間を短縮できます。 +- **帯域幅の制限**：画像は大きなファイルであり、特にモバイルデバイスでは多くの帯域幅を占有します。 `picture`要素を使用すると、画面サイズの小さいデバイスやネットワーク接続速度の遅いデバイス向けに、より小さいバージョンの画像を提供して、ページの読み込み時間を短縮できます。 -* **アートディレクションによるレイアウト：** ページの他の部分のレイアウトに応じて、画像を特定の方法で表示したい場合があります。たとえば、モバイルデバイスでは人物の顔のアップを表示したい場合がありますが、デスクトップデバイスでは広角を表示したい場合があります。 `picture`要素を使用すると、異なるレイアウトに最適化された異なるバージョンの画像を提供できます。 +- **アートディレクションレイアウト**：ページのレイアウトに応じて、画像を特定の方法で表示したい場合があります。たとえば、モバイルデバイスでは人の顔のクローズアップを表示し、デスクトップデバイスでは広い範囲を表示する場合があります。 `picture`要素を使用すると、異なるレイアウトに最適化された異なるバージョンの画像を提供できます。 -全体的に、`picture`要素は様々なユースケースに最適化された画像を提供するのに役立つ強力なツールであり、どのデバイスや画面サイズでも素晴らしい表示を実現できます。 +全般的に、 `picture`要素は、様々なユースケースに最適化された画像を提供し、どのデバイスや画面サイズでも素晴らしい見栄えを実現するための強力なツールです。 diff --git a/src/content/docs/ja/width-density.md b/src/content/docs/ja/width-density.md index c61bc38..401ebb6 100644 --- a/src/content/docs/ja/width-density.md +++ b/src/content/docs/ja/width-density.md @@ -1,22 +1,22 @@ --- -title: 幅と密度のディスクリプタ -description: '`srcset`で幅と密度のディスクリプタを使用する例' -taskInputHash: 85e0a3c7357342e1 +title: 幅と密度デスクリプタ +description: '`srcset`内で幅と密度デスクリプタを使用する例' +taskInputHash: 1a17063392ab34ef lang: ja -ignore: '/* cSpell:locale ja,en*/' -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -`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`）デスクリプタ -`srcset`で`w`ディスクリプタを使用する構文は次のようになります。 +`w`デスクリプタは、画像の幅をピクセル単位で指定するために使用されます。画像の寸法をブラウザに提供して、利用可能なスクリーンスペースに適切な画像を選択する必要がある場合に使用されます。 + +`srcset`で`w`デスクリプタを使用する構文は以下の通りです。 ```html Example Image ``` -上記の例では、3つの画像とそれぞれの幅をピクセル単位でブラウザに提供しています。ブラウザは利用可能な画面スペースに最も近い幅の画像を選択します。 -## Density（x）ディスクリプタ +上記の例では、3つの画像とそれらに対応する幅をピクセル単位でブラウザに提供しています。ブラウザは、利用可能なスクリーンスペースに最も近い幅の画像を選択します。 + +## 密度 (`x`) デスクリプタ -`x`ディスクリプタは、画像のピクセル密度を指定するために使用されます。これは、物理ピクセルとCSSピクセルの比率です。同じ画像の異なるピクセル密度のバージョンをブラウザに提供する場合に使用します。 +`x`デスクリプタは、画像の物理ピクセル数とCSSピクセル数の比率であるピクセル密度を指定するために使用されます。同じ画像の異なるピクセル密度のバージョンをブラウザに提供する必要がある場合に使用されます。 -`srcset`で`x`ディスクリプタを使用する構文は次のようになります。 +`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..cc056f3 100644 --- a/src/content/docs/sv/_roundtrip_breakpoints.txt +++ b/src/content/docs/sv/_roundtrip_breakpoints.txt @@ -1,42 +1,41 @@ --- title: Breakpoints & Images -description: Why some (but not all) breakpoints matter for your images -taskInputHash: 93c856b4f6a02850 +description: Why some (but not all) breakpoints are important for your images +taskInputHash: 5ba8955c18376f6f lang: en -ignore: '/* cSpell:locale sv,en*/' -date_published: '2023-03-26' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- ### 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 big screens require different layouts. To use `srcset` and `sizes`, we need to know at which point the layout changes. -Web developers must decide what to shrink, hide, or move around on smaller screens—or more often, what to expand, reveal, or add on larger screens. They also have very little information to go on. Is the user on a tablet, or a phone in landscape mode—or a small browser window? +Web developers must determine what should be shrunk, hidden, or moved on smaller screens—or more commonly, what should expand, reveal, or be added on larger screens. They also have very little information to go on. Is the user on a tablet or phone in landscape orientation—or on a small browser window? -We must choose an arbitrary viewport width where the layout changes. This is called a **breakpoint**. It's an arbitrary number of CSS pixels ([not device pixels](/en/pixels-not-pixels)). Polypane has a [great article](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023) on commonly used breakpoints. +We must choose an arbitrary viewport width where the layout changes. This is called a **breakpoint**. It is an arbitrary number of CSS pixels ([not device pixels](/en/pixels-not-pixels)). Polypane has an [excellent article](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023) on commonly used breakpoints. -Some images (like logos or icons or buttons) might be unaffected by layout shifts caused by these breakpoints (and work well with [srcset density descriptors](/en/density-descriptors)). +Some images (like logos or icons or buttons) may be immune to the layout changes caused by these breakpoints (and be fine with [srcset density descriptors](/en/density-descriptors)). -Main content images will be constrained by the size of their container. Typically, the main content area on a page will be constrained to a certain width on the largest screens, a `max-width`, but on small screens, the main content area will fill the entire viewport. +Main content images will be constrained by the size of their container. Typically, the main content area on a page will be confined 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 becomes harder to calculate the effective size rules because the percentage of viewport width that the image takes up will change. ### The Simple Way -That being said, don't overthink this. You'll probably be just fine with the following approximation: +That said, don't overthink this. You'll likely be just fine with the following approximate method: -1. At what size does the main column (or image container) stop growing? Up to that viewport width, we can use `100vw` for the image's size attribute to say the image takes up 100% of the viewport's width. -2. What's the maximum width the container ever reaches? We can set that as a fixed `width` for everything else. +1. At what size does the main column (or the image's container) stop growing? Up to that viewport width, we can use `100vw` for the image's `sizes` attribute to say that the image takes up 100% of the viewport's width. +2. What is the maximum width that 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: +If your answer to 1 was 700px and your answer to 2 was 800px, you could use the following `sizes` attribute: ```html ``` -> You'd think the browser could simply handle all these calculations for us based on the CSS. Unfortunately, browsers are aggressively eager to choose an image URL *before* stylesheets finish downloading. So we must do the calculations ourselves, and it serves them right if we don't get it perfect. +> One might think that the browser could handle all these calculations for us based on CSS. Unfortunately, browsers are aggressively eager to select an image URL *before* the stylesheet is downloaded. So we have to do the calculations ourselves, and they're right to penalize us if we don't get it exactly right. ===================== 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. Brytpunkter & bilder -2. Varför vissa (men inte alla) brytpunkter är viktiga för dina bilder +Metadata returned1. Breakpoints & bilder +2. Varför vissa (men inte alla) breakpoints är viktiga för dina bilder Roundtrip (isolated) prompt used: diff --git a/src/content/docs/sv/_roundtrip_browser-picks-srcset.txt b/src/content/docs/sv/_roundtrip_browser-picks-srcset.txt index e316926..4c8190b 100644 --- a/src/content/docs/sv/_roundtrip_browser-picks-srcset.txt +++ b/src/content/docs/sv/_roundtrip_browser-picks-srcset.txt @@ -1,68 +1,69 @@ --- -title: How the browser chooses -description: How the browser chooses between images listed in the srcset attribute -taskInputHash: 3fd2b41750391cb2 +title: How the browser chooses images +description: How the browser selects between images listed in the srcset attribute +taskInputHash: 634909b04349c70b lang: en +date_published: '2023-03-31' +date_modified: '2023-03-31' +date_updated: '2023-03-31' --- -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 guide, with examples of both width and density specifications and how the browser decides based on device and viewport. -- When using the `srcset` attribute in HTML, the browser follows a set of rules to choose the most appropriate image from a list of specified sources. These rules depend on both the device's display properties (resolution, pixel density) and the viewport size. The `srcset` attribute allows you to specify different images based on width (by using the `w` descriptor) or pixel density (by using the `x` descriptor). Let's go through each case with an example. +- When using the `srcset` attribute in HTML, the browser uses a set of rules to choose the most suitable image from a list of sources provided. These rules depend on both the device's screen properties (resolution, pixel density) and the viewport size. The `srcset` attribute lets you specify different images based on width (using `w` descriptors) or pixel density (using `x` descriptors). Let's go through each case with an example. -1. Width descriptor (`w`): - -Assume that we have the following `srcset` attribute: +1. Width descriptors (`w`): + +Suppose we have the following `srcset` attribute: ```html -Example Image +Example image ``` The browser follows these steps: -a. Determine the device's DPR (Device Pixel Ratio). For example, a standard display has a DPR of 1, while a high-resolution (Retina) display has a DPR of 2 or higher. +a. Determine the device's DPR (Device Pixel Ratio). For example, a standard screen has a DPR of 1, while a high-resolution (Retina) screen has a DPR of 2 or higher. -b. Calculate the effective width for each image in the sources. Multiply the width descriptor by DPR. For a device with a DPR of 1: +b. Calculate the effective width for each image in `srcset`. Multiply the width descriptor by the DPR. For a device with a DPR of 1: - example-small.jpg: 400 * 1 = 400px - - example-medium.jpg: 800 * 1 = 800px - - example-large.jpg: 1600 * 1 = 1600px -c. Compare the effective widths to the viewport width. 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 effective widths to the viewport width. Assume the viewport's 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`): +2. Pixel density descriptors (`x`): -Assume that we have the following `srcset` attribute: +Suppose we have the following `srcset` attribute: ```html -Example Image +Example image ``` The browser follows these steps: -a. Determine the 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. +a. Determine the device's DPR (Device Pixel Ratio). For example, a standard screen has a DPR of 1, while a high-resolution (Retina) screen has a DPR of 2 or higher. -b. Compare the device's DPR with the `x` descriptors in `srcset`. In this case, we have three images with the following descriptors: +b. Compare the device's DPR to the `x` descriptors in `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. 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 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 you can also use the `sizes` attribute in combination with the `srcset` attribute to provide more information about how the image displays at different viewport widths. This is particularly useful when using width descriptors (`w`). Here is an example: ```html sizes -description: An efficient and clear guide to responsive images for 2023 -taskInputHash: 87881becd1c9192b +description: An efficient and definitive guide to responsive images for 2023 +taskInputHash: a9e52d0dc65e003e lang: en -ignore: '/* cSpell:locale sv,en*/' sidebar_sort_priority: 1000 -date_published: '2023-03-23' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -**An efficient and definite guide to images for 2023** +**An Efficient and Definitive Guide to Images for 2023** -Check the sidebar for a more in-depth description. This is the quick reference for upgrading `` tags to handle modern devices in all their different sizes and pixel densities. You should know that pixels != pixels and `devicePixelRatio` is more likely to be around 3.875 than 1:1. Modern phones pretend to be 320-428px wide for legibility (in CSS-pixels), but have many device pixels per CSS-pixel. +Check the sidebar for an in-depth exploration. This is the straightforward reference for upgrading the <img> tags that handle modern devices in all their various sizes and pixel densities. You should [know that pixel != pixel](/en/pixels-not-pixels) and that `devicePixelRatio` is more likely to be around 3.875 than 1:1. Modern phones pretend to be between 320-428px wide for legibility (in CSS pixels) but have many device pixels per CSS pixel. ->If your image never changes size no matter how narrow you make the browser window, you should use a density descriptor instead. This is often appropriate for logos, icons and buttons. +> If your image never changes size no matter how narrow you make the browser window, you should use a [density descriptor instead](/en/density-descriptors). This is often suited to logos, icons, and buttons. -Do you know what your breakpoints are? You will need these numbers to fine-tune the solution below - and at a minimum the viewport width breakpoint where the main content area stops growing in width. +Do you know what your [breakpoints](/en/breakpoints) are? You need these numbers to fine-tune the solution below - and as a minimum, the breakpoint in the viewport where the main content area stops growing. -### The simple method +### The Simplest Solution ```html -Dog riding a bike - - - - -``` +Dog cycling + + + + +``` ===================== 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 sizes +2. En effektiv och bestämd guide till responsiva bilder för 2023 Roundtrip (isolated) prompt used: diff --git a/src/content/docs/sv/_roundtrip_lighthouse-performance-test.txt b/src/content/docs/sv/_roundtrip_lighthouse-performance-test.txt index 363f3e2..e472d48 100644 --- a/src/content/docs/sv/_roundtrip_lighthouse-performance-test.txt +++ b/src/content/docs/sv/_roundtrip_lighthouse-performance-test.txt @@ -1,28 +1,26 @@ --- -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 to test a website's performance with Lighthouse +taskInputHash: 5fc46a7661b601d9 lang: en -ignore: '/* cSpell:locale sv,en*/' -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- 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. -> +> Lighthouse is a tool that can be used to measure performance, accessibility, and other aspects of a website. To test your website's performance with Lighthouse, follow these steps: +> +> 1. Open Google Chrome browser and navigate to the page you want to test. +> +> 2. Click on the three dots in the top right corner of the browser window and then select "More Tools" and then "Developer Tools" or just use the keyboard shortcut "Ctrl + Shift + I" (Windows, Linux) or "Command+Option+I" (macOS). +> +> 3. In the developer tools panel, click on the Lighthouse icon on the left side of the panel or press "Ctrl+Shift+P" (Windows, Linux) or "Command+Shift+P" (macOS) to open the command menu, then type "Lighthouse" and select "Generate report". +> +> 4. In the Lighthouse dialog box, select the performance and other relevant options you want to test, then click on "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. ===================== @@ -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..dbe402a 100644 --- a/src/content/docs/sv/_roundtrip_picture-examples.txt +++ b/src/content/docs/sv/_roundtrip_picture-examples.txt @@ -1,12 +1,14 @@ --- -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, artistic direction, and different image formats +taskInputHash: f1600a1ff648d6e8 lang: en +date_published: '2023-03-31' +date_modified: '2023-03-31' +date_updated: '2023-03-31' --- -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: @@ -18,9 +20,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" attribute and the "media" attribute to specify the conditions under which each source should be used. The `` element is used as a fallback for older browsers or when the conditions specified in the `` elements are not met. -2. Example for art direction: +2. Example for artistic direction: ```html @@ -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 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 vertical screens. 3. Example for different image formats: @@ -44,13 +46,13 @@ Explanation: In this example, the `` element is used to provide differe ``` -Explanation: In this example, the `` element is used to provide different image sources for different image formats. The `` elements specify different image sources using the "srcset" 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" attribute and the "type" attribute to indicate the image format. The `` element is used as a fallback for older browsers that do not support the `` element. ## Breakpoints -In responsive design, breakpoints are used to define when the layout of a website or application should change based on the viewport size. Breakpoints are typically defined with media queries in CSS, which apply different styling depending on the screen width. These breakpoints can be used in conjunction with the `` element to provide different image sources for different screen sizes. +In responsive design, breakpoints are used to define when the layout of a website or application should change based on the size of the viewport. Breakpoints are usually 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` 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 provide appropriately sized images for each device, reducing page load times and improving the user experience. Breakpoints can be defined at any screen size, and multiple breakpoints can be used to create layouts that respond to a wide range of devices. By combining breakpoints with the `` element, you can create flexible and responsive designs that look great on any device. ===================== @@ -65,8 +67,8 @@ Also carefully translate the title and description for the article; do not use & 1. Examples using element 2. Provides examples using the element, for responsive images, art direction and different image formats -Metadata returned1. Exempel med elementet -2. Ger exempel med elementet, för responsiva bilder, konstriktning och olika bildformat. +Metadata returned1. Exempel med -elementet +2. Ger 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..7dda126 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 px ≠ browser px ≠ image px +taskInputHash: 7abf74f9841b9830 lang: en -ignore: '/* cSpell:locale sv,en*/' sidebar_sort_priority: 900 -date_published: '2023-03-26' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -### Unit pixels ≠ browser pixels ≠ image pixels +### Device Pixels ≠ Browser Pixels ≠ Image Pixels -Thanks to Apple, CSS and HTML pixels (`px`) **almost always map to several device/print pixels**. The `devicePixelRatio` on my phone is 3.875; [what's yours?](https://www.mydevice.io/) +Thanks to Apple, CSS and HTML pixels (`px`) almost always map to multiple device or printer pixels. The devicePixelRatio on my phone is 3.875; [what's yours?](https://www.mydevice.io/) -My desktop's `devicePixelRatio` changes with the browser zoom, but defaults to 1.5 (because my `System > Display > Scale` is set to 150%). +My desktop devicePixelRatio changes with browser zoom but is originally 1.5 (my `System > Display > Scale` is still 150%, though). -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. **Getting image pixels to display perfectly 1:1 with device pixels is annoyingly difficult, but with `srcset` you can get *close enough***, and with a little bit of JavaScript, you can adjust the HTML element size after loading if you have truly compelling reasons for perfect mapping, though such forbidden incantations are not disclosed here. -> Other absolute [units (in, pc, pt, mm, cm, Q)](https://developer.mozilla.org/en-US/docs/Web/CSS/length) are defined in terms of CSS pixels pretending everything is 96dpi. Developers mostly avoid absolute units because it's usually better to use units derived from font-size or viewport/container dimensions. Using incorrect units can break a layout if the user adjusts their `Accessibility > Text Size` multiplier, zooms the browser, or rotates their device. Needless to say, you should do all these things before launching your site. +> Other absolute [units (in, pc, pt, mm, cm, Q)](https://developer.mozilla.org/en-US/docs/Web/CSS/length) are defined in terms of CSS pixels, pretending that everything is 96 dpi. Developers avoid absolute units because it's generally better to use units derived from character size or viewport/container dimensions. Incorrect units can break a layout if the user adjusts their `Accessibility > Text Size` multiplier, zooms the browser, or rotates their device. Should be noted you should do all these things before you release 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 ≠ pixlar -2. Enhet px ≠ webbläsare px ≠ bild px +2. Enhetspx ≠ webbläsarpx ≠ bildpx Roundtrip (isolated) prompt used: diff --git a/src/content/docs/sv/_roundtrip_specify-width-height.txt b/src/content/docs/sv/_roundtrip_specify-width-height.txt index 1f7977b..8c91b77 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: 50c651328e5151ee lang: en -ignore: '/* cSpell:locale sv,en*/' -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -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 right amount of space on the webpage for the image, preventing content from jumping around as the image loads. +> +> Additionally, specifying the width and height attributes for images can also help improve the performance of the webpage as a whole. When a 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. +> +> Overall, using width and height attributes in HTML code for images can improve the user experience by making content faster and reducing visual disturbances. ===================== Content prompt used: @@ -28,7 +27,7 @@ Also carefully translate the title and description for the article; do not use & 2. Benefits of using width and height attributes in HTML code Metadata returned1. Använd bredd och höjd -2. Fördelarna med att använda bredd och höjd-attribut i HTML-kod +2. Fördelar med att använda bredd- och höjdattribut i HTML-koden Roundtrip (isolated) prompt used: diff --git a/src/content/docs/sv/_roundtrip_when-to-use-picture.txt b/src/content/docs/sv/_roundtrip_when-to-use-picture.txt index 05a92e7..c6b82b2 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 `picture` Element +description: Explains in which situations you should use the `picture` Element +taskInputHash: a2eec6528834f790 lang: en -ignore: '/* cSpell:locale sv,en*/' -date_published: '2023-03-27' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -The `picture` element is used to provide multiple versions of an image and determine which version to display based on certain conditions. It is particularly useful for optimizing images for different screen sizes and resolutions, and is often used in responsive web design. -Here are some specific scenarios where you may want to use the `picture` element: +The `picture` element is used to provide multiple versions of an image and determine which version 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. -* **Retina displays:** High density displays like Apple's Retina displays have higher pixel density, which means that images can appear blurry or pixelated if they are not optimized for high resolution. With the `picture` element, you can provide a version of the image that has twice as many pixels as the regular version, so it looks sharp and clear on Retina displays. +Here are some specific scenarios where you might want to use the `picture` element: -* **Different image formats:** If you are designing a website that needs to display images with different aspect ratios (e.g. landscape or portrait), you can use the `picture` element to provide different versions of the image that are optimized for each aspect ratio. +* **Retina displays:** High-density displays like Apple's Retina displays have 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 it looks sharp and clear on Retina displays. -* **Bandwidth limitations:** Images can be large files that take up a lot of bandwidth, especially on mobile devices. With the `picture` element, you can provide smaller versions of the image for devices with smaller screens or slower internet connections, which can help reduce page load times. +* **Different aspect ratios:** If you are designing a website that needs to display images with different aspect ratios (such as landscape versus portrait), you can use the `picture` element to provide different versions of the image that are optimized for each aspect ratio. -* **Artistic layout:** Sometimes you may want to present an image in a certain way depending on the layout of the rest of the page. For example, you may want to show a close-up of a person's face on mobile devices, but a wider image on desktop devices. The `picture` element allows you to provide different versions of the image that are optimized for different layouts. +* **Bandwidth 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. -In summary, the `picture` element is a powerful tool that can help you optimize your images for different use cases and ensure they look great regardless of the device or screen size they are viewed on. +* **Art-directed layouts:** Sometimes you may want to present an image in a certain way depending on the layout of the rest of the page. For example, you may want to show a close-up of a person's face on mobile devices, but a wider shot 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 a variety of use cases and ensure they look great no matter what device or screen size they are displayed on. ===================== Content prompt used: @@ -32,8 +32,8 @@ Also carefully translate the title and description for the article; do not use & 1. When to use element 2. Explains in which situations you should use the element -Metadata returned1. När du ska använda -elementet -2. Förklarar i vilka situationer du bör använda -elementet +Metadata returned1. När man ska använda `picture`-elementet +2. Förklarar i vilka situationer du bör använda `picture`-elementet Roundtrip (isolated) prompt used: diff --git a/src/content/docs/sv/_roundtrip_width-density.txt b/src/content/docs/sv/_roundtrip_width-density.txt index dac7b90..4a9ea7e 100644 --- a/src/content/docs/sv/_roundtrip_width-density.txt +++ b/src/content/docs/sv/_roundtrip_width-density.txt @@ -1,52 +1,50 @@ --- -title: Width and Density Descriptors -description: Examples of using width and density descriptors in `srcset` -taskInputHash: de07e2c59a8993ce +title: Width and Density Descriptions +description: Examples of using width and density descriptions in `srcset` +taskInputHash: b3f93e5c7aa728d8 lang: en -ignore: '/* cSpell:locale sv,en*/' -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -Understanding width (`w`) and density (`x`) descriptors in `srcset`. Use examples and markdown. +Understanding the width (w) and density (x) descriptions in `srcset`. Use examples and Markdown. -> `srcset` is an HTML attribute that allows developers to provide multiple image sources with different resolutions or pixel densities and let the browser choose the appropriate image based on the device's display characteristics. The `srcset` attribute uses a combination of `URL` and either `w` or `x` descriptors to specify the images. -## Width (`w`) Descriptor +> `srcset` is an HTML attribute that enables developers to provide multiple image sources with different resolutions or pixel densities and let the browser choose an appropriate image based on the device's screen space. The `srcset` attribute uses a combination of `URL` and `w` or `x` descriptions to specify the images. +## Width (`w`) Description -> The `w` descriptor is used to specify the width of an image in pixels. It is used when we want to provide the browser with the dimensions of an image so that it can choose the right image for the available viewport. +> The `w` description is used to specify the width of an image in pixels. It is used when we want to provide the browser with the dimensions of an image so that it can choose an appropriate image for the available screen space. -> The syntax for using the `w` descriptor in `srcset` looks like this: +> The syntax for using the `w` description in `srcset` is as follows: -````html +```html Example Image + alt="Example image"> ``` ->In the example above, we have provided the browser with three images and their corresponding widths in pixels. The browser will choose the image that has the closest width to the available viewport. - -## Density (`x`) Descriptor +> In the example above, we have provided the browser with three images and their corresponding width in pixels. The browser chooses the image with the closest width to the available screen space. +## Density (`x`) Description -> The `x` descriptor is used to specify the pixel density of an image, which is the ratio of physical pixels to CSS pixels. It is used when we want to provide the browser with different versions of the same image with different pixel densities. +> The `x` description is used to specify the pixel density of an image, which is the ratio of physical pixels to CSS pixels. It is used when we want to provide the browser with different versions of the same image with various pixel densities. -> The syntax for using the `x` descriptor in `srcset` looks like this: +> The syntax for using the `x` description in `srcset` is as follows: ```html Example Image + alt="Example image"> ``` ->In the example above, we have provided the browser with three images and their corresponding pixel densities. The browser will choose the image 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 chooses the image with the closest pixel density to the device's screen. ->Note that the `w` and `x` descriptors can be used together in the same `srcset` attribute to provide the browser with more options to choose from. +> Note that the `w` and `x` descriptions can be used together in the same `srcset` attribute to provide the browser with more options to choose from. ===================== Content prompt used: @@ -59,8 +57,8 @@ Also carefully translate the title and description for the article; do not use & 1. Width and density descriptors 2. Examples of using width and density descriptors in `srcset` -Metadata returned1. Bredd- och densitetsbeskrivare -2. Exempel på användning av bredd- och densitetsbeskrivare i `srcset` +Metadata returned1. Bredd- och densitetsbeskrivningar +2. Exempel på användning av bredd- och densitetsbeskrivningar i `srcset` Roundtrip (isolated) prompt used: diff --git a/src/content/docs/sv/breakpoints.md b/src/content/docs/sv/breakpoints.md index f3dc527..3d690a6 100644 --- a/src/content/docs/sv/breakpoints.md +++ b/src/content/docs/sv/breakpoints.md @@ -1,39 +1,39 @@ --- -title: Brytpunkter & bilder -description: Varför vissa (men inte alla) brytpunkter är viktiga för dina bilder -taskInputHash: 93c856b4f6a02850 +title: Breakpoints & bilder +description: Varför vissa (men inte alla) breakpoints är viktiga för dina bilder +taskInputHash: 5ba8955c18376f6f lang: sv -ignore: '/* cSpell:locale sv,en*/' -date_published: '2023-03-26' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- ### Bakgrund -Små skärmar och stora skärmar behöver olika layouter. För `srcset` och `sizes` behöver vi veta vid vilken punkt layouten ändras. +Små skärmar och stora skärmar kräver olika layouter. För att 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 mer vanligt, 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 landscape-läge - eller på ett litet webbläsarfönster? -Vi måste välja en godtycklig viewport-breddenhet där layouten ändras. Detta kallas en **brytpunkt**. Det är en godtycklig siffra av CSS-pixlar ([inte enhetspixlar](/sv/pixels-not-pixels)). Polypane har en [bra artikel](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023) om vanligt använda brytpunkter. +Vi måste välja en godtycklig viewport-breddenhet där layouten ändras. Detta kallas en **breakpoint**. Det är ett godtyckligt antal CSS-pixlar ([inte enhetspixlar](/sv/pixels-not-pixels)). Polypane har en [utmärkt artikel](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023) om vanligt använda breakpoints. -Några bilder (som logotyper eller ikoner eller knappar) kan vara opåverkade av layoutskift som orsakas av dessa brytpunkter (och fungera bra med [srcset density descriptors](/en/density-descriptors)). +Vissa bilder (som logotyper eller ikoner eller knappar) kan vara immuna mot layoutförändringarna som orsakas av dessa breakpoints (och vara fina 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. -Om du har mer än en kolumn vid vissa brytpunkter, blir det svårare att beräkna de effektiva dimensioneringsreglerna, eftersom den procentandel av viewportbredden som bilden tar upp kommer att ändras. +Om du har mer än en kolumn vid vissa breakpoints blir det svårare att beräkna de effektiva storleksreglerna, eftersom den procentuella delen av viewport-bredden som bilden tar upp kommer att ändras. ### Det enkla sättet -Med det sagt, överanalysera inte det här. Du kommer förmodligen att vara mycket OK med följande approximation: +Det sagt, överanalysera inte detta. Du kommer förmodligen att vara väldigt OK med följande ungefärliga metod: -1. Vid vilken storlek slutar huvudkolumnen (eller bildens behållare) att växa? Upp till den viewportbredden, kan vi använda `100vw` för bildens storleksattribut att säga att bilden tar upp 100% av viewportens bredd. -2. Vad är den maximala bredden som behållaren någonsin uppnår? Vi kan ställa in det som en fast `bredd` för allt annat. +1. Vid vilken storlek slutar huvudkolumnen (eller bildens behållare) att växa? Upp till den viewport-breddenheten kan vi använda `100vw` för bildens `sizes`-attribut för att säga att bilden tar upp 100% av viewportens bredd. +2. Vad är den maximala bredden som behållaren någonsin uppnår? Vi kan ställa in detta som en fast `width` för allt annat. Om ditt svar på 1 var 700px och ditt svar på 2 var 800px, kan du använda följande `sizes`-attribut: ```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 kan tänka sig att webbläsaren kunde hantera alla dessa beräkningar åt oss baserat på CSS. Tyvärr är webbläsarna aggressivt ivriga att välja en bild-URL *innan* stylesheeten är nedladdad. Så vi måste göra beräkningarna själva, och det tjänar 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..1a36001 100644 --- a/src/content/docs/sv/browser-picks-srcset.md +++ b/src/content/docs/sv/browser-picks-srcset.md @@ -1,20 +1,19 @@ --- -title: Hur webbläsaren väljer +title: Hur webbläsaren väljer bilder description: Hur webbläsaren väljer mellan bilder som listas i srcset-attributet -taskInputHash: ca195aa8819f20d7 +taskInputHash: 634909b04349c70b lang: sv -ignore: '/* cSpell:locale sv,en*/' -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -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 listade i srcset-attributet? Här är en steg-för-steg-guide, med exempel på både specifikationer för bredd och densitet och hur webbläsaren beslutar baserat på enhet och vyport. -- När man använder `srcset`-attributet i HTML använder webbläsaren en uppsättning regler för att välja den mest lämpliga bilden från en lista med angivna källor. Dessa regler beror på både enhetens skärminställningar (upplösning, pixeldensitet) och viewport-storlek. `Srcset`-attributet låter dig specificera olika bilder baserat på bredd (med hjälp av `w` descriptor) eller pixeldensitet (med hjälp av `x` descriptor). Låt oss gå igenom båda fallen med exempel. +- När man använder `srcset`-attributet i HTML använder webbläsaren en uppsättning regler för att välja den mest lämpliga bilden från en lista med källor som tillhandahålls. Dessa regler beror både på enhetens skärmegenskaper (upplösning, pixeldensitet) och vyportens storlek. `srcset`-attributet låter dig ange olika bilder baserat på bredd (med hjälp av `w`-beskrivare) eller pixeldensitet (med hjälp av `x`-beskrivare). Låt oss gå igenom varje fall med exempel. -1\. Breddspecifikation (`w`): +1\. Breddbeskrivare (`w`): -Antag att vi har följande `srcset`-attribut: +Anta att vi har följande `srcset`-attribut: ```html @@ -22,11 +21,11 @@ Antag att vi har följande `srcset`-attribut: ``` -Webbläsaren gör följande steg: +Webbläsaren följer 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 vanlig skärm en DPR på 1, medan en högupplöst (Retina) skärm har en DPR på 2 eller högre. -b. Beräkna den effektiva bredden för varje bild i `srcset`. Multiplicera bredddescriptorn med DPR. För en enhet med en DPR på 1: +b. Beräkna effektiv bredd för varje bild i `srcset`. Multiplicera breddbeskrivaren med DPR. För en enhet med en DPR på 1: - example-small.jpg: 400 \* 1 = 400px @@ -34,11 +33,11 @@ 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 effektiva bredder med vyportbredden. Antag att vyportbredden är 420px. Webbläsaren väljer den minsta bilden med en effektiv bredd större än eller lika med vyportbredden. I detta fall väljer den `example-medium.jpg`. -1\. Pixeldensitetsspecifikation (`x`): +1\. Pixeldensitetsbeskrivare (`x`): -Antag att vi har följande `srcset`-attribut: +Anta att vi har följande `srcset`-attribut: ```html @@ -46,11 +45,11 @@ Antag att vi har följande `srcset`-attribut: ``` -Webbläsaren gör följande steg: +Webbläsaren följer 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 vanlig skärm en DPR på 1, medan en högupplöst (Retina) skärm 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`-beskrivarna i `srcset`. I detta fall har vi tre bilder med följande beskrivare: - example-1x.jpg: 1x @@ -58,12 +57,12 @@ b. Jämför enhetens DPR med `x`-descriptorn i `srcset`. I detta fall har vi tre - example-3x.jpg: 3x -c. Välj bilden med `x`-descriptorn som är närmast enhetens DPR. För en enhet med en DPR på 1 väljer webbläsaren `example-1x.jpg`. För en enhet med en DPR på 2 väljer den `example-2x.jpg`, och så vidare. +c. Välj bilden med `x`-beskrivaren som är närmast enhetens DPR. För en enhet med en DPR på 1 väljer webbläsaren `example-1x.jpg`. För en enhet med en DPR på 2 väljer den `example-2x.jpg`, och så vidare. -Det är viktigt att notera att du också kan använda `sizes`-attributet i kombination med `srcset`-attributet för att ge mer information om hur bilden visas vid olika viewport-breder. Detta är särskilt användbart när man använder bredddescriptor (`w`). Här är ett exempel: +Det är viktigt att notera att du också kan använda `sizes`-attributet i kombination med `srcset`-attributet för att ge mer information om hur bilden visas vid olika vyportbredder. Detta är särskilt användbart när man använder breddbeskrivaren (`w`). Här är ett exempel: ```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. -- **alt**: En beskrivning av bilden för tillgänglighetsändamål. +Det här markup-exemplet inkluderar: +- **src** : Bildkällan som används om webbläsaren inte stödjer srcset. +- **srcset** : Listan med bildkällor och deras densitetsbeskrivningar (1x, 2x, 3x). Webbläsaren väljer den mest lämpliga bilden baserat på användarens skärmupplösning. +- **alt** : En beskrivning av bilden för tillgänglighetssyften. -Och det är allt! Du har framgångsrikt implementerat srcset med densitetsdescriptors, vilket förbättrar din webbplats prestanda och användarupplevelse. +Och det var allt! Du har lyckats implementera srcset med densitetsbeskrivningar 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..f756cf3 100644 --- a/src/content/docs/sv/introduction.md +++ b/src/content/docs/sv/introduction.md @@ -1,23 +1,22 @@ --- title: srcset och sizes -description: En effektiv och tydlig guide till responsiva bilder för 2023 -taskInputHash: 87881becd1c9192b +description: En effektiv och bestämd guide till responsiva bilder för 2023 +taskInputHash: a9e52d0dc65e003e lang: sv -ignore: '/* cSpell:locale sv,en*/' sidebar_sort_priority: 1000 -date_published: '2023-03-23' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- **En effektiv och bestämd guide till bilder för 2023** -Kontrollera sidofältet för en mer ingående beskrivning. Detta är snabbreferensen för att uppgradera ``-taggarna så att de kan hantera moderna enheter i alla sina olika storlekar och pixeldensiteter. Du bör veta att pixels != pixels och `devicePixelRatio` är mer troligt att vara runt 3.875 än 1:1. Moderna telefoner låtsas vara 320-428px breda för läsbarhet (i CSS-pixels), men har många enhetspixlar per CSS-pixel. +Kolla sidofältet för en grundlig undersökning. Detta är den enkla referensen för att uppgradera de <img>-taggar som hanterar moderna enheter i alla deras olika storlekar och pixel densiteter. Du bör [veta att pixel != pixel](/sv/pixels-not-pixels) och `devicePixelRatio` är mer troligt att vara runt 3.875 än 1:1. Moderna telefoner låtsas vara mellan 320-428px breda för läsbarhet (i CSS-pixlar), men har många enhetspixlar per CSS-pixel. -> Om din bild aldrig ändrar storlek, oavsett hur smalt du gör webbläsarfönstret bör du 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 [densitetsbeskrivare istället](/sv/density-descriptors). Detta lämpar sig 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 [upplösningsbrytpunkter](/sv/breakpoints) är? Du behöver dessa siffror för att finjustera lösningen nedan - och som minimum brytpunkten i visningsfönstret där huvudinnehållsytan slutar växa. -### Den enkla metoden +### Det enkla sättet ```html @@ -30,10 +29,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" /> - + - + ``` diff --git a/src/content/docs/sv/lighthouse-performance-test.md b/src/content/docs/sv/lighthouse-performance-test.md index 5c1e8f3..b0bbd59 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: 5fc46a7661b601d9 lang: sv -ignore: '/* cSpell:locale sv,en*/' -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- Hur testar du din webbplats prestanda med Lighthouse? -> Lighthouse är ett verktyg som kan användas för att mäta prestandan, tillgängligheten och andra aspekter av en webbplats. För att testa din webbplats prestanda med Lighthouse, följ dessa steg: -> -> 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 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 och 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 utvecklarverktygspanelen, klicka på Lighthouse-ikonen som finns 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. I Lighthouse-dialogrutan väljer du de prestanda- och andra relevanta alternativen 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ökmotorrankning. diff --git a/src/content/docs/sv/picture-examples.md b/src/content/docs/sv/picture-examples.md index 0b07de6..04e5f80 100644 --- a/src/content/docs/sv/picture-examples.md +++ b/src/content/docs/sv/picture-examples.md @@ -1,18 +1,17 @@ --- title: Exempel med -elementet description: >- - Ger exempel på användning av -elementet för responsiva bilder, - konstnärlig riktning och olika bildformat -taskInputHash: d2042ff600a5ac1a + Ger exempel med -elementet för responsiva bilder, konstnärlig + riktning och olika bildformat +taskInputHash: f1600a1ff648d6e8 lang: sv -ignore: '/* cSpell:locale sv,en*/' -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -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: +1\. Exempel för responsiva bilder: ```html @@ -22,9 +21,9 @@ Här är några exempel på hur man använder ``-elementet och deras f ``` -Förklaring: I det här exemplet används ``-elementet för att tillhandahålla olika bildkällor för olika skärmstorlekar. ``-elementen specifierar de olika bildkällorna genom att använda attributet "srcset" och "media" för att specificera villkoren under vilka varje källa ska användas. ``-elementet används som en fallback för äldre webbläsare eller när villkoren som specificerats i ``-elementen inte uppfylls. +Förklaring: I 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 med hjälp av "srcset"-attributet och "media"-attributet för att ange villkoren under vilka varje källa ska användas. ``-elementet används som fallback för äldre webbläsare eller när villkoren som anges i ``-elementen inte uppfylls. -2\. Exempel på konstnärlig riktning: +2\. Exempel för konstnärlig riktning: ```html @@ -34,7 +33,7 @@ Förklaring: I det här exemplet används ``-elementet för att tillhan ``` -Förklaring: I det här exemplet används ``-elementet för att tillhandahålla olika bildkällor beroende på enhetens orientering. ``-elementet med attributet "media" satt till "(orientation: landscape)" specifierar en bildkälla för breda skärmar, medan ``-elementet specifierar en bildkälla för porträttskärmar. +Förklaring: I det här exemplet används ``-elementet för att tillhandahålla olika bildkällor beroende på enhetens orientering. ``-elementet med "media"-attributet som är inställt på "(orientation: landscape)" specifierar en bildkälla för breda skärmar, medan ``-elementet specifierar en bildkälla för stående skärmar. 3\. Exempel för olika bildformat: @@ -48,12 +47,12 @@ Förklaring: I det här exemplet används ``-elementet för att tillhan ``` -Förklaring: I det här exemplet används ``-elementet för att tillhandahålla olika bildkällor för olika bildformat. ``-elementen specifierar olika bildkällor genom att använda attributen "srcset" och "type" för att specificera bildformatet. ``-elementet används som en fallback för äldre webbläsare som inte stödjer ``-elementet. +Förklaring: I det här exemplet används ``-elementet för att tillhandahålla olika bildkällor för olika bildformat. ``-elementen specifierar olika bildkällor med hjälp av "srcset"-attributet och "type"-attributet för att ange bildformatet. ``-elementet används som fallback för äldre webbläsare som inte stödjer ``-elementet. ## Brytpunkter -I responsiv design används brytpunkter för att definiera när layouten på en webbplats eller applikation ska ändras baserat på storleken på viewporten. Brytpunkter definieras vanligtvis med hjälp av media queries i CSS, som tillämpar olika stilar beroende på skärmens bredd. Dessa brytpunkter kan användas i kombination med ``-elementet för att tillhandahålla olika bildkällor för olika skärmstorlekar. +I responsiv design används brytpunkter för att definiera när layouten på en webbplats eller applikation ska ändras baserat på storleken på visningsområdet. 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 `media`-attributet för att ange skärmens bredd under vilken varje källa ska användas. När skärmens bredd är större än eller lika med 768 pixlar används källan `image-large.jpg`; när skärmens bredd ä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ärmens bredd är mindre än 480 pixlar används källan `image-small.jpg`. Detta gör det möjligt för oss att erbjuda lämpligt dimensionerade bilder för varje enhet, vilket minskar sidans laddningstider och förbättrar användarupplevelsen. -Brytpunkter kan definieras vid vilken skärmstorlek som helst, och flera brytpunkter kan användas för att skapa layouter som svarar på ett brett utbud av enheter. Genom att kombinera brytpunkter med ``-elementet kan du skapa flexibla och responsiva design som ser bra ut på alla enheter. +Brytpunkter kan definieras vid vilken skärmstorlek som helst, och flera brytpunkter kan användas för att skapa layouter som svarar på ett brett utbud av enheter. Genom att kombinera brytpunkter med ``-elementet kan du skapa flexibla och responsiva design som ser bra ut på vilken enhet som helst. diff --git a/src/content/docs/sv/pixels-not-pixels.md b/src/content/docs/sv/pixels-not-pixels.md index dc3ed90..7fb8769 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: Enhetspx ≠ webbläsarpx ≠ bildpx +taskInputHash: 7abf74f9841b9830 lang: sv -ignore: '/* cSpell:locale sv,en*/' sidebar_sort_priority: 900 -date_published: '2023-03-26' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -### Enhet pixlar ≠ webbläsare px ≠ bild px +### Enhetpixlar ≠ webbläsarpx ≠ bildpx -Tack vare Apple mappar CSS och HTML pixlar (`px`) **nästan alltid mot flera enhets-/skrivar-pixlar**. devicePixelRatio på min telefon är 3,875; [vad är din?](https://www.mydevice.io/) +Tack vare Apple mappar nästan alltid CSS- och HTML-pixlar (`px`) till flera enhets-/skrivarpixlar. devicePixelRatio på min telefon är 3,875; [vad är din?](https://www.mydevice.io/) -min desktop devicePixelRatio ändras med webbläsar-zoomet, men är standard på 1,5 (eftersom min `System > Display > Scale` är 150%). +Min stationära devicePixelRatio ändras vid webbläsarzoom, men är ursprungligen 1,5 (min `System > Display > Scale` är trots allt 150 %). -Bildfiler (exklusive SVG) avkodas till en matris av pixlar. **Det är irriterande svårt att få bildpixlar att visas perfekt i 1:1-förhållande med enhetspixel - men med `srcset` kan du komma *tillräckligt nära***, och lite Javascript kan justera html-elementets storlek efter laddning om du har verkligt motiverade skäl för att behöva den perfekta matchningen, även om sådana förbjudna konster inte avslöjas här. +Bildfiler (exklusive SVG) avkodas till en rutnät av pixlar. **Det är irriterande svårt att få bildpixlar att visas perfekt i förhållande 1:1 med enhetspixlar, men med `srcset` kan du komma *tillräckligt nära***, och med lite Javascript kan du justera html-elementstorleken efter inläsning om du har verkligt motiverade skäl för den perfekta mappningen, även om sådana förbjudna tecken inte avslöjas här. -> Andra absoluta [enheter (in, pc, pt, mm, cm, Q)](https://developer.mozilla.org/en-US/docs/Web/CSS/length) definieras i termer av antalet CSS-pixlar och låtsas att allt är 96 dpi. Utvecklare undviker absoluta enheter eftersom det brukar vara bättre att använda enheter som härstammar från teckenstorleken eller från viewport-/behållar-dimensionerna. Felaktiga enheter kan bryta en layout om användaren justerar sin `Accessibility > Text Size`-multiplikator, zoomar webbläsaren eller roterar sin enhet. Det behöver inte sägas att du bör göra alla dessa saker innan du lanserar din webbplats. +> Andra absoluta [enheter (in, pc, pt, mm, cm, Q)](https://developer.mozilla.org/sv-SE/docs/Web/CSS/length) definieras i termer av antalet CSS-pixlar och låtsas att allt är 96 dpi. Utvecklare undviker absoluta enheter eftersom det generellt sett är bättre att använda enheter som härleds från teckenstorleken eller vy-/behållardimensionerna. Felaktiga enheter kan bryta en layout om användaren justerar sin `Accessibility > Text Size`-multiplikator, zoomar webbläsaren eller roterar sin enhet. Ska väl påpekas att du bör göra alla dessa saker innan du publicerar din webbplats. diff --git a/src/content/docs/sv/specify-width-height.md b/src/content/docs/sv/specify-width-height.md index f91261f..7d7d0ce 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-koden +taskInputHash: 50c651328e5151ee lang: sv -ignore: '/* cSpell:locale sv,en*/' -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- Varför ska man 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 storleken på bilden innan den är fullständigt laddad. Detta möjliggör för webbläsaren att reservera rätt mängd utrymme på webbsidan för bilden, vilket förhindrar att innehållet hoppar runt när bilden laddas. > -> Dessutom kan att specificera bredd- och höjd-attribut för bilder också hjälpa till att förbättra prestandan för webbsidan som helhet. När en webbläsare känner till storleken på en bild i förväg kan den mer noggrant beräkna mängden utrymme som behövs för att visa bilden och undvika onödiga omladdningar eller omritningar av innehållet när det laddas. +> Dessutom kan specificering av bredd- och höjdattributen för bilder också hjälpa 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. +> Sammantaget 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 och minska visuella störningar. diff --git a/src/content/docs/sv/when-to-use-picture.md b/src/content/docs/sv/when-to-use-picture.md index 30d4794..c9e3751 100644 --- a/src/content/docs/sv/when-to-use-picture.md +++ b/src/content/docs/sv/when-to-use-picture.md @@ -1,22 +1,22 @@ --- -title: När du ska använda -elementet -description: Förklarar i vilka situationer du bör använda -elementet -taskInputHash: be2190453a34daf1 +title: När man ska använda `picture`-elementet +description: Förklarar i vilka situationer du bör använda `picture`-elementet +taskInputHash: a2eec6528834f790 lang: sv -ignore: '/* cSpell:locale sv,en*/' -date_published: '2023-03-27' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -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: +`picture`-elementet används för att tillhandahålla flera versioner av en bild och bestämmer vilken version av bilden som ska visas baserat på vissa villkor. Det är särskilt användbart för att optimera bilder för olika skärmstorlekar och upplösningar och används vanligtvis i responsiv webbdesign. -* **Retina-skärmar:** Skärmar med hög densitet som Apples Retina-skärmar har högre pixeltäthet, vilket innebär att bilder kan se suddiga eller pixelerade ut om de inte är optimerade för hög upplösning. Med `picture`-elementet kan du tillhandahålla en version av bilden som har dubbelt så många pixlar som den vanliga versionen, så att den ser skarp och tydlig ut på Retina-skärmar. +Här är några specifika scenarier där du kanske vill använda `picture`-elementet: -* **Olika bildformat:** Om du utformar en webbplats som behöver visa bilder med olika bildförhållanden (t.ex. liggande eller stående), kan du använda `picture`-elementet för att tillhandahålla olika versioner av bilden som är optimerade för varje bildförhållande. +* **Retina-skärmar:** Skärmar med hög densitet som Apples Retina-skärmar har högre pixeldensitet, vilket innebär att bilder kan se suddiga eller pixliga ut om de inte är optimerade för hög upplösning. Med `picture`-elementet 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 klar ut på Retina-skärmar. -* **Bandbreddsbegränsningar:** Bilder kan vara stora filer som tar upp mycket bandbredd, särskilt på mobila enheter. Med `picture`-elementet kan du tillhandahålla mindre versioner av bilden för enheter med mindre skärmar eller långsammare internetanslutningar, vilket kan hjälpa till att minska sidlastningstiderna. +* **Olika bildförhållanden:** Om du utformar en webbplats som behöver visa bilder med olika bildförhållanden (som liggande jämfört med 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. -* **Konstnärlig layout:** Ibland vill du kanske presentera en bild på ett visst sätt beroende på layouten för resten av sidan. Till exempel kan du vill visa en närbild av en persons ansikte på mobila enheter, men en bredare bild på stationära enheter. `Picture`-elementet låter dig tillhandahålla olika versioner av bilden som är optimerade för olika layouter. +* **Bandbreddsgränser:** Bilder kan vara stora filer som tar upp mycket bandbredd, särskilt på mobila enheter. Med `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 sidladdningstiderna. -Sammanfattningsvis är `picture`-elementet ett kraftfullt verktyg som kan hjälpa dig att optimera dina bilder för olika användningsområden och se till att de ser bra ut oavsett vilken enhet eller skärmstorlek de visas på. +* **Layouter med konstnärlig riktning:** 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 ett bredare skott på stationära enheter. `Picture`-elementet tillåter dig att tillhandahålla olika versioner av bilden som är optimerade för olika layouter. + +Sammanfattningsvis är `picture`-elementet ett kraftfullt verktyg som kan hjälpa dig att optimera dina bilder för en mängd olika användningsområden och se till att de ser bra ut oavsett vilken enhet eller skärmstorlek de visas på. diff --git a/src/content/docs/sv/width-density.md b/src/content/docs/sv/width-density.md index 4907c29..5e1d7f3 100644 --- a/src/content/docs/sv/width-density.md +++ b/src/content/docs/sv/width-density.md @@ -1,23 +1,22 @@ --- -title: Bredd- och densitetsbeskrivare -description: Exempel på användning av bredd- och densitetsbeskrivare i `srcset` -taskInputHash: de07e2c59a8993ce +title: Bredd- och densitetsbeskrivningar +description: Exempel på användning av bredd- och densitetsbeskrivningar i `srcset` +taskInputHash: b3f93e5c7aa728d8 lang: sv -ignore: '/* cSpell:locale sv,en*/' -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -Förståelse för bredd (w) och densitet (x) deskriptorer i `srcset`. Använd exempel och använd markdown. +Förståelse för bredd (w) och densitet (x) beskrivningar i `srcset`. Använd exempel och använd Markdown. -> `srcset` är en HTML-attribut som tillåter utvecklare att tillhandahålla flera bildkällor med olika upplösningar eller pixeldensiteter och låta webbläsaren välja den lämpliga bilden baserad på enhetens visningskaraktär. `srcset` attributen använder en kombination av `URL` och `w` eller `x` beskrivare för att specificera bilderna. -## Bredd (`w`) Beskrivare +> `srcset` är en HTML-attribut som gör det möjligt för utvecklare att tillhandahålla flera bildkällor med olika upplösningar eller pixeltdensiteter, och låt webbläsaren välja lämplig bild baserat på enhetens skärmutrymme. `srcset`-attributet använder en kombination av `URL` och `w` eller `x` beskrivningar för att ange bilderna. +## Bredd (`w`) beskrivning -> Beskrivaren `w` används för att specificera bredden på en bild i pixlar. Den används när vi vill tillhandahålla webbläsaren med dimensionerna på en bild så att den kan välja rätt bild för den tillgängliga skärmutrymmet. +> `w` beskrivningen används för att ange bredden av en bild i pixlar. Den används när vi vill tillhandahålla webbläsaren dimensionerna för en bild så att den kan välja lämplig bild för tillgängligt skärmutrymme. -> Syntaxen för att använda beskrivaren `w` i `srcset` ser ut som följer: +> Syntaxen för att använda `w` beskrivningen i `srcset` är som följer: -````html +```html I exemplet ovan har vi tillhandahållit webbläsaren med tre bilder och deras motsvarande pixeldensiteter. Webbläsaren kommer att välja bilden som har den närmaste pixeldensiteten till enhetens skärm. +> I exemplet ovan har vi tillhandahållit webbläsaren med tre bilder och deras motsvarande pixeltdensiteter. Webbläsaren väljer bilden med den närmaste pixeltdensiteten till enhetens skärm. -> Observera att beskrivarna `w` och `x` kan användas tillsammans i samma `srcset` attribut för att tillhandahålla webbläsaren fler alternativ att välja mellan. +> Observera att `w` och `x` beskrivningarna kan användas tillsammans i samma `srcset` attribut för att tillhandahålla webbläsaren fler alternativ att välja mellan. diff --git a/src/content/docs/zh/_roundtrip_breakpoints.txt b/src/content/docs/zh/_roundtrip_breakpoints.txt index cc20524..0617e03 100644 --- a/src/content/docs/zh/_roundtrip_breakpoints.txt +++ b/src/content/docs/zh/_roundtrip_breakpoints.txt @@ -1,42 +1,41 @@ --- title: Breakpoints and Images -description: Why some (but not all) breakpoints affect your images -taskInputHash: e220f548add04019 +description: Why some (but not all) breakpoints matter for your images +taskInputHash: 14e1e4c2eebff639 lang: en -ignore: '/* cSpell:locale zh,en*/' -date_published: '2023-03-26' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- ### Background -Small screens and large screens require different layouts. To use `srcset` and `sizes`, we need to know when the layout changes. +Small screens and large displays require different layout. For the purposes of `srcset` and `sizes`, we need to know when that layout change occurs. -Web developers must decide what content to shrink, hide, or reposition on smaller screens, or more commonly, what content to expand, reveal, or add on larger screens. However, they have very little information to go on. Is the user on a tablet, a landscape phone, or a small browser window? +Web developers have to decide what to shrink, hide, or reposition on smaller screens, or more commonly, what to expand, show or add on larger screens. They also have precious little information to go on. Is the user on a tablet, or a phone in landscape mode, or 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 at which the layout changes. It is called a **breakpoint**. It's an arbitrary number of CSS pixels ({{not device 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 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 be immune to layout changes caused by these breakpoints (and look great with [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, on the other hand, are limited by their container's size. The main content area of a page typically is only restricted to a certain width, or `max-width`, on the largest screens, but fills the viewport on smaller screens. -If there are multiple columns at some breakpoints, calculating effective sizing rules will become more difficult, as the percentage of the viewport width that images occupy will change. +If there are multiple columns at some breakpoints, then figuring out effective size rules will be more complicated, because the percentage of the viewport width taken up by the image will change. -### A simple approach +### The Simple Solution -That being said, don't overthink it. You might be perfectly happy with these approximations: +That said, don't overthink this. The following approximations may work very well: -1. At what viewport width does the main column (or image container) stop growing? Within that viewport width range, we can use `100vw` as the `sizes` value for the image, meaning the image takes up 100% of the entire viewport width. -2. What is the container's maximum width? We can set that to a fixed `width` for everything else. +1. At what size does the main column (or the image's container) stop growing? Within that viewport width range, we can use `100vw` in the `sizes` attribute to indicate that the image fills the viewport width. +2. What is the maximum width of the container? We can set it to a fixed `width` for all other scenarios. -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 for 1, and 800px for 2, then we 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 sort all of these calculations out with CSS. Unfortunately, browsers are very eager to choose the image URL before the stylesheet downloads. So we have to do the calculations ourselves, and if we don't get them perfect, well that's on them. ===================== Content prompt used: @@ -50,7 +49,7 @@ Also carefully translate the title and description for the article; do not use & 2. Why some (but not all) breakpoints matter for your images Metadata returned1. 断点和图像 -2. 为什么您的图像会受到某些（但不是全部）断点的影响 +2. 为什么对于您的图像有些（但不是全部）断点很重要 Roundtrip (isolated) prompt used: diff --git a/src/content/docs/zh/_roundtrip_browser-picks-srcset.txt b/src/content/docs/zh/_roundtrip_browser-picks-srcset.txt index 40b2f43..c186bdb 100644 --- a/src/content/docs/zh/_roundtrip_browser-picks-srcset.txt +++ b/src/content/docs/zh/_roundtrip_browser-picks-srcset.txt @@ -1,68 +1,62 @@ --- -title: How Browsers Choose Images -description: How browsers choose images in the `srcset` attribute -taskInputHash: 4f3d39e70c9edd79 +title: How browsers make their selection +description: How browsers choose different images in the srcset attribute +taskInputHash: e272a8d5895c8d2a lang: en +date_published: '2023-03-31' +date_modified: '2023-03-31' +date_updated: '2023-03-31' --- -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 different images in the `srcset` attribute? Here's a step-by-step explanation that includes the width and pixel density specifications and how browsers make their selection 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, browsers use a set of rules to choose the most appropriate image from the provided list of sources. These rules depend on the device's display characteristics (resolution, pixel density) and the size of the viewport. The `srcset` attribute allows you to specify different images based on the width (using the "w" descriptor) or pixel density (using the "x" descriptor). Let's illustrate each case with an example. -1. Width descriptor (`w`): +1. Width descriptor ("w"): Assuming we have the following `srcset` attribute: ```html - Example Image - ``` The browser will follow these 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 instance, a standard display has a DPR of 1, while high-resolution (Retina) displays have a 2 or higher DPR. -b. Calculate the effective width of each image in the `srcset`. Multiply the width descriptor by the DPR. For a device with DPR of 1: +b. Calculate the effective width for each image in the `srcset`. Multiply the width descriptor by the DPR. For devices with a DPR of 1: - example-small.jpg: 400 * 1 = 400px - - example-medium.jpg: 800 * 1 = 800px - - 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 widths with the viewport width. Assuming a viewport width of 420px, the browser will choose the smallest image with an effective width greater than or equal to the viewport width. In this case, it will select `example-medium.jpg`. -2. Pixel density descriptor (`x`): +2. Pixel density descriptor ("x"): Assuming we have the following `srcset` attribute: ```html - Example Image - ``` The browser will follow these 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 instance, a standard display has a DPR of 1, while high-resolution (Retina) displays have a 2 or higher DPR. -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 following descriptors: - example-1x.jpg: 1x - - example-2x.jpg: 2x - - example-3x.jpg: 3x -c. Choose the image with the `x` descriptor closest to the device's DPR. For a device with DPR of 1, the browser will choose `example-1x.jpg`. For a device with DPR of 2, it will choose `example-2x.jpg` and so on. +c. Choose the image with an `x` descriptor closest to the device's DPR. For 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: +It's important to note that you can also use the `sizes` attribute in conjunction with the `srcset` attribute to provide additional information on how to display images at different viewport widths. This is particularly useful when using the width descriptor ("w"). Here's an example: ```html - ` element. Density descriptors (`x`) are used in conjunction with srcset to provide images of different resolutions based on the user's display pixel density. +Srcset is an HTML attribute designed to allow you to specify multiple image sources for a single `` element. Density descriptors (`x`) are used in combination with srcset to provide images of different resolutions based on the pixel density of the user's device. ## When to Use Srcset with Density Descriptors -Srcset with density descriptors is especially useful in the following scenarios: +Using srcset with density descriptors is particularly useful in the following situations: -1. Providing high-resolution images for high-DPI displays such as Retina displays, while providing low-resolution images for standard displays. -2. Improving page performance by providing the most suitable image size for each user's device. +1. Providing high-resolution images for high-DPI displays such as Retina displays while providing low-resolution images for standard displays. +2. Improving page performance by delivering the most suitable image size for each user's device. ## Implementing Srcset with Density Descriptors To use srcset with density descriptors, follow these steps: -1. Prepare your images at different resolutions. -2. Add the `srcset` attribute to the `` element, including the image sources and their corresponding density descriptors. -3. (Optional) Add the `sizes` attribute to specify how the image will be displayed on the screen. +1. Prepare images of different resolutions. +2. Add the `srcset` attribute to the `` element, including image sources and their corresponding density descriptors. +3. Add the `sizes` attribute (optional) to specify the size of the image displayed on the screen. -### Markup Example +### Example Code -Here is an example of how to implement srcset with density descriptors in your markup: +Here's an example of how to implement srcset with density descriptors in your code: ```html An example image + alt="This is an example image"> ``` -This markup example includes: +This example code includes: -- **src**: The default image source that is used if the browser doesn't support srcset. -- **srcset**: A list of image sources and their density descriptors (1x, 2x, 3x) to enable selection of the most appropriate image based on the user's display. -- **alt**: A description of the image to be used for accessibility purposes. +- **src**: The default image source that will be used if the browser doesn't support srcset. +- **srcset**: A list of image sources and their density descriptors (1x, 2x, 3x). The browser will choose the most suitable image based on the user's device. +- **alt**: A description of the image to improve accessibility. -That's it! You have successfully implemented srcset with density descriptors, improving your website's performance and user experience. +And that's it! You've successfully implemented srcset with density descriptors, improving the performance and user experience of your website. ===================== Content prompt used: @@ -58,8 +57,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/zh/_roundtrip_introduction.txt b/src/content/docs/zh/_roundtrip_introduction.txt index a08cad9..219bc3c 100644 --- a/src/content/docs/zh/_roundtrip_introduction.txt +++ b/src/content/docs/zh/_roundtrip_introduction.txt @@ -1,40 +1,40 @@ --- -title: srcset and sizes -description: Efficient and subjective guide to responsive images in 2023 -taskInputHash: ff8b517c77f33d91 +title: '`srcset` and ` sizes`' +description: An efficient and subjective 2023 responsive images guide +taskInputHash: 1a14a2c1741447e4 lang: en -ignore: '/* cSpell:locale zh,en*/' sidebar_sort_priority: 1000 -date_published: '2023-03-23' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -**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 subjective 2023 responsive images guide** + +Check the sidebar for more in-depth information. This is a quick reference to upgrade your `` tag to handle images on modern devices with various sizes and pixel densities. You should [know that pixels != pixels](/en/pixels-not-pixels), and `devicePixelRatio` is more likely to be greater than 3.875 than 1:1. Modern phone screens pretend to be 320-428 pixels wide (in CSS pixels) for readability, but each CSS pixel has many device pixels. + +> If your image does not change size no matter how small you make the browser window, you should use [density descriptors](/en/density-descriptors). This is typically the case for logos, icons, and buttons. + +Do you know where your [breakpoints](/en/breakpoints) are? You'll need these numbers to fine-tune the solutions below -- at least the viewport width breakpoint at which the main content area stops growing. + + +### The simple way + +```html +Dog riding a bicycle + + + + ``` ===================== @@ -48,8 +48,8 @@ Also carefully translate the title and description for the article; do not use & 1. srcset & sizes 2. An Efficient and Opinionated Guide to Responsive Images for 2023 -Metadata returned1. srcset 和 sizes -2. 2023 年响应式图像的高效且主观的指南 +Metadata returned1. `srcset` 和 ` 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..3546cac 100644 --- a/src/content/docs/zh/_roundtrip_lighthouse-performance-test.txt +++ b/src/content/docs/zh/_roundtrip_lighthouse-performance-test.txt @@ -1,28 +1,27 @@ --- -title: Testing Website Performance with Lighthouse -description: Steps for testing website performance using Lighthouse -taskInputHash: 2da1cc6b426bea24 +title: Testing Performance with Lighthouse +description: Steps for testing website performance with Lighthouse +taskInputHash: 85f40795eba2722d lang: en -ignore: '/* cSpell:locale zh,en*/' -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -How to test your website performance using Lighthouse? - -> Lighthouse is a tool for measuring website performance, accessibility, and other aspects. To use Lighthouse to test your website's performance, follow these steps: -> -> 1. Open the Google Chrome web browser and go to the page you want to test. -> -> 2. Click the three dots in the top right corner of the browser window and select "More tools" and then "Developer tools" or use the keyboard shortcut "Ctrl+Shift+I" (Windows, Linux) or "Command+Option+I" (macOS). -> -> 3. In the Developer Tools panel, click the Lighthouse icon on the left-hand side of the panel, or press "Ctrl+Shift+P" (Windows, Linux) or "Command+Shift+P" (macOS) to open the command menu, then type "Lighthouse" and select "Generate report". -> -> 4. In the Lighthouse dialog box, select the performance and other relevant options you want to test, and click "Generate report". -> -> 5. Once Lighthouse has finished analyzing, you will see a report that includes suggestions and ratings for improving your website's performance, accessibility, and other areas. -> -> By following these steps, you can use Lighthouse to test and optimize your website's performance, which can help improve its user experience and search engine rankings. +How to Test Your Site's Performance with Lighthouse? + +> Lighthouse is a tool that measures a website's performance and accessibility, among other things. To test your website's performance with Lighthouse, follow these steps: + +1. Open the Google Chrome web browser and navigate to the page you want to test. + +2. Click on the three dots in the upper-right corner of the browser window, then select "More tools," and then "Developer tools," or 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 open the command menu by pressing "Ctrl+Shift+P" (Windows, Linux) or "Command+Shift+P" (macOS), then type "Lighthouse" and select "Generate report." + +4. In the Lighthouse dialog, select the performance and other relevant options you want to test, then click "Generate report." + +5. Once Lighthouse completes the analysis, you will see a report with scores and recommendations for improvement, helping to enhance user experience and search engine rankings in terms of website performance and accessibility. + +By following these steps, you can use Lighthouse to test and optimize your website's performance, helping to enhance user experience and search engine rankings. ===================== Content prompt used: @@ -35,7 +34,7 @@ Also carefully translate the title and description for the article; do not use & 1. Test performance with Lighthouse 2. Steps on how to test a website's performance using Lighthouse -Metadata returned1. 通过 Lighthouse 测试性能 +Metadata returned1. 使用 Lighthouse 测试性能 2. 使用 Lighthouse 测试网站性能的步骤 diff --git a/src/content/docs/zh/_roundtrip_picture-examples.txt b/src/content/docs/zh/_roundtrip_picture-examples.txt index 30c6c97..d668ae6 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 for responsive images, art direction, and different image formats. +taskInputHash: db767a28ef4c3e7f lang: en +date_published: '2023-03-31' +date_modified: '2023-03-31' +date_updated: '2023-03-31' --- -Here are some examples of using the `` element and their explanations: +Here are a few 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 + an image ``` -Explanation: In this example, the `` element is used to provide different image sources for different screen sizes. The `` element uses the `srcset` and `media` attributes to specify different image sources and the conditions for using each source. When the conditions specified in the `` element are not met, the `` element is used as a fallback image for older browsers. +Explanation: In this example, the `` element is used to provide different image sources for different screen sizes. The `` element uses the "srcset" and "media" attributes to specify different image sources and the conditions under which each source should be used. The `` element serves as a fallback for older browsers or when none of the conditions specified in the `` element are met. 2. Example of art direction: ```html - An image + + an image ``` -Explanation: In this example, the `` element is used to provide different image sources based on the device orientation. The `` element uses the `media` attribute and sets it to `(orientation: landscape)` to provide a landscape-oriented image source, while the `` element provides a portrait-oriented image source. +Explanation: In this example, the `` element is used to provide different image sources based on the device's orientation. The "media" attribute in the `` element is set to "(orientation: landscape)" to specify the source for wide screens, while the `` element specifies the source for vertical screens. 3. Example of different image formats: ```html + - An image + + an image ``` -Explanation: In this example, the `` element is used to provide different image sources for different image formats. The `` element uses the `srcset` and `type` attributes to specify different image sources and their image formats, while the `` element is used as a fallback image for older browsers that do not support the `` element. +Explanation: In this example, the `` element is used to provide different image sources for different image formats. The `` element uses the "srcset" and "type" attributes to specify different image sources and their formats, while the `` element serves as a fallback for older browsers that do not support the `` element. ## Breakpoints -In responsive design, breakpoints are used to define how the layout of a website or application should change as the viewport size changes. Breakpoints are usually defined using media queries in CSS and apply different styles based on screen width. These breakpoints can be combined with the `` element to provide different image sources for different screen sizes. +In responsive design, breakpoints are used to define how the layout of a website or application changes based on viewport size. Media queries are typically used in CSS to define breakpoints and apply different styles based on screen width. These breakpoints can be used in conjunction with the `` element to provide different image sources for different screen sizes. -For example, in the first example above, we used the `media` attribute to specify 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 screen width at which each source should be used. When the screen size is greater than or equal to 768 pixels, the "image-large.jpg" source is used; when the screen size is greater than or equal to 480 pixels but less than 768 pixels, the "image-medium.jpg" source is used; and when the screen size is less than 480 pixels, the "image-small.jpg" source is used. This allows us to provide appropriately sized images for each device, reducing page load time and improving the user experience. -Breakpoints can be defined for any screen size and multiple breakpoints can be used to create layouts that respond to a wide range of devices. By combining breakpoints with the `` element, flexible and responsive designs can be created that look great on any device. +Breakpoints can be defined at any screen size and multiple breakpoints can be used to create layouts that are responsive to a variety of devices. By combining breakpoints with the `` element, you can create designs that are both flexible and responsive, suitable for any device. ===================== Content prompt used: @@ -60,8 +66,8 @@ Also carefully translate the title and description for the article; do not use & 1. Examples using element 2. Provides examples using the element, for responsive images, art direction and different image formats -Metadata returned1. 使用 元素的例子 -2. 提供使用 元素的示例，用于可响应式图片、艺术向导和不同的图片格式。 +Metadata returned1. 使用元素的示例 +2. 提供使用元素的示例，以适应响应式图像、美术方向和不同的图像格式。 Roundtrip (isolated) prompt used: diff --git a/src/content/docs/zh/_roundtrip_pixels-not-pixels.txt b/src/content/docs/zh/_roundtrip_pixels-not-pixels.txt index 2290d12..c01ac67 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 px ≠ Image pixels +taskInputHash: f34199807208fe6d lang: en -ignore: '/* cSpell:locale zh,en*/' sidebar_sort_priority: 900 -date_published: '2023-03-26' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- ### 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/) +Thanks to Apple, CSS and HTML pixels (`px`) **almost always map to multiple device/printer pixels**. My phone has a `devicePixelRatio` of 3.875; [What's yours?](https://www.mydevice.io/) -My desktop's device pixel ratio changes with browser zoom, but is by default 1.5 (after all, my `System > Display > Scale` is set to 150%). +My desktop device changes `devicePixelRatio` on browser zoom, but defaults to 1.5 (after all, 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 SVGs) decode into a pixel grid. **It's hard to display image pixels perfectly in a 1:1 ratio with device pixels, but `srcset` gets close enough**. If you have a real need for this perfect mapping, some javascript can adjust HTML element sizes after loading, although we won't expose this illicit technique 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 CSS pixels and pretend everything is calculated based on 96dpi. Developers avoid absolute units because it's best to use units derived from font size or viewport/container size. Mismatched units can break layouts if the user increases their `Accessibility > Text Size` multiplier, zooms the browser, or rotates their device. Needless to say, make all these adjustments before releasing your site. ===================== Content prompt used: @@ -31,7 +30,7 @@ Also carefully translate the title and description for the article; do not use & 2. Device px ≠ browser px ≠ image px Metadata returned1. px ≠ 像素 -2. 设备像素 ≠ 浏览器像素 ≠ 图像像素 +2. 设备像素 ≠ 浏览器 px ≠ 图像像素 Roundtrip (isolated) prompt used: diff --git a/src/content/docs/zh/_roundtrip_specify-width-height.txt b/src/content/docs/zh/_roundtrip_specify-width-height.txt index 3839cef..c11d3e3 100644 --- a/src/content/docs/zh/_roundtrip_specify-width-height.txt +++ b/src/content/docs/zh/_roundtrip_specify-width-height.txt @@ -1,20 +1,19 @@ --- -title: Using Width and Height Attributes -description: Benefits of using width and height attributes in HTML code -taskInputHash: 0c2998c00c21d9e0 +title: Using Width and Height +description: The benefits of using width and height attributes in HTML code +taskInputHash: fc09485a1718bc38 lang: en -ignore: '/* cSpell:locale zh,en*/' -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -Why should you set width and height in HTML? - -> It is recommended to set the width and height attributes of images in HTML code because it allows web browsers to know the size of the image before it is fully loaded. This allows the browser to reserve the appropriate space for the image on the webpage, thereby preventing content from jumping around while the image loads. -> -> Additionally, specifying the width and height attributes of an image can help improve the overall performance of a webpage. When the browser knows the size of the image beforehand, it can more accurately calculate the space needed to display the image and avoid unnecessary reflow or repaint. -> -> Overall, using width and height attributes for images in HTML code can enhance the user experience, make content load faster, and reduce visual disruptions. +Why should you 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 web browsers to know the size of an image before it is fully loaded. This allows the browser to reserve the appropriate amount of page space to display the image, preventing content from jumping around while the image loads. +> +> Additionally, specifying the width and height attributes for images also helps improve the overall performance of the web page. When the browser knows the size of an image beforehand, it can more accurately calculate the amount of space needed to display the image and avoid unnecessary reflows or repaints during content loading. +> +> In summary, using width and height attributes in HTML code can improve the user experience by making 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..1ae27f1 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: 30942e0367cf4db3 lang: en -ignore: '/* cSpell:locale zh,en*/' -date_published: '2023-03-27' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -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 often used in responsive web design. -Here are some specific cases when you may want to use the `picture` element: +Here are some specific 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 like Apple's Retina displays have a higher pixel density, which means that if images are not optimized for high resolutions, they will appear blurry or pixelated. Using the `picture` element, you can provide versions of the image with double the pixels so that they appear crisp on Retina displays. -* **Different Aspect Ratios:** If you have a site that needs to display images with different aspect ratios, such as landscape versus portrait, you can use the `picture` element to provide different versions of the image optimized for each aspect ratio. +* **Different Aspect Ratios:** If you’re designing a 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. -* **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 take up a lot of bandwidth, especially on mobile devices. Using the `picture` element, you can provide smaller versions of the image for smaller screens or slower connections, reducing page load times. -* **Art Direction Layout:** Sometimes you may want to display images in a specific way based on the layout of the rest of the page. For example, you may want to show a close-up of a person's face on a mobile device, but a wider shot on desktop devices. The `picture` element allows you to provide different versions of the image optimized for different layouts. +* **Art Direction Layers:** 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 might want to display a close-up of a face on mobile devices but a wider shot on desktop devices. The `picture` element allows you to provide different versions of the image 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 what device or screen size they are viewed on. ===================== Content prompt used: @@ -33,8 +32,8 @@ Also carefully translate the title and description for the article; do not use & 1. When to use element 2. Explains in which situations you should use the element -Metadata returned1. 何时使用``元素 -2. 解释何时应使用``元素的特定情况 +Metadata returned1. 何时使用 `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..300bb5e 100644 --- a/src/content/docs/zh/_roundtrip_width-density.txt +++ b/src/content/docs/zh/_roundtrip_width-density.txt @@ -1,19 +1,18 @@ --- title: Width and Pixel Density Descriptors -description: Example usage of width and pixel density descriptors in `srcset` -taskInputHash: 43b724a74c26793e +description: 'Example usage of width and pixel density descriptors in `srcset`' +taskInputHash: 3a0a87b5336b96a7 lang: en -ignore: '/* cSpell:locale zh,en*/' -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -Learn about width (`w`) and pixel density (`x`) descriptors in `srcset`. Use examples and Markdown. +Learn about the width (`w`) and pixel density (`x`) descriptors in `srcset`. Provide 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 `URL` and `w` or `x` descriptors to specify the image. +>`srcset` is an HTML attribute that allows developers to provide multiple image sources with different resolutions or pixel densities for the browser to choose from based on the display characteristics of the device. The `srcset` attribute uses combinations of `URL`s and `w` or `x` descriptors to specify images. ## 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 image width in pixels when we want to provide the size of the image for the browser to choose. >The syntax for using the `w` descriptor in `srcset` is as follows: @@ -25,12 +24,11 @@ Learn about width (`w`) and pixel 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 widths. The browser will choose the image with the closest pixel width to the available screen space. - ->In the above example, we have provided the browser with three images and their respective widths in pixels. The browser will select the image that is closest to the available screen space. ## Pixel Density (`x`) Descriptor ->The `x` descriptor is used to specify the pixel density of the image, which is the ratio of physical pixels to CSS pixels. It is used when we want to provide the browser with different versions of the same image with different pixel densities. +>The `x` descriptor is used to specify the pixel density of the image, which is the ratio of physical pixels to CSS pixels, when we want to provide different versions of the same image with different pixel densities for the browser to choose from. >The syntax for using the `x` descriptor in `srcset` is as follows: @@ -42,10 +40,9 @@ Learn about width (`w`) and pixel 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 choose the image with the closest pixel density to the device's screen. ->In the above example, we have provided the browser with three images and their 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: @@ -59,7 +56,7 @@ Also carefully translate the title and description for the article; do not use & 2. Examples of using width and density descriptors in `srcset` Metadata returned1. 宽度和像素密度描述符 -2. 在`srcset`中使用宽度和像素密度描述符的示例 +2. `srcset`使用宽度和像素密度描述符的示例 Roundtrip (isolated) prompt used: diff --git a/src/content/docs/zh/breakpoints.md b/src/content/docs/zh/breakpoints.md index ac75e99..3631d3f 100644 --- a/src/content/docs/zh/breakpoints.md +++ b/src/content/docs/zh/breakpoints.md @@ -1,41 +1,38 @@ --- title: 断点和图像 -description: 为什么您的图像会受到某些（但不是全部）断点的影响 -taskInputHash: e220f548add04019 +description: 为什么对于您的图像有些（但不是全部）断点很重要 +taskInputHash: 14e1e4c2eebff639 lang: zh -ignore: '/* cSpell:locale zh,en*/' -date_published: '2023-03-26' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- ### 背景 -小屏幕和大屏幕需要不同的布局。为了使用`srcset`和`sizes`，我们需要知道布局在什么时候改变。 +小屏幕和大显示器需要不同的布局。为了 `srcset` 和 `sizes` 的目的，我们需要知道布局何时发生变化。 -Web开发人员必须决定在较小的屏幕上收缩、隐藏或重新定位什么内容，或者更常见的是，在较大的屏幕上扩展、揭示或添加什么内容。 然而，他们拥有的信息非常少。用户是在平板上、手机横屏模式还是小型浏览器窗口上？ +Web 开发人员必须决定在较小的屏幕上缩小、隐藏或重新定位什么，或更常见的是在较大的屏幕上扩展、展示或添加什么。他们也没有太多的信息可以上手。用户是在平板电脑还是手机横屏模式下，还是在一个小的浏览器窗口中？ -我们必须选择一个任意的视口宽度，其中布局发生更改。这被称为**断点**。它是一个CSS像素的任意数量（[不是设备像素](/zh-cn/pixels-not-pixels)）。Polypane有一篇[很棒的文章](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023) ，讲述了常用的断点。 +我们必须选择一个布局更改的任意视口宽度。它被称为 **断点**。它是 CSS 像素的任意数量（[不是设备像素](/zh/pixels-not-pixels)）。 Polypane 有一篇关于常用断点的 [精彩文章](https://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/#the-breakpoints-to-develop-on-in-2023)。 -一些图片（如标志、图标或按钮）可能会免于这些断点引起的布局移位（并且可以使用[srcset密度描述符](/zh-cn/density-descriptors)）。 +有些图像（例如标识、图标或按钮）可能对这些断点造成的布局变化免疫（并且在 [srcset 密度描述符](/zh/density-descriptors)下很好）。 -主要内容图像将受到其容器大小的限制。通常，页面的主要内容区域在最大屏幕上会限制为某个宽度，即`max-width`，但在小屏幕上，主要内容区域将填满整个视口。 +主要内容图像将受到其容器大小的限制。通常页面的主要内容区域在最大屏幕上只限宽到一定程度，即 `max-width`，但在小屏幕上，主要内容区域将填满整个视口。 -如果在某些断点上有多列，则计算有效的大小规则将变得更加困难，因为图片所占视口宽度的百分比将发生变化。 +如果在某些断点处有多列，则计算有效的大小规则将变得更加困难，因为图像占据的视口宽度的百分比将会变化。 ### 简单方法 -话虽如此，不要过分思考。您可能对以下近似值非常满意： +也就是说，不要过分思考这个问题。以下近似值可能非常适用： -1. 主列（或图像容器）停止增长的尺寸是多少？ 在此视口宽度范围内，我们可以使用`100vw`作为图像的`sizes`属性，表示该图像占用整个视口宽度的100%。 -2. 容器的最大宽度是多少？ 我们可以将其设置为其余所有内容的固定`width`。 +1. 主列（或图像的容器）在哪个尺寸上停止增长？在那个视口宽度范围内，我们可以使用 `100vw` 来设置图片的 `sizes` 属性，以表明图像占据视口宽度的 100%。 +2. 容器的最大宽度是多少？我们可以将其设置为固定的 `width`，适用于其他所有情况。 -例如，如果你的第一步答案是700像素，第二步答案是800像素，则可以使用以下`sizes`属性： +如果你的答案是 1 是 700px，答案 2 是 800px，则可以使用以下 `sizes` 属性： ```html - + ``` - - -> 您可能认为浏览器可以根据CSS为我们很好地处理所有这些计算。不幸的是，浏览器过于热衷于在样式表下载之前*优先*选择图像URL。因此，我们必须自己进行计算，如果我们搞不清楚，那就该怪它们了。 +> 你会认为浏览器可以根据 CSS 对所有这些计算进行排序。不幸的是，浏览器非常渴望在样式表下载之前就选择图像 URL。所以我们不得不自己进行计算，如果我们没有完美地得到它，那么这就是他们的问题。 diff --git a/src/content/docs/zh/browser-picks-srcset.md b/src/content/docs/zh/browser-picks-srcset.md index ab96ac9..b57cea9 100644 --- a/src/content/docs/zh/browser-picks-srcset.md +++ b/src/content/docs/zh/browser-picks-srcset.md @@ -1,69 +1,58 @@ --- -title: 浏览器如何选择 -description: 浏览器如何在`srcset`属性中选择图片 -taskInputHash: bee7d600f9a7bbb2 +title: 浏览器如何做出选择 +description: 浏览器如何在srcset属性中选择不同图片 +taskInputHash: e272a8d5895c8d2a lang: zh -ignore: '/* cSpell:locale zh,en*/' -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -浏览器如何在`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）显示器具有2或更高的DPR。 + +b. 计算`srcset`中每个图像的有效宽度。将宽度描述符乘以DPR。对于具有DPR为1的设备： + +- example-small.jpg：400 * 1 = 400px +- example-medium.jpg：800 * 1 = 800px +- example-large.jpg：1600 * 1 = 1600px + +c. 将有效宽度与视口宽度进行比较。假设视口宽度为420px。浏览器将选择具有有效宽度大于或等于视口宽度的最小图像。在这种情况下，它将选择`example-medium.jpg`。 + +1.像素密度描述符（`x`）： + +假设我们有以下`srcset`属性： + +```html +Example Image +``` + +浏览器将按以下步骤操作： + +a. 确定设备的DPR（设备像素比）。例如，标准显示具有DPR为1，而高分辨率（Retina）显示器具有2或更高的DPR。 + +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**: 图像的说明，用于无障碍目的。 +此示例代码包括： +- **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..e075c4b 100644 --- a/src/content/docs/zh/introduction.md +++ b/src/content/docs/zh/introduction.md @@ -1,38 +1,39 @@ --- -title: srcset 和 sizes -description: 2023 年响应式图像的高效且主观的指南 -taskInputHash: ff8b517c77f33d91 +title: '`srcset` 和 ` sizes`' +description: 一个高效且具有主观性的2023响应式图片指南 +taskInputHash: 1a14a2c1741447e4 lang: zh -ignore: '/* cSpell:locale zh,en*/' sidebar_sort_priority: 1000 -date_published: '2023-03-23' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -**2023 年图像高效且主观的指南** +**高效且具主观性的2023图片指南** -查看侧边栏进行深入了解。这是快速参考，用于升级那些 `` 标签以处理现代设备的各种尺寸和像素密度。您应该[知道像素不等于像素](/zh/pixels-not-pixels)，而 `devicePixelRatio` 更有可能是 3.875，而不是 1:1。现代手机为了可读性会假装宽度为 320-428px（在 CSS 像素中），但是有许多设备像素支持每个 CSS 像素。 +查看侧边栏以进行深入了解。这是快速参考，可升级``标记以在各种不同尺寸和像素密度的现代设备上处理图片。您应该[知道像素!=像素](/zh/pixels-not-pixels)，而且`devicePixelRatio`更可能大于3.875，而不是1:1。现代手机为了易读性而伪装为320-428像素宽度（在CSS像素中），但每个CSS像素有许多设备像素。 -> 如果您的图像永远不会更改大小，无论您将浏览器窗口缩小到多窄，您应该使用[分辨率描述符](/zh/density-descriptors)代替。这通常适用于徽标、图标和按钮。 +> 如果您的图片不管把浏览器窗口缩到多小都不改变大小，您应该使用[密度描述符](/zh/density-descriptors)。这通常适用于徽标、图标和按钮。 -您知道您的[断点](/zh/breakpoints)是什么吗？您需要这些数字来微调以下解决方案-至少是主内容区域停止增长的视口宽度断点。 +您知道您的[断点](/zh/breakpoints)在哪里吗？您需要这些数字来微调以下解决方案-至少是主内容区域停止增长的视口宽度断点。 -### 简单方法 +### 简单的方法 ```html 狗骑自行车 + sizes="(max-width: 700px) 100vw, 800px" alt="Dog riding a bicycle" /> - + - + ``` diff --git a/src/content/docs/zh/lighthouse-performance-test.md b/src/content/docs/zh/lighthouse-performance-test.md index ae8f4eb..e8ead11 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: 85f40795eba2722d lang: zh -ignore: '/* cSpell:locale zh,en*/' -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -如何使用 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..f9d3fa8 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: db767a28ef4c3e7f lang: zh -ignore: '/* cSpell:locale zh,en*/' -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -以下是使用``元素的一些示例和它们的解释： +以下是使用``元素的几个例子及其说明： -1. 响应式图片示例: +1.响应式图片的示例： ```html - 一张图片 + 一个图片 ``` -解释：在这个例子中，``元素用于为不同的屏幕尺寸提供不同的图像源。``元素使用`"srcset"`属性和`"media"`属性来指定在哪些条件下使用每个源。当``元素中指定的条件未达成时，``元素将作为一个回退选项呈现给旧的浏览器。 +说明：在此示例中，``元素用于为不同的屏幕大小提供不同的图像源。``元素使用“srcset”属性和“media”属性指定不同的图像源，并指定每个源应使用的条件。``元素用作旧版浏览器或未满足``元素中指定条件时的备用方法。 -2. 艺术指导示例： +2.美术方向的示例： ```html - 一张图片 + + 一个图片 ``` -解释：在这个例子中，``元素被用于根据设备的屏幕方向提供不同的图像源。``元素中的`"media"`属性指定横屏宽屏幕的图像源，而``元素则指定竖屏设备的图像源。 +说明：在此示例中，``元素用于根据设备的方向提供不同的图像源。``元素中的“media”属性设置为“(orientation: landscape)”指定宽屏的图像源，而``元素指定了纵向屏幕的图像源。 -3. 不同图片格式的示例： +3.不同图像格式的示例： ```html + - 一张图片 + + 一个图片 ``` -解释：在这个例子中，``元素用于为不同的图片格式提供不同的图像源。``元素使用`"srcset"`属性和`"type"`属性来指定图片格式。``元素则作为``元素在旧的浏览器中的回退选项。 +说明：在此示例中，``元素用于为不同的图像格式提供不同的图像源。``元素使用“srcset”属性和“type”属性指定不同的图像源，并指定图像格式。``元素用作不支持``元素的旧版浏览器的备用方法。 ## 断点 -在响应式设计中，断点被用于定义当视口尺寸改变时网站或应用程序的布局应该如何改变。断点通常使用CSS中的媒体查询进行定义，这些查询基于屏幕宽度应用不同的样式。这些断点可以与``元素相结合，为不同的屏幕尺寸提供不同的图像源。 +在响应式设计中，使用断点来定义网站或应用程序的布局在视口大小基础上如何更改。CSS中通常使用媒体查询来定义断点，根据屏幕宽度应用不同的样式。这些断点可以与``元素结合使用，为不同的屏幕大小提供不同的图像源。 -例如，在上面的第一个示例中，我们使用了`media`属性来指定每个来源应在哪个屏幕宽度下使用。当屏幕宽度大于或等于768像素时，将使用`image-large.jpg`源；当屏幕宽度大于或等于480像素但小于768像素时，将使用`image-medium.jpg`源；当屏幕宽度小于480像素时，将使用`image-small.jpg`源。这样可以为每个设备提供适当尺寸的图像，减少页面加载时间，提高用户体验。 +例如，在上面的第一个示例中，我们使用`media`属性指定了每个源应在其中使用的屏幕宽度。当屏幕宽度大于或等于768像素时，将使用`image-large.jpg`源；当屏幕宽度大于或等于480像素但小于768像素时，将使用`image-medium.jpg`源；当屏幕宽度小于480像素时，将使用`image-small.jpg`源。这使我们能够为每个设备提供适当大小的图像，缩短页面加载时间，改善用户体验。 -断点可以在任何屏幕尺寸下定义，并且可以使用多个断点创建响应多种设备的布局。通过将断点与``元素相结合，您可以创建灵活的、响应式的设计，它们可以在任何设备上呈现出色。 +断点可以在任何屏幕尺寸下定义，可以使用多个断点来创建响应各种设备的布局。通过将断点与``元素相结合，您可以创建具有灵活和响应性的设计，适用于任何设备。 diff --git a/src/content/docs/zh/pixels-not-pixels.md b/src/content/docs/zh/pixels-not-pixels.md index eb192de..7235d74 100644 --- a/src/content/docs/zh/pixels-not-pixels.md +++ b/src/content/docs/zh/pixels-not-pixels.md @@ -1,20 +1,19 @@ --- title: px ≠ 像素 -description: 设备像素 ≠ 浏览器像素 ≠ 图像像素 -taskInputHash: af021fc2c7e6641e +description: 设备像素 ≠ 浏览器 px ≠ 图像像素 +taskInputHash: f34199807208fe6d lang: zh -ignore: '/* cSpell:locale zh,en*/' sidebar_sort_priority: 900 -date_published: '2023-03-26' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -### 设备像素 ≠ 浏览器像素 ≠ 图像像素 +### 设备像素 ≠ 浏览器 px ≠ 图片 px -感谢苹果，CSS 和 HTML 的像素 (`px`) **几乎总是映射到多个设备/打印机像素上**。我的手机设备像素比是 3.875；[你的是多少？](https://www.mydevice.io/) +多亏了 Apple 公司，CSS 和 HTML 像素（`px`）**几乎总是映射到多个设备/打印机像素**。我的手机上的 `devicePixelRatio` 是3.875; [你的呢？](https://www.mydevice.io/) -我的台式机的设备像素比在浏览器缩放时会改变，但默认为 1.5（毕竟我的 `系统 > 显示 > 缩放` 设为 150%）。 +我的桌面设备在浏览器缩放时会更改 `devicePixelRatio`，但默认值为1.5（毕竟我的 `系统 > 显示 > 缩放` 是150%）。 -图像文件（不包括 SVG）解码为像素网格。**让图像像素以 1:1 比例完美显示在设备像素上非常困难，但通过 `srcset`，你可以得到足够接近于完美的比例**。如果你确实有需要完美映射的正当理由，一些 JavaScript 可以在加载后调整 HTML 元素大小，但此处不会透露此禁忌艺术的细节。 +图像文件（不包括 SVG）解码成像素网格。**让图像像素以1：1比例与设备像素完美显示非常困难，但使用 `srcset` 可以达到足够接近的效果**，如果您有确实需要这种完美映射的理由，一些 Javascript 代码可以在加载后调整 HTML 元素大小，尽管此处不会公开这种非法的技巧。 -> 其他绝对单位（如 in、pc、pt、mm、cm、Q）是用 CSS 像素数表示的，假装一切都是 96dpi。开发人员会避免使用绝对单位，因为通常最好使用从字体大小或视口/容器尺寸派生的单位。如果用户调整了他们的 `辅助功能 > 文本大小` 倍数，缩放浏览器或旋转他们的设备，不匹配的单位可能会破坏布局。不必说，你应该在发布网站之前执行所有这些操作。 +> 其他的绝对单位（`in`、`pc`、`pt`、`mm`、`cm`、`Q`）根据 CSS 像素数量定义，并假装一切都是按 96dpi 计算的。开发人员避免使用绝对单位，因为最好使用从字体大小或视口/容器尺寸派生出来的单位。如果用户调整其 `辅助功能 > 文字大小` 倍增器、缩放浏览器或旋转其设备，不匹配的单位可能会破坏布局。不用说，您应该在发布您的网站之前进行所有这些调整。 diff --git a/src/content/docs/zh/specify-width-height.md b/src/content/docs/zh/specify-width-height.md index da28c72..5daf9a4 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: fc09485a1718bc38 lang: zh -ignore: '/* cSpell:locale zh,en*/' -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -你为什么应该在HTML中设置宽度和高度？ +为什么应该在HTML中添加宽度和高度？ -> 建议在HTML代码中为图像设置宽度和高度属性，因为它可以帮助Web浏览器在完全加载图像之前知道图像的大小。这使得浏览器可以为图像在网页上预留适当的空间，从而防止内容在图像加载时跳动。 -> -> 此外，为图像指定宽度和高度属性还可以帮助提高网页的整体性能。当浏览器事先知道图像的大小时，它可以更准确地计算显示图像所需的空间，并避免不必要的回流或重绘内容。 -> -> 总的来说，通过在HTML代码中为图像使用宽度和高度属性可以提高用户体验，使内容加载更快，减少视觉故障。 +> 建议为图像在HTML代码中添加宽度和高度属性，因为这有助于网页浏览器在完全加载图像之前就知道图像的大小。这使得浏览器可以保留适当数量的页面空间来展示图像，从而防止内容在图像加载时跳动。 +> +> 此外，为图像指定宽度和高度属性还有助于提高网页的整体性能。当浏览器事先知道图像的大小时，它可以更准确地计算显示图像所需的空间，并避免在加载内容时不必要的重流或重绘。 +> +> 总的来说，使用HTML代码中的宽度和高度属性可以通过使内容加载更快和减少视觉故障来提高用户体验。 diff --git a/src/content/docs/zh/when-to-use-picture.md b/src/content/docs/zh/when-to-use-picture.md index c1dcde4..32b0f42 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: 30942e0367cf4db3 lang: zh -ignore: '/* cSpell:locale zh,en*/' -date_published: '2023-03-27' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -`picture`元素用于提供多个图像版本，并根据特定条件确定显示哪个版本的图像。它特别适用于针对不同的屏幕尺寸和分辨率优化图像，并常用于响应式网页设计。 +`picture` 元素用于提供多个版本的图像，并根据特定条件确定要显示哪个版本的图像。它特别适用于优化不同屏幕大小和分辨率的图像，并常用于响应式网页设计中。 -以下是一些你可能想要使用`picture`元素的特定情况： +以下是一些你可能想要使用 `picture` 元素的具体情况： -* **视网膜显示器：** 高密度屏幕（如苹果的Retina显示器）具有更高的像素密度，这意味着如果它们未经过高分辨率优化，则图像可能会变得模糊或像素化。使用`picture`元素，您可以提供一个具有正常版本两倍像素的图像版本，因此在Retina显示器上看起来清晰明了。 +* **Retina 显示器：** 高密度屏幕像 Apple 的 Retina 显示器具有更高的像素密度，这意味着如果图像没有针对高分辨率进行优化，它们就会看起来模糊或像素化。使用 `picture` 元素，您可以提供具有两倍像素的图像版本，以便在 Retina 显示器上看起来清晰。 -* **不同的纵横比：** 如果您设计需要显示不同纵横比（如横向对比纵向）的图像的站点，可以使用`picture`元素提供针对每个纵横比进行优化的不同版本的图像。 +* **不同的宽高比：** 如果您正在设计需要显示具有不同宽高比（如横向 vs. 纵向）的图像的站点，则可以使用 `picture` 元素为每个宽高比进行优化的不同版本的图像。 -* **带宽限制：** 图像可以是大文件，占用大量带宽，尤其是在移动设备上。使用`picture`元素，您可以为具有较小屏幕或较慢互联网连接的设备提供较小的图像版本，从而有助于减少页面加载时间。 +* **带宽限制：** 图像可以是大文件，占用大量带宽，尤其是在移动设备上。使用 `picture` 元素，您可以为屏幕较小或网速较慢的设备提供较小的图像版本，从而减少页面加载时间。 -* **美术指导布局：** 有时您可能希望根据页面其余部分的布局以某种特定方式呈现图像。例如，您可能希望在移动设备上展示某个人的面部特写，但在桌面设备上展示更广阔的景象。`picture`元素允许您提供针对不同布局进行优化的不同图像版本。 +* **艺术指导图层：** 有时，您可能希望根据页面的其余部分的布局以某种方式呈现图像。例如，您可能希望在移动设备上显示一个人脸的特写镜头，但在桌面设备上显示更宽的镜头。`picture` 元素允许您提供为不同布局进行优化的不同版本的图像。 -总的来说，`picture`元素是一个功能强大的工具，可以帮助您优化图像，以适应各种用例，并确保无论在什么设备或屏幕尺寸上查看，它们都看起来很棒。 +总体而言，`picture` 元素是一个强大的工具，可以帮助您为各种用例优化图像，并确保无论在哪种设备或屏幕大小上查看图像，它们都能够表现出色。 diff --git a/src/content/docs/zh/width-density.md b/src/content/docs/zh/width-density.md index 912dab0..ad98175 100644 --- a/src/content/docs/zh/width-density.md +++ b/src/content/docs/zh/width-density.md @@ -1,21 +1,20 @@ --- title: 宽度和像素密度描述符 -description: 在`srcset`中使用宽度和像素密度描述符的示例 -taskInputHash: 43b724a74c26793e +description: '`srcset`使用宽度和像素密度描述符的示例' +taskInputHash: 3a0a87b5336b96a7 lang: zh -ignore: '/* cSpell:locale zh,en*/' -date_published: '2023-03-24' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -了解在`srcset`中的宽度（w）和像素密度（x）描述符。使用示例并使用Markdown。 +了解`srcset`中的宽度（w）和像素密度（x）描述符。给出例子并使用Markdown。 ->`srcset`是一个HTML属性，允许开发人员提供具有不同分辨率或像素密度的多个图像源，并让浏览器根据设备的显示特性选择适当的图像。`srcset`属性使用`URL`和`w`或`x`描述符的组合来指定图像。 +>`srcset`是HTML属性，允许开发人员提供具有不同分辨率或像素密度的多个图像源，让浏览器根据设备的显示特性选择适当的图像。`srcset`属性使用`URL`和`w`或`x`描述符的组合来指定图像。 ## 宽度（`w`）描述符 ->`w`描述符用于指定图像的宽度，以像素为单位。当我们想要提供浏览器可以选择适合可用屏幕空间的图像的维度时，就会使用它。 +>`w`描述符用于指定以像素为单位的图像宽度。当我们希望提供浏览器要选择的图像的尺寸时，使用它。 ->在`srcset`中使用`w`描述符的语法如下： +>在`srcset`中使用`w`描述符的语法如下所示： ```html Example Image ``` +>在上面的示例中，我们已经提供了浏览器三个图像和它们对应的像素宽度。浏览器将选择最接近可用屏幕空间的宽度的图像。 - ->在上面的例子中，我们已经向浏览器提供了三个图像及其相应的宽度（以像素为单位）。浏览器将选择最接近可用屏幕空间的图像。 ## 像素密度（`x`）描述符 ->`x`描述符用于指定图像的像素密度，即物理像素与CSS像素的比率。 当我们想要向浏览器提供具有不同像素密度的相同图像的不同版本时，我们会使用它。 +>`x`描述符用于指定图像的像素密度，即物理像素与CSS像素的比率。当我们希望为浏览器提供具有不同像素密度的同一图像的不同版本时使用它。 ->在`srcset`中使用`x`描述符的语法如下： +>在`srcset`中使用`x`描述符的语法如下所示： ```html Example Image ``` +>在上面的示例中，我们已经提供了浏览器三个图像和它们对应的像素密度。浏览器将选择最接近设备屏幕的像素密度的图像。 ->在上面的例子中，我们已经向浏览器提供了三个图像及其相应的像素密度。浏览器将选择最接近设备屏幕的像素密度的图像。 - ->请注意，`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..dc0b14d 100644 --- a/src/content/imgstyle/de/_roundtrip_create-a-carousel.txt +++ b/src/content/imgstyle/de/_roundtrip_create-a-carousel.txt @@ -1,29 +1,27 @@ --- -title: Create a Carousel +title: How to create a carousel description: How to create a carousel on a website -taskInputHash: 230c6ecf771bf3cb +taskInputHash: 22b09be9534d79fc lang: en -ignore: '/* cSpell:locale de,en*/' -date_published: '2023-03-29' +date_published: '2023-03-31' date_modified: '2023-03-31' date_updated: '2023-03-31' --- -Here are the general steps to create an image carousel on a website: +Here are the general steps to creating an image carousel on a website: +1. Create a new HTML file for your image carousel. You can name it something like "carousel.html". +2. Insert the HTML structure into your file. This usually includes the head section with a title and any necessary CSS stylesheets, and the body section where you add the actual carousel. +3. Create a container for your carousel with a `
` tag. Give it an ID or a class so you can style it later. +4. Add individual image elements within the container with the `` tag. You can assign the source attribute the file path or URL of the image and add alt text or captions as needed. +5. Add navigation buttons to your carousel with `