5 個設計網頁圖片素材的免費網站

Website designer pana

使用這些免費工具讓您的設計脫穎而出。

當您的工具包中有合適的工具時,您的設計會變得更有創意。 任何最糟糕的設計背後的主要原因不僅是缺乏創造力,而且還缺乏資源。 這篇文章中,我們分享5個有用的免費網站,讓您的設計更上一層樓。

Storyset

圖片素材 storyset
免費圖片素材網站-Storyset

Storyset 是 freepik 旗下的一家為大家提供海量免費插畫的公司,是一個非常優秀的線上開源網站,當中提供了許多高品質的插畫素材與動畫,並且可以讓您免費運用在各種商業或個人用途中,只需要署名即可將免費素材套用在任何的專案當中。

此外,在 Storyset 當中所有的插圖素材,可以讓您在線上瀏覽的同時,對素材的所有細節進行顏色的調整或是移除素材中的各種元素,調整完畢後,能夠直接將修改後的檔案直接輸出成 SVG 或是 PNG 格式,相當的方便。

圖片素材 storyset 2
線上即時調整圖片素材的色彩、元素

甚至,有些圖片樣式允許您替換不同背景,可以選擇一個簡單的背景、一個更詳細的背景,或者完全刪除它。也可以直接使用 Storyset 的線上編輯器將圖片素材製作成動畫!

Canva

圖片素材 Canva
Canva 網站能夠線上編輯所有圖像設計

Canva,是可用於建立社群媒體圖片、簡報、海報、文件和其他視覺內容的平面設計平台,並提供相當多的設計模板予使用者修改使用。更重要的是,該平台為免費使用,但同時提供 Canva for Enterprise 和 Canva Pro 等付費訂閱方案以開通進階功能,使用者亦可付費列印和運輸實物產品。

Canva 提供大量的設計套版,您想得到的各種文宣都有,例如,橫幅廣告、社群圖片、海報、簡報、邀請卡、名片、卡片…等,免費版就已經有多達25萬個套版可以修改使用,Pro版更是每天新增多達42萬種套版。

圖片素材 Canva 2
Canva 圖庫

而更棒的是 Canva 擁有海量的圖庫提供給使用者,因為他們收購兩家免費圖片網站 Pixabay 和 Pexels,使平台使用者得以使用其圖片進行設計。

目前幾乎每個創作者都知道 Canva,因為您可以在幾分鐘創作引人入勝的圖片,而這在 Photoshop 上需要數小時才能完成。 您可以在他們的高級版本上獲得更多驚人的功能,但我們認為免費版本對任何新創作者來說就足夠了。(更加瞭解 Canva 網站功能)

Pixlr

圖片素材 Pixlr
有三種不同的編輯器

Pixlr 是一套基於雲端線上的圖像工具和實用程式,其中包括圖像編輯器、螢幕截圖的瀏覽器擴充功能和照片共享的功能。2008年始創於瑞典,提供簡單到高級的照片編輯。2011年,Autodesk收購了該套件。它可在個人電腦和Android、iPhone等智慧型手機上使用。

圖片素材 Pixlr 2
Pixlr 擁有眾多模板

Pixlr 可以說是 Canva 的進階版圖片製作工具,提供大量的模板跟素材讓你可以快速的就製作出好看的圖片,它開啟速度非常快,很適合即時需要快速製作圖片或修圖的人,而且可以免費使用又不需要安裝軟體。

Pixlr 的功能比 Canva 多了一些,使用介面上也多了一些複雜性,一開始使用上會不太熟悉,但好消息是,Pixlr 是有繁體中文的介面的,中文使用者不用擔心不理解介面。

Adobe Create Cloud Express

圖片素材 Adobe Express
5 個設計網頁圖片素材的免費網站 10

Adobe Create Cloud Express (前身名 Adobe Spark) 是由 Adobe 出品的線上設計工具,是一款線上和行動設計應用程式。輕鬆製作令人驚嘆的社群圖像、短片和網頁,讓您在社交媒體和其他地方都能脫穎而出。提供大量的設計模板,讓您可以替換模板內的文字、素材,快速就製作出有設計感精美的圖片。

Adobe Express 可以說是 Canva 的最大勁敵之一,它整合了 Adobe 旗下知名的軟體 Photoshop、Illustrator、Premiere Pro,內建了很多非常實用的功能:

圖片素材 Adobe Express 2
5 個設計網頁圖片素材的免費網站 11

