实现响应式图像的四种技术策略 #8174
Merged
实现响应式图像的四种技术策略 #8174
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
|
||
|  | ||
|
|
||
| Creating a responsive image isn’t rocket science. I’m sure you are already created many of those using CSS. However, the flexible size is only one factor when it comes to responsive images. | ||
| 创建响应式图像没有火箭科学那么深奥，我相信你已经使用 CSS 创建了很多类似工具。然而，当谈到响应式图像时，灵活的尺寸只是其中的一个因素。 |
There was a problem hiding this comment.
Suggested change
| 创建响应式图像没有火箭科学那么深奥，我相信你已经使用 CSS 创建了很多类似工具。然而，当谈到响应式图像时，灵活的尺寸只是其中的一个因素。 | |
| 创建响应式图像并不像是火箭科学那么的深奥。我相信你已经使用 CSS 创建了很多类似工具了，但说起响应式图像，它那灵活尺寸，其实只是其中的一个因素而已。 |
| * **Fluid-image method**: By default, images are not fluid. They tend to crop or stay at a fixed size when screen size changes. With the fluid-image method, you can insert an image into a responsive layout and give the ability to stretch or scrunch as necessary. | ||
| * **Art Direction method**: Art direction is a common issue we face when dealing with different screen sizes. We can address this by altering image content, cropping down the image, or using a different image based on users’ screen size. | ||
| * **Type-switching method**: There are some browsers and devices that don’t support modern image types like WebP. The type-switching method can be used to switch between image types allowing you to serve the best content to the user based on device and browser compatibility. | ||
| * **基于设备像素方法**：这种方法可以使用同一图片的多个版本，不同的分辨率，根据用户的屏幕分辨率选择最合适的一个来渲染。这种方法比较适合不渲染高分辨率图像的设备。 |
There was a problem hiding this comment.
Suggested change
| * **基于设备像素方法**：这种方法可以使用同一图片的多个版本，不同的分辨率，根据用户的屏幕分辨率选择最合适的一个来渲染。这种方法比较适合不渲染高分辨率图像的设备。 | |
| * **基于设备像素方法**：这种方法使用同一图片的多个版本。它会以不同的分辨率来选择最合适的一个图片来渲染。这种方法比较适合不渲染高分辨率图像的设备。 |
|
|
||
| > If we push to load a high-density image in a low-density display, it will result in a very poor user experience and a waste of resources. So, we’ll use different images for various device pixel-ratios. | ||
| > 如果我们在低密度的显示器中推送加载高密度的图片，会导致用户体验非常差，而且浪费资源。因此，我们将针对不同的设备像素比例使用不同的图像。 |
There was a problem hiding this comment.
Suggested change
| > 如果我们在低密度的显示器中推送加载高密度的图片，会导致用户体验非常差，而且浪费资源。因此，我们将针对不同的设备像素比例使用不同的图像。 | |
| > 如果我们在低密度的显示器中推送加载高密度的图片，可能会导致用户体验非常差，而且很可能会浪费资源。因此，我们需要针对不同的设备像素比例使用不同的图像。 |
|
|
||
| > However, this calculation might cause some issues when the viewport is too large or too small. | ||
| > 但是，当视口太大或太小时，此计算可能会引起一些问题。 |
There was a problem hiding this comment.
Suggested change
| > 但是，当视口太大或太小时，此计算可能会引起一些问题。 | |
| > 但是视图太大或太小时，此计算就可能会引起一些问题。 |
|
|
||
| You’ll notice the regular `\<img>` tag as the final nested tag of the `\<picture>` element, which is crucial to make this code snippet work. It will be used as a replacement when conditions in the media query are not matching and as a backup on browsers that do not support the `\<picture>` element. | ||
| 你会注意到常规的 `<img>` 标签作为 `<picture>` 元素的最后一个嵌套标签，这对于使这段代码工作至关重要。当媒体查询中的条件不匹配时，它将被用作替换，并在不支持 `<picture>` 元素的浏览器上作为备份。 |
There was a problem hiding this comment.
Suggested change
| 你会注意到常规的 `<img>` 标签作为 `<picture>` 元素的最后一个嵌套标签，这对于使这段代码工作至关重要。当媒体查询中的条件不匹配时，它将被用作替换，并在不支持 `<picture>` 元素的浏览器上作为备份。 | |
| 你会注意到常规的 `<img>` 标签是 `<picture>` 元素的最后一个嵌套标签。使用 `<img>` 元素对于代码是否能够正常工作至关重要 —— 当媒体查询中的条件不匹配时，它将被用作替换，并且会兼容不支持 `<picture>` 元素的浏览器。 |
| @@ -140,19 +140,19 @@ For example, the below code contains 2 modern image types and `gif `image. First | |||
| </picture> | |||
| ``` | |||
|
|
|||
| You can also use chrome DevTools to emulate this to see how your image will look like when the browser isn't supporting the modern image types. | |||
| 你也可以使用 chrome DevTools 来模拟这一点，看看当浏览器不支持现代图像类型时，你的图像会是什么样子。 | |||
There was a problem hiding this comment.
Suggested change
| 你也可以使用 chrome DevTools 来模拟这一点，看看当浏览器不支持现代图像类型时，你的图像会是什么样子。 | |
| 你也可以使用 Chrome DevTools 来模拟这一点，看看当浏览器不支持现代图像类型时，你的图像会是什么样子。 |
|
|
||
| Today we can find different techniques to maintain the right quality and size. This article will explore those approaches and help you find the one that best fits your project. | ||
| 今天，我们可以找到不同的技术来保持正确的质量和尺寸。本文将探讨这些方法，帮助你找到最适合你项目的方法。 |
There was a problem hiding this comment.
Suggested change
| 今天，我们可以找到不同的技术来保持正确的质量和尺寸。本文将探讨这些方法，帮助你找到最适合你项目的方法。 | |
| 今天，我们有了不同的技术帮助我们加载合适的质量和尺寸的图片。本文将探讨这些方法，帮助你找到最适合你项目的方法。 |
个人感觉，可以发现，这里可以改成，有了，会更通顺
| * **Art Direction method**: Art direction is a common issue we face when dealing with different screen sizes. We can address this by altering image content, cropping down the image, or using a different image based on users’ screen size. | ||
| * **Type-switching method**: There are some browsers and devices that don’t support modern image types like WebP. The type-switching method can be used to switch between image types allowing you to serve the best content to the user based on device and browser compatibility. | ||
| * **基于设备像素方法**：这种方法可以使用同一图片的多个版本，不同的分辨率，根据用户的屏幕分辨率选择最合适的一个来渲染。这种方法比较适合不渲染高分辨率图像的设备。 | ||
| * **流体图像方法**：默认情况下，图像不是流体。当屏幕尺寸改变时，它们往往会裁切或保持固定的尺寸。使用流体图像方法，你可以将图像插入到响应式布局中，并可以根据需要拉伸或收缩。 |
There was a problem hiding this comment.
Suggested change
| * **流体图像方法**：默认情况下，图像不是流体。当屏幕尺寸改变时，它们往往会裁切或保持固定的尺寸。使用流体图像方法，你可以将图像插入到响应式布局中，并可以根据需要拉伸或收缩。 | |
| * **流体图像方法**：默认情况下，图像不是流体，因而当屏幕尺寸改变时，它们往往会被裁切或仍然保持一个固定的尺寸。使用流体图像方法，我们就可以将图像放入到响应式布局中，并根据需要拉伸或收缩。 |
|
@PassionPenguin 感谢校对 |
added 2 commits
March 10, 2021 12:01
|
@PassionPenguin 感谢校对 @lsvih 完成 1 次校对 |
|
校对认领 |
|
@Chorer 好的~ |
Chorer
reviewed
Mar 11, 2021
|
|
||
| > Sometimes depending on the device type, we need to adjust the image quality and even the image type for a better user experience. | ||
| > 有时根据设备类型的不同，我们需要调整图像质量甚至图像类型，以获得更好的用户体验。 |
There was a problem hiding this comment.
Suggested change
| > 有时根据设备类型的不同，我们需要调整图像质量甚至图像类型，以获得更好的用户体验。 | |
| > 有时根据不同的设备类型，我们需要调整图像质量甚至图像类型，以获得更好的用户体验。 |
| * **Art Direction method**: Art direction is a common issue we face when dealing with different screen sizes. We can address this by altering image content, cropping down the image, or using a different image based on users’ screen size. | ||
| * **Type-switching method**: There are some browsers and devices that don’t support modern image types like WebP. The type-switching method can be used to switch between image types allowing you to serve the best content to the user based on device and browser compatibility. | ||
| * **基于设备像素方法**：这种方法使用同一图片的多个版本。它会以不同的分辨率来选择最合适的一个图片来渲染。这种方法比较适合不渲染高分辨率图像的设备。 | ||
| * **流体图像方法**：默认情况下，图像不是流体，因而当屏幕尺寸改变时，它们往往会被裁切或仍然保持一个固定的尺寸。使用流体图像方法，我们就可以将图像放入到响应式布局中，并根据需要拉伸或收缩。 |
There was a problem hiding this comment.
Suggested change
| * **流体图像方法**：默认情况下，图像不是流体，因而当屏幕尺寸改变时，它们往往会被裁切或仍然保持一个固定的尺寸。使用流体图像方法，我们就可以将图像放入到响应式布局中，并根据需要拉伸或收缩。 | |
| * **流式图像方法**：默认情况下，图像不是流式的，因而当屏幕尺寸改变时，它们往往会被裁切或仍然保持一个固定的尺寸。使用流式图像方法，我们就可以将图像放入到响应式布局中，并根据需要拉伸或收缩。 |
| * **Type-switching method**: There are some browsers and devices that don’t support modern image types like WebP. The type-switching method can be used to switch between image types allowing you to serve the best content to the user based on device and browser compatibility. | ||
| * **基于设备像素方法**：这种方法使用同一图片的多个版本。它会以不同的分辨率来选择最合适的一个图片来渲染。这种方法比较适合不渲染高分辨率图像的设备。 | ||
| * **流体图像方法**：默认情况下，图像不是流体，因而当屏幕尺寸改变时，它们往往会被裁切或仍然保持一个固定的尺寸。使用流体图像方法，我们就可以将图像放入到响应式布局中，并根据需要拉伸或收缩。 | ||
| * **艺术指导方法**：艺术指导是我们在处理不同屏幕尺寸时普遍采用的方法。我们可以通过改变图片内容，裁减图片，或者根据用户的屏幕尺寸使用不同的图片来解决这个问题。 |
There was a problem hiding this comment.
Suggested change
| * **艺术指导方法**：艺术指导是我们在处理不同屏幕尺寸时普遍采用的方法。我们可以通过改变图片内容，裁减图片，或者根据用户的屏幕尺寸使用不同的图片来解决这个问题。 | |
| * **艺术指导方法**：艺术指导是我们在处理不同屏幕尺寸时普遍采用的方法。我们可以通过改变图片内容，裁剪图片，或者根据用户的屏幕尺寸使用不同的图片来解决这个问题。 |
|
|
||
| Since you understand the approaches and situations where they most suit, let’s see how we can implement those methods. | ||
| 既然你了解了这些方法和它们最适合的情况，那就让我们看一下如何实现这些方法。 |
There was a problem hiding this comment.
Suggested change
| 既然你了解了这些方法和它们最适合的情况，那就让我们看一下如何实现这些方法。 | |
| 既然你了解了这些方法和它们最适用的场景，那就让我们看一下如何实现这些方法。 |
|
|
||
| As mentioned earlier, there are several ways to implement responsive images, and it’s important to know the best ways to implement them to get the maximum from your effort. | ||
| 如上文所述，有多种实现响应式图像的方法。了解这些方法并在工作项目中进行使用，从而让你的项目获得最大收益是非常重要的。 |
There was a problem hiding this comment.
Suggested change
| 如上文所述，有多种实现响应式图像的方法。了解这些方法并在工作项目中进行使用，从而让你的项目获得最大收益是非常重要的。 | |
| 如上文所述，有多种实现响应式图像的方法。了解这些方法的最佳实现方式，从而让你的项目获得最大收益是非常重要的。 |
|
|
||
| We can overcome this issue by adding max and min values for image width in pixels to mark upper and lower bounds. | ||
| 我们可以通过添加以像素为单位的图像宽度的最大值和最小值来标记上限和下限，从而解决这个问题。 |
There was a problem hiding this comment.
Suggested change
| 我们可以通过添加以像素为单位的图像宽度的最大值和最小值来标记上限和下限，从而解决这个问题。 | |
| 我们可以通过给图像添加以像素为单位的最大宽度和最小宽度来设置上限和下限，从而解决这个问题。 |
|
|
||
| The main idea behind Art Direction is to display different images based on the screen sizes of the device. We can address this issue by switching to `picture `tag instead of using `img `tag since it allows to provide images in multiple ratios or multiple focus points when viewed on different devices. | ||
| 艺术指导方法的主要思想是根据设备的屏幕大小显示不同的图像。我们可以通过切换到 `picture` 标签而不是使用 `img` 标签来解决这个问题，因为它允许在不同的设备上查看时提供多比例或多焦点的图像。 |
There was a problem hiding this comment.
Suggested change
| 艺术指导方法的主要思想是根据设备的屏幕大小显示不同的图像。我们可以通过切换到 `picture` 标签而不是使用 `img` 标签来解决这个问题，因为它允许在不同的设备上查看时提供多比例或多焦点的图像。 | |
| 艺术指导方法的核心是根据设备的屏幕大小显示不同的图像。我们可以通过切换到 `picture` 标签而不是使用 `img` 标签来做到这一点，因为它允许在不同的设备上查看时提供多比例或多焦点的图像。 |
|
|
||
| You’ll notice the regular `\<img>` tag as the final nested tag of the `\<picture>` element, which is crucial to make this code snippet work. It will be used as a replacement when conditions in the media query are not matching and as a backup on browsers that do not support the `\<picture>` element. | ||
| 你会注意到常规的 `<img>` 标签是 `<picture>` 元素的最后一个嵌套标签。使用 `<img>` 元素对于代码是否能够正常工作至关重要 —— 当媒体查询中的条件不匹配时，它将被用作替换，并且会兼容不支持 `<picture>` 元素的浏览器。 |
There was a problem hiding this comment.
Suggested change
| 你会注意到常规的 `<img>` 标签是 `<picture>` 元素的最后一个嵌套标签。使用 `<img>` 元素对于代码是否能够正常工作至关重要 —— 当媒体查询中的条件不匹配时，它将被用作替换，并且会兼容不支持 `<picture>` 元素的浏览器。 | |
| 你会注意到常规的 `<img>` 标签是 `<picture>` 元素的最后一个嵌套标签。使用 `<img>` 元素对于代码是否能够正常工作至关重要 —— 当媒体查询中的条件不匹配时，它将作为备选方案，并且会兼容不支持 `<picture>` 元素的浏览器。 |
|
|
||
| With the rapid development of technologies, different types of modern image types like `avif`, `webp`are introduced day by day. Although these image types provide a high user experience, there are some browsers that don’t support those image types yet. | ||
| 随着技术的飞速发展，`avif`、`webp` 等不同类型的现代图像类型日渐被引入。虽然这些图像类型提供了更高的用户体验，但是有些浏览器还不支持这些图像类型。 |
There was a problem hiding this comment.
Suggested change
| 随着技术的飞速发展，`avif`、`webp` 等不同类型的现代图像类型日渐被引入。虽然这些图像类型提供了更高的用户体验，但是有些浏览器还不支持这些图像类型。 | |
| 随着技术的飞速发展，`avif`、`webp` 等不同类型的现代图像类型日渐被引入。虽然它们提供了更高的用户体验，但是有些浏览器还不支持这些图像类型。 |
|
|
||
| > So, we can use type switching to address such situations by changing the image format. | ||
| > 因此，我们可以通过改变图像格式来使用类型切换来解决这种情况。 |
There was a problem hiding this comment.
Suggested change
| > 因此，我们可以通过改变图像格式来使用类型切换来解决这种情况。 | |
| > 因此，我们可以通过改变图像格式来使用类型切换去解决这种情况。 |
lsvih
approved these changes
Mar 11, 2021
|
@zenblo 已经 merge 啦~ 快快麻溜发布到掘金然后给我发下链接，方便及时添加积分哟。 掘金翻译计划有自己的知乎专栏，你也可以投稿哈，推荐使用一个好用的插件。 |
ghost
deleted the
|
收到 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
@lsvih 译文翻译完成，resolve #8134