申请网站
忘记密码
密 码：
登录名：
建站咨询热线：
0532-88781131
、
18562723728
知识普及 » HTML5响应式图片的解决方法
HTML5响应式图片的解决方法
奈薇网站建设
于
2017-01-24 22:03
发表
阅读次数
2790
次
在响应式设计和自适应设计的流行下，很多web应用往往都兼容手机、平板和PC，其中一个让人比较头痛的问题就是图片的加载了。不同平台显然不可能用同一张大的图片，这样子不但浪费手机流量、影响网站载入速度并且在小屏幕下会很不清晰。让浏览器根据分辨率自动识别图片是最好的方法。
响应式图片和多媒体是
青岛网站制作
的响应式网站的三大基础重点之一。表面上看这是一件非常简单的事情，只要把图片元素的高、宽属性值都移去，然后设置max-width属性为100%即可。不过在这么做之前还需要考虑很多情况。
设计响应式图片的难点
去年奈薇建站网科技在
做网站
时也是通过设置max-width属性使得图片能够自适应。不过这么做的前提是你必须要创建一幅尽可能高分辨率的图片。
除非是真正需要那么大的图片，否则这就是一种浪费。智能手机和平板电脑通过移动网络浏览该网站时，并不需要那么大尺寸的图片——大尺寸图片意味着大的带宽。即使不考虑带宽也应该考虑同一幅图片以不同尺寸显示时的问题，在图片原始大小是300px的情况下以1000px尺寸显示无疑会损失很多的细节。最好的解决方法则是使用大图的一部分或者干脆完全用不同尺寸的图片。
同时我们不应当忘记高分辨率的显示需求。Apple设备的retina技术显示图片要求更多的图片，考虑到其他设备也会跟随Apple的高分辨率显示技术（不过可能显示的像素尺寸不同）。我们若将所有不同尺寸的图片都预加载进来，此乃饮鸩止渴之举，万不可取——毕竟我们的目标只是是减少带宽而非增加。
目前已经有几种备选的解决方案解决这些问题，力图小编在这里归纳总结如下：
创建新的图像格式
创建一个新的（html）元素
使用特定技术手段
1.创建新图像格式
这种方法比较容易解释，力图小编呼吁针对响应式图片创建一种新的图像格式。该新的格式包含了几种不同大小版本的图片。比如100k的文件里有75k的版本、20k的版本和5k版本的图像。
从某种意义上讲就像.mp3格式那样，该种文件格式既存储了歌曲也存储了歌曲的meta信息。这里的图像版本信息就好比MP3的meta信息，然后依据既定的一组标准选择该里面最为合适设备的一个图片版本。
这种解决方法的缺点是必须放弃一些可控性能。新文件格式会自行决定什么时候使用哪个版本的图片，只是当然对于不支持该种格式的浏览器也失去了后向兼容。
2.创建新元素（或属性）
该方法已经在使用了，不过在使用方式上存在一些争议。这些争议主要来自两方面：业界的web开发者和浏览器制造者。web开发者提议创建一个新的picture元素（类似HMTL5中的video这样的元素），该元素中包含其他的图片源，示例代码如下：
其中的img元素是默认情况下显示的图片源，在其上面的两个source元素则是在特定媒体查询（mediaqueries）条件下显示的图片——这也是开发者所喜欢的一种解决方案。
ScottJehl针对图片元素创建了polyfill项目，就是利用了这种思想，你现在可是就可以使用它了。
浏览器开发者则是通过给img元素标签增加srcset属性来解决此问题的，功能一样，然而直觉上不好理解。
以srcset的一个值为例讲解：
path-to-another-image.jpg600w200h2x
path-to-another-image.jpg是不言自明的，当符合下述条件时就使用该图片
依据mediaqueries要求，设备最小尺寸为600w和200h
浏览器有以2x像素密度显示的能力
因此这里所表达的意思是，当浏览器能够处理2x像素图片，且设备至少是600px宽、200px高的情况下，使用此图片源显示。此种解决方法从浏览器开发者角度看是非常合适的，毕竟能够让浏览器自己通过算法获取设备的兼容性和像素密度。
力图小编在网上找到了提供响应式图片的做法，我们可以模仿它的做法，如下：
Markup—默认是用img元素标签
javascript—决定viewport的尺寸，将存储在cookie中的相关信息传给服务器，而后再改变img标签的src属性。
Server—获取初始图片请求，读取cookie，如果不是移动终端设备则返回1x1大小的空白占位图。然后等待JS脚本将真正的图片填充进去。
这种方式并没有想期望中那样完美，却也给出了一种解决思路，可以让其他人在上面继续发挥。
许多后续的方法其思路与此相仿，默认都是提供移动端图片，继而尝试探测设备属性后再发送合适大小的图片。
Foresight.js是在给服务器发送请求之前用JavaScript去探测该设备是否支持高分辨率图片，同时也探测该设备所在网络的网速。依据探测结果才向服务器请求合适的图片资源。
Imagesredux使用空白的1x1GIF（转成base64格式）。它将该图片设置为所有图片的初始背景或占位符，提供更好的用户体验。由于图片是依据CSS设置的，所以可用mediaqueries改变响应样式。
HiSRC是一个jQuery插件，它能探测网络速度与分辨率，默认情况下只提供最小的图片。但是HiSRC能够探测设备更多的能力，然后提供更多不同类别的图像。
总结
图片响应式化的第一步是让它自适应，移除高、宽属性然后设置max-width属性为100%。然而这并不能从根本上解决问题。主要的问题在于，那样做会不得不创建一张大尺寸高分辨率的图像，很明显这种图片并不利于移动终端设备的接收。
一种有效的解决方法是使用新的HTML语法，告知浏览器应当使用那张合适的图片；也许我们应当创建新的图像格式，那样也能解决现在的问题。
不过为今之计，还是不得不借助现有的技术实现图像响应式。这些技术的思想是提供移动端版本的图像，然后探测其是否还能处理更大的图像，如果可以则使用Javascript脚本将更大的图片替换默认的小图。
最后，
青岛网站设计
的小编收集的响应式图片的解决方案，希望大家喜欢。
HTML5响应式图片的解决方法相关标签：
网络公司
，
网站开发
，
企业网站制作
，
制作网站
相关热点推荐
网站优化目标及意义
谈网络广告发展的趋势
创造设计中的优雅与节奏
如果你被上个网络公司伤
网页顶尖设计师的思考与
网站建设：建网站的一般
网站的视觉设计
25个判断垃圾站的标准
中小企业网站建设技巧总
怎样制作一个专业的网站
企业建网站的必要性
12个来自Codrop
软件界面设计要素——视
青岛网站设计简约化有什
让网站外链在你睡着的时
网页设计过程中我们要关
优化用户体验，让网站呈
以“产品”思维搭建网站
小心交换友情链接中的陷
网页设计的色彩思考
网页中的图象格式
网站论坛管理经验
网站建设知识——从三个
网站设计中的简洁与简单
2015年网页设计十大
发布的高权重文章被转载
网站建设过程中怎样做好
网站建设：网站建设中应
设计网页页面内容要新颖
网站怎么做到快照收录的
网页设计的审美需求
青岛海信宽带多媒体—L
行之有效的网络推广方式
网站建设价格差距如此大
网站设计中完美风格的形
网站设计的方块元素该如
网站文化与网页设计
网页设计中应急小技巧你
10种优化创意网络推广
网页设计中排版与布局基
奈薇建站网青岛网站建设公司/青岛网站制作公司，专业提供"气质"型网站建设及精美网站制作服务，同时欢迎各地网站建设公司、网站制作公司代理我们的奈薇建站系统共同发展
热点地区：
青岛网站建设价格
青岛即墨网站制作公司
开发区信息港
山东在线门户