Adobe Creative Cloud Express主要是針對只有簡單創作使用需求打造,透過提供免費使用超過1000款樣板、字形,同時也能使用Adobe Stock圖庫資源,甚至額外提供免費2GB線上儲存容量,藉此吸引更多人使用Adobe服務功能。

圖庫網站

我們之前介紹過免費付費的圖庫網站,這些圖庫網站都非常的實用,可以在這裡發現許多為您的設計增添風采的美麗圖片!

以下連結列表讓您快速地到達這些很棒的圖庫網站:

延伸閱讀:

必知!6個關於網頁設計排版實用建議和技巧

網頁設計排版-0

溝通在設計中有著至關重要的作用,因為您的網站上的任何文本的目的都是為了與用戶建立清晰的聯繫,讓使用者透過網站可以了解您的服務或是產品,達到傳遞訊息的效果。

排版在這個過程中扮演著重要的角色:好的排版讓閱讀變得毫不費力,而糟糕的排版會讓使用者望之卻步。

Oliver Reichenstein “ Web Design Is 95% Typography ”

優化排版就是優化可讀性、可訪問性、可用性(!)和整體圖形平衡。

網頁設計排版提示

關於排版的最佳實踐存在很多相互矛盾的意見,並且沒有一套嚴格的規則適用於所有情況。但是,您可以做幾件事來確保排版尊重內容並提高可讀性。

以下是您可以在項目中使用的 6 個實用建議和技巧:

盡量減少使用的字體數量

同時使用三種以上的字體會使您的網站看起來雜亂無章,最好將使用的字體系列的數量限制在最低限度,最多兩個字體,但一個字體通常就足夠了,並在整個網站中堅持使用相同的字體系列。

網頁設計排版 1
避免一次使用多種字體
  • 首先為您的正文選擇字體

這是一個非常重要的決定,它將影響任何其他字體(如標題)的決定。正文是網站中最常見的元素,這是您的所有使用者將看到和體驗到的。因此,正文的外觀和感覺將對設計質量產生最大影響。

  • 堅持使用一種字體,直到你掌握它。

對於初學者,建議您只使用一種字體,直到您掌握了該字體,玩轉風格。現代字體已經具有許多不同的風格,這意味著它們是同種字體但有不同粗細權重,具有更多樣式的字型可以幫助您區分特殊上下文中的文本,例如按鈕或標籤。以下是一個很好的例子是 Apple 的 San Francisco 字體。

apple San Francisco
Apple 的 San Francisco 字體

選擇合適的字體大小

網頁設計排版 2
必知!6個關於網頁設計排版實用建議和技巧 20

文本的大小對在螢幕上閱讀內容的體驗有巨大影響:

  • 太小的文本會使讀者感到緊張。結果,用戶可能將跳過大部分呈現的訊息,對於行動裝置尤其如此,小而明亮的螢幕上的小字可能會讓使用者頭疼。
  • 太大的文本也會導致問題。大文本可能會分散注意力,並且往往會引起人們的注意。

這就是為什麼您應該為正文使用舒適的字體大小,雖然不可能為字體大小提供絕對的解決方案,但一般的經驗法則是:

  • 對於電腦裝置:使用16 px 字體或更大用於正文。它不是太大,讀起來很舒服。
  • 對於 iOS 設備:使用至少 11 pt 的文本大小(在不縮放的情況下在典型的觀看距離下清晰可見)。
  • 對於 Android:最小可讀字體大小為 12 sp,但強烈建議正文至少使用 14 sp。

備註:

px:Pixel 像素。螢幕上所顯示的最小單位。

pt:Point 點。1pt=1/72 英吋。72 dpi 的情況下,1pt = 1px。sp:Android 上的文字單位。160 dpi 的情況下,1px = 1dp = 1sp。

靠左對齊並注意間隙

網頁設計排版 3
必知!6個關於網頁設計排版實用建議和技巧 21

在西方世界、網路世界,一般來說字體是從上到下、從左到右閱讀的。靠左對齊類型,可以使文本更易於閱讀。眼睛能夠找到邊緣,這使得閱讀內容變得更加容易:文本一致的靠左邊緣(垂直)為眼睛提供在完成閱讀每條水平線後,返回相同位置來幫助讀者閱讀。

限制行長

行長是文本塊的水平距離。目前,長行可能是網路上最常見的設計問題之一。每行中的字符數量合適是舒適閱讀文本的關鍵。在電腦上舒適閱讀的普遍接受的理想行長是每行大約 60 個英文字符,包括空格(根據 E. Ruder 的“Typographie”)。此行長度對閱讀節奏有積極影響:跳到下一行時我們的大腦會充滿活力(只要不是那麼頻繁)。

