背景视网膜图像的技术和治疗

最新推荐文章于 2024-10-01 18:51:18 发布

cungui5726

最新推荐文章于 2024-10-01 18:51:18 发布

阅读量148

点赞数

文章标签： java svg css 计算机视觉 python

原文链接：https://thenewcode.com/1063/Techniques-and-Treatments-for-Background-Retina-Images

版权

While the HTML5 spec now has Retina/HiDPI screens well in hand with a combination of media queries and srcset, images loaded via CSS have been somewhat excluded from recent progress: there’s no CSS equivalent to srcset or sizes to easily fit images of the optimal resolution into page backgrounds.

虽然HTML5规范现在具有结合了媒体查询和srcset Retina / HiDPI屏幕，但是通过CSS加载的图像在近期的进展中已被排除在外：没有与srcset或sizes等效CSS可以轻松适应最佳分辨率的图像进入页面背景。

This oversight is ironic, given that massive high-resolution background pictures arguably consume more bandwidth and download time than smaller inline illustrative images. With that in mind, let’s look at some techniques you can use to code and load the optimally sized images for the all screens.

具有讽刺意味的是，鉴于大型高分辨率背景图片比较小的嵌入式说明性图片要消耗更多的带宽和下载时间，因此具有讽刺意味。考虑到这一点，让我们看一些可用于编码和加载所有屏幕的最佳尺寸图像的技术。

选项1：通过使用SVG完全避免该问题 (Option 1: Avoid the problem entirely by using SVG)

Considering the qualities of an ideal background image - low contrast, broad strokes rather than fine detail, small file size, and viewport flexibility - in many cases an SVG document might well be a better choice for a background, even if the original is a photograph. For example, taking the following image:

考虑到理想背景图像的质量-低对比度，宽笔画而不是精细细节，小文件大小以及视口灵活性- 在许多情况下 ，即使原始照片是照片， SVG文档也可能是背景的更好选择 。例如，拍摄以下图像：

Saving this at its largest resolution (approx. 1000 × 650 pixels) as a 25% quality JPEG would result in a file size of 17K (pre-gzip), which isn’t bad. But if we bring the image into Adobe Illustrator and apply Live Trace and Expand, then export the result as a cleaned-up and minimized SVG, the result is a 1.7K file: 10% the size of the original JPEG, in a format that is immune to resolution changes.

以最大分辨率(约1000×650像素)将其保存为25％的JPEG格式，文件大小为17K(pre-gzip)，这还不错。 但是，如果将图像带入Adobe Illustrator并应用Live Trace and Expand，然后将结果导出为经过清理和最小化的SVG，则结果为1.7K文件： 原始JPEG大小的10％ ，格式为不受分辨率变化的影响。

body {
    margin: 0;
    background-image: url(birds-on-wire.svg);
    background-size: cover;
}

The SVG has some further advantages:

SVG具有其他优点：

unlike a bitmap, the SVG can be easily reshaded, providing better contrast control against body copy and foreground images.
与位图不同， SVG可以很容易地重新着色 ，从而可以更好地控制正文和前景图像的对比度。
the SVG can be layered with a repeated background, providing the impression of a “seamless” infinite image (see the associated CodePen for an example).
SVG可以具有重复的背景分层，从而提供“无缝”无限图像的印象( 有关示例，请参见相关的CodePen )。
the SVG file is also small enough to be included directly in the CSS as a DataURI string, potentially saving a HTTP request, speeding up page load still further.
SVG文件也足够小，可以作为DataURI字符串直接包含在CSS中，从而可以保存HTTP请求，从而进一步加快页面加载速度。

选项2：变大并压碎它 (Option 2: Go Big and Crush It)

If vector images aren’t a possibility and you’re in a rush, it’s possible to load a single JPEG image and crush it down to 0% quality.

如果不可能使用矢量图像，并且您很着急，则可以加载单个JPEG图像并将其压缩到0％的质量。

Yes, I said 0%. It may sound like heresy - and it doesn’t work for every image - but a sufficiently high resolution bitmap (>1200px wide) can actually look decent at 0 quality: kudos to Dave Rupert for being the first developer brave enough to try this.

是的，我说0％ 。听起来好像很杂乱-并不是每张图片都有效-但足够高分辨率的位图(宽度大于1200像素)实际上在0质量下看起来不错：对于Dave Rupert是第一个勇于尝试此操作的开发人员，表示由衷的感谢。

The one downside to this “one size fits all” approach is exactly that: the assumption that that everyone needs a highDPI image, and forcing it on them. A better solution would be to load a bitmap appropriate to the user’s screen size and resolution; for that, we need @media queries.

这种“一刀切”的做法的一个缺点就是：假设每个人都需要一个高DPI图像，并将其强加于其上。更好的解决方案是加载适合用户屏幕尺寸和分辨率的位图。为此，我们需要@media查询。

选项3：使用媒体查询 (Option 3: Use Media Queries)

First, load the background image that regular, non-Retina screens will see:

首先，加载常规非视网膜屏幕将看到的背景图像：

body {
    background-image: url("eagle-eye-panorama.jpg");
    background-size: cover;
}

Then, add a media query that loads a higher DPI image for Retina screens:

然后，添加媒体查询，为视网膜屏幕加载更高的DPI图像：

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
 only screen and (min-moz-device-pixel-ratio: 1.5),
 only screen and (min-resolution: 240dpi) {
 body {
 background-image: url("eagle-eye-panorama-2x.jpg");
 }
}

选项4：使用image-set() (Option 4: Use image-set())

The recent addition of image-set() to the CSS lexicon provides for a fourth possibiliity in modern browsers, discussed in-depth in the next article.

最近在CSS词典中增加了image-set() ，这为现代浏览器提供了第四种可能性，下一篇文章将对此进行深入讨论。

结论 (Conclusion)

There are many possibilities for employing large background images that remain sharp on all screens with minimal file sizes: as always, the ideal solution is arrived at by anticipation (setting a performance budget for each page before you start), research, and testing.

使用大尺寸背景图像在所有屏幕上保持清晰且文件大小最小的可能性有很多：与往常一样，理想的解决方案是通过预期( 在开始之前为每个页面设置性能预算)，研究和测试来实现的。