北京做网站公司分享响应式图像解决方案

北京网站建设公司为您提供专业、高端的一站式服务

北京做网站公司分享响应式图像解决方案


北京网站建设公司杰诚网提供北京做网站、北京百度优化服务

  自从2010年Ethan Marcotte开始讨论响应式网页设计,开发者和设计师们竞相寻求处理响应式图片的方法。这的确是一个棘手的问题 ,因为我们对同一个网站在众多设备宽度下,使用同一图像源。你愿意在一个大显示屏上显示模糊地、马赛克状的图像?你愿意在你的手机上加载一个巨大的(虽然更漂亮的)图像?这个问题令北京做网站公司左右为难。

北京做网站公司

  一群来自响应式问题社区组(RICG)的聪明家伙致力于解决这个难题,他们使picture元素和srcset、sizes属性纳入HTML 5.1规范草案 。因为我们无法预测用户在何地以及如何访问我们的网站,所以北京做网站公司需要浏览器自身根据情况选择最好的图像。新规范将解决以下问题:
  基于设备象素比(device-pixel-radio)选择
  基于viewport选择
  基于Art direction(美术设计)选择
  基于图像格式选择
  该规范中,img元素增加了两个新属性:srcset和sizes。srcset用来声明一组图像源,浏览器根据我们使用描述符指定的条件来选择图像。描述符x表示图像的像素密度,描述符w表示图像的宽度;浏览器使用这些信息从列表中选择合适的图像。sizes属性为浏览器提供将要显示图像的尺寸信息,srcset使用w描述符时必须包含此属性。这种方法尤其适用于可变宽度的图像,我将在后面详细讨论。
  北京做网站公司现在可以根据用户的viewport,提供不同质量或美术设计(art direction)的图像,无需借助复杂的服务器端设置。响应式图像将成为HTML规范的重要组成部分,所有浏览器终将都会支持此解决方案。
  固定宽度图像:基于设备像素比选择
  视网膜屏幕的广泛应用,使我们不仅需要考虑屏幕分辨率,而且也需要考虑像素密度。视网膜屏幕,4K显示器,UltraHD-它们都比相同尺寸的标准分辨率显示器填充了更多的像素。更多的像素=更清晰的图像。
  北京做网站公司有些图片不管屏幕尺寸,始终以固定宽度显示-如站点logo或人物简介图像,也就是说需要根据设备像素比来选择。浏览器将根据设备像素比来选择加载哪张图像。
  srcset属性列出了浏览器可以选择加载的源图像池,是一个由逗号分隔的列表。x描述符表示图像的设备像素比。浏览器根据运行环境,利用这些信息来选择适当的图像。不理解srcset的浏览器会直接加载src属性中声明的图像。



北京做网站公司推荐
杰诚信达
多一份选择,总有收获。

联系我们建站,免费获得专属《做网站方案》及报价。

咨询相关问题或预约面谈,可以通过以下方式与我们联系。

010-59814526