设计网页如何添加图片

网页里的图片加不上去，问题往往不在“插入”这个动作本身，而在图片的存放位置、路径写法和尺寸处理。想顺利在网页中插入图片，前提就三条：图片文件有确定的存放目录、路径写对、格式和大小提前处理过。这三点做到，插入图片就是一行标签的事。

实际动手时，设计网页如何添加图片要分场景看：本地调试用相对路径，上线后走服务器目录，富文本编辑器里则是上传后自动生成地址。下面按操作顺序拆开讲。

图片先放对地方，路径才不出错

插入图片的第一道坎是路径。浏览器拿到一段图片地址，只会按这个地址去找文件，找不到就显示裂图。所以图片文件不能随手丢在桌面，要和网页文件形成固定的相对关系。

目录怎么建

常规做法是在网站根目录下建一个 images 文件夹，所有页面图片统一放进去。页面文件在根目录时，引用写成 images/photo.jpg；页面放在子文件夹里，就得回退一层，写成 ../images/photo.jpg。层级越深，回退的 ../ 越多，写错一个就整页裂图。

路径的三种写法

相对路径适合本地调试和站内图片，搬家换域名不用改；根路径以斜杠开头，如 /images/photo.jpg，指向网站根目录，适合全站统一引用；绝对路径带完整域名，一般只用在邮件模板或外站引用。按经验，站内图片优先用相对路径或根路径，少用绝对路径。

遇到过的实际情况是，有人本地打开页面图片都正常，一上传到服务器全部裂开，原因就是本地用了带盘符的绝对路径，换台机器当然找不到。图片地址跟人的通讯录一样，写的是“隔壁老王”就能找到人，写死“某小区某栋某户”，搬一次家就失效了。

一行标签背后的必填项

图片插入靠的是 img 标签，它是自闭合标签，不需要结束标签。真正决定图片能不能显示、显示得好不好看的，是标签里的几个属性。

src 与 alt 两个属性

src 填图片地址，是唯一不能省的部分。alt 填图片的文字说明，图片加载失败时显示，同时供搜索引擎和读屏软件识别，对网站SEO优化有实际作用。alt 要写具体内容，比如“三居室客厅效果图”，而不是“图片1”。

宽高与响应式处理

直接写 width 和 height 属性容易把图片拉变形，更稳妥的做法是用样式控制，让图片最大宽度不超过容器宽度、高度自动等比缩放。这样同一张图在电脑和手机上都不会撑破版面。图片原始尺寸建议控制在 1200 像素宽以内，单张体积压到 200KB 以下，页面加载才不会拖沓。

格式选择也有讲究：照片类用 JPG，图标和需要透明背景的用 PNG，想要更小体积可以用 WebP，但要注意老浏览器兼容。上传前用工具压一遍，这一步省不得。

不同建站方式，插图入口不一样

同样是加图片，手写代码、可视化编辑器、后台管理系统，操作路径差别不小。先弄清自己用的是哪一类，再对照下面的做法。

用后台编辑器插图最省事，但也最容易埋隐患：有些系统上传后生成的是临时地址，过一段时间就失效。上传完记得点开图片看地址，确认指向的是自己网站下的目录。至于挑选工具这件事，可以参照《设计网页的软件》里对不同类型编辑器的对比，选一个插图流程顺手的，比事后返工划算。

插图之后必须做的检查

图片显示出来不等于没问题。上线前有几项核对动作，能挡掉大部分后期麻烦。

1. 刷新页面确认图片不是缓存显示，清一次浏览器缓存再看。
2. 把窗口缩到手机宽度，看图片有没有溢出或变形。
3. 右键查看图片地址，确认不是指向本地磁盘或临时目录。
4. 检查 alt 是否填写，重点图片不要留空。
5. 用页面测速工具看图片是否拖慢了首屏加载。

还有一条容易被忽略：图片版权。网上随手搜的图直接用，后面收到侵权通知的不在少数。商用图片要么用正版图库，要么用明确可商用的免费素材，来源记在素材表里，出问题能追溯。

常见问题解答

图片放进去了却不显示，先查什么？

按顺序查三处：文件名大小写是否和代码一致，扩展名有没有写错，路径层级对不对。服务器区分大小写，Photo.jpg 和 photo.jpg 是两个文件。

一张页面放多少张图合适？

没有固定上限，但首屏大图建议只留 1 张，其余图片做懒加载。单页图片总量控制在 2MB 以内，访问体验比较稳。

图片需要单独做移动端版本吗？

多数情况不用。用样式让图片等比缩放即可，只有横幅大图这类对构图要求高的，才建议准备一张竖版或方版替换。

插图这件事，动手前先花 5 分钟把 images 目录建好、命名规范定下来，后面每张图都按同一套路径规则走，返工能少一大半。设计网页如何添加图片说到底就是路径对、属性全、检查到位，这三步走稳，图片自然服帖。