picture

Anyway 編輯部 • February 14, 2020

圖像尺寸準則

總覽

每次上傳圖像時，最多創建5張縮小尺寸的圖像副本。然後，anyway將自動將適當大小的圖像插入台式機，平板電腦和移動網站，以確保您的網站訪問者始終能看到其設備正確的大小圖像。

指南

優化每個設備的圖像大小

Image Type	Image Width
Background	1980px
Desktop	1660px
Tablet	1440px
Mobile	600px
Thumbnail	150px

anyway不會增加上傳圖像的大小，只會創建小於原始上傳圖像的圖像。

例如，如果上傳了一個2000px寬的圖像，將創建5個新的優化副本。如果上傳了100像素寬的圖片，則不會創建新圖片。

最大影像尺寸

圖片的總面積不能超過3,145,728像素。您的任何圖像都不太可能超過此限制，但是您可以通過將像素寬度乘以高度來快速檢查。

每個小部件的圖像大小準則

滑塊

滑塊小部件通常與較大尺寸的圖像一起使用，以產生戲劇效果。滑塊通常從一端延伸到另一端，因此最好使用寬度更大的圖像以適合滑塊。對於“方形”滑塊，請使用均勻的長寬比，例如1：1。

最好選擇具有良好填充效果的圖像，以便在調整大小時不會剪切圖像的主要內容。滑塊中的圖像比例應相同，以確保設計一致性

常見的寬高比：16：9、3：4
常用分辨率大小（px）：1600x900、1280x720、1280x960

特定於設備的注意事項：與台式設備相比，移動設備的縱橫比通常相反。您可能必須使用“在設備上隱藏”功能才能正確顯示移動滑塊。

畫廊

Gallery窗口小部件是用於圖像的最靈活的窗口小部件，只是因為佈局選項太多。例如，您可以擁有一個平舖的畫廊，它對於所有圖像都是相同的大小，或者是馬賽克，它對於每個圖像來說都是不同的大小。

圖庫中圖像的縱橫比應反映您希望其顯示的方式。

例如，方形畫廊應具有1：1的圖像比例。
高圖像樣式的畫廊應該具有更長的高度比例，例如2：5或200px x 500px。

為了保持設計的一致性，圖像比例應相同。如果要使用“懸停”效果，請在圖像中保留一些填充，以免圖像被截斷。

通用縱橫比：任何縱橫比。

常用分辨率大小（px）：任何分辨率，但頁面速度不得大於1500px。

圖示

圖標是任何網站的重要組成部分。它們是信息的視覺標記，可以為您的網站增添現代感。您可以使用透明的PNG，JPEG或SVG。

常見的寬高比：通常為1：1，但任何寬高比均適用。

常用分辨率大小（px）：200x200、80x80或任何分辨率。 SVG可以是任何分辨率。

網站圖示

網站圖標不會在您的實際網站上使用，而是在用戶打開您的網站時顯示在選項卡上。

所需的寬高比：1：1
允許的分辨率大小（px）：24x24、36x36、48x48

長寬比與分辨率

寬高比是圖像的寬度和高度屬性的“比率”。

16：9的長寬比可以是16x19像素的圖像，也可以是1600x900像素的圖像。基本上任何比例為16：9的圖像分辨率。

可視化兩個最常見的寬高比：

每個設備的縱橫比不同

儘管anyway優化了您網站上的圖像，但實際上並沒有調整您網站上圖像設計的大小。如果您在桌面上使用寬高比為16：9的圖像，則由於桌面設備較寬，因此在桌面上看起來將是完美的。但是，移動設備要小得多，因此16：9的長寬比有時會看起來很小。

作為補償，您可以使用設備上的隱藏功能為這些設備創建特定版本，也可以調整圖像的尺寸以適合其大小-更改尺寸與設備無關。

注意事項

最大並不總是最好的

為您的網站上載最高分辨率的圖像將確保您的網站的圖像對客戶和客戶而言都是高分辨率的，但是，請記住，大圖像也會對您的頁面速度產生巨大影響。由於高分辨率圖像按比例縮小，因此用戶通常不會注意到分辨率的差異。最好上傳與打算使用的尺寸一樣大的圖像。例如，如果您的網站上的圖片為300px x 300px，則您不想將其上傳為4000px x 4000px的圖像

< 更早的文章較新的文章 >