(圖片:如果一行太短,眼睛將不得不經常向後移動,打亂讀者的節奏。如果一行文本太長,用戶的眼睛將很難集中在文本上。圖片來源:Material Design)

60 個英文字符延伸到電腦螢幕邊緣的情況很少見,但在大多數行動裝置上,60 英文個字符(如果顯示得足夠大以便清晰可辨)會延伸到螢幕可見區域的邊界之外。行動裝置排版的經驗法則是堅持每行 30-40 個英文字符 (報紙或雜誌中窄欄文本的行長)。

不要縮小行間距

排版就是關於間距。在排版中,我們有一個專門的術語來表示兩行文本之間的間距——行距(或行高)。在文字處理軟件中,這個概念通常被稱為“行距”。

錯誤的引導會導致文本看起來很擁擠。通過增加行距,您可以增加文本行之間的垂直空白,通常可以提高可讀性以換取屏幕空間。

良好的間距有助於可讀性。事實證明,正確使用空白可以提高理解力:它讓讀者覺得文本不太密集,而且更容易閱讀。一個簡單的規則是行距應該比字距寬。根據經驗, 為了良好的可讀性,行距應該比字符高度高出大約 30%。

“影響文本可讀性的主要因素是字體大小和行距之間的良好平衡”

apple 行距
左/太密集、右/剛好。圖片來源:Apple

確保你的文字有足夠的顏色對比

您應該使用顏色和對比度來幫助使用者查看和理解您的網站內容,由於可能會分散注意力,因此在為行動裝置設計時,對比度尤為重要。

文本顏色與背景顏色過於相似,這使得文本難以閱讀。

網頁設計排版 4
低對比難以閱讀

文本和背景之間形成了過多的對比,這也會導致可讀性問題。最常見的問題之一是深色背景下的淺色文本(黑底白字組合),強迫用戶長時間閱讀黑底白字會使用戶的眼睛疲勞。

網頁設計排版 5
較易閱讀且清楚的對比

如果您想掌握顏色對比,WC3 的對比指南可以幫助您了解。他們為對比度設置了最低標準,以便具有不同視覺能力的用戶(包括中等視力低下的人)可以閱讀您的文本。W3C 推薦正文文本和圖像文本的對比度如下:

  • 小文本與其背景的對比度至少應為 4.5:17:1 的比例是首選。
  • 大文本(14 pt 粗體/18 pt 常規及以上)與其背景的對比度至少應為 3:1。

確保文本有足夠的顏色對比度以獲得最佳可讀性。

可以使用對比度工具快速確定您是否在最佳範圍內。

資料來源:Getting Typography Right in Digital Design

延伸閱讀:

WordPress網站備份常見問題+4個備份外掛推薦

WordPress網站備份

您的 WordPress 資料庫包含您部落格上的每篇文章、每條評論和每個連結,如果您的資料庫被刪除或損壞,您將失去網站的所有內容。發生這種情況的原因有很多,並非所有事情都是您可以控制的。透過正確的網站備份,備份您的 WordPress 資料庫和文件,您可以讓網站快速恢復正常。

網站備份是非常重要的,因為問題不可避免地會發生,並且您需要能夠在災難發生時採取行動。花幾分鐘時間輕鬆、方便地備份您的數據庫,這將使您可以花更多的時間在您的網站上發揮創造力和生產力。

關於網站備份的幾個常見問題

*定期備份您的網站,在網站更新之前一定要先備份

應該多久備份一次?

這取決於更新網站內容的頻率,例如多常更新部落格文章、上架商品等等,以及如果您的數據庫連同一些文章、網站內容,一起丟失了,您的感受如何?這是您的決定。由我們維護客戶的網站,會定期每日備份。

有什麼備份方式?

  • 使用外掛備份:這是我們最推薦的方法,因為不需搞懂背後的運作,只需一鍵按下就可完整備份網站,請參考以下的 WordPress 備份外掛推薦。
  • phpMyAdmin+FTP 手動備份:有些備份外掛會限制備份容量(需付費升級),但如果有預算的考量,或是想掌握原始的 WordPress 資料,這會是好選擇。
  • 主機自動備份:WordPress 最佳主機 (VPS-L) 提供每日自動備份,如果有還原需求,只需前往後台點擊還原即可。

我應該保留多少個備份?

一般的經驗法則是至少保留三個備份,並將它們保存在三個不同的位置或形式中,例如 CD/DVD、不同的硬碟、網路雲端、您的電子郵件帳戶等,這可以防止出現問題單個備份檔案損壞。

