- 相关推荐
正确使用网络图片的问题
图片对于网站的作用绝不仅仅是装饰和点缀，网站颜值高低、能否立刻吸引住用户、能否给用户留下一个好的初始印象，甚至能否让用户更加理解网站所要表达的内容和观点，这些都是可以靠图片来加分的。下面是小编分享的解决使用网络图片的问题的办法，希望大家认真阅读!
图片素材的挑选
挑素材大家都会，这里只重点说一下头图的挑选，也就是页面上方占据视觉焦点的大图。因为它可以说是整个页面中最重要的一张图，直接影响到访问者对你网站的第一印象，所以应该精心挑选。
挑选原则：画面内容合适 > 尺寸足够 > 清晰度足够
另外还有一些加分项：画面构图、色调、适合二次加工(如果需要的话)等。
挑选头图首先当然是画面内容合适，也就是能很好地体现你的主题，或者你一眼看上去就觉得非它不可。如果画面足够有吸引力、冲击力，或者看上去舒服养眼，就更好了。
其次尺寸要够，重点考虑宽度值。比如你计划留给头图的区域宽度是1200px，就不能找张只有1000px宽的图片来凑数。(如果找到喜欢的图，尺寸又不够怎么办?百度和谷歌都有图片搜索功能，可以试试，说不定能找到同一张图的更大尺寸。)
清晰度要足够。清晰度是影响视觉体验的重要因素，你不能找一张模糊的，或者修图过度导致画面明显失真的图片来做头图，否则访问者会觉得你的网站没有诚意。除非你的网站本身就是走的另类风格路线。
对选好的图片进行处理
处理顺序：修图(滤镜调色等) > 修改尺寸(含裁切) > 优化和保存图片
现在就好像你规划好一面背景墙，并且挑好了画框，只等着往里面装画。所以通常是在页面布局已经设计好，图片的位置和尺寸也基本确定下来，才开始对图片进行处理。当然，可能图片放进网页之后发现位置或尺寸不合适，那时可以再调整，只要记住保留好图片的原始文件，不要用处理过的图片把原始文件覆盖掉。
图片处理软件很多，这里就以功能最强大的Photoshop为例，实际操作一下。
2.1 修图
这里的修图指的是对图片进行修饰调整，包含光影、色调、明暗、对比度，或者滤镜、风格化处理，再或者抠图换头换脸等等。这一步就不细说了，相关的教程实在太多，只是需要提醒一下：保留好原始素材文件。不管是修图还是裁切、改尺寸，完成之后都要养成“另存为“的习惯，不要覆盖原始文件。
2.2 修改图片尺寸
根据你规划好的尺寸来对图片进行裁切，所以你找的图片素材必须大于等于实际要用到的尺寸。网页主体部分(body)的宽度通常在1000到1200px比较合适，也就是说头图宽度不能小于你设定的header尺寸(除非你的头图不需要占满整个header区域的宽度)。
2.3 优化和保存图片
网页中用到的图片通常就是三种格式：jpg，png，gif
保存图片时的格式选择，通常遵循以下原则：
色彩丰富的，需要高压缩比的，例如照片一类 —— 存为.jpg
色彩相对较少，透明底 —— 存为.png
动态图片 —— 存为.gif
保存方式，只要是用于网页中的图片，请尽量不要用“存储”和“存储为”，而是用下图中的“存储为web所用格式”。
在网页中引入处理好的图片
图片处理完，终于可以打开html往里添加了。网页中添加图片的两种方式：通过标签引入，以及通过background-image属性设置背景图。
通过标签引入图片
重点1：标签的width和height属性不是用来缩放图像的
给img元素指定width和height的值是一种更规范的做法，虽然我自己经常懒得写。标签中的width和height值应该与图片本身的宽和高相等，最好不要自己随意设定数值。那么写与不写又有什么区别呢?区别在于如果写了，浏览器在加载页面时，可以预留出img所占用的位置，这样在图片完全加载出来之前，就可以更完整地保留html的布局结构。
如果页面用到的图片少，或者图片文件都很小，整体加载速度快的话，基本看不出什么区别。但是如果以后你做比较复杂的网站，页面中需要放非常多的图片，或者有体积比较大的图片，在图片还没有加载出来时，后面先加载的内容会占据图片原本的位置。所以有时候你会看到在一个内容非常多的页面中，图片一张一张跳出来，把已经加载出来的其它内容一点一点挤到后面，整个页面布局看起来完全没有规律，各种内容跳来跳去，直到全部加载完，页面布局才固定下来。
但写了width和height也有一个坏处，就是如果你的图片链接失效，用户加载完整个网页之后，看到的图片所在位置只是一个空框框。因此更规范的写法应该是在里面再加上alt属性，图片显示不出来时，至少能告诉用户这是张什么图。
如果你直接用标签中的width和height来缩放图像，很不妥，非常不妥。
假如是改小尺寸，看起来似乎没什么问题，图片缩小了好像也看不出清晰度的损失。其实你改小的只是图片在用户浏览器上的显示尺寸，并没有改变这个图片文件本身的尺寸，也就是说用户打开网页时，浏览器仍然要从服务器下载原尺寸的图片，然后在显示给用户的时候才按照你设定的数值去缩小图片。显然，这会造成带宽的浪费。如果你的网页是自己做着玩，那没问题，可以略过这一条。但假如你有意转行前端的话就要注意了，以后如果在公司项目中你的上司看到你这样的写法，脸色一定会很难看。
设想一下，假如你在一个页面中用到了十几二十张图片，你把它们精心排列整齐，每个图只占了200*200左右的一小块地，看起来像一个精美的相册。然而一看代码，所有图片都是直接用的1920*1080的高清图片，只不过是在css中改成了显示出来的尺寸。结果可想而知，你的用户要把这个网页完整加载出来将会是一件非常可怕的事情，但愿他们能有足够的耐心，和流量。
要是把图片尺寸改大，那就更不可取了。用css样式来强行放大原图的尺寸，只会让图片精度下降，变得模糊，进而影响整个网站的品质感。看到这样的图，产品经理和设计师都会追着你打的。
我的建议是：标签中的width和height要么不写，要么就写成和原图一样的尺寸。在浏览器控制台里，我们可以把鼠标指针放到代码中的图片路径上，就能看到这个图片文件的真实尺寸。
重点2：始终保持图片高宽比(除了裁切图片时)
保持图片的高宽比，这一条非常重要!我在作品中心不止一次见到被压扁或者拉长的图片，这是图片运用的大忌，千万注意!(除非原始素材就是压扁或者拉长的，那可以适当进行反向拉伸，使其尽量还原正常的高宽比。)
无论是在处理图片素材时，还是将图片插入网页的过程中，我们都应该始终保证图片保持正确的高宽比。(唯一例外的情况就是裁切图片，但裁切图片很多时候恰恰是为了保持图像内容的正确比例，裁切之后画面中的景物人像等内容没有变形，而图片尺寸却变得更适合页面中使用。)
这里需要特别提醒，如果你一定要用标签中的width和height来调整图片尺寸，请只设定一个值，另一个值会根据高宽比自动调整。
另外，也不建议使用百分比来作为中的width和height的值。
图片的超链接
如果你想要让你的图片能像按钮一样点击跳转到其他地方，非常简单，只要在img标签外面套一层就可以了。
【正确使用网络图片的问题】相关文章：
打坐的正确方法图片08-04
手提电锯正确使用方法06-05
关于消火栓的正确使用方法08-04
磨砂膏正确使用方法04-25
润膏的正确使用方法07-20
焗油帽的正确使用方法04-10
pf使用率问题08-01
化妆水正确使用方法02-09
卸妆水的正确使用方法10-24
湿巾的正确使用方法怎么用08-23