構建現代網頁時，圖片是不可或缺的元素之一。它們能夠增強視覺吸引力，幫助傳達信息，并提升用戶體驗。然而，如果圖片沒有得到適當的優化，它們可能會顯著拖慢網站的加載速度，影響用戶體驗和搜索引擎優化（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>