如何在网页中正确使用图片

最近在作品中心发现了很多很棒的作品，但同时问题也不少，尤其是在图片的使用上。这次就专门说一下网页中图片素材的使用问题，因为这关系到大家作品的“门面”，算是一个比较重要的问题。

图片对于网站的作用绝不仅仅是装饰和点缀，网站颜值高低、能否立刻吸引住用户、能否给用户留下一个好的初始印象，甚至能否让用户更加理解网站所要表达的内容和观点，这些都是可以靠图片来加分的。那么我们要怎样使用图片，才能为网站加分而不是减分呢？

以下要说的都是我个人经验的积累，不谈什么理论知识，从实用角度出发，直接给你最佳解决方案。

1

图片素材的挑选

挑素材大家都会，这里只重点说一下头图的挑选，也就是页面上方占据视觉焦点的大图。因为它可以说是整个页面中最重要的一张图，直接影响到访问者对你网站的第一印象，所以应该精心挑选。

挑选原则：画面内容合适 > 尺寸足够 > 清晰度足够

另外还有一些加分项：画面构图、色调、适合二次加工（如果需要的话）等。

挑选头图首先当然是画面内容合适，也就是能很好地体现你的主题，或者你一眼看上去就觉得非它不可。如果画面足够有吸引力、冲击力，或者看上去舒服养眼，就更好了。

其次尺寸要够，重点考虑宽度值。比如你计划留给头图的区域宽度是1200px，就不能找张只有1000px宽的图片来凑数。（如果找到喜欢的图，尺寸又不够怎么办？百度和谷歌都有图片搜索功能，可以试试，说不定能找到同一张图的更大尺寸。）

清晰度要足够。清晰度是影响视觉体验的重要因素，你不能找一张模糊的，或者修图过度导致画面明显失真的图片来做头图，否则访问者会觉得你的网站没有诚意。除非你的网站本身就是走的另类风格路线。

2

对选好的图片进行处理

处理顺序：修图（滤镜调色等） > 修改尺寸（含裁切） > 优化和保存图片

现在就好像你规划好一面背景墙，并且挑好了画框，只等着往里面装画。所以通常是在页面布局已经设计好，图片的位置和尺寸也基本确定下来，才开始对图片进行处理。当然，可能图片放进网页之后发现位置或尺寸不合适，那时可以再调整，只要记住保留好图片的原始文件，不要用处理过的图片把原始文件覆盖掉。

图片处理软件很多，这里就以功能最强大的Photoshop为例，实际操作一下。

>>>>

2.1 修图

这里的修图指的是对图片进行修饰调整，包含光影、色调、明暗、对比度，或者滤镜、风格化处理，再或者抠图换头换脸等等。这一步就不细说了，相关的教程实在太多，只是需要提醒一下：保留好原始素材文件。不管是修图还是裁切、改尺寸，完成之后都要养成“另存为“的习惯，不要覆盖原始文件。

>>>>2.2 修改图片尺寸

根据你规划好的尺寸来对图片进行裁切，所以你找的图片素材必须大于等于实际要用到的尺寸。网页主体部分（body）的宽度通常在1000到1200px比较合适，也就是说头图宽度不能小于你设定的header尺寸（除非你的头图不需要占满整个header区域的宽度）。

举个栗子：

假如我们要做的页面，body和header区域宽度均为1200px。现在我们找到了这样一张素材，原始尺寸如下：（菜单：图像——图像大小）

尺寸是足够大了，接下来我们要把它缩小到合适的尺寸。

注意红框标示的部分，在高宽比锁定的前提下，高和宽只需要改其中一处，我们直接改宽度为1200，高度暂时不用管。因为网页的主体内容部分宽度通常是固定的，而高度是可以无限延伸的，所以头图的尺寸当然应该以宽度为基准。另外，网页所用的图片分辨率为72dpi，如果你的素材是300dpi或者150dpi，这里请统统改为72dpi。

接下来网站下载图片无法显示，我们需要从页面设计图，或者手绘草图，或者……脑海中的草图来取得头图高度值。这里我计划的高度是300px，所以我们需要将头图裁切至300px高。（注意：这里之所以不直接修改尺寸而用裁切，是为了保证图像内容不会变形。）

裁切方法一：使用裁剪工具（快捷键：C）

