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

图片在网站设计中起重要作用,但也可能会带来不少挑战。当在站点上使用的图像决定,你必须确定,你会寻找那些图像,图像的题材本身,最后它的图像格式是最好的在该特定实例。这些因素都是重要的,但是当你创建一个反应灵敏的网站,还有,你必须面对以及其他挑战。
大小事项在此之前的响应网页设计的兴起,是一个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 <照片>元素将成为您的需求更好的选择。
上一个:为什么网站建设权重可以这么简单?
下一个:如何培养信息技术的人才
兰溪网站建设,兰溪做网站,兰溪网站设计