今朝手机等移动设备网站开辟已经有比较好的解决筹划，一种是响应式网站，像笔者博客一样，PC网站就是移动网站，一种是把移动网站和PC网站分开，类似淘宝那样。大年夜网站搜刮引擎优化的角度来说，两者并无差别，也各有利弊，不论采取那种方法也都能解决移动设备浏览问题。跟着移动设备和类型越来越多，我们几乎不太可能针对某一类设备扶植零丁的网站，不论PC网站和移动网是否分开扶植，那都意味着我们的移动网站将会见临越来越多各不雷同设备进行拜访，也就是说即使是扶植零丁的移动网站，我们也必须要推敲网站相符用户的设备特点。
一般来说，网站很轻易实现自适应，笔者博客就是一个完全自适应的网站，但自适应网站有一个可贵，那就是图片问题，图片在网页中的重要性毋须去提，那么我们在移动网站中若何展示给用户合适的图片呢，一般有以下几种做法:
1,直接把质量最好的图片参加到html中，用户用不合的设备拜访时，经由过程CSS或者javascript控制其大年夜小，如许直接忽视不合设备的尺寸，但可能会因为加载过大年夜的图片占用太大年夜带宽而增长拜访时光、消费过多移动流量。
srcset筹划的一个弊病是须要指定不合屏幕情况下的多个图片，如不雅手动生成这些图片，费时辛苦，应用Responsive Image对象，可以动态主动生成图片，操作如下：
2,异步加载，事先加载一张较小的图片页面中，再经由过程javascript获取用户设备信息，按需加载图片，如许解决了速度问题，对于网站排名可能晦气。
3,在html头部应用javasctipt生成一个cookie，包含设备分辨率和像素比等信息，在用户代劳请求图片时，这个cookie会和其它请求信息一路发送到办事器，在办事端获取到cookie之后，对图片进行处理，然后传送给客户端。如许做解决图片尺寸和优化问题，但灵活性较差，还可能因为用户不支撑cookie而导致工作掉败，别的在网页头部增长javascript的方法总让人感稻有那么一点奇怪。
为懂得决移动开辟中的图片响应式问题，HTML5标准专门增长img标签的srcset和sizes属性，srcset以逗号分隔的一个或多个字符串列表注解一系列用户代劳应用的可能的图像，每一个字符串列表包含一个图像的URL和可选的宽度描述符(像素加“w”表示)和像素密度描述符(像素比+“x”表示，默认为1x),w和x不克不及同时应用。sizes表示资本大年夜小的以逗号隔开的一个或多个字符串。每一个资本大年夜小包含一个媒体前提和一个资本尺寸的值,它用来指定图像的预期尺寸,当srcset应用 ‘w’ 描述符时，用户代劳应用当前图像大年夜小来选择srcset中合适的一个图像URL 如不雅img不包含srcset或者srcset中没有’w’描述符，sizes不生效。 被选中的尺寸影响图像的显示大年夜小（如不雅没有CSS样式被应用的话）。如不雅没有设置srcset属性，或者没值，那么sizes属性也将不起感化。读起来很拗口，要弄彻底弄清跋扈，必须明白三个概念:设备CSS像素，设备物理像素，设备像素比，如不雅你不清跋扈，可以查看我之前的┞封篇文┞仿 响应式网站扶植中的像素和宽度问题 。
如不亚妹弄清跋扈了以上三个概念，知道一些高端设备为了让图片显示更清楚，会在浏览器底层把图片进行紧缩，在显示器上用两个或者更多的物理像素显示图片上个一个CSS像素，就能懂得在w是指设备的物理像素宽度，x是指设备的设备像素比，那么下面两段代码的意思分别是:
<img src=http://mdsa.51cto.com/art/201707/"demo-small.jpg" srcset="demo-small.jpg 300w,demo-medium.jpg 600w,demo-big.jpg 750w"> 300物理像素宽的设备加载demo-small.jpg,600加载demo-medium.jpg,750加载demo-big.jpg1设备像素比加载demo-small.jpg,2加载demo-medium.jpg,2.5加载demo-big.jpg
我们这里碰到了一个问题，用w对像素的┞菲握加倍灵活，因为雷同的设备像素比可能有着悬殊的像素差别，进而导致显示大年夜小产生变更，例如，有两台设备，一台CSS像素宽720，像素比2，别的一台CSS像素宽1024，像素比也是2;有两张图片，分辨率分别为360*200的demo-small.jpg和720*400的demo-big.jpg，用像素比控制显示:<img src=http://mdsa.51cto.com/art/201707/”demo-small.jpg” srcset=”demo-small.jpg 1px,demo-big.jpg 2x”>,则两台设备上都邑显示分辨率为720*400的demo-big.jpg，则他们所占屏幕宽度为:
设备1: ([图片像素]720 ÷ [像素比]2) ÷ [CSS像素]720 = 50%
设备2: ([图片像素]720 ÷ [像素比]2) ÷ [CSS像素]720 = 35%
用’w’描述符的方法可能异常灵活的┞菲握加载的图片和展示的大年夜小，照样膳绫擎的设备，可以经由过程w指定合适的图片，也可以经由过程sizes指定图片的显示大年夜小。
综上我们可以得知，应用srcset和描述符，浏览器能根据客户端的情况，主动选择须要加载的图片，进行定向加载，相对于文┞仿开首说的三种响应式图片的解决筹划，灵活性强，节俭流量，快速网站加载速度，是更好的响应式图片解决办法。
动态Responsive Image生成筹划
1，下载代码，并把所有拜访图片的请求重定向到Responsive Image的plm.php文件。
2，创建图片缓存目次，打开plm文件，根据提示做好设备。
3，获取指定图片的操作如下:
剪裁:example.com/example.jpg/(crop:[x[,y,]]width[,height])
缩放:example.com/example.jpg/(reduce:[x[,y,]]width[,height])
括号琅绫擎为动作，可以持续多次应用:
example.com/example.jpg/(crop:[x[,y,]]width[,height])/(reduce:[x,[y,]]width[,height])为先辈行剪裁，然后紧缩处理
[]中的为可选值，x,y不填默认为0,height不填默认为图片高度（剪裁）和宽度缩小后图片高度（缩放）
推荐阅读
一.c，ctypes和python的数据类型的对应关系 ctypes type ctype Python type c_char char 1-character string c_wchar wchar_t 1-character unicode string c_byte char int/l>>>详细阅读
本文标题：Web开发中的响应式图片处理
地址：http://www.17bianji.com/lsqh/36196.html
1/2 1
网友点评
精彩导读
科技快报
品牌展示