© 2023. All rights reserved.

SVG

SVG Sprites

小圖示的顯示和壓縮技術的演進從 .png、.jpg 或 .gif 圖檔、Image Sprites，到 Base64、Icon Fonts 再來到 SVG 與 SVG Sprites，來看看到底 SVG Sprites 哪裡好 (✪ω✪) 本文前半段著重在產生 SVG Sprites 的方法和如何使用 SVG Symbols 定位；後半段說明各種 SVG Icon 的使用方式和優缺比較。

August 20, 2018 SVG 圖片最佳化效能調校加載效能 Image Optimization Loading Performance gulp react.js 吃什麼編碼解碼 encode decode base-64 前端效能系列文 · 留言

圖片最佳化（Image Optimization）

實作「圖片最佳化（Image Optimization）」的第一個問題是「真的需要這個圖檔嗎？」，去除不需要的圖檔即可減少 HTTP Request。第二個問題才是「若圖檔不能去除或被取代，可以做哪些優化？」。

July 30, 2018 圖片最佳化效能調校加載效能 SVG Resource Hints Lighthouse Base64 Images Image Optimization Loading Performance Gzip 編碼解碼 encode decode base-64 前端效能系列文 · 留言

Icon Fonts 教學

以往我們都是將小圖示（icon）用切圖的方式放入網頁，而我們也可以將這些 icon 用 CSS「畫」出來。

October 8, 2013 icon fonts Loading Performance 效能調校 css 加載效能 SVG · 留言