核心概念：两种主要添加方式

无论你使用什么工具,添加图片本质上只有两种方式：

1. 直接上传 (托管在网站服务器)：图片文件直接上传到你自己的网站服务器上。
2. 外部链接 (托管在第三方平台)：使用其他网站（如图床、社交媒体）上的图片链接，直接嵌入到你的文章中。

使用网站内容管理系统

对于绝大多数网站（尤其是博客、新闻站），都是通过内容管理系统来管理内容的，最常见的是 WordPress。

以 WordPress 为例：

WordPress 提供了非常直观的“块编辑器”（Gutenberg），操作非常简单。

步骤 1：进入文章编辑器 登录你的 WordPress 后台，点击“文章” -> “写文章”或“编辑文章”。

步骤 2：添加图片块 在编辑器中，点击 号，在弹出的搜索框中输入“图像”或“图片”，然后选择“图像”块并点击它。

步骤 3：插入图片 你会看到几个选项：

• 上传文件：这是最常用的方法，点击“选择文件”，从你的电脑中选择一张或多张图片上传，上传后，你可以直接拖拽调整位置。
• 媒体库：如果你的网站之前上传过图片，可以在这里选择并插入。
• URL：如果你有图片的直接链接（来自其他网站或图床），可以在这里粘贴图片的 URL 地址来插入。

步骤 4：设置图片属性 插入图片后，点击图片，右侧会出现一个设置面板，在这里你可以进行重要设置：

• 替代文本：极其重要！ 这是为图片添加的文字描述，如果图片无法加载，这段文字会显示出来，它也是搜索引擎理解图片内容的关键，对SEO非常有帮助，一张风景照的替代文本可以是““夕阳下的金色沙滩和蔚蓝大海””。
• 鼠标悬停在图片上时显示的文字。
• 说明：图片下方的文字说明。
• 链接到：你可以设置点击图片后跳转到哪里，无链接”、“媒体文件”或自定义的网页。
• 大小：选择插入图片的尺寸（如“大”、“中”、“小”或“原始尺寸”），选择合适的尺寸可以加快网站加载速度。
• 对齐方式：设置图片在文章中的位置，如“左对齐”、“右对齐”或“居中”。

步骤 5：发布或更新 完成所有设置后，点击“发布”或“更新”按钮即可。

手动编写代码 (HTML)

如果你是直接通过 HTML/CSS 来构建网站，或者需要在某些特定位置插入图片，那么就需要手动编写代码。

核心 HTML 标签：<img>

<img src="图片的地址" alt="图片的替代文本">

标签解析：

• <img>：这是图片标签，是一个自闭合标签（没有结束标签）。
• src (source)：必需属性，指定图片的文件路径或 URL 地址。
  • 本地图片路径：如果图片和你的 HTML 文件在同一个文件夹下，直接写文件名即可，如 src="my-photo.jpg"，如果在子文件夹，则写 src="images/my-photo.jpg"。
  • 外部图片 URL：直接粘贴图片的完整链接，如 src="https://www.example.com/path/to/image.jpg"。
• alt (alternative text)：强烈建议添加，用于描述图片内容，作用同 WordPress 中的“替代文本”。

示例：

<!-- 使用本地图片 -->
<img src="assets/blog-cover.jpg" alt="一篇关于网站优化的博客文章封面图">
<!-- 使用外部图片 (来自 Unsplash 的示例图) -->
<img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c" alt="一杯放在木桌上的咖啡">

使用第三方图床

如果你不想占用自己服务器的空间和带宽,或者需要在不同平台（如论坛、社交媒体）分享图片，可以使用图床服务。

什么是图床？ 图床是一个专门用来存储和分享图片的网络服务，你上传图片后，它会提供一个外链 URL，你可以将这个 URL 用在任何地方。

如何使用：

1. 选择图床服务：国内有 SM.MS、Imgur、Chevereto 等，国外有 Imgur、Postimages 等，注意选择稳定、速度快且服务条款允许你使用的。
2. 上传图片：访问图床网站，按照提示上传你的图片。
3. 获取外链：上传成功后，图床会提供多种格式的链接（如 HTML、Markdown、UBB、Direct URL 等）。
4. 复制链接：复制 Direct URL（直接链接），然后按照 方法二 的方式，在 HTML 的 src 属性中使用它。

优点：节省服务器资源、方便分享。 缺点：依赖第三方服务，如果图床服务关闭或图片被删除，你的网站图片就会失效（出现“图片失效”的图标）。

最佳实践与注意事项

无论使用哪种方法,遵循以下建议能让你的网站更专业、更友好：

1. 优化图片文件大小

   • 为什么重要？ 大尺寸图片会严重拖慢网站加载速度，导致用户体验差，影响SEO排名。
   • 怎么做？ 在上传图片前，使用工具（如 TinyPNG、ImageOptim）或软件（如 Photoshop、GIMP）对图片进行压缩，在不影响视觉效果的前提下，尽量减小文件体积。

2. 使用合适的图片格式

   • JPEG/JPG：适用于照片等色彩丰富的图片。
   • PNG：适用于需要透明背景的图片、Logo、图标等。
   • WebP：一种现代图片格式，压缩率比 JPEG 和 PNG 更高，是目前推荐的格式，但需要确保浏览器兼容性。

3. 指定图片尺寸

   • 在 HTML 中，不要只用 width 或 height 来拉伸图片，正确的做法是：先使用图片编辑软件将图片调整成你需要的显示尺寸，然后再上传，这样可以避免浏览器因需要重新计算图片尺寸而导致的页面布局跳动。

4. 始终添加替代文本

   这是对视障用户（使用屏幕阅读器）的尊重，也是搜索引擎优化的关键，清晰、准确地描述图片内容。

5. 考虑版权问题

   • 切勿随意使用网上的图片！ 很多图片都受版权保护，使用时请确保你有权使用，或者选择使用 免费可商用 的图库，如 Unsplash、Pexels、Pixabay 等。

6. 使用响应式图片

   • 为了让图片在不同设备（手机、平板、电脑）上都能完美显示，可以使用 srcset 属性来为不同屏幕提供不同分辨率的图片，从而优化加载性能。

   <img src="small.jpg" 
        srcset="small.jpg 500w, medium.jpg 800w, large.jpg 1200w" 
        alt="响应式图片示例">

   这个例子告诉浏览器：在小屏幕上加载 small.jpg，中等屏幕加载 medium.jpg，大屏幕加载 large.jpg。

对于绝大多数用户来说,使用 WordPress 等 CMS 系统是最简单、最推荐的方式，只需记住“上传前压缩图片，上传后添加替代文本”这两个核心原则，就能很好地完成文章图片的添加工作。