如果您對本網站進行的變更涉及新增圖片或取代現有圖片,以下是幾項一般建議:
圖片¶
- 我們偏好 SVG 影像,但如果沒有 SVG 影像,我們也可以使用 PNG 影像。 此外,對於封面圖片,我們希望它們是從 Unsplash 取得,並且是 WebP 格式。
公司標誌的尺寸為:
- 128x128px
- 384x128px
最佳化¶
PNG¶
使用 OptiPNG 工具來最佳化影像:
optipng -o7 file.png
SVG¶
Inkscape¶
清理 所有 SVG 圖片。
在 Inkscape:
- 檔案另存爲...
- 將類型設定為最佳化 SVG (*.svg)
在「 選項 」標籤中:
- 坐標的有效位數 > 5
- 打開 縮短顏色值
- 開啟 將 CSS 屬性轉換為 XML 屬性
- 開啟 折疊羣組
- 開啟 為類似屬性建立羣組
- 關閉 保留編輯器資料
- 關閉 保留未引用的定義
- 打開 工作周圍的渲染器錯誤
在 文件選項下的 SVG 輸出 標籤:
- 關閉 移除 XML 宣告
- 打開 移除元數據
- 開啟 刪除評論
- 打開 嵌入式光柵映像
- 打開 **啓用 viewboxing **
在 Pretty-printing下的 SVG 輸出 標籤:
- 關閉 斷行分隔輸出格式和縮排
- 縮排字元 > 選擇 空格
- ** 縮排寛度 > 1**
- [ ]關閉 從根 SVG 元素 刪除"xml: space"屬性
在 IDS 標籤中:
- 打開 移除未使用的IDs
- 關閉 縮短IDs
- 縮短前綴
的IDs >
- 開啟 保留手動創建非以數字結尾的 IDs
- 保留以下 IDs >
留空
- 保留以 >
開頭的ID
命令列¶
使用 Scour 命令可以做到同樣的事情:
scour --set-precision=5 \
--create-groups \
--renderer-workaround \
--remove-descriptive-elements \
--enable-comment-stripping \
--enable-viewboxing \
--indent=space \
--nindent=1 \
--no-line-breaks \
--enable-id-stripping \
--protect-ids-noninkscape \
input.svg output.svg
WebP¶
使用 cwebp 指令將 PNG 或 JPEG 影像檔案轉換成 WebP 格式:
cwebp -q 70 -m 6 input_file -o output.webp