做网页最头疼的就是图片加载慢或者显示不出来。别急，这篇文直接教你怎么用最简单的代码把图塞进去。看完你就不用再到处问人或者查那些看不懂的教程了。
咱们先说核心。其实就一个标签：。对，没听错，就这俩字母。很多新手喜欢搞复杂，什么CSS背景图啊，什么JS动态加载啊，那是后话。第一步，你得先把图显示出来。
代码长这样：
看着挺简单吧？但坑全在细节里。
第一个坑，路径。
这是90%的人出错的地方。你图片放在哪？跟你写的HTML文件在同一个文件夹吗？如果在，直接写文件名，比如 img src="photo.jpg"。如果不在，比如放在一个叫images的文件夹里，那你得写 img src="images/photo.jpg"。注意斜杠，是正斜杠 /，别用反斜杠 \，浏览器不认那个，除非你是在Windows本地瞎搞，但上线了就废了。
第二个坑，alt属性。
别偷懒，一定要写。搜索引擎抓不到图，就靠这个文字知道你在放啥。而且，万一图片挂了，用户能看到提示。比如 alt="我的可爱猫咪"。这不仅是SEO，更是用户体验。
第三个坑，尺寸。
别指望浏览器自动帮你调整。如果你原图是4000像素宽，你直接扔进去，页面会被撑爆。移动端用户直接关掉你的网站。所以，最好加上 width 和 height 属性。比如 width="300" height="200"。这样浏览器能提前预留空间，页面不会抖动。
有人问，html怎么添加图片 还能加链接吗？
当然能。把 包在 标签里就行。
这样图片就成了一个按钮，点击就跳转。简单粗暴。
再说说格式。
现在主流是 JPG, PNG, WebP。
JPG 适合照片，体积小，但有损压缩。
PNG 适合图标、透明背景，无损但体积大。
WebP 是谷歌搞的，现在很火，体积小画质好，但兼容性稍微差一丢丢，不过现在大部分浏览器都支持了。建议优先用 WebP，兼容不了再 fallback 到 JPG。
还有个小技巧，懒加载。
如果页面图片多，一次性全加载，用户等着花儿都谢了。加个 loading="lazy" 属性。
这样用户滚动到哪，浏览器才加载哪。省流量，速度快。
有时候你会遇到图片显示成红叉。
检查三件事：
1. 路径对不对？大小写敏感！Linux服务器上，Photo.jpg 和 photo.jpg 是两个东西。
2. 文件存在吗？别上传了一半或者名字改错了。
3. 权限够吗？服务器文件夹权限要是 777 或者 644，别给 000。
别总想着用绝对路径。
虽然能显示，但如果以后换域名，或者图片迁移，你得改遍所有代码。相对路径最稳。
最后，响应式图片。
手机和电脑屏幕不一样。用
浏览器会根据屏幕宽度自动选合适的图。这能让你的网站在手机上跑得飞快。
记住，html怎么添加图片 只是开始。
怎么让图片加载快、怎么适配不同屏幕、怎么优化SEO，这才是高手和新手的区别。
别光复制代码，去改改参数，看看效果。
多试几次，你就懂了。
如果还是搞不定，检查下控制台（F12），Network 标签页里看图片请求是 404 还是 200。
404 就是找不到文件，回去查路径。
200 但没显示，查 alt 或者样式是不是把图片隐藏了。
总之，别怕报错。
报错是常态。
解决报错才是进步。
这篇文要是能帮你省下半小时查资料的时间，那就值了。
赶紧去试吧。
别光看不练。
代码是敲出来的，不是看出来的。
加油。
