响应式图片在网页设计中的应用研究

陈奕纬， 吴多智， 陈益全

（琼台师范高等专科学校，　海南　海口　571127）



响应式图片在网页设计中的应用研究

陈奕纬， 吴多智， 陈益全

（琼台师范高等专科学校，海南海口571127）

响应式图片的应用是响应式网页设计的一个重要方面。本文介绍响应式图片4种实现方法及各浏览器对各种实现方法的支持情况。总结得出，要让响应式图片更简便高效地应用到网页设计中，离不开相关标准的推广、更多浏览器厂商的支持、网页前端技术和计算机图形图形技术的发展。

响应式图片；网页设计；图片加载

一、引言

目前，响应式网页已成为网页设计的潮流。响应式网页设计能让网页兼容手机、平板和PC等各种显示设备。作为网页中的重要组成元素，在不同设备中使用同样大的图片，不但浪费手机流量、影响网站载入速度而且小屏幕下图像会显示不清晰。让浏览器根据设备分辨率自动识别并加载相应图片是最好的解决方案，即响应式图片。

二、响应式图片介绍

响应式图片是指在浏览网页时，浏览器根据设备的分辨率自动加载不同规格的图片；随着设备分辨率的变化，调整和加载相对应的图片。响应式图片有以下几种表现形式：

（1）浏览器可以调整图片尺寸。在弹性网页布局中，图片尺寸可以随着浏览器窗口缩放而改变。

（2）提供高清和普通两种版本的图片。高分辨率显示设备用户能浏览高清图片，从而提高用户体验；普通显示分辨率用户浏览普通版本图片，节省手机流量。……