css - 哪些图像元素应该获得 Retina 版本?

标签 css media-queries retina-display

我正在构建一个应该完全支持视网膜的页面。我正在创建所有中小型图像的视网膜版本。

当您在具有高密度屏幕的设备上查看 50x50 图像的 100x100 像素版本时,它看起来不错。但是如果图像大得多呢?就像具有 1700x600 像素尺寸的 slider 的背景图像一样,这也应该获得视网膜版本吗?图像的大小已经远远超过几乎所有移动设备的分辨率。 1700x600 或 3400x1200 的图像在 640x960 显示器上看起来会有所不同吗?

最佳答案

不要忘记支持 Retina 的笔记本电脑和 iPad...根据我的经验,您可以将大多数图像保存为预期查看大小的 150% 左右,并且它们在高密度屏幕上看起来仍然很棒。你也应该玩压缩质量,很多时候你可以降低质量,但由于额外像素的剪切量,图像仍然看起来很棒。

有关我正在谈论的内容的示例,请参见:http://filamentgroup.com/lab/rwd_img_compression/

关于css - 哪些图像元素应该获得 Retina 版本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18165288/

相关文章:

html - 如何使这些图像以它们需要的方式响应?

iphone - 导出 @2x 图像以进行视网膜显示的简单方法?

objective-c - Retina 显示来自 URL 的图像

html - CSS 中的媒体查询

ios - iPad Retina 启动图像——仅显示图像的上半部分

javascript - jquery ui 中的奇怪偏移可拖动

javascript - 大崩OrgChart库样式节点

javascript - 将 CSS 样式应用于基于同一级别的另一个类的类

reactjs - 使用媒体查询响应 setState

css - 在基础 CSS 中将全局 CSS 值应用于移动 View ?