响应式网站图片处理的4中方法

日期:2016/4/7 / 人气:

图片在网站设计中起重要作用,但也可能会带来不少挑战。当在站点上使用的图像决定,你必须确定,你会寻找那些图像,图像的题材本身,最后它的图像格式是最好的在该特定实例。这些因素都是重要的,但是当你创建一个反应灵敏的网站,还有,你必须面对以及其他挑战。

大小事项

在此之前的响应网页设计的兴起,是一个added网站图片“一刀切”的做法。这意味着相同的图像被传递给所有观众,无论其屏幕大小或设备的(一个图像将被显示的最大尺寸是已使用的大小)。这种方法对上不去响应网站,但是。

这是最好的大屏幕图像往往过于庞大,无论是在物理尺寸和文件大小,为小屏幕设备而言。我们可以缩小图像的物理尺寸下为较小的显示器,但份量文件大小保持。从一个网站性能的角度来看,这是一个大问题。

当涉及到网站的响应,我们需要提供网站图片更聪明的方法。如果你所希望做的是不同版本的图像,这是敏感部位最常见的需要之间进行切换,再就是你可以考虑以更聪明的方式实现图像的几个选项。

自适应数字图像

据该网站的这种做法,自适应数字图像 “检测到您的访问者的屏幕尺寸,并自动创建,高速缓存,并提供你的网页的嵌入式HTML图像的设备进行适当的重新缩放的版本。”有了这个方法,你上传图片的最大版本将与您的设计使用了一些断点一起必需的。

然后自适应数字图像将会创建图像的缩放版本的最佳匹配断点,并根据需要,而不是总是用最大的尺寸拯救他们。甚至还有视网膜屏幕的支持。

这种方法是非常容易部署,无需更改需要您网站的HTML。虽然它绝对可以帮助您提供更小的图像,屏幕较小的设备,有局限性这种方法为好。

自适应数字图像需要Javascript工作。这还需要Apache和PHP,所以这取决于你正在构建的网站类型,自适应数字图像可能不适合你的工作需要。举例来说,如果你的网站是在Windows Server上的.ASPX网站,您将无法使用自适应数字图像。

HiSRC
另一个JavaScript供电(这一个使用jQuery)选项HiSRC。这个插件允许你创建小型,中型和大型版本的图像。然后,该脚本将展示基于视网膜屏幕和网络速度适当的图像。

一个缺点这种方法是,它的工作原理是首先加载最小图像。然后检查,看是否有较大的图像会更合适。如果是这样,它加载这些较大的图像。这意味着有对某些用户双下载。是的,它只会影响高带宽连接的用户,但它仍然是一个应该提到一个性能问题。

另一个缺点是需要HiSRC自定义标记来执行的事实。这使得它非常具有挑战性的在某些情况下使用,比如较大的网站,你正在努力改造这个解决方案或CMS解决方案,不给你完全访问标记。

srcset和大小
如果你正在寻找一种方法并不需要Javascript和更多的是本地的HTML供电解决方案的的srcset和尺寸属性可能是你最好的选择。

添加到<IMG>元素,srcset让你决定正确的HTML中不同大小的图像,它是与另一个新的属性一起使用尺寸。

虽然srcset 是HTML土生土长的一块,它不是在所有的浏览器都支持。最引人注目的是没有支持老版本的Internet Explorer发布沿之前(IE 11和下面不支持srcset)。这意味着,本地或没有,你可能会想修补支持利用填充工具像  Picturefill。因此,即使srcset本身并不需要Javascript,确保该解决方案的广泛支持将推动你把它列入。

CMS供电解决方案
取决于使用内容管理系统,还可以是可被添加到这些平台响应图象的解决方案。

我使用ExpressionEngine CMS和经常把一种叫做“插件影像仪 ”来自动实现调整大小的图像。

如果你正在使用WordPress的,像“一个插件RICG响应图像 ”或“ 自适应数字图像WordPress的 ”搜索可以查到您从CMS权所需要的影像解决方案。

关于艺术指导
为响应网站提供更好的缩放图像的这些方法都工作得很好,如果你并不需要这些图像艺术指导(这意味着你需要以不同的裁剪图像的不同的决议)。如果你需要超越简单的调整大小,使用的HTML <照片>元素将成为您的需求更好的选择。

作者:朋友圈科技


Go To Top 回顶部