选择裁剪工具后，在顶部面板输入需要裁剪的尺寸

然后裁剪区域默认出现在了画面正中间，你可以手动调整它的位置，以选取画面中最合适的区域。

应用裁剪后，我们得到了一张1200px*300px的图片网站下载图片无法显示，将它另存为jpg格式，放到网页要调用的图片文件夹。

如果你要选取的区域恰好在画面正中间，或者紧邻四边之一，推荐使用下面这种方法。

裁切方法二：使用“画布大小”

我们先把面板中的高度778改为300，然后注意看下面的“定位”。

默认是选择中心定位的状态，裁剪后得到的图像恰好是原来图像的中心部分，如图：

我们可以换个定位点试试，比如以顶部中心定位：

裁出来是这样的效果：

这种方法的缺点就是不能直观地调整选取区域，但如果需要选取中心或者紧邻某条边、某个角的画面，会非常方便。

>>>>2.3 优化和保存图片

网页中用到的图片通常就是三种格式：jpg，png，gif

保存图片时的格式选择，通常遵循以下原则：

色彩丰富的，需要高压缩比的，例如照片一类 —— 存为.jpg

色彩相对较少，透明底 —— 存为.png

动态图片 —— 存为.gif

保存方式，只要是用于网页中的图片，请尽量不要用“存储”和“存储为”，而是用下图中的“存储为web所用格式”。

以jpg图片为例，你可以完全按照下图设置：

保存图片时可能会弹出下面这个警告，不用理它，点“确定”继续。

png图片设置大同小异，只是要注意选择格式时有png-8和png-24两个选项，png-24支持alpha通道透明（也就是半透明)，但并不是所有设备都能兼容，所以目前你可以不用考虑那么复杂，选png-8格式就行了。

gif格式要特别注意原始素材的体积，有的gif是从视频中提取的画面，可能体积比较大，有时我们不得不损失画面质量或者尺寸来尽可能压缩文件体积。最有效的压缩方法之一就是减少画面中的颜色，比如256色的原图改为128色，或64色。其它选项大家可以自己试一试，总之图像质量越低文件体积就越小，怎样取舍由你自己决定。

设置时密切关注文件体积，动图最好压缩到1M以内。1M左右的图片在网页图片中已经非常大了，2Mbps的带宽预计需要6秒下载，实际下载时间可能还更久，如果遇上没耐心的访问者，也许等不到图片加载完就关掉网页了。

3

在网页中引入处理好的图片

图片处理完，终于可以打开html往里添加了。网页中添加图片的两种方式：通过

标签引入，以及通过background-image属性设置背景图。

［通过

标签引入图片］

到了这一步，才是很多人最容易出错的地方。举个栗子：

当我们敲下代码img src="XXX.jpg"引入了刚才保存好的图片，然后接着写width=……多少来着？1200px？我临时变卦想改成1000px的宽度行吗？这个……勉强可以吧，但这种操作只是个偷懒的办法，不规范也容易出问题。

当我写下width="1000px"，发现图片确实缩小了，但是高度也变成了250px。那我又说，我还是想要头部保持300px的高度，于是接着写height="300px"，这样行吗？不行，绝对不行！

这个例子中犯了两个错误，原因如下：

划！重！点！

重点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的值。

［自己试一试］

假如像刚才例子中的情况，中途遇到需求改变，页面留给图片的尺寸变成了1000px*300px，应该怎样处理最高效呢？（前面有讲过方法）

4

图片的超链接

如果你想要让你的图片能像按钮一样点击跳转到其他地方，非常简单，只要在img标签外面套一层就可以了。

总结：无论是图片的内容、色调、构图，还是图片在页面中的位置、排列、尺寸大小、间距等等，都以服务页面内容和基调为首要任务。说白了就是至少要看着舒服，养眼，不能太突兀。处理图片的过程可能很繁琐，但至少你应该了解什么才是正确的做法，等到页面出现了这样那样的问题，你才不至于毫无头绪。况且，正确地使用图片，毫无疑问能够为你的网站加分。

以上可能说的不够完整和深入，但是对于卡在图片处理这一步的小伙伴，希望这些内容能解你的燃眉之急。如果有看不明白的，欢迎到论坛或者微博找我详细讨论。