我有一个40像素×20像素的图像，72像素/英寸。
我想创建一个Retina显示版本。
我该怎么办？尺寸加倍？改变分辨率？
我应该以哪种格式保存它？ PNG？ JPG？ ...
我在网站上使用此图片...
答案 0 :(得分：8)
在图像编辑器中，将图像尺寸加倍至80像素×40像素。
在标记中将宽度设置为40，将高度设置为20.
<img src="example.png" width="40" height="20" />
如果您需要透明度或图像是艺术线条，则应保存为png。将照片保存为jpg。
答案 1 :(得分：3)
我的回答是将您的图片转换为 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 :(得分：3)
视网膜显示图像（或高密度显示图像）是标准图像像素大小的两倍 - 其缩放系数为2.0。这意味着是的，对于40x20像素的图像，您需要制作一个80x40像素的版本（然后在屏幕上以双像素密度显示）。格式无关紧要，PNG和JPG都可以正常工作（PNG在压缩时不会降低质量，但文件大小会比JPG大。）
然而，高密度显示图像的问题在于它们占用更多带宽，并且对于没有高分辨率或Retina显示器的设备是不必要的。这意味着通过网络传输更多数据，给移动用户和数据传输上限有限的人带来不便。
一种解决方案是使用Retina.js之类的东西。它是一个开源的javascript客户端脚本，它将自动从服务器加载视网膜大小的图像，并为低密度版本（如果存在）就地交换它。它遵循Apple的standard for naming high-resolution images - @2x，因此您可以使用以下HTML代码：
<img src="/images/my_image.jpg" />
，脚本也将在您的服务器中搜索/images/my_image@2x.jpg。如果它存在，它将加载它并就地交换它而不必担心搞乱CSS。
答案 3 :(得分：2)
在撰写本文时，通常有两种类型的视网膜显示，因此您应该为每种类型创建图像。
2倍设备的示例是MacBook Pro（2012年之后发布的所有型号）和iPhone 4之后的大多数iPhone。 设备是iPhone 6 Plus和iPhoneX。但是 iPhone Xr是2倍设备。
因此，对于您的情况，对于2×和3×设备，分别需要80 px✕40 px和120 px✕60 px的图像。
视网膜显示不依赖于特定的位图图像格式。您可以使用原始图像格式。对于网站，您应该将JPG用于照片，将PNG用于保存为位图的线条艺术。
您不应该只是盲目地放大图像，否则会产生模糊的结果–这比没有首先包含任何高分辨率版本的情况要好。获取原始分辨率更高的图像版本（通常从矢量图形源获取）并缩小图像比例，或者使用基于机器学习的图像增强解决方案（例如Bigger Picture）将图像“转换”为更高的分辨率。 / p>
答案 4 :(得分：1)
Photoshop为您提供了几个调整图像大小的选项。例如，如果图像是iPhone大小，您可以将图像大小增加200％。 Photoshop为您提供了几种重新采样图像的选项。双立方，双线性等。这将以更高的分辨率重新制作图像并插入缺失的像素。希望这会有所帮助。
答案 5 :(得分：1)
这是一篇非常有趣的文章，展示了处理高分辨率图像的不错选项：
http://blog.netvlies.nl/design-interactie/retina-revolution/
基本上，它说，如果你使图像非常大（宽度和高度）但是然后以非常低的质量保存它，它仍然在视网膜显示器上非常清晰。这意味着您可以在所有设备上使用同一个图像，并且文件大小也非常低，这是额外的奖励。您可以在CSS和/或HTML中设置图像的宽度和高度，以将其设置为您想要的视觉尺寸。
这篇文章让我感到震惊，是处理视网膜友好和带宽友好图像的首选方法。赢，赢。
答案 6 :(得分：-12)
您可以使用CSS不透明度选项。
这将根据您设置为不透明度的值为您提供图像的透明外观。
尝试学习不透明度：http://www.w3schools.com/css/css_image_transparency.asp