# AVIF 圖像格式

AVIF (AV1 圖像檔案格式) 是一種使用 AV1 壓縮技術的圖像檔案格式，由開放媒體聯盟 (AOM) 開發。與 JPEG 和 PNG 等舊格式相比，AVIF 以其優越的壓縮效率和圖像質量而聞名。AVIF 格式大約在 2018 年首次推出。

自那時以來，隨著 Google Chrome 和 Mozilla Firefox 等主要網絡瀏覽器的支持，以及各種圖像編輯軟件和在線平台的採用，其普及度逐漸增加。到 2020 年和 2021 年，由於其在壓縮效率和視覺質量方面的優勢，AVIF 開始變得越來越受歡迎並被更廣泛地使用。


## ◇ 優點:
### 1. 更高的壓縮效率
AVIF 是一種基於 AV1 視訊編解碼器的圖片格式，它提供了比 JPEG、PNG 和 WebP 更高的壓縮效率。這意味著在相同品質的情況下，圖片檔案大小會更小，或者在相同檔案大小下，圖片品質會更高。

### 2. 更好的圖片品質
AVIF 支援更廣泛的色彩範圍和更高的動態範圍，包括 10 位和 12 位的色深，這比 JPEG 的 8 位色深要高得多。它還支援 HDR（高動態範圍）圖片，使得圖片的色彩和亮度表現更出色。

### 3. 減少頻寬使用
由於 AVIF 的高壓縮效率，使用 AVIF 格式的圖片可以顯著減少網路頻寬的使用。這對於需要傳輸大量圖片的網站和應用程式尤其重要，可以加快頁面加載速度，提高使用者體驗。

### 4. 支援透明度
與 JPEG 不同，AVIF 支援透明度，這使得它成為 PNG 的潛在替代品，尤其是在需要使用透明背景的情況下。與PNG和WEBP相同，AVIF支援透明度並允許影像疊加在不同的背景上且沒有可見邊框。

### 5. 現代瀏覽器支援
現代瀏覽器（如 Google Chrome、Mozilla Firefox 和 Microsoft Edge）已經開始支援 AVIF 格式，這使得在網頁中使用 AVIF 圖片變得更加可行。

## ◇ 缺點:

### 1. 編解碼速度
AVIF 的編解碼過程比 JPEG 和 PNG 更加複雜，因此需要更多的計算資源。這可能會導致在某些低性能設備上速度較慢。

### 2. 兼容性問題
儘管主要瀏覽器和一些圖像編輯軟件已經支持 AVIF，但並非所有都支援 AVIF，
瀏覽器如:Internet Explorer, Safari, and Edge。
某些影像編輯軟體需要額外的插件或轉換工具。與WEBP的情況相同 ，雖然AVIF經過了良好的優化，但將其複製到Figma時卻毫無用處。

### 3. 成熟度和工具支持
雖然 AVIF 正在快速發展，但與更老的圖像格式相比，其生態系統還不夠成熟。一些常見的圖像處理工具和應用可能還不完全支持 AVIF。

## 主流繪圖軟體如 Photoshop 和 Illustrator 沒有直接內建支持導出 AVIF 格式的功能
這是因為 AVIF 雖然技術上先進，但在軟體支持上仍然相對較新。儘管如此，還是有一些替代方法可以將圖像轉換為 AVIF 格式：

### 1. 第三方插件：
Photoshop 插件：有一些第三方插件可以為 Photoshop 增加 AVIF 支持。例如，「Squoosh Plugin for Photoshop」允許用戶直接在 Photoshop 中導出 AVIF 格式。
Illustrator 插件：對於 Illustrator，目前沒有廣泛可用的專用插件來直接支持 AVIF 導出。用戶可以首先導出為其他格式（如 PNG），然後使用轉換工具進行格式轉換。

### 2. 外部轉換工具：
專用轉換軟體：在完成圖像編輯後，可以使用專用的圖像轉換軟體或線上工具將文件轉換為 AVIF 格式。例如：
[Squoosh：](https://squoosh.app/)一款免費的線上工具，支持從多種格式轉換為 AVIF。

XnConvert：這是一款多功能圖像處理工具，支持批量轉換並支持 AVIF 格式。
FFmpeg：這是一款命令行工具，對於技術使用者，可以通過安裝 FFmpeg 並使用特定參數將圖像轉換為 AVIF 格式。
#### 無損導出：從 Photoshop 或 Illustrator 中導出無損格式（如 PNG、TIFF）以保留原始畫質，然後再進行 AVIF 轉換。如果初始導出的文件本身已經經過有損壓縮（如 JPEG），在後續的轉換過程中畫質可能會進一步降低。

## 其他圖像格式

# CSS效果

### 1. Hamburgers
https://jonsuh.com/hamburgers/

Hamburgers 是一個集合，包含了許多有趣的漢堡包菜單動畫效果，適合用於響應式導航。

### 2. AnimXYZ
https://animxyz.com/

AnimXYZ 是一個 CSS 動畫工具庫，提供了一套簡單的語法，讓你能夠輕鬆創建複雜的動畫效果。

### 3. CSS3 Generator
https://css3generator.com/

這個工具生成各種 CSS3 屬性的代碼，包括動畫、陰影、變形等。你只需設置參數，即可獲得對應的 CSS 代碼。