构建现代网页时，图片是不可或缺的元素之一。它们能够增强视觉吸引力，帮助传达信息，并提升用户体验。然而，如果图片没有得到适当的优化，它们可能会显著拖慢网站的加载速度，影响用户体验和搜索引擎优化（SEO）。在本文中，我们将探讨不同的图片格式，并提供优化这些格式的策略和示例。

常见的图片格式

JPEG（或JPG）

• 优点：支持高色彩深度，适合处理照片和复杂的图像。
• 缺点：有损压缩，可能会在高压缩率下失去细节。
• 使用场景：适用于色彩丰富且没有透明度要求的图片。

PNG

• 优点：支持透明度，无损压缩，保留细节。
• 缺点：文件大小通常大于JPEG。
• 使用场景：适用于需要透明度或者高保真度的图形，如徽标和图标。

GIF

• 优点：支持动画和透明度（仅限单色透明）。
• 缺点：仅支持256色，质量较低。
• 使用场景：适用于简单动画和小图标。

WebP

• 优点：支持透明度和有损以及无损压缩，压缩率高于JPEG和PNG。
• 缺点：兼容性不如JPEG和PNG广泛。
• 使用场景：适用于需要优化加载速度的网页，同时保持较高的图像质量。

SVG

• 优点：矢量格式，可无限放大而不失真，文件大小小。
• 缺点：不适合复杂的照片。
• 使用场景：适用于图标、徽标、图表和其他可缩放图形。

图片优化策略

选择正确的格式

根据图片内容和用途选择最合适的格式。例如，对于网页上的照片，JPEG可能是最佳选择，因为它在保持相对较小的文件大小的同时提供了良好的图像质量。对于需要透明背景的图标，PNG可能更合适。

压缩图片

使用工具或服务压缩图片，减少文件大小。例如，使用在线工具如 TinyPNG 来压缩PNG文件，或者使用 Adobe Photoshop 的“存储为Web所用格式”功能来减小JPEG文件的大小。

调整尺寸

根据需要在网页中显示的大小调整图片尺寸。不要上传超大的图片然后依赖浏览器缩放，因为这会导致不必要的加载时间。

使用响应式图片

通过 HTML5 的 <picture> 元素或 srcset 和 sizes 属性，可以为不同屏幕尺寸提供不同大小的图片。

延迟加载

对于非视口内的图片，可以使用延迟加载（lazy loading）技术。这样，只有当用户滚动到图片位置时，图片才会加载。

使用CDN

使用内容分发网络（CDN）来分发图片，可以减少加载时间，因为图片会从离用户最近的服务器加载。

实例分析

示例1：优化网页照片

假设你有一个高分辨率的照片，原始尺寸为4000x3000像素，文件大小为5MB。如果这张照片要在网页上以800x600像素的尺寸展示，那么：

1. 使用图像编辑工具将尺寸调整为800x600像素。
2. 选择JPEG格式，并设置合适的压缩比例，比如70%的质量。
3. 使用TinyJPG等在线工具进一步压缩处理。
4. TinyJPG – Compress WebP, PNG and JPEG images intelligently

优化后的图片可能只有100KB左右，大大减少了加载时间。

示例2：优化图标

如果你有一个图标，需要在网页上以多种尺寸展示，并且需要透明背景：

1. 使用SVG格式，因为它支持透明度，且大小不会随着尺寸变化而变化。
2. 如果SVG不可行，选择PNG格式，并确保图片尺寸不大于实际需要的尺寸。

结论

图片优化对于提高网页加载速度至关重要。通过选择合适的图片格式，压缩文件大小，调整尺寸，使用响应式图片技术，实现延迟加载，以及利用CDN，可以确保图片在不牺牲质量的情况下快速加载。这不仅能提升用户体验，还能对SEO产生积极影响。

.br 强制换行标签

让后面的文字、图片、表格等等，显示在下一行

码海无际<br>码海无际

2.p 换段落标签

在网页中要把文字有条理地显示出来，离不开段落标签，就如同我们平常写文章一样，整个网页也可以分为若干个段落，而段落的标签就是

<p>码海无际</p><p>码海无际</p>

3.hr 水平分割线标签

在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标签来完成，hr 就是创建横跨网页水平线的标签。

码海无际<hr>码海无际

4.div 分区显示标签

分区显示标签，也称之为层标签，常用来编排一大段的HTML段落，也可以用于格式化表，和 p 很相似，是块状元素，经常嵌套使用。

<div>码海无际</div><div>码海无际</div><div>  <div>码海无际</div>  <div>码海无际</div></div>

5.span 行内标签

用来组合文档中的行内元素，没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。

<span>码海无际</span><span>码海无际</span>

6.pre 预格式化标签

pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

<pre>  码海无际  码海无际</pre>

7.ul 无序列表标签

无序列表的各个列表项之间没有顺序级别之分，是并列的。

<ul>  <li>码海无际</li>  <li>码海无际</li>  <li>码海无际</li></ul>

注意：

 1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。 2. <li>与</li>之间相当于一个容器，可以容纳所有元素。 3. 无序列表会带有自己样式属性，但是不推荐使用，一般会用CSS设置。

8.ol 有序列表标签

有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义

1.格式：

<ol type="符号类型">    <li type="符号类型"></li>    <li type="符号类型"></li></ol>

2.有序列表的type属性值:

• 1：阿拉伯数字1.2.3等等，默认type属性值
• A：大小字母A、B、C等等
• a：小写字母a、b、c等等
• Ⅰ：大写罗马数字Ⅰ、Ⅱ、Ⅲ、Ⅳ等等
• ⅰ：小写罗马数字ⅰ、ⅱ、ⅲ、ⅳ等等

3.有序列表的value属性值:

• 指定一个新的序列数字起始值

4.列表可以进行嵌套

<ol>  <li>码海无际</li>  <li>码海无际</li>  <li>码海无际</li></ol><hr><ol type="A">  <li>码海无际</li>  <li>码海无际</li>  <li>码海无际</li></ol><hr><ol>  <li>码海无际</li>  <li type="A">码海无际</li>  <li>码海无际</li></ol><hr><ol>  <li>码海无际</li>  <li>码海无际</li>  <li value="6" type="A">码海无际</li>  <li>码海无际</li>  <li>码海无际</li></ol><hr><ol>  <li>码海无际</li>  <li>码海无际</li>  <li>    <ol type="A">      <li>志存高远</li>      <li>志存高远</li>    </ol>  </li>  <li>码海无际</li>  <li>码海无际</li></ol>

9.dl 自定义型列表标签

对列表条目进行简短的说明

<dl>  <dt>软件说明：</dt>  <dd>这是软件说明</dd>  <dt>软件界面：</dt>  <dd>这是软软件界面</dd></dl>

10.center 居中对齐标签

居中对齐

<center>码海无际</center>