我正在构建一个依赖于在浏览器窗口以全尺寸展示美丽、高质量照片的作品集网站。
我使用了CSS3的background-size:cover标签和这个小技巧,可以为高分辨率设备替换更高分辨率的图像:
是否存在一种最佳图片大小,在大屏幕上缩放得足够好,但文件大小和下载时间不会太大?
我应该考虑随着用户停留在页面上的时间逐渐增加画质吗?所以首先加载低质量/分辨率图像,然后用更高的分辨率图像替换它?
我使用了CSS3的background-size:cover标签和这个小技巧,可以为高分辨率设备替换更高分辨率的图像:
http://www.bdoran.co.uk/2012/08/28/detecting-and-delivering-images-to-retina-displays/
根据那篇文章,我需要至少三种版本的图片,一个1倍大小,一个1.5倍大小和一个2倍大小,但这些可能会变得非常大。是否存在一种最佳图片大小,在大屏幕上缩放得足够好,但文件大小和下载时间不会太大?
我应该考虑随着用户停留在页面上的时间逐渐增加画质吗?所以首先加载低质量/分辨率图像,然后用更高的分辨率图像替换它?