超文本标记语言/图像

让我们从一个简短的最小示例开始

<img src="turtleneck-sweater.jpeg" />

让我们也看看更扩展的示例

<img src="turtleneck-sweater.jpeg" alt="Photograph of a Turtleneck Sweater"
     title="Photograph of a Turtleneck Sweater" />

图像通常存储在外部文件中。要将图像放置到 HTML 源代码中，请使用 img 标签，并将 src 属性设置为图像文件的 URL。为了支持无法渲染图像的浏览器，您可以提供 alt 属性，其中包含图像的文本描述。要为图像提供工具提示，请使用 title 属性。

示例中 /> 前面的空格是有意留出的。一些较旧的浏览器在省略空格时行为异常。

放置

默认情况下，图像与其周围环境内联放置。要将图像作为块或浮动放置，可以使用层叠样式表。

替代文本和工具提示

一段描述数字文档可访问性挑战的视频。虽然此视频与 PDF 和 Word 文档相关，但该概念也适用于 HTML。

HTML 规范要求所有图像都具有 alt 属性。这通常被称为alt 文本。图像可以分为两类：

• 那些增加了页面内容的图像；
• 那些纯粹是装饰性的图像，例如间隔符、花式边框和项目符号。

装饰性图像应具有空的 alt 文本，即 alt=""。用作项目符号的图像可以使用星号，alt="*"。

所有其他图像应具有有意义的 alt 文本。alt 文本不是图像的描述，请使用 title 属性来描述简短的描述。alt 文本是将在图像而不是图像本身读取的内容。例如，

<img src="company_logo.png" alt="???"> makes the best widgets in the world.

alt 文本应该是公司的名称，而不是广受欢迎的“我们的徽标”，这在文本浏览器中读取时会给出“我们的徽标制作世界上最好的小部件”的句子。

alt 属性代表替代，盲人使用的屏幕阅读器以及非图形功能浏览器（如 Lynx）可以使用它来更好地使用户了解图像的用途。完整准确地使用 alt 文本对于以下原因至关重要：

• 使盲人和视力障碍用户能够理解您网站的内容。
• 帮助机器人和搜索引擎了解您网站的内容。

工具提示

工具提示的示例

一些较旧的浏览器错误地使用 alt 属性标签来生成图像工具提示。但是，实际上应使用 title 属性来实现这一点。

宽度和高度

要使图像显示小于外部文件中的尺寸，请使用 width 和 height 属性。仅指定一个或另一个属性时，图像将按比例缩放以保持相同的总体比例。

格式

大多数 Web 图像将使用有限数量的格式制作。以下是常用支持格式的简单列表。

• jpg / jpeg
  • 适用于照片。
  • 几乎所有浏览器都支持。
  • 无法完美地重新创建图像，导致许多简单的徽标和插图出现明显问题。
• webp
  • jpg 的更高效替代品。
  • 还支持动画和透明度。
• png
  • 适用于具有透明度的图像。
  • 适用于简单的或平面颜色，例如卡通，例如徽标。
• svg
  • 具有无限分辨率的矢量格式。
  • 非常适合徽标和简单的几何图形。
  • 不适用于照片。
• gif
  • 支持动画图像。
  • 在颜色和分辨率支持方面非常有限。
  • 非常低效的格式。

• 
  JPG 图像非常适合静态照片或详细的绘画。
• 
  JPG 不适合简单的图形。这里比较了有损 JPG 和无损 PNG。
• 
  光栅图形（左），与 SVG（右）比较
• 
  比较无损 PNG、有损 JPG 和有损 Webp，包括文件大小。有损格式比无损 PNG 小得多。Webp 在大约相同的文件大小下提供比 JPG 更好的视觉保真度。