SVG

SVG Sprites

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

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


圖片最佳化(Image Optimization)

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

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


Icon Fonts 教學

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

icon fonts Loading Performance 效能調校 css 加載效能 SVG · 留言