在架設網站中，使用圖片或其他多媒體時，選擇適當的格式對於提高網站性能和用戶體驗至關重要。

圖片格式的選擇

在嵌入圖片之前，要考慮到以下幾個常見的圖片格式：

1. JPEG：這種格式適用於照片、圖像，而且它支持壓縮。JPEG圖像通常擁有較小的文件大小，但可能會有一些失真。
2. PNG：PNG格式通常用於需要透明背景的圖像，例如圖標和圖形。它支持無損壓縮，因此圖像質量較高，但文件大小也較大。
3. GIF：GIF格式用於動圖，它的原理是，一次顯示多張圖像，讓它看起來像連續的動畫。然而缺點是，GIF圖像的色彩範圍有限，不適合用於照片。
4. WebP：WebP是一種現代的圖片格式，它提供了較小的文件大小和高質量的圖像，適用於網頁。但要注意，它不是所有瀏覽器都支持的格式。
5. SVG: SVG 是一種 XML 格式的圖形描述語言，它以矢量形式描述圖形，可以無損放大縮小，而不會失去圖像品質。SVG 圖像以 XML 標記的形式表示，因此它們是可編輯的，可以在文本編輯器中打開和修改。

選擇適當的圖片格式取決於你的需求，如果圖片在網頁相對大小較小，可以使用JPEG。如果你需要透明背景，則使用PNG。動畫圖像可以使用GIF，但對於大多數情況，WebP是一個不錯的選擇。

圖片優化

無論你選擇哪種圖片格式，都應該優化圖像以提高網站性能。以下是一些常見的圖片優化的方法：

1. 壓縮圖像：使用圖像編輯工具或在上傳之前使用線上工具壓縮圖像。這將減小文件大小，提高加載速度。

2. 適當的尺寸：不要在網站上使用過大的圖像，因為它們會增加頁面的加載時間。根據顯示大小調整圖像尺寸。

3. 縮圖：對於大型圖像，可以使用縮圖，並讓用戶可以點擊來查看完整大小的圖像。

4. 瀏覽器緩存：利用瀏覽器緩存功能，讓用戶在首次訪問後能夠更快的載入網站的圖像。

現在，讓我們看一下如何在HTML中嵌入圖片和多媒體。

圖片:

在HTML中，你可以使用<img>元素嵌入圖片:
<img src="example.jpg" alt="範例圖片">

• src屬性指定圖片的URL(位置)。
• alt屬性提供了圖片的替代文本(如果圖片無法顯示的話所顯示的文字)，有助於SEO。

聲音和視頻

要嵌入聲音和視頻，你可以使用<audio>和<video>元素：

<audio controls>
  <source src="example.mp3" type="audio/mpeg">
  瀏覽器無法支援播放音頻。
</audio>

<video controls>
  <source src="example.mp4" type="video/mp4">
  瀏覽器無法支援播放影片。
</video>

• controls屬性提供播放控制鍵。
• <source>元素用於指定不同格式的媒體，以確保跨瀏覽器兼容性。