備份可以自動化嗎?

可以唷,可以使用外掛進行自動化備份。但是,強烈建議您偶爾使用手動備份來備份這些自動備份,以確保該過程正常運行。

備份您的WordPress網站

備份您的WordPress網站有兩個部分:資料庫和文件。您需要備份整個網站,並且需要備份您的 WordPress資料庫。

您的 WordPress 網站包含以下內容:

  • WordPress 核心安裝
  • WordPress 外掛
  • WordPress 佈景主題
  • 圖像和文件
  • JavaScript、PHP 和其他代碼文件
  • 附加文件和靜態網頁

+WordPress資料庫

這些資料以各種組合方式用於生成您的網站。WordPress資料庫包含您的文章、網站內容和在您的網站上生成的大量數據,但它不包括上述元素文件,這些元素共同構成了您網站的外觀和訊息,這些需要保存。

大多數主機備份整個伺服器,包括您的網站,但從他們的備份中請求您網站的副本需要時間,快速恢復至關重要,您需要學習如何備份和恢復您自己的網站文件。

WordPress網站備份外掛推薦

有幾個免費和付費的WordPress備份外掛,其中大部分都相當容易使用。在本文中,我們將分享一些適用於小型企業的最佳WordPress備份外掛。

UpdraftPlus

WordPress網站備份-UpdraftPlus
UpdraftPlus

UpdraftPlus是很受歡迎的免費 WordPress 備份外掛,它被超過300萬個網站使用。

它允許您創建 WordPress 網站的完整備份並將其儲存在雲端或下載到您的電腦,並支持定時備份,您還可以選擇要備份的文件,並可以自動將您的備份上傳到 Dropbox、Google Drive、S3、Rackspace、FTP、SFTP、電子郵件和其他幾種雲端服務。

除了備份每個 WordPress 網站外,UpdraftPlus 可以讓您直接從 WordPress 管理面板輕鬆恢復備份。

UpdraftPlus 有推出 Pro 高級版本,其中包含用於搬家或複製網站、資料庫搜索和替換、多站點支持以及其他一些功能的附加功能,高級版還可以讓您獲得優先支持。

WPvivid Backup

WordPress網站備份-WPvivid-Backup
WPvivid Backup

WPvivid 是新興的 WordPress 備份、還原、搬家的綜合型外掛,核心功能幾乎都可免費使用,這是相當難得的。該外掛可以設定排程備份,定期備份網站,也支援眾多品牌的雲端儲存空間服務提供商,例如 Dropbox、Google 雲端硬碟、Amazon S3、Microsoft OneDrive、DigitalOcean Spaces、FTP 及 SFTP。

WPvivid Backup 外掛經過使用者測試,可以用於移轉使用以下外掛建置的網站:

  • Elementor Website Builder
  • Page Builder by SiteOrigin
  • Beaver Builder – WordPress 頁面編輯器
  • 其他頁面編輯器

WPvivid 也有推出 Pro 版本,有更多進階的功能,例如,建立測試環境網站,並將測試環境網站推送為正式網站、增量備份、資料庫備份加密…等服務。

All-in-One Migration

WordPress網站備份-All-in-One-Migration
All-in-One Migration

All-in-One WP Migration 於 2013 年推出並被超過 500 萬個網站使用,可以證明它是 WordPress 備受信任和經常使用的外掛之一,可以絕對輕鬆地移動網站。

All-in-One WP Migration 專為非技術用戶而建構,擁有對新手友好的功能,使您可以在幾乎沒有或沒有技術知識或經驗的情況下搬家您的 WordPress 網站。

該外掛已經過廣泛測試並確認與大多數 WordPress 外掛和主題兼容。當您安裝和使用 All-in-One WP Migration 時,您不會遇到跨外掛兼容性問題,這些問題可能會減慢、錯誤或破壞您的 WordPress 網站。

Duplicator

WordPress網站備份-Duplicator
Duplicator

Duplicator是一個流行的 WordPress 外掛,用於 WordPress 網站搬家,但是,它也有備份功能。

他們也推出了 Duplicator Pro,將 Duplicator 提升到一個新的水平,例如:拖放安裝、定期備份、雲端儲存網站備份到 Dropbox、Google Drive、Microsoft OneDrive、Amazon S3 和 FTP/SFTP…等等。

無論您選擇哪個WordPress備份外掛,請不要將備份儲存在與您的網站相同的伺服器上。

這樣做是將所有雞蛋放在一個籃子裡,如果您的伺服器硬體出現故障或遭到駭客攻擊,而您沒有網站備份,這下就真的糟糕了,違背了設置定期備份的目的。

