8

我有一个 72 像素/英寸的 40 像素 x 20 像素图像。

我想创建一个 Retina 显示版本。

我应该怎么办？尺寸翻倍？改变分辨率？

我应该以哪种格式保存它？PNG？JPG？...

我在网站上使用这张图片...

4

7 回答 7

8

在您的图像编辑器中，将图像的大小加倍为 80 像素 x 40 像素。

在您的标记中，将宽度设置为 40，将高度设置为 20。

<img src="example.png" width="40" height="20" />

如果您需要透明度或图像是线条艺术，则应另存为 png。将照片另存为 jpg。

于 2013-08-01T21:01:16.960 回答
3

我的答案是将您的图像转换为SVG

你有插画师吗？如果是这样，将您的图像保存为 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/

希望能帮助到你 ：）

于 2013-05-09T13:37:55.353 回答
3

A retina display image (or high-density display image) is double the pixel size of a standard image - its scaling factor is 2.0. This means that yes, for your 40x20 pixel image, you will need to make an 80x40 pixel version (that is then displayed at double pixel density on screen). The format doesn't matter as much, both PNG and JPG will work fine (PNG will not degrade in quality with compression, but the file size will be larger than JPG).

However, the problem with high-density display images is that they take up more bandwidth, and are unnecessary for devices that don't have the high resolution or Retina displays. This means more data transferred over the network, inconveniencing mobile users and those with limited data transfer caps.

One solution is to use something like Retina.js. It's an open-source javascript client script that will automatically load the retina-sized image from your server and swap it in-place for the low-density version, if it exists. It follows Apple's standard for naming high-resolution images - @2x, so you can have HTML code like this:

<img src="/images/my_image.jpg" />

and the script will search your server also for /images/my_image@2x.jpg. If it exists, it will load it and swap it in-place without having to worry about messing with CSS.

于 2015-03-12T12:58:50.613 回答
2

在撰写本文时，通常有两种类型的视网膜显示器，因此您应该为每种类型创建一个图像。

  • 对于2×设备，您需要以每英寸 144 像素 (72 ppi ✕ 2) 的分辨率生成两倍的逻辑像素宽度和高度。
  • 对于3×设备，您需要三倍的逻辑像素，分辨率为每英寸 216 像素 (72 ppi ✕ 3)。

2x 设备的示例是 MacBook Pro（2012-2019 年发布）和自 iPhone 4 以来的大多数 iPhone。3x 设备的示例是 iPhone 6 Plus 和 iPhone X。但是iPhone Xr 是 2x 设备。

因此，对于您的情况，您需要 80 px ✕ 40 px 和 120 px ✕ 60 px 的图像分别用于 2× 和 3× 设备。

Retina 显示器不依赖于特定的位图图像格式。您可以使用原始图像格式。对于网站，您应该将 JPG 用于照片，将 PNG 用于保存为位图的线条艺术图形。

你不应该只是盲目地放大图像，否则这会产生模糊的结果——它不会比你一开始不包含任何高分辨率版本更好。要么获取图像的原始更高分辨率版本（通常来自矢量图形源）并缩小它们，要么使用基于机器学习的图像增强解决方案（例如Bigger Picture）将图像“转换”为更高分辨率。

于 2018-10-14T03:45:33.723 回答
1

Photoshop 为您提供了几个调整图像大小的选项。例如，如果图像是 iPhone 尺寸，您可以将图像尺寸增加 200%。Photoshop 为您提供了几个重新采样图像的选项。双三次，双线性等。这将以更高的分辨率重新制作图像并插入丢失的像素。希望这可以帮助。

于 2013-05-09T11:26:42.497 回答
1

这是一篇非常有趣的文章，展示了处理高分辨率图像的不错选择：

http://blog.netvlies.nl/design-interactie/retina-revolution/

基本上，它的意思是，如果您将图像制作得非常大（宽度和高度），但然后以非常低的质量保存它，它在视网膜显示器上仍然非常清晰。这意味着您可以在所有设备上使用相同的图像，并且文件大小也非常小，这是一个额外的好处。您可以在 CSS 和/或 HTML 中设置图像的宽度和高度，以将其设置为您想要的视觉尺寸。

这篇文章让我大吃一惊，它是我处理视网膜友好和带宽友好图像的首选方法。赢，赢。

于 2013-05-09T13:45:08.250 回答
-13

您可以使用 CSS 不透明度选项。

根据您设置为不透明度的值，这将为您提供图像的透明外观。

尝试学习不透明度：http ://www.w3schools.com/css/css_image_transparency.asp

于 2013-05-09T11:23:58.900 回答