每次上傳影像時,最多會建立 5 份縮減大小的影像副本。 然後,網站生成器 會自動將適當尺寸的圖像插入桌面、平板電腦和移動網站,確保您的網站訪問者始終看到適合其設備的正確尺寸的圖像。
Webp 的系統需求
Webp 影像支援下列版本:
- iPhone:第 14 版及更新版本
- Mac /Safari 瀏覽器:最新版本
- 鉻:所有版本
- 安卓:所有版本
支援下列影像檔案類型:
PNG, JPG, JPEG, GIF, SVG, SVG + XML, 伊科, X 圖標, 網絡
每個設備優化的圖像尺寸
上傳影像的大小不會增加,只會建立小於原始影像的影像。 例如,如果上傳了 2000 像素寬度的圖像,則將創建 5 個新的優化副本。 如果上傳 100 像素寬度的圖像,則不會創建新的圖像。
圖像類型 |
影像寬度 |
---|---|
背景 |
八十像素 |
桌上型 |
像素 |
平板 |
1280像素 |
移動 |
像素 |
縮略圖 博客縮略圖 |
像素 三百像素 |
最大影像尺寸
影像的總面積不能超過 3,145,728 個像素。 您的任何圖像都不太可能超過此限制,但是您可以通過將像素寬度乘以高度來快速檢查。
影像大小不得超過 200MB。
上傳大於限制的影像可能會導致下列錯誤:
- 圖片無法上傳。
- 影像會上傳,但影像選擇器中的縮圖不會顯示。
- 無法在編輯器中載入影像。
- 圖像不會在實時網站上加載。
每個小 部件的圖像尺寸準
滑塊
滑塊
通常與更大尺寸的圖像的戲劇性效果使用。 滑塊通常從頭到尾伸展,因此最好使用具有更多寬度的圖像以適應滑塊。 對於方形滑桿,請使用均勻的長寬比例,例如 1:1。最好選擇具有良好間距的圖像,以便在調整大小時不會切斷圖像的主要內容。 滑塊中的圖像比例應該是相同的設計一致性。
- 常見畫面比例:16:9,3:4
- 一般解析度大小 (像素):
照片庫
照片庫
是最靈活的 與圖像使用,因為有這麼多的佈局選項。 例如,您可以使用所有圖像大小相同的平鋪圖庫,或者每個圖像的大小不同的馬賽克。照片庫中圖像的長寬比應該反映您希望它的顯示方式。
- 例如,方形風格的畫廊應具有 1:1 的圖像比例。
- 高大的圖像樣式畫廊應該有更長的高度比例,如 2:5,或 200 像素 500 像素。
對於設計一致性,影像比例應該相同。 在圖像中留下一些填充以使用懸停效果,以便圖像不會被切斷。
- 常見的長寬比:任何長寬比。
- 常見分辨率大小(px):任何分辨率,但頁面速度不大於 1500px。
圖示
圖標是任何網站的一個非常重要的組成部分。 它們是信息的視覺標記,可以為您的網站添加現代外觀。 您可以使用透明的 PNG、JPEG 或 SVG。
- 常見寬高比:通常為 1:1,但任何寬高比都可以工作。
- 常見的分辨率尺寸(像素):200 x 200,80 x 80 或任何分辨率。 SVG 可以是任何解析度。
如需詳細資訊,請參閱 網站圖示。
網站圖標
網站圖標不會在您的實際網站上使用,而是在用戶打開您的網站時顯示在選項卡上。建議您使用 ICO 格式。要將圖像文件轉換為 ICO,請參閱以下資源。
- 所需長寬比:1:1
- 允許的分辨率尺寸 (px):24x24、36x36、48x48
標誌
建議您使用 SVG 格式作為徽標圖像,因為 SVG 文件的優化方式與其他圖像文件不同,因此即使您上傳的徽標尺寸較小,也不會降低質量。
長寬比與解析度
縱橫比是圖像的寬度和高度屬性的比例。 16:9 的外觀比例可以是 16 x 9 像素的圖像,也可以是 1600x900 像素的圖像。 它基本上是任何具有 16:9 比例的圖像分辨率。
可視化兩種最常見的長寬比:
每個裝置的長寬比
雖然圖像在您的網站上進行了優化,但實際上並不會調整您網站上圖像設計的大小。 如果您在桌面上使用寬高比為 16:9 的圖像,則由於桌面設備很寬,因此在桌面上看起來很完美。 但是,移動設備要小得多,因此 16:9 的寬高比有時會看起來很小。
為了補償,您可以使用「在設備上隱藏」功能為這些設備創建特定版本,也可以調整圖像的尺寸以適應大小。 大小的更改與設備無關。
注意事項
最大的並不總是最好的
上傳最大的分辨率為您的網站保證您的網站的圖像是高分辨率為您的客戶和客戶。 但是,請記住,大型圖像也會對頁面速度產生巨大影響。 由於高解析度影像會縮小,因此使用者通常不會注意到解析度的差異。 最好上傳與預期使用方式一樣大的圖像。 例如,如果您的網站上有一張 300 像素乘 300 像素的圖片,則不想將其上傳為 4000 像素 x 4000 像素的圖像。