准备用于视网膜的图像(网络) [英] Preparing the images for retina-ready (web)

问题描述

我有一个问题已经思考了好几次了:我应该如何准备要在视网膜上使用的图像?

I have a question that have been on my mind for several time now: how should I prepare the images that I am going to use on a website to be retina-ready?

是的，我已经花了几个小时在互联网上讨论这个话题，但是到目前为止，我还没有找到一个最终答案".

Yes, I have been spending hours on the interweb on this topic, but so far I haven't find the one 'ultimate answer'.

例如，在此线程中(链接:用于视网膜显示的图像大小)，仅提到我需要将尺寸增加一倍.但是分辨率如何?

In this thread for example (link: image size for retina display), it is only mentioned that I need to double the dimensions. But how about the resolution?

现实生活中的情况:使用Photoshop(或其他修复方法)以400px x 200px的尺寸创建图像，分辨率为72 ppi.
我应如何修改此图像?

Real life situation: an image is created using Photoshop (or whatever your fix) at dimension 400px x 200px, with resolution of 72 ppi.
How should I modify this image?

• 在72 ppi时为800 x 400像素(只需将其大小调整为两倍)
• 800 x 400px，144 ppi(尺寸和分辨率乘以2)
• 144 ppi时为400 x 200像素(仅是分辨率的两倍)
• 400 x 200px，分辨率为246 ppi(相同尺寸，更高的分辨率-我从设计ipad墙纸的一些教程中获得了编号246)
• ...等等... ??

• 800 x 400px at 72 ppi (just resize it, times two)
• 800 x 400px at 144 ppi (dimensions and resolution times two)
• 400 x 200px at 144 ppi (just double the resolution)
• 400 x 200px at 246 ppi (same dimension, higher resolution --I got the number 246 from some tutorial in designing ipad wallpaper)
• ...et cetera... ??

目标是选择图像并将其显示在非视网膜和视网膜显示器上(即普通"计算机/笔记本电脑，macs(两种版本，包括视网膜和非视网膜)，iDevices，Android等)

The target is to select the images and display them on both non-retina and retina displays (i.e. 'normal' computers / laptops, macs (both versions, retina and non), iDevices, Androids, et cetera)

期待任何反馈:-)

推荐答案

您链接的问题是正确的.您需要将图像尺寸加倍以使分辨率加倍.

The question you link is correct. You need to double the size of the image to double the resolution.

您会感到困惑的是PPI. PPI是每英寸像素数，它只是显示图片大小的一种度量，与显示尺寸相同.

What you are getting confused over is the PPI. PPI is Pixels Per Inch, it is simply a measure of how big a picture is, same as display dimensions.

一个并不独立于另一个.

One is not independent of the other.

400x200的图像在72 ppi显示器上将占据与144 ppi显示器的800x400图像一样多的屏幕空间.区别仅在于144 ppi的设备比72 ppi的设备能够在1英寸的屏幕空间中容纳更多像素.

An image of 400x200 will take up as much screen space on a 72 ppi display as a 800x400 image on a 144 ppi display. The difference is simply that the 144 ppi device is able to fit more pixels in one inch of screen space than the 72 ppi.

因此，通过将72ppi图像的分辨率加倍，您确实可以确保它看起来相同/占用相同的屏幕空间.

So, by doubling the resolution of a 72ppi image, you are indeed insuring that it looks the same/takes the same amount of screen space.

这篇关于准备用于视网膜的图像(网络)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！