准备图像准备视网膜(网络)

时间:2013-03-11 15:03:20

标签: web photoshop retina-display screen-resolution

我有一个问题已经出现在我的脑海中已经好几次了:我应该如何准备我将在网站上使用的图像准备好视网膜呢?

是的,我在这个主题的互联网上花了好几个小时,但到目前为止,我还没有找到“最终答案”。

在这个帖子中,例如(链接:image size for retina display),只提到我需要加倍尺寸。但是这个决议呢?

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

  • 800 x 400px,72 ppi(只需调整大小,两次)
  • 800 x 400px,144 ppi(尺寸和分辨率乘以2)
  • 400 x 200px,144 ppi(分辨率的两倍)
  • 400 x 200px,246 ppi(相同尺寸,更高分辨率 - 我从设计ipad壁纸的一些教程中获得了数字246)
  • ......等等......

目标是选择图像并在非视网膜和视网膜显示器上显示它们(即'正常'计算机/笔记本电脑,macs(包括版本,视网膜和非视网膜),iDevices,Androids等等)

期待任何反馈: - )

3 个答案:

答案 0 :(得分:2)

您可以使用Retina.js以更高分辨率的版本替换图像,但前提是用户设备配备了视网膜显示器。

答案 1 :(得分:1)

您链接的问题是正确的。您需要将图像的大小加倍才能使分辨率加倍。

你对此感到困惑的是PPI。 PPI是每英寸像素数,它只是衡量图片的大小,与显示尺寸相同。

一个人不是独立的。

400 x 200的图像在72 ppi显示屏上占用的屏幕空间与144 ppi显示屏上的800x400图像相同。不同之处在于144 ppi设备能够在一英寸的屏幕空间中容纳比72 ppi更多的像素。

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

答案 2 :(得分:0)

有一个新的响应式图片HTML5 standard。截至2014年7月,它仅在beta builds of browsers。但Picturefill polyfill已经可用。

This article很好地解释了不同的用例。但你想要的只是为高分辨率(例如'视网膜')显示提供另一种图像:

<img srcset="small.jpg 1x, large.jpg 2x"
   src="small.jpg"
   alt="A rad wolf" />