我們建議將您的網站備份存在第三方雲端服務上,例如 Dropbox、Amazon S3、Google Drive 等。

資料來源:WordPress Backups7 Best WordPress Backup Plugins Compared (Pros and Cons)

延伸閱讀:

網站圖像指南(檔案大小、尺寸、壓縮提示)

網站圖像

網路現在遍及全球——人們使用許多不同的裝置來訪問各式各樣的網站。在過去,電腦是人們使用網路、網站的主要方式——但現在呢?到了 2023 年,將近 60%的全球網路流量將透過行動裝置瀏覽。

這表示您需要為行動裝置瀏覽者或購物者正確優化網站圖像。如果您不這樣做,他們可能會看到比理想尺寸更小的圖像——迫使他們滾動和縮放——或者更糟的是,根本看不到圖像。 

好消息是確保您的圖像與多種裝置兼容並不需要太多工作。主要方法包括首先使用正確的圖像尺寸(像素和內存大小),以及使用線上圖像優化工具。

最佳的網站圖像尺寸

像素寬度: 2500 像素(pixels)在大多數情況下非常適合在瀏覽器中全螢幕拉伸。如果需要填充瀏覽器寬度,任何小於該尺寸的圖像都可能被截斷或顯得模糊。 

圖像大小:圖像的最佳整體(像素)大小取決於您的使用,例如,背景圖像需要比部落格文章圖像大。

檔案大小:任何大於 20 MB的檔案都會顯著影響您的網站速度。在大多數情況下,較小的圖像(最大 2 MB)更好。

圖片屬性(ALT):圖片屬性(替代文本或替代標籤)是基於文本的,不會真正影響您網站的性能。但是,它們是提供給視障人士使用的,因此請保持屬性文本簡短明了。 

為什麼圖像大小對網站很重要?

對於網站來說,圖像大小很重要,主要有以下三個原因:用戶體驗、頁面速度和排名。圖像尺寸選擇不當通常會同時影響這三個指標。 

這表示在您的網頁上為每個圖像用途,進行最佳圖像尺寸改進,可以同時優化它們。

創造更好的用戶體驗 

為每個用途提供正確的圖像大小有助於改善用戶體驗,因為無需放大細節或滾動查看整個圖像,從而使眼睛更輕鬆。

下面是一個示例,說明當您使用太小而無法跨頁面縮放的背景圖像時會發生什麼(這會導致為了適應螢幕而不斷重複圖像):

2001
不斷重複的背景圖片

如果該網站的所有者選擇嘗試使小圖像符合全螢幕,那麼它會太模糊並且無法讓使用者看清楚。重複的圖像也沒有吸引力,導致糟糕的用戶體驗。 

提高網站頁面速度

當您的網站上有大圖片時,使用者造訪網站頁面時,服務器加載頁面的時間會更長。在圖像 SEO 術語中,這稱為“內容豐富的繪畫(contentful paint)”。較小的圖像尺寸(主要是圖像檔案大小)往往可以更快地跨裝置加載。 

poor load speeds
加載速度不佳的網站

從這裡您可以看到服務器加載第一張圖像的超載速度為 2.1 秒,加載最大圖像的超載速度為 4.1 秒。如果頁面加載時間超過 6 秒,一半的客戶會放棄購物車,那麼加快頁面載入速度以避免高跳出率就很重要了。

提高網站排名

網站排名可以指您網站的整體排名(例如,域名評級 DR),或者當使用者搜尋特定關鍵字時您的網頁排名(搜尋結果排名)。

Google 在演算法中使用大量指標來確定搜尋結果頁面上的內容,圖像質量(以及它們生成的用戶體驗)是當前Google 演算法的一部分。

網站圖像尺寸指南 

我們將介紹特定類型網路圖像的尺寸要求,因為它們並不完全相同。您會在網站上看到五種主要類型的圖像:背景圖像、英雄圖像(Hero)、橫幅、部落格圖像和Logo圖示。

背景圖片

背景圖像是您會在網頁上看到的最大的圖像類型——顧名思義,它用作主頁的背景。

最大圖像寬度: 2500 像素(pixels)

最大圖像高度: 1406 像素(pixels)

寬高比: 16:9

檔案大小:最大 1 MB(可以使用高質量的線上圖片壓縮)

例如:

背景圖片
示例網站:https://library.elementor.com/ceramic-decor-shop/

以這張圖片讓它的主打產品成為焦點。它填滿了屏幕,無論在什麼設備上觀看它都可以延伸。 

