CSS 如何将图像转换为视网膜显示？

How to convert an image to retina display?

提问by Miguel Moura

I have an 40px by 20px image with 72 Pixels / Inch.

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

I would like to create a Retina display version.

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

What should I do? Double the size? Change the resolution?

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

And in which format should I save it? PNG? JPG? ...

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

I am using this image on a web site ...

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

回答by meobyte

In your image editor, double the size of your image to 80px by 40px.

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

In your markup set the width to 40 and height to 20.

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

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

You should save as png if you need transparency or the image is line art. Save photographs as jpg.

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

回答by Aaron D

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).

视网膜显示图像（或高密度显示图像）是标准图像像素大小的两倍 - 其缩放因子为 2.0。这意味着是的，对于 40x20 像素的图像，您需要制作一个 80x40 像素的版本（然后在屏幕上以双倍像素密度显示）。格式无关紧要，PNG 和 JPG 都可以正常工作（PNG 压缩不会降低质量，但文件大小会比 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.

然而，高密度显示图像的问题在于它们占用更多带宽，对于没有高分辨率或 Retina 显示器的设备来说是不必要的。这意味着更多的数据通过网络传输，给移动用户和数据传输上限有限的用户带来不便。

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:

一种解决方案是使用类似Retina.js 的东西。这是一个开源 javascript 客户端脚本，它将自动从您的服务器加载视网膜大小的图像，并将其就地交换为低密度版本（如果存在）。它遵循 Apple 的高分辨率图像命名标准- @2x，因此您可以拥有这样的 HTML 代码：

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

and the script will search your server also for /images/[email protected]. If it exists, it will load it and swap it in-place without having to worry about messing with CSS.

并且脚本也会在您的服务器中搜索/images/[email protected]. 如果它存在，它将加载它并就地交换它，而不必担心弄乱 CSS。

回答by Riskbreaker

My answer is convert your image into SVG

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

Do you have Illustrator? If so save your image as SVG (and have a png as a fallback if you want).

你有插画师吗？如果是这样，请将您的图像保存为 SVG（如果需要，还可以使用 png 作为后备）。

<img src="images/logo.svg" alt="" />
<img src="images/logo.png" alt="" />

As long as you use Modernzrwhich can work to get svg friendly in most browsers.

只要您使用Modernzr，它就可以在大多数浏览器中使svg 友好。

You can see it here how it's done: http://toddmotto.com/mastering-svg-use-for-a-retina-web-fallbacks-with-png-script/

你可以在这里看到它是如何完成的：http: //toddmotto.com/mastering-svg-use-for-a-retina-web-fallbacks-with-png-script/

Hope it helps :)

希望能帮助到你 ：）

回答by adib

Generally as of this writing there are two types of retina displays, hence you should create an image for each type.

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

• For a 2×device, you would need to produce twicethe logical pixels' width and height with a resolution of 144 pixels per inch (72 ppi ? 2).
• For a 3×device, you would need three timesthe logical pixels with a resolution of 216 pixels per inch (72 ppi ? 3).

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

Examples of 2× devices are the MacBook Pro (released in 2012-2019) and most iPhone since the iPhone 4. Examples of 3× devices are the iPhone 6 Plus, and the iPhone X. Howeverthe iPhone Xr is a 2× device.

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

Hence for your case you would need images in 80 px ? 40 px and 120 px ? 60 px for 2× and 3× devices respectively.

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

Retina displays are not dependent on the specific bitmap image format. You can use the original image format. For websites, you shoulduse JPG for photographs and PNG for line-art graphics saved as bitmaps.

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

You should not just blindly enlarge imagesotherwise this would create a blurred results – it would no better than if you don't include any high-resolution versions in the first place. Either obtain the original higher-resolution version of the images (typically from vector graphic source) and downscale them or use a machine-learning based image enhancement solution such as Bigger Pictureto "convert" your image into a higher resolution.

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

回答by Nitesh

Photoshop gives you a couple options for resizing an image. For instance if the image is iPhone size you can increase the image size by 200%. Photoshop gives you a couple options for resampling of the image. Bicubic, bilinear and etc. This will remake the image at a higher resolution and interpolate the missing pixels. Hope this helps.

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

回答by ralph.m

This is a really interesting article showing a nice option for dealing with high res images:

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

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

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

Basically, it's saying that, if you make the image quite large (width and height) but then save it at quite low quality, it still comes out very sharp on retina displays. It means that you can use the one same image on all devices, and that the file size is very low, too, which is an extra bonus. You can set the width and height of the image in your CSS and/or HTML to set it to the visual dimensions you desire.

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

This article blew me away, and is my go-to approach for dealing with both retina-friendly and bandwidth-friendly images. Win, win.

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

回答by Rajesh

You can use CSS opacity option.

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

This will give you an transparent look of your image based upon the value you set to opacity.

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

Try learning opacity: http://www.w3schools.com/css/css_image_transparency.asp

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