Html 网站的自动 Retina 图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13744542/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Automatic Retina images for web sites
提问by jan267
With the new Apple MacBook Pro with retina display, if you provide a "standard" image on your website, it'll be a little fuzzy. So you have to provide a retina image.
使用配备视网膜显示屏的新 Apple MacBook Pro，如果您在网站上提供“标准”图像，它会有点模糊。所以你必须提供视网膜图像。
Is there a way to automatically switch to @2ximages, like iOS (with Objective-C) does? What I've found is: CSS for high-resolution images on mobile and retina displays, but I wish I could find an automatic process for all my images, without CSS or JavaScript.
有没有办法@2x像iOS（使用Objective-C）那样自动切换到图像？我发现的是：用于移动和视网膜显示器上高分辨率图像的 CSS，但我希望我可以为我的所有图像找到一个自动过程，而无需 CSS 或 JavaScript。
Is it possible?
是否可以？
UPDATE
I would emphasize this interesting articlesuggested by @Paul D. Waiteand an interesting discussionabout it linked by Sebastian.
更新
我会强调@Paul D. Waite建议的这篇有趣的文章以及Sebastian链接的关于它的有趣讨论。
回答by ebuat3989
There is a new attribute for the img tag that allows you to add a retina src attribute, namely srcset. No javascript or CSS needed, no double loading of images.
img 标签有一个新属性，允许您添加一个retina src 属性，即srcset。无需 javascript 或 CSS，无需双重加载图像。
<img src="low-res.jpg" srcset="high-res.jpg 2x">
<img src="low-res.jpg" srcset="high-res.jpg 2x">
Browser Support: http://caniuse.com/#search=srcset
浏览器支持：http: //caniuse.com/#search=srcset
Other Resources:
其他资源：
- WebKit release post
- W3C documentationfor srcset
- good explanation about why and how to use srcset
- Chris Coyer's postfor more good info
- WebKit 发布帖子
- srcset 的W3C 文档
- 关于为什么以及如何使用 srcset 的很好的解释
- Chris Coyer 的帖子以获取更多好信息
回答by bhell
There are different solutions, each with its own pros and cons. Which one is best for you depends on various factors, such as how your website is designed, what kind of technology your typical visitors are using etc. Note that retina displays are not limited to the Macbook Pro Retina and the coming iMacs, but also include mobile devices, which may have their own needs.
有不同的解决方案，每个都有自己的优点和缺点。哪种最适合您取决于多种因素，例如您的网站设计方式、您的典型访问者使用的技术类型等。请注意，Retina 显示器不仅限于 Macbook Pro Retina 和即将推出的 iMac，还包括移动设备，它们可能有自己的需求。
The problem is also closely related to images in responsive designs in general. In fact, it is probably best to utilize generic responsive design techniques, instead of designing for specific devices. After all, technology will keep changing all the time in the future, too.
这个问题通常也与响应式设计中的图像密切相关。事实上，最好使用通用响应式设计技术，而不是为特定设备设计。毕竟，技术在未来也会不断变化。
Some of the solutions/discussions I noted:
我注意到的一些解决方案/讨论：
- Vectors wherever possible including CSS techniques (gradients, rounded corners etc.), SVG and icon fonts.
- Serving high resolution ("retina") images, but compress them more (JPEG quality), as suggested by Yoav Weiss, or let the mobile networks compress them when really needed (i.e. when mobile), as suggested by Paul Boag.
- Adaptive Images, a (mostly) server side solution. It is based on a cookie storing the screen resolution, a web server configured to serve images from a PHP script, and named script to read the cookie and serve the appropriate image.
- A bunch of possibilitieswell described and discussed on Smashing Magazine.
- Serving just slightly higher resolutions to smooth retina portrayal a little, as suggested in a video by Paul Boag.
- The @1.5x techniqueon A List Apartis basically the same idea.
- In the near future, the
<picture>tagmay become a solution supported by a W3C working groupand even Apple. - A JavaScript techniqueproposed by Jake Archebald.
- An extensive discussionof different techniques on Smashing Magazineand the problem in general.
- 尽可能使用矢量，包括 CSS 技术（渐变、圆角等）、SVG 和图标字体。
- 提供高分辨率（“视网膜”）图像，但按照Yoav Weiss 的建议压缩更多（JPEG 质量），或者按照Paul Boag 的建议让移动网络在真正需要时（即移动时）压缩它们。
- Adaptive Images，一个（主要是）服务器端解决方案。它基于存储屏幕分辨率的 cookie、配置为从 PHP 脚本提供图像的 Web 服务器，以及读取 cookie 并提供适当图像的命名脚本。
- 在Smashing Magazine上很好地描述和讨论了一堆可能性。
- 正如Paul Boag的视频所建议的那样，提供稍微更高的分辨率以稍微平滑视网膜的描绘。
- A List Apart上的@1.5x 技术基本上是相同的想法。
- 在不久的将来，
<picture>标签可能会成为W3C 工作组甚至 Apple支持的解决方案。 - Jake Archebald提出的一种JavaScript 技术。
- Smashing Magazine上对不同技术的广泛讨论以及一般问题。
As the other answers show, there are even more techniques - but probably no best practice, yet.
正如其他答案所示，还有更多技术 - 但可能还没有最佳实践。
One thing I wonder is how to test and debug some of these techniques, without having the respective device(s) available...
我想知道的一件事是如何在没有相应设备的情况下测试和调试其中一些技术...
回答by svachalek
Since no one's mentioned the obvious yet, I'll float it out there: where possible, just use SVG. They appear at beautiful retina resolutions with no effort whatsoever.
由于还没有人提到显而易见的事情，我会把它放在那里：在可能的情况下，只使用 SVG。它们毫不费力地以美丽的视网膜分辨率出现。
Support for it is good with IE8 being the main dinosaur to worry about. Gzipped file sizes are often better than bitmapped (png/jpg) formats and the images are more flexible; you can reuse them at different resolutions and restyle them if necessary, which saves both development time and download bandwidth.
对它的支持很好，因为 IE8 是需要担心的主要恐龙。Gzipped 文件大小通常比位图 (png/jpg) 格式更好，并且图像更灵活；您可以以不同的分辨率重复使用它们，并在必要时重新设计它们，这样既节省了开发时间，又节省了下载带宽。
回答by muzzamo
Here is the less mixin I use to achieve this for background images. retina.js doesn't work for background images if you are using dotLess, since it requires its own mixin which itself uses script evaluation which isn't supported in dotLess.
这是我用于为背景图像实现此目的的较少 mixin。如果您使用 dotLess，则retina.js 不适用于背景图像，因为它需要自己的 mixin，它本身使用 dotLess 不支持的脚本评估。
The trick with all of this is to get IE8 support. It can't easily do background-size so the base case (non mobile media query) has to be a simple, non-scaled icon. The media query then handles the case of retina and is free to use the background-size class since retina will never be used on IE8.
所有这些的诀窍是获得 IE8 支持。它不能轻易地做背景尺寸，所以基本情况（非移动媒体查询）必须是一个简单的、非缩放的图标。媒体查询然后处理视网膜的情况并且可以自由使用背景大小类，因为视网膜永远不会在 IE8 上使用。
.retina-background-image( @path, @filename,@extension, @size )
{
.background-size( cover );
background-image: url( "@{path}@{filename}@{extension}" );
@media only screen and ( -webkit-min-device-pixel-ratio: 2 ),
only screen and ( -moz-min-device-pixel-ratio: 2 ),
only screen and ( -o-min-device-pixel-ratio: 2/1 ),
only screen and ( min-device-pixel-ratio: 2 )
{
background-image:url( "@{path}@{filename}@x2@{extension}" );
background-size:@size @size;
}
}
Usage sample:
使用示例：
.retina-background-image( "../references/Images/", "start_grey-97_12", ".png", 12px );
Ths requires you to have two files:
这要求你有两个文件：
start_grey-97_12.png[email protected]
start_grey-97_12.png[email protected]
Where the 2xfile is double resolution for retina.
当2x文件是视网膜双倍分辨率。
回答by webdev
Just provide retina images to everyone, and squeeze the image to half its native size inside the image element. Like let's say your image is 400pxwide and tall - just specify the image width as 200pxto make it look sharp like this:
只需向每个人提供视网膜图像，并将图像压缩到图像元素内的原始大小的一半。就像假设您的图像400px又宽又高 - 只需指定图像宽度200px，使其看起来像这样：
<img src="img.jpg" width="200px" height="200px" />
If your image is photographic, you can probably increase the JPG compression on it without making it look worse, because the JPG compression artifacts probably won't be visible when the image is displayed at 2x: see http://blog.netvlies.nl/design-interactie/retina-revolution/
如果您的图像是摄影图像，您可能可以在不使其看起来更糟的情况下增加其 JPG 压缩，因为当图像显示在2x以下位置时，JPG 压缩伪影可能不可见：请参阅http://blog.netvlies.nl/设计交互/视网膜革命/
回答by SonnyP
if its background images a simple way to do this is:
如果它的背景图像，一个简单的方法是：
#image { background: url(image.png); }
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2) {
#image { background: url([email protected]); background-size: 50%; }
}
another simple way is to use this method:
另一种简单的方法是使用这种方法：
Just replace:
只需更换：
<img src="image.jpg" alt="" width="200" height="100" />
with
和
<img src="[email protected]" alt="" width="200" height="100" />
回答by jan267
I've found this interesting way for providing multiple resolution images.
It actually uses CSS, something I wanted to avoid, and works in Safari and Chrome only.
I'm talking about image-set.
我发现了这种提供多分辨率图像的有趣方式。
它实际上使用了 CSS，这是我想避免的，并且仅适用于 Safari 和 Chrome。
我在谈论image-set.
Here's an example, provided by Apple (here):
这是一个由 Apple 提供的示例（此处）：
header {
background: -webkit-image-set( url(images/header.jpg) 1x,
url(images/header_2x.jpg) 2x);
height: 150px; /* height in CSS pixels */
width: 800px; /* width in CSS pixels */
}
I wanna share also these two links:
我也想分享这两个链接：
回答by Jasper de Vries
With JSF you could create a custom Facelets tagto save the fuzz of having to add srcsetto each image.
使用 JSF，您可以创建一个自定义的 Facelets 标记来避免必须添加srcset到每个图像的模糊。
In your taglib.xmlyou could have something like:
在你的taglib.xml你可能有这样的东西：
<tag>
<tag-name>img</tag-name>
<source>tags/img.xhtml</source>
<attribute>
<name>src2x</name>
<required>true</required>
<type>java.lang.String</type>
</attribute>
</tag>
And your tag could look something like:
您的标签可能如下所示：
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:fn="http://xmlns.jcp.org/jsp/jstl/functions"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<img src="#{fn:replace(src2x, '@2x', '')}"
srcset="#{src2x} 2x"/>
</ui:composition>
Which could be used like:
可以像这样使用：
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:myTag="http://your.com/namespace-of-taglib">
<myTag:src2x="[email protected]"/>
</html>
And will render:
并将呈现：
<img src="image.jpg"
srcset="[email protected] 2x"/>
回答by Artru
If you are not frustrated by fear of using java-script then here is a good article http://www.highrobotics.com/articles/web/ready-for-retina.aspx. It has very simple solution.
如果您对使用 java-script 的恐惧没有感到沮丧，那么这里有一篇好文章http://www.highrobotics.com/articles/web/ready-for-retina.aspx。它有非常简单的解决方案。
And the example in JSFiddleis worth a thousand words.
而JSFiddle 中的例子价值一千字。
Using:
使用：
<img onload="getImgSrc(this,'image_x1.png')" width="100" height="100" />
JS:
JS：
/* RETINA READY IMG SRC */
function getImgSrc(img, src) {
var srcResult = src;
// if high-res screen then change _x1 on _x2
if (window.devicePixelRatio > 1 &&
src.indexOf("_x1.")>=0) {
srcResult = src.replace("_x1.", "_x2.");
}
img.onload = null; //protect from second rasing
img.src = srcResult;
}
$(document).ready(function(){
// fire onload trigger on IMG tags that have empty SRC attribute
var images = $('img:not([src=""])');
images.each(function(i) {
$(this).trigger('onload');
});
});
回答by Keegan's hairstyle 82
This problem is especially tricky with responsive sites where and image can be of varying width dependant on browser size. Also when dealing with a CMS where multiple editors are potentially uploading 1000s of images it to me seemed unrealistic for me to ask people to upload specially compressed images.
这个问题对于响应式网站来说尤其棘手，其中图像的宽度取决于浏览器的大小。此外，在处理多个编辑可能上传 1000 张图像的 CMS 时，要求人们上传特别压缩的图像对我来说似乎是不现实的。
So I wrote a script that takes this into account, it fires at the bottom of the page and on resize finish. Each time taking into account pixel density and the size the image is occupying.
所以我写了一个脚本来考虑到这一点，它在页面底部和调整大小完成时触发。每次都要考虑像素密度和图像占用的大小。