橫幅呼籲行動圖像

您之前可能將主圖誤認為是背景圖,但關鍵區別在於它們的高度通常較小——大約是背景圖的一半。如果您需要立即在螢幕上顯示更多文本而使用者無需滾動即可查看,則此圖像類型是一個很好的選擇。

最大圖像寬度:介於 1280 像素(pixels)和 2500 像素(pixels)之間

最大圖像高度:介於 720 像素(pixels)和 900 像素(pixels)之間

寬高比: 16:9

檔案大小:最大 500 KB(可以使用高質量的線上圖片壓縮)

例如:

call to action
示例網站:https://avolovers.com.au/

如您所見,選擇盡可能寬,固定比例圖像高度較短。 

網站橫幅

橫幅圖像比其他圖像類型要復雜一些,因為它們可以有不同的大小和形狀,具體取決於您需要向訪問者展示的內容。然而,最典型的網站橫幅類型是廣告。 

由於 Google Ads 是該領域最受歡迎的服務之一,因此 Google 的工作人員對最佳橫幅尺寸提出了一些建議:

banner image size 2
Google廣告建議的橫幅圖片尺寸-電腦版
website banner size
Google廣告建議的橫幅圖片尺寸-手機版

部落格圖片

部落格圖像的類型和大小也可能不同。然而,值得注意的是,如果我們談論的是主要的“標題”圖像(顯示在頂部的圖像,主要圖像),它們在您的部落格中的大小應該是統一的。

最大圖像寬度: 2240 像素(pixels)

最大圖像高度: 1260 像素(pixels)

寬高比: 16:9

檔案大小:最大 300 KB(可以使用高質量的線上圖片壓縮)

Logo

您的Logo可能是您網站上最小的圖像之一。根據Logo的類型,您應該選擇以下兩種路線之一:長方形或正方形。

大多數Logo適合 1:1 的正方形比例,但是一個更矩形的Logo可以使用 2:3 的圖像比例來獲得幾乎正方形的外觀,甚至可以使用 4:1 的比例。

最大圖像寬度: 250 像素(pixels)

最大圖像高度: 250 像素(pixels)

寬高比: 1:1、2:3、4:1

檔案大小:最大 100 KB(可以使用高質量的線上圖片壓縮)

手機尺寸圖片推薦 

選擇合適的圖片尺寸

在大圖像和最佳尺寸的圖像之間取得平衡至關重要,這樣使用者可以放大,它們就不會佔用太多空間並減慢頁面加載時間。 

關於型錄網站或購物網站,我們通常建議使用 2048 x 2048 像素的方形產品照片。 

這些高分辨率圖像為您的商店提供專業且全面的外觀,並具有出色的縮放功能。請記住,要使用縮放功能,您的圖像必須大於 800 x 800 像素。

保持所有特色圖片的寬度和高度比例,以在產品和產品列表頁面上保持統一的外觀。例如,您可以將它們全部設為正方形。

您的特色圖片會出現在您的商店中的產品的第一張圖片——在您的主頁、購物車頁面、結帳頁面和各種產品系列頁面上。保持所有縮略圖的大小和形狀相同,以傳達優美的商店外觀。 

請記住,您的許多客戶也會在行動裝置上瀏覽,方形圖像更容易為較小的屏幕重新定位。此外,方形和垂直圖像能夠佔據更多的手機螢幕,讓客戶可以看到更多的照片。

注意檔案大小

檔案較大的圖像會極大地影響您網站的速度,尤其是當使用者試圖透過手機瀏覽網站時。而且,如果您的網站速度太慢,則會增加有人離開您的網站並可能轉而使用 Google 搜尋的另一個選擇。

這就是為什麼你要壓縮大圖像,這樣它們的檔案大小就不會那麼大,特別是因為許多網站都有限制您上傳的最大檔案大小。

