引言
在当今的网页设计中，图片不仅是视觉的点缀，更是传递信息和提升用户体验的关键元素。无论你是刚接触前端开发的新手，还是希望巩固基础的开发者，掌握如何在HTML中正确插入图片都是必不可少的技能。本文将带你快速掌握HTML图片插入的核心技巧，从基础语法到进阶应用，让你轻松驾驭网页图片。
一、HTML插入图片的基础语法
在HTML中，我们使用 <img> 标签来插入图片。它是一个自闭合标签（即不需要结束标签），其核心属性是 src 和 alt。
<img src="图片路径" alt="图片替代文本">
src（Source）：指定图片的来源路径，这是必须属性，浏览器通过它找到并加载图片。
alt（Alternative）：定义图片的替代文本。当图片无法加载时，会显示该文本；同时对搜索引擎优化（SEO）和无障碍访问（屏幕阅读器）至关重要。
二、深入理解图片路径
为 src 属性提供正确的路径是图片能否显示的关键。路径主要分为绝对路径和相对路径两种。
1. 绝对路径
绝对路径指向外部服务器或网络上的完整资源地址。通常以协议（如http://或https://）开头。
<!-- 使用绝对路径引用外部图片 --> <img src="https://www.ipipp.com/images/example.jpg" alt="绝对路径示例图片">
注意：使用外部图片可能涉及版权问题，且依赖外部服务器的稳定性，如果外部服务器宕机，图片将无法显示。
2. 相对路径
相对路径是相对于当前HTML文件所在目录的路径，这是本地开发最常用的方式。
<!-- 当前目录下的图片 --> <img src="pic.jpg" alt="当前目录图片"> <!-- 当前目录下images文件夹中的图片 --> <img src="images/pic.jpg" alt="子目录图片"> <!-- 上一级目录下的图片 --> <img src="../pic.jpg" alt="上级目录图片">
三、设置图片尺寸
为了控制图片在网页中的显示大小，我们可以使用 width（宽度）和 height（高度）属性。属性值可以使用像素或百分比（%）。
<!-- 使用像素设置固定尺寸 --> <img src="photo.jpg" alt="风景照" width="600" height="400"> <!-- 使用百分比设置响应式尺寸 --> <img src="banner.jpg" alt="横幅" width="100%">
最佳实践：建议始终为图片设置宽度和高度。这样浏览器在加载页面时能够提前预留出图片的空间，避免页面布局在图片加载完成后发生抖动（Cumulative Layout Shift, CLS），从而提升用户体验。
四、进阶技巧：让图片更优秀
1. 使用CSS实现响应式图片
在现代网页设计中，适应不同屏幕尺寸至关重要。通过CSS的 max-width 和 height: auto，可以确保图片永远不会超出其容器宽度，同时保持原始比例。
<img src="responsive-image.jpg" alt="响应式图片" style="max-width: 100%; height: auto;">
2. 图片格式的选择
选择合适的图片格式可以大幅提升网页加载速度：
JPEG：适合色彩丰富的照片，支持有损压缩。
PNG：适合需要透明背景或包含文字的图像，支持无损压缩。
WebP：现代格式，在同等画质下体积比JPEG和PNG更小，强烈推荐使用。
SVG：基于矢量的格式，适合图标和Logo，无论放大多少倍都不会失真。
总结
在HTML中插入图片虽然只需一行代码，但背后涉及的路径选择、尺寸控制以及响应式适配都影响着网页的整体质量和用户体验。熟练掌握 <img> 标签及其属性，结合CSS进行样式控制，你就能在网页开发中游刃有余地处理各种图片展示需求。现在，打开你的代码编辑器，试着插入你的第一张网页图片吧！