多屏背景图像大小

Question

我在一个图像繁重的网站上工作，基本上有三种设计可用于多种屏幕：智能手机，平板电脑和台式机。

该网站的主要功能是背景/全屏图像。有没有人对这些背景图片的建议尺寸有任何建议？

他们都是进步的jpegs，因为它似乎是most sensible path for resizing and optimisation。

处理不同的图像大小将是另一个测试，但基本上在客户端处理它似乎是明智的，因为这种设计允许礼貌的加载器。

Answer 1

我建议格式化非视网膜手机，如 480x320 的iPhone 3Gs， 1136x640 的视网膜iPhone 5， 2048x1536的视网膜iPad ， 2880x1800 的视网膜mac专业版。然后设置您的媒体查询，为非视网膜ipad，标准桌面（您的默认图像）以及在MBP视网膜（2560x1600）附近显示的Google Nexus 10选择最适合的尺寸。

对于背景图片，您需要使用媒体查询。对于全屏图像，我所做的是实现一个JavaScript模块，允许您模仿响应图像社区组提出的picture element。或者如果您愿意，可以选择“srcset”路线。