Retina Images

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

特别声明:Retina Image是Jeremy Worboys创建,版权归于:

Creative Commons Attribution 3.0 Unported License

,如需转载此文,需在明显位置注明Retina Images官网地址:http://retina-images.complexcompulsions.com以及作者相关信息

 

作者:Jeremy Worboys

译者:大漠

GitHub查看下载Retina Images

关于Retina Images

Retina Images是为不同设备提供不同的的图像,换句话说“Retina Images是为不同分辨率设备查看,提供不同的图像”。

一旦安装在你的网站上(非常简单!)。你只需要为Retina屏幕设备创建高分辨率的图像,其他的Retina Images会帮你实现。你甚至不需要修改任何“<img>”标签(在img中设置他们的宽度和高度)。

Retina Images的工作原理

  1. 当服务器加载你的页面,通过“JavaScript”或者CSS(JavaScript禁用时),给“cookie”设置一个“devicePixlRatio”值。
  2. 当服务器接收到图像的加载请求时,“.htaccess”文件会告诉“retinaimages.php”加载服务器上的图像。
  3. “retinaimages.php”会按以下四个条件进行查询检查:
    • “cookie”中是否存在“devicePixelRatio”。
    • “cookie”中“devicePixelRatio”的值大于1。
    • 高分辨率图像是否存在。
  4. 上面任何一条不符合,将会发送普通分辨率图像。否则将给设备提供高分辨率的图像。

服务器的设置

安装Retina Images非常简单

1、将“retinaimages.php”和“.htaccess”文件安装在你服务器的根目录下(通常是在“public_html”文件目录)。

注意:如果你的项目中存在“.htaccess”文件,千万不要直接覆盖他,你只需要将文件中的内容复制后粘贴到你项目中的“.htaccess”文件中。

2、在每个页面的“<head>”区域中,在所有CSS文件前放置下面的JavaScript代码:

<script>
  (function(w){
    var dpr=((w.devicePixelRatio===undefined)?1:w.devicePixelRatio);
		if(!!w.navigator.standalone){
		  var r=new XMLHttpRequest();r.open('GET','/retinaimages.php?devicePixelRatio='+dpr,false);r.send()
		}else{
		  document.cookie='devicePixelRatio='+dpr+'; path=/'
		}
	})(window)
</script>

3、在“<body>”标签内插入下面的CSS:

<noscript>
  <style id="devicePixelRatio" media="only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)">
	  #devicePixelRatio{
		  background-image:url("/retinaimages.php?devicePixelRatio=2")
		}
	</style>
</noscript>

注意:上面这段代码一定要放置在“<body>”和“</body>”之间。

4、为高分辨率创建翻倍像素的图像,并以“@2x”关皱键词结尾保存高分辨率的图像。参考实例

HTML图像

HTML图像是最简单的,你只需要设置“<img>”标签,可能工作起来没有任何变化。

你所担心的是,针对高分辨率图像,你必须在“<img>”标签中设置“width”和“height”属性值。

<img src="my-image.png" alt="My awesome image" width="300" height="90">

CSS图像

CSS图像通常需要做一下工作,使用CSS图像,必须配合“background-size”属性才能正常工作。下面是Retina屏幕下通过background-size来控制图像适应的三种简单方法:

CSS背景图像

使用像素“px”固定值,这个值等于非Retina下图像的尺寸大小:

.some-selector {
  background-image: url("my-image.png");
  background-size: 300px 90px;
}

图像替换

如果标准图像大小和容器大小一样,那么你可以通过下面的方法简单的实现:

.some-selector {
  background-image: url("my-image.png");
  background-size: 100% 100%;
}
.some-selector {
  background-image: url("my-image.png");
  background-size: cover;
}

注:有关于background-size的详细介绍,可以点击这里

图像示例

普通显屏下图像(非Retina屏幕下)

Retina Images

settings.png

59px × 59px

Retina显屏下图像

Retina Images

settings@2x.png

118px × 118px

优点

  1. 用户只需下载一张图像;
  2. 支持所有图像格式;
  3. 如果高分辨率图像不能使用,会返回普通图像
  4. 如果“JavaScript”和“CSS”或者“Cookies”禁用,也将返回普通图像

缺点

  1. "<img>"标签心需设置明确的“width”和“height”属性值(属性值大小和普通图像大小一致)
  2. CSS背景图像必须使用“background-size”属性。

插件

Jordy Meow为Wordpress写了一个WP Retina 2x插件

让你的网站在Retina屏幕设备下图像看起清晰细腻。

特别声明:Retina Image由Jeremy Worboys创建,版权Creative Commons Attribution 3.0 Unported License。W3cplus仅根据Retina Images官网所译,为广在中国前端人员服务。如需转载需要在明显位置注官网地址: http://retina-images.complexcompulsions.com

GitHub查看下载Retina Images

如需转载,烦请注明:http://www.w3cplus.com/css/retina-images.html

Undercover Nike Daybreak Release Date

如需转载,烦请注明出处:https://www.w3cplus.com/css/retina-images.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部