而今屏幕尺寸五花八门，在网站制作过程中网页设计人员重压山大，怎么样让网站更好的兼容多种尺寸的手机端成为现在非常重要的课题。而网页中的图片和图库的响应式设计，也是其中的重点难题。它们是网页中最容易见到，也是最直观可见的元素。打开一个漂亮精致的网站，然而其中的图片和图库看着如何都和页面不匹配，这种情况恐怕是最叫人抓狂的了。
假如要设计好响应式的图片和图库，今天博久网络来聊聊提高兼容性的七个方法，兴许能给你提供一个明确而系统的思路。它们并不涉及到具体代码达成，更多牵涉到设计过程和处置手法，做好了这类工作，具体达成起来就不难了。
1、考虑高宽比
桌面端的图片浏览体验和手机端是完全不一样的，这一点毋庸置疑。对于绝大部分的网站而言，图片展示的地方都非常相近，大同小异。而设计师的任务，是要确保网站伴随屏幕和设施变化的时候，图片的展示不会在页面布局的伸缩变化过程中变得奇怪和失真。
这时，就要一直牢记图片的高宽比，并且一直控制高宽比不会改变。
回到桌面端网页中，大幅的背景图或者置于页面顶端的图片看着很漂亮，可是当它切换到手机端设施中的时候，第一屏幕比率和方向就不同了，那样它是不是还那样好看呢?图片被缩小之后，信息的呈现会不会丢失?它会不会被拉伸?
这时，图片的高宽比的控制就看上去特别要紧了。控制原始图片不被拉伸，同时让图片所展示出来的部分的高宽比可以尽量合理地匹配对应的屏幕，如此也就不必担忧响应式断点过多，致使你需要上传过多的图片。
2、尺寸和比率的一致性
响应式设计就不可以不说断点。为了照顾不一样的屏幕，大家需要将图片裁剪成不同比率不同尺寸的大小，而这也直接影响着整个设计与开发的设计步骤。
很多人仅仅只不过将图片上传到CMS系统中，就期望它能以好的样式呈现出来。这不现实。
每张图片都应当被裁剪为适当的尺寸，并且放置在理想的地方上，确保它们会以用户期望的样子呈现出来。后端或许会在这件事情上花费相当的时间和精力，但这类努力是值得的。
3、用轮播图或者图库
轮播图控件和图库控件是网站中最容易见到的图片载体，并且也可以愈加自如的管理图片。特别是当你用了那些比较著名或者适配范围比较广的第三方控件的时候，控制图片元素的粗活重活基本上都会被这类控件接手过去。
不过，大家之首要条件到的图片长宽比和尺寸大小的控制同样也是应该注意的，不然一样会让网页的展示成效变尴尬。
此外，你还需要什么场所用哪种控件。假如你拥有若干高质量的图片或者需要推荐特定的文章和专题，那样你需要用幻灯片轮播图控件。假如你拥有很多有待展示的图片，可以缩小展示也没有可读性问题的话，可以用图库类的控件来展示。很多作品集类的网站常常会用图库控件。
4、尽可能防止用Captions标签
虽然图片说明(Captions标签)可以叫你的图片的信息愈加丰富，但它会很直接地影响到网页的运作。尽可能防止用它们，假如实在是需要，尽可能用其他的方法来呈现。
图片的Caption属性加入之后，确实能在桌面端拥有好的渲染成效，但小屏幕上常常问题不断。为了不让这类细小的可用性的问题影响客户体验，尽可能防止用就好了。由于这种小问题而让用户没办法忍受并且离去，并不合算。
5、图片和视频混用要小心
假如网站中同时存在图片和视频类的多媒体，用户和设计者应该都是可以同意的，甚至很多用户已经习惯了如此的设计。
但应该注意的是，即使是在同一个页面中，也尽可能不要让图片和视频同时存在于同一个控件或者区块中。或许如此看着非常炫酷，或许一部分图片和视频可以搭配起来，但更多的视频和图片非常难在尺寸上维持一致，致使总会有一部分图片或者视频会留下空白和间隙。
最好的策略还是将两者分拓展示，防止了媒体属性和尺寸上的差异与冲突。这几乎适用于任何设计元素，而图片和视频尤甚。
6、削减非必须的元素
虽然轮播图和图库控件很好使，但很多设计师常常会往其中添加很多垃圾的内容，最容易见到的就是塞入一堆导航箭头、按钮、文本甚至行为召唤按钮。如此的例子不胜枚举。
通常情况下，用户其实是熟悉怎么样同轮播图这种控件进行交互的。除非你的设计和大家的认知有着巨大的差异，以至于需要用其他的导航方法来引导用户。
尽可能只保留用户需要的元素，把事情简单化，不要给予太多的选择。其实简单化之后的设计可以提高你的实际转化的比例。
7、只用高素质的图片
虽然这个道理不言自明，但它仍然需要反复提醒。假如你没高素质的图片，那样还不如干脆不要用图片得了。目前，高素质、高分辨率的图片比以往任何一个年代都看上去必需和要紧。用户不会花浪费时间间去看一个图片素质低下的网站。大伙的屏幕都已经是视网膜屏幕了，低素质的图片在这种屏幕上看上去愈加没办法直视。既然大伙都在追求顶尖的视觉成效，那样高素质图片无疑是必需品。
网站标题网页中的图片和图库的响应式设计是网站建设的重点难题
