核心摘要
- 新手/非程序员： 使用 WordPress、Wix、Squarespace 等网站构建器，它们通常有“添加媒体”或“插入图片”按钮，操作非常直观。
- 程序员/开发者： 在HTML代码中，使用
<img>标签，并通过src属性指向图片的URL，alt属性提供文字描述。<img src="image.jpg" alt="一张美丽的风景照片">
- 关键技巧： 始终优化图片大小（压缩图片），并使用描述性的文件名和
alt文本，这有助于网站速度和SEO（搜索引擎优化）。
使用网站构建器（如 WordPress, Wix, Squarespace）
这是最简单、最常见的方法，适合没有编程背景的用户，我们以 WordPress 为例，因为它是全球最流行的内容管理系统。
（图片来源网络，侵删）
步骤 1：登录你的网站后台
- 对于 WordPress，进入
你的网站地址/wp-admin。 - 对于 Wix/Squarespace，登录你的账户并进入编辑器。
步骤 2：进入要编辑的页面或文章
- 在 WordPress 左侧菜单中，点击“页面”或“文章”，然后选择你想添加图片的那个进行编辑。
步骤 3：找到“添加媒体”按钮
- 在文章编辑器的工具栏上,你会看到一个 “添加媒体” 的图标（通常是一个相机或音乐符号），点击它。
步骤 4：上传或选择图片
- 上传新图片： 点击“上传文件”，从你的电脑中选择一张或多张图片。
- 从媒体库选择： 如果图片已经上传过，可以直接从“媒体库”中选择。
- 从外部链接插入（高级）： 你也可以粘贴图片的在线 URL（来自 Unsplash、Pexels 或其他托管服务）。
步骤 5：设置图片属性并插入
- 选择图片： 勾选你想要插入的图片。
- 填写“替代文本”（Alt Text）： 这是非常重要的一步！
- 作用： 如果图片无法加载，这段文字会显示出来；对于使用屏幕阅读器的视障人士，这段文字会朗读出来；它对搜索引擎优化（SEO）非常有益。
- 填写方法： 简洁、准确地描述图片内容，而不是写“图片1”，应该写“一只金毛犬在草地上追逐红色飞盘”。
- 调整显示设置（可选）：
- 对齐方式： 选择左对齐、右对齐或居中。
- 链接到： 可以选择“无链接”，或者链接到“媒体文件”（点击图片打开原图）、“自定义URL”或“附件页面”。
- 点击“插入到文章”。
图片就已经成功添加到你的网站上了！
使用 HTML 代码（适用于开发者）
如果你在手动编写HTML文件,或者在使用一些高级编辑器（如 VS Code, Sublime Text），你需要直接编写代码。
核心标签：<img>
<img> 标签是一个自闭合标签，用于在网页中嵌入图像。
基本语法
<img src="图片的路径或URL" alt="图片的替代文本">
关键属性详解
-
src(Source - 必需)
（图片来源网络，侵删）-
作用： 指定图片的来源，浏览器会根据这个路径来加载图片。
-
值类型：
-
相对路径： 图片和你的HTML文件在同一个文件夹下。
<!-- 图片和HTML文件在同一目录 --> <img src="logo.png" alt="公司Logo"> <!-- 图片在 images 文件夹下 --> <img src="images/profile.jpg" alt="我的个人照片">
-
绝对URL： 图片位于互联网上的其他服务器。
（图片来源网络，侵删）<!-- 引用网络上的图片 --> <img src="https://www.example.com/path/to/image.gif" alt="一个示例动画">
-
-
-
alt(Alternative Text - 强烈建议)- 作用： 为图片提供替代性的文本描述。
- 为什么重要？
- 可访问性： 屏幕阅读器会朗读这段文字，帮助视障用户理解图片内容。
- SEO： 搜索引擎通过
alt文本了解图片内容，有助于图片在搜索结果中排名。 - 用户体验： 如果图片因网络问题无法加载，
alt文本会显示在图片的位置上。
- 如何写： 描述图片的主题、内容和情感，避免使用“图片”、“照片”等词语，因为屏幕阅读器会自动说明这是一个图片。
-
width和height(可选)- 作用： 指定图片的显示宽度和高度。
- 重要提示： 最好只设置其中一个（如
width），让浏览器自动计算另一个，以保持图片的原始宽高比，避免图片被拉伸或压缩变形。 - 示例：
<!-- 设置宽度为300像素，高度自动调整 --> <img src="photo.jpg" alt="风景" width="300">
-
title(可选)- 作用： 当用户将鼠标悬停在图片上时，会显示一段提示文字。
- 注意：
title主要用于增强用户体验，但不能替代alt属性，对于可访问性来说，alt是必需的。 - 示例：
<img src="link.jpg" alt="点击这里访问我们的主页" title="访问主页">
完整示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">我的图片页面</title>
</head>
<body>
<h1>欢迎来到我的网站</h1>
<p>这是一张我喜欢的风景照。</p>
<!-- 使用相对路径 -->
<img src="images/mountain.jpg"
alt="远处是连绵的雪山，山脚下是宁静的湖泊和绿色的森林"
width="600"
title="壮丽的雪山风景">
</body>
</html>
最佳实践与重要提示
-
优化图片大小（至关重要！）
- 问题： 未优化的图片文件体积巨大，会严重拖慢网站加载速度，导致用户流失和SEO排名下降。
- 解决方案： 在上传图片前，使用工具压缩它。
- 推荐工具：
- TinyPNG: https://tinypng.com/ (强烈推荐，效果非常好)
- Image Compressor: https://imagecompressor.com/
- Squoosh: https://squoosh.app/ (由 Google 开发，功能强大)
-
使用描述性的文件名
- 错误：
DSC_1234.jpg - 正确：
blue-mountain-landscape.jpg - 好处： 有助于搜索引擎理解图片内容，提升SEO。
- 错误：
-
选择正确的图片格式
- JPEG (.jpg): 适用于照片等色彩丰富的复杂图像，有损压缩，文件较小。
- PNG (.png): 适用于Logo、图标、透明背景的图片，无损压缩，文件相对较大，但质量高。
- WebP (.webp): 现代推荐格式，它提供了比 JPEG 和 PNG 更好的压缩率，文件更小，且质量相当，现代浏览器（Chrome, Firefox, Edge）都支持，如果你的网站构建器或服务器支持，优先使用 WebP。
-
使用响应式图片
- 问题： 在大屏幕上显示大图，在手机上显示同一张大图，会浪费流量和加载时间。
- 解决方案： 使用
<picture>标签或srcset属性，为不同屏幕尺寸提供不同分辨率的图片。 - 这是一个进阶技巧，但对于现代网站开发非常重要。 你可以搜索 "HTML responsive images" 来学习更多。
希望这份详细的指南能帮助你顺利地在网站上添加图片！如果你有更具体的问题，比如使用某个特定平台，可以随时再问。
