如何将图像转换为视网膜显示？
我有一个40像素，20像素，72像素/英寸的图像。
我想创建一个Retina显示版本。
我该怎么办？ 尺寸加倍？ 更改分辨率？
我应该保存哪种格式？ PNG？ JPG？ ...
我在网站上使用这个图像...
在您的图像编辑器中，将图像的大小加倍至80像素×40像素。
在你的标记中，宽度设置为40，高度设置为20。
<img src="example.png" width="40" height="20" />
如果您需要透明度或图像是线条艺术，则应该将其另存为png。 将照片保存为jpg。
我的答案是将您的图像转换为SVG
你有Illustrator吗？ 如果是这样的话，将图像保存为SVG（如果需要，可以使用png作为后备）。
<img src="images/logo.svg" alt="" />
<img src="images/logo.png" alt="" />
只要你使用Modernzr，它可以在大多数浏览器中使svg友好。
你可以在这里看到它是如何完成的：http://toddmotto.com/mastering-svg-use-for-a-retina-web-fallbacks-with-png-script/
希望能帮助到你 ：）
视网膜显示图像（或高密度显示图像）是标准图像像素尺寸的两倍 - 其比例因子为2.0。 这意味着是的，对于您的40x20像素图像，您需要制作一个80x40像素版本（然后在屏幕上以双像素密度显示）。 格式不重要，PNG和JPG都可以正常工作（PNG压缩质量不会降低，但文件大小将大于JPG）。
但是，高密度显示图像的问题在于它们占用更多带宽，对于不具有高分辨率或Retina显示的设备而言是不必要的。 这意味着更多的数据通过网络传输，给移动用户和数据传输限制有限的用户带来不便。
一个解决方案是使用像Retina.js。 这是一个开源的javascript客户端脚本，它将自动从您的服务器加载视网膜大小的图像，并在低密度版本（如果存在的话）中就地交换它。 它遵循Apple命名高分辨率图像的标准 - @2x ，因此您可以使用以下HTML代码：
<img src="/images/my_image.jpg" />
脚本也会搜索你的服务器/images/my_image@2x.jpg 。 如果它存在，它将加载它，并在原地进行交换，而不必担心会搞乱CSS。