有一些線上工具可以提供幫助,例如TinyPNGCompress JPEG。(建議閱讀:3個實用線上壓縮圖片工具

使用這些工具,您可以輕鬆地將大圖像檔案拖到上傳區域,壓縮它們以使其變小(同時仍保持圖像質量),然後重新下載新文件。

在大多數情況下,您希望所有標題或背景圖像不超過 1 MB,並且產品照片不超過 300 KB。

調整手機裝置的照片

我們在架設網站時會自動調整圖片大小以適應較小的螢幕,但某些圖片有時可能需要手動編輯。請記住,桌面和行動裝置不僅尺寸不同,而且方向相反。

此外,解析度過大的圖像,在針對行動裝置調整大小時可能會變得模糊。因此,可以將您的圖像縮小到更易於管理的大小和形狀,可以幫助您的商店在所有裝置設備上看起來更好。 

請記住,大檔案也會減慢您網站的加載時間。在電子商務中,尤其是在行動裝置領域,每一秒都很重要,因此優化圖像應該是當務之急。

網路的最佳圖像格式

讓我們看看各種圖像檔案格式以及每種格式帶來的好處。

JPG

JPG 是最常見的數位圖像檔案格式。它受到廣泛地使用,並擁有較小的文件大小和良好的色彩範圍,它的壓縮允許您平衡檔案大小和圖像質量。 

PNG

PNG 是為了透過消除其 256 色限制來改進 GIF 格式。它被廣泛接受,無損(減小文件大小而不降低質量),並支持透明度(例如,透明背景)。缺點是由於無損壓縮,PNG 文件可能很大,而且格式不像 JPG 那樣普遍兼容。

HEIC

HEIC 文件是一種節省空間的文件格式,它佔用的空間大約是使用高級壓縮技術的等效 JPEG 文件的一半。它最常用於在 iOS 設備上存儲照片,因為它是 Apple 的標準文件格式。

WebP

WebP 是一種現代圖像格式,可為網路上的圖像提供卓越的壓縮,與 PNG 和 JPEG 等傳統文件格式相比,文件大小平均節省 30% 以上

GIF動圖

GIF 透過將圖像壓縮和減少為 256 色來提供較小的檔案大小。儘管它已被 PNG 廣泛取代,但它仍用於動畫,因為它是唯一既支持它又被瀏覽器普遍識別的格式。

TIFF

TIFF 是一種無損壓縮格式,受到一系列編輯和 Web 應用程序的廣泛支持。它提供高質量的圖像解析度,多個圖像和頁面可以方便地保存在一個文件中。但是,文件大小往往很大。

小整理:

  • JPG 是將較小的尺寸與不錯的質量結合起來最方便的方式。
  • PNG 提供了更高質量的無損壓縮,但它是以更大的文件大小為代價的。
  • 如果您要提供 360 度全景照片並且想要輕量級文件,則 GIF 很有用。
  • 相比之下,TIFF 可以提供很好的質量,但文件大小通常相當大且不切實際。

我們有提供最佳優化的網站維護服務,其中一大部分就是優化網站中的圖像,優化、壓縮圖像檔案大小可以讓您的網站載入速度更快。

資料來源:Desktop vs Mobile vs Tablet vs Console Market Share Worldwide1 in 2 visitors abandon a website that takes more than 6 seconds to loadWebsite Image Size Guidelines Cheat Sheet

延伸閱讀:

Pantone 公布 2023年度代表色!Viva Magenta 萬歲洋紅 開啟活力新年

Pantone 2023 年度代表色

關於 Pantone 年度代表色

Pantone 是一家專門開發和研究色彩而聞名全球的指標性權威機構,也是色彩系統的供應商,提供許多行業包括印刷及其他關於顏色如數位技術、紡織、塑膠、建築以及室內設計等的專業色彩選擇和精確的交流語言。

自 2000 年開始,每年12月,Pantone 都會發表下一年度的代表色,希望藉由年度代表色,反應全球文化正在發生的現象,讓人們感受到選定的色彩能夠回應自己的需求,賦予顏色不同的使命,訴說新一年度的希望。而年度代表色也將廣泛運用於各種服裝、文化、藝術等領域,希望將顏色所帶來的力量傳遞給社會大眾。

什麼是 Viva Magenta 萬歲洋紅?

PANTONE 18-1750 Viva Magenta
PANTONE 18-1750 Viva Magenta 2023年度代表色

Pantone 的年度代表色 Viva Magenta 18-1750 充滿活力,來自紅色家族中始於自然的色調,表達了一種新的力量訊號。 Viva Magenta 勇敢無畏,是代表脈動的色彩,其旺盛的活力促進了歡樂和正向的慶祝活動,期望大家一同書寫了新的故事。 Pantone表示,今年的年度色彩是強大而充滿力量的,這是一種全新、充滿活力的紅色,陶醉於純粹的喜悅,鼓勵無拘無束地進行實驗和自我表達,一種令人振奮的、無邊界的色調,作為一種突出的陳述而顯現出來。 PANTONE 18-1750 Viva Magenta 歡迎任何對生活充滿熱情和反叛精神的人,它是大膽、充滿智慧和包容一切的顏色

Pantone 執行董事 Leatrice Eiseman 表示

「在這個技術時代,我們希望從自然和真實事物中汲取靈感。 PANTONE 18-1750 靈感來自胭脂紅,它是天然染料家族中最珍貴的染料之一,也是世界上已知的最濃烈、最明亮的染料之一。 Viva Magenta 植根於原始,將我們與原始物質重新聯繫起來,並喚起大自然的力量,激發我們的精神,幫助我們建立內在的力量。」

紐約時報評論家 Jason Farago 表示,Viva Magenta 是「一種接近紫紅色的飽和色調,絕對不是有機的,而是不太電動。」

疫情之今已第三年,各國也已漸漸解封,眼看疫情即將結束,Pantone推出新的年度代表色 Viva Magenta,期望大家在未來能夠持續自我探索,給予人們跳脫框架的力量;我們應帶著對生命、生活充滿熱情的態度,開始新的一年!

Viva Magenta 相關色彩組合

Pantone 官方網站也釋出年度代表色的相關色彩組合,在進行各種設計時可以搭配運用,整體顏色是相當中性且溫和的,萬歲洋紅在這組色彩中非常突出,帶有跳脫框架、脫穎而出的感覺。

Pantone 2023
Explore the Magentaverse

Pantone 年度代表色 Viva Magenta 的相關合作

Motorola: Hello Moto Magentaverse

Motorola 年度代表色合作
Motorola

國際知名手機品牌 Motorola 和 Pantone 已建立多年合作夥伴關係,Motorola 設計師將與 Pantone 專家密切合作,討論其產品組合中的色彩策略。Motorola 和 Pantone 之間的合作夥伴關係是充滿熱情的,並且專注於精確設計的重要性、創新以及色彩和技術的表達呈現。透過這種持續且不斷擦出火花的合作,Motorola 將在美國和全球推出 Motorola Edge 30 Fusion ,採用 Pantone 2023 年度代表色。Motorola 將在 ARTECHOUSE Miami 展覽中設有一個空間,客戶可以在這裡接觸新的設計,並創建他們自己的「Magentaverse」。

ARTECHOUSE

ARTECHOUSE
ARTECHOUSE

ARTECHOUSE 是創新、技術驅動的體驗藝術的領導者,它與 Pantone 合作打造 Pantone 2023 年度代表色沉浸式藝術體驗。這個多感官展覽由公司的創意部門 ARTECHOUSE Studio 策劃和設計,以前所未有的方式探索 Pantone 2023 年度代表色。不僅僅是一種顏色,這個裝置還提供了一種完全身臨其境的體驗,讓客人感受到一種色調的力量,達到了夢幻般的比例。這是 Pantone 與 ARTECHOUSE 連續第四年合作揭曉年度代表色,也是首次以展覽的形式向公眾開放。該展覽將在邁阿密海灘巴塞爾藝術展期間向巴塞爾藝術展的與會者開放,並從 12 月 3 日開始向公眾開放。

回顧 Pantone 前五年年度代表色

Pantone 2018 2022
過去五年的 Pantone 年度代表色
  • 2022 年代表色 長春花藍(Very Peri)
     「長春花藍」結合藍色特質、紫紅基調,所展現出的機靈、愉悅與活力感,反映出虛實世界匯流的時代特質,未來在數位與現實生活中的應用形式都值得期待。
  • 2021 年代表色 極致灰Ultimate Gray)、亮麗黃Illuminating
    持久耐看的「極致灰」與生動活潑的「亮麗黃」,聯手表達出堅韌的正向態度。這個色彩組合實用又穩固,同事也是溫暖又樂觀,為我們帶來韌性與希望。我們需要感受到鼓舞與振奮,這是人類心靈的基本要素。
  • 2020 年代表色 經典藍Classic Blue
    「經典藍」能帶來一種深層的共鳴,像是為不安的心定錨,打下可靠穩定的基礎,期許2020年是一個和平及寧靜的新年度。
  • 2019 年代表色 活珊瑚橘Living Coral
    「活珊瑚橘」一種帶著金色基調和柔和感的色彩,特色是:有活力、樂觀積極、栩栩如生。在日新月異的數位技術發展和社交媒體衝擊的生活中,「活珊瑚橘」帶來養分、擁抱溫暖,為處於不斷變化下的人們提供舒適感和浮力。
  • 2018 年代表色 紫外光Ultra Violet
    「紫外光」由激情的紅紫色與強硬的靛藍紫色,互相交合,象徵一種原創性、遠見、突破現狀等正面意涵,具創造性且富想像力,將照亮即將到來的改變。

資料來源:PANTONE

延伸閱讀: