網站架設/網頁設計100問-為什麼網站不要用檔案很大的照片?你該知道的線上圖片瘦身、裁切、調整尺寸神器

更新於 發佈於 閱讀時間約 9 分鐘

為什麼照片要壓縮降畫質?用攝影師拍的照片原檔,不是最清晰、也是最高畫質嗎?為什麼網頁設計師不喜歡也不建議?

如果你也有疑問,或是想知道如何快速簡單處理手邊照片。這篇網站架設/網頁設計100問會告訴你!

這篇文章,希望從網頁設計、數位行銷、個人品牌、中小企業的不同角度,用我們的經驗,來回答網站架設/網頁設計100問的第2問。

透過今天的文章,你會得到:

  1. 客戶小故事
  2. 問題1.網頁圖檔太大會怎樣?
  3. 問題2.放在網頁上的圖檔檔案大小建議要多大?
  4. Step1.【多張圖片一次瘦身】Batch Compress
  5. Step2. 【裁切你要的圖片區域】 AnyCrop
  6. Step3. 【更換尺寸】Bulk Resize Photos
  7. Step4. 【為圖片加上浮水印】Batch WaterMark
  8. Step5. 【將JPG轉檔為PNG】Iloveimg
  9. 結語

客戶小故事

raw-image

故事是這樣的。之前幫我的客戶兩兩探戈,做了一頁式形象網站。也成功地在半年把客戶行業的SEO關鍵字【台中 探戈】推到了前三(對,我們會做一頁式SEO)。

因為曝光成效不錯,現在要大更新網站,去強化客戶見證、上課紀錄的呈現,來提升轉換率。(最後成果請點我)

在索取上課紀錄照片素材時,我發現客戶先傳了幾張jpg檔照片,每張都是24~26Mb左右。一問之下,發現是活動攝影師提供的照片。我詢問客戶,有沒有壓縮過的檔案?

客戶問我:
「為什麼照片要壓縮?這樣畫質不就會變差嗎?用攝影師原檔不是最好嗎?」

於是我開始和她講解關於圖檔大小的影響,以及我們平常可以如何在沒有平面設計師的狀況下,快速處理圖檔照片。

以下,我會回答圖檔與網頁設計的兩個常見問題。以及回答之後,介紹我自己是如何處理及使用客戶或我自己的圖檔。

問題1:網頁圖檔太大會怎樣?

raw-image

要回答這個問題,大家可以回想一下,有沒有用過網速很慢的WIFI。然後去看一些圖檔照片多的網站,就轉圈圈轉半天,網頁載入慢到讓人不耐煩。

以使用者體驗來說,如果他的網速不夠。當他好不容易因為廣告、自然搜尋、社群連結進入了你的「全大圖」網站。結果因為你的圖檔太大,對他的網速太吃力。發現網頁載入好慢。如果你是那位使用者,你的下一步會是? 我想多數人都會等不及而離開。

以Google搜尋引擎來說,Google官方已經把網頁的載入速度,名列作為搜尋排名的一項評分指標。如果一進去都是25Mb的大圖,網頁載入的速度會被拖累。而你網站的搜尋排名,也會因此受到Google降低評分影響。

以主機負擔來說,每次圖檔被瀏覽者讀取都是對主機的負擔。如果你使用的主機商或主機方案,是比較低階的,你把這些太大的圖片丟到網站上。很有可能就會讓你的網站不僅拖慢速度,甚至再多一點人同時瀏覽你網站時。就會因為效能不夠,而無法載入(更差的使用者體驗)。

問題2:放在網頁上的圖檔檔案大小建議要多大?有什麼要求嗎?

raw-image

如果有PNG檔,請給PNG檔。其他檔案格式就需要用轉檔方式。
檔案大小我們建議最好在5Mb以內。原檔太大,我們就必須要使用線上壓縮工具。

好的網頁設計師,一定會想辦法讓圖檔越小越好。如同上一個問題所說,網頁設計就像玩翹翹板一樣,設計豐富與載入速度的關係,是權衡與取捨。要設計最豐富,就會犧牲網頁載入速度。如果一昧追求載入速度,那就是純文字保證載入最快。所以,沒有最完美,只有條件最佳解。

至於壓縮、裁切、轉檔,這些名詞定義有一個簡單清楚的說明:

壓縮圖片:將圖檔「體積」進行壓縮,圖片的「尺寸」與「格式」不會改變。
剪裁圖片:對於圖片的「尺寸」進行修改,通常圖片的「體積」也就會跟著縮小。
轉檔圖片:轉檔是改變圖檔的「格式」,通常「體積」會跟著跟改,但尺寸不會。

(說明引用出處: 12款線上圖片壓縮工具。PNG、JPG圖檔縮小沒煩惱)

所以在圖檔大小上,能讓檔案壓縮盡可能小,但又不會讓使用者看起來覺得糊糊的。這就是我們要追求的。但如果旁邊沒有平面設計師,我們要自己來時,那要如何線上轉檔、壓縮、裁切呢?

Step1.【多張圖片一次瘦身】Batch Compress

raw-image

因為希望能讓事情省時省力好掌握,所以以下介紹的前四步,都是同一個軟體公司旗下的。做完一步直接點下面的連結,跳到下一步非常方便。

使用說明:
上傳你需要壓縮大小的圖檔(可複選),基本上對付一般照片綽綽有餘。速度非常快。

連結傳送門-Batch Compress

Step2. 【裁切你要的圖片區域】 AnyCrop

raw-image

之所以需要裁切。可能是你只要圖片某個部分。
比如你的全身形象照,要拿去放在FB、LINE的大頭貼時。
我們就只會裁切我們需要的區域。

raw-image

使用說明:
請注意裁剪圖檔面積的尺寸。雖然下一步可以幫你改變尺寸。但不同比例落差太大的話,改變尺寸後就有可能產生圖被捏壞的情況。

連結傳送門-AnyCrop

Step3. 【調整影像尺寸】Bulk Resize Photos

raw-image

要調整影像尺寸,除了每個社群平台、網站平台要求的尺寸都不太一樣之外。還有一個重要原因,有些平台,比如說Facebook,一律都會對圖檔進行破壞性壓縮(圖片會變糊)。所以我們都會建議圖片大小,如果可以,放大到建議尺寸的兩倍。這樣子會比較保險。

使用說明:
常見建議尺寸我列幾個常用的給大家參考。(以下皆為像素)

Facebook:

1.Facebook動態貼文-940 x 788
2.Facebook粉絲團封面-1640 x924
3.Facebook活動封面-1920 x 1080

Instagram:

1.Instagram一般貼文- 1080 x 1080
2.Instagram限時動態- 1080 x 1920
3.Instagram大頭貼- 1080 x 1080

YouTube:

1.YouTube頻道封面:
#手機 1546 x 423 (可視範圍)
#平板 1855 x 423 (可視範圍)
#電腦 2560 x 423 (可視範圍)
#TV電視 2560 x 1440
2.YouTube影片縮圖: 1280*720
3.YouTube大頭貼: 800 x 800

網站:

網站尺寸因為有跨瀏覽器、跨裝置、不同版面設計,所以我只列出比較廣泛通用的。
(不同電商平台需求,下次我們再另外整理)

1.電腦版BANNER:
1920 x 1080 or 2560 x1440
(寬:高的比例為 16:任意正整數)

2.手機版BANNER
基本上可以與電腦版通用。如果真的要獨立做。可抓寬度428~500

3.平板版BANNER:
平板(Tablet PC)滿版寬度可用 1024

如果你覺得太複雜,而你是中小企業、個人網站、內容創作者。總之網站可以先記兩個SIZE就好。1920 x 1080與1080 x 1080。大部分的網站圖片需求都可以用這兩種解決。或者用Canva等線上圖片編輯平台,編輯加調整尺寸。

連結傳送門-Bulk Resize Photos

Step4. 【為圖片加上浮水印】Batch WaterMark

raw-image

沒有浮水印需求的朋友,可以直接忽略這一步。

加浮水印是為了防盜圖,也可以在圖片上去間接宣傳。
市面上許多浮水印軟體都要付費。而這浮水印格式不僅免費,也可以選擇照片或文字。
算是非常佛心。

連結傳送門- Batch WaterMark

Step5. 【將JPG轉檔為PNG】iloveimg

raw-image

前面有提到,我們希望最後的檔案是PNG。所以我們放到最後一步來處理轉檔的事情。當然,如果你有其他檔名的需求,也可以直接Google搜尋 XXX轉XXX。就會有許多線上對應的工具。

那iloveimg雖然也是綜合的圖片處理工具,但我們只用它轉檔的功能。

連結傳送門-iloveimg

結語:

不知道今天的 網站架設/網頁設計100問 002 -為什麼網站不要用很大的原檔照片?你該知道的線上圖片瘦身、裁切、調整尺寸神器文章,有沒有解決你的疑惑呢?

如果有任何問題的話,也歡迎在底下留言,或私訊、來信聯絡我!

也歡迎到這裡找到我:

我的電子郵件信箱: aros@amedose.com

留言
avatar-img
留言分享你的想法!
avatar-img
Arosli 阿洛思理的沙龍
4會員
14內容數
2022/03/14
嗨,這裡是Arosli阿洛思理的百寶箱。我已經使用 Elementor Cloud 三個禮拜了。也正準備把兩個即將開始的小專案,也架設在上面。 以下,我想分享一些我看到的優缺點與評價,以及購買前你一定要注意的事。 透過這篇文章,你將會得到: Elementor Cloud是什麼? 禁用外掛清單
Thumbnail
2022/03/14
嗨,這裡是Arosli阿洛思理的百寶箱。我已經使用 Elementor Cloud 三個禮拜了。也正準備把兩個即將開始的小專案,也架設在上面。 以下,我想分享一些我看到的優缺點與評價,以及購買前你一定要注意的事。 透過這篇文章,你將會得到: Elementor Cloud是什麼? 禁用外掛清單
Thumbnail
2022/01/07
也許你聽過數位行銷,但數位行銷到底是什麼? Facebook臉書、Instagram發發文? 經營LINE OA官方帳號? 還是花錢買Google廣告或FB廣告?為什麼大公司、中小企業(個人品牌)、新創品牌、實體商家都需要數位行銷呢?嗨,我是Arosli 阿洛思理。透過今天的文章,你會得到...
Thumbnail
2022/01/07
也許你聽過數位行銷,但數位行銷到底是什麼? Facebook臉書、Instagram發發文? 經營LINE OA官方帳號? 還是花錢買Google廣告或FB廣告?為什麼大公司、中小企業(個人品牌)、新創品牌、實體商家都需要數位行銷呢?嗨,我是Arosli 阿洛思理。透過今天的文章,你會得到...
Thumbnail
2021/12/21
https://youtu.be/P42FpTzeLuk 上週六我剛結束《原子時間》的共讀吧聊書直播。當天有個問題,我印象最深刻的,是被問到: 「在面對很多想做的點子。但不知道該先做哪一個?」 這一題真的蠻難的。因為我覺得自己也是還在鍛鍊學習中。拿捏得也還不爐火純青 後來想想,還可以再補上一個
Thumbnail
2021/12/21
https://youtu.be/P42FpTzeLuk 上週六我剛結束《原子時間》的共讀吧聊書直播。當天有個問題,我印象最深刻的,是被問到: 「在面對很多想做的點子。但不知道該先做哪一個?」 這一題真的蠻難的。因為我覺得自己也是還在鍛鍊學習中。拿捏得也還不爐火純青 後來想想,還可以再補上一個
Thumbnail
看更多
你可能也想看
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
當你邊吃粽子邊看龍舟競賽直播的時候,可能會順道悼念一下2300多年前投江的屈原。但你知道端午節及其活動原先都與屈原毫無關係嗎?這是怎麼回事呢? 本文深入探討端午節設立初衷、粽子、龍舟競渡與屈原自沉四者。看完這篇文章,你就會對端午、粽子、龍舟和屈原的四角關係有新的認識喔。那就讓我們一起解開謎團吧!
Thumbnail
當你邊吃粽子邊看龍舟競賽直播的時候,可能會順道悼念一下2300多年前投江的屈原。但你知道端午節及其活動原先都與屈原毫無關係嗎?這是怎麼回事呢? 本文深入探討端午節設立初衷、粽子、龍舟競渡與屈原自沉四者。看完這篇文章,你就會對端午、粽子、龍舟和屈原的四角關係有新的認識喔。那就讓我們一起解開謎團吧!
Thumbnail
Pic Smaller(圖小小)是一個開源的線上圖片壓縮工具,支援 JPG、JPEG、PNG、WEBP、GIF、SVG、AVIF 等格式,能夠快速批量處理多張圖片,沒有限制容量與大小,完全免費,介面簡潔且沒有廣告。
Thumbnail
Pic Smaller(圖小小)是一個開源的線上圖片壓縮工具,支援 JPG、JPEG、PNG、WEBP、GIF、SVG、AVIF 等格式,能夠快速批量處理多張圖片,沒有限制容量與大小,完全免費,介面簡潔且沒有廣告。
Thumbnail
先將拍好的照片裁切適當大小 2.調亮度/對比 3.色彩飽和度 (偏暖色系視覺會較好看) 4.用圈選工具將商品圈出 5.圈選後---反選 6.濾鏡/模糊/動態模糊 (使商品凸顯出來)
Thumbnail
先將拍好的照片裁切適當大小 2.調亮度/對比 3.色彩飽和度 (偏暖色系視覺會較好看) 4.用圈選工具將商品圈出 5.圈選後---反選 6.濾鏡/模糊/動態模糊 (使商品凸顯出來)
Thumbnail
手機相機拍攝的畫素越來越高,拍出來的照片檔案也變的越來越大,有時候一張照片動輒就有幾MB大小,照片數量累積一定數量後,也會造成我們保存照片的負擔。 如果可以降低照片容量的同時,不會破壞畫質、不會縮小照片尺寸的話,那是不是很棒,今天介紹的工具可以大幅度壓縮照片的容量,但是肉
Thumbnail
手機相機拍攝的畫素越來越高,拍出來的照片檔案也變的越來越大,有時候一張照片動輒就有幾MB大小,照片數量累積一定數量後,也會造成我們保存照片的負擔。 如果可以降低照片容量的同時,不會破壞畫質、不會縮小照片尺寸的話,那是不是很棒,今天介紹的工具可以大幅度壓縮照片的容量,但是肉
Thumbnail
一張照片不夠大,那就多拍幾張吧。
Thumbnail
一張照片不夠大,那就多拍幾張吧。
Thumbnail
你看的出來這張圖片的上下紋路有何不同嗎?這是我把兩張同樣的圖片接在一起,你可以放大來看紋路都是一樣的,差別只在於其中一個步驟採用別的方式,但是在結果上卻產生肉眼可見的差異,這一篇會先解釋我在圖像運算上的理解,後半段則說明如何運用在寫作上。
Thumbnail
你看的出來這張圖片的上下紋路有何不同嗎?這是我把兩張同樣的圖片接在一起,你可以放大來看紋路都是一樣的,差別只在於其中一個步驟採用別的方式,但是在結果上卻產生肉眼可見的差異,這一篇會先解釋我在圖像運算上的理解,後半段則說明如何運用在寫作上。
Thumbnail
圖片太多,有點煩!有點煩!有點煩! 關於圖片太多不好排版,這個設計PPT惱人的問題,上一篇我們介紹了一個方法:先用形狀定位版型,再用『合併圖案』的『交集』,裁剪照片! 這一篇,我們介紹另一種方法:『圖片或材質填滿』,製作的速度非常神速!
Thumbnail
圖片太多,有點煩!有點煩!有點煩! 關於圖片太多不好排版,這個設計PPT惱人的問題,上一篇我們介紹了一個方法:先用形狀定位版型,再用『合併圖案』的『交集』,裁剪照片! 這一篇,我們介紹另一種方法:『圖片或材質填滿』,製作的速度非常神速!
Thumbnail
為什麼照片要壓縮降畫質?用攝影師拍的照片原檔,不是最清晰、也是最高畫質嗎?為什麼網頁設計師不喜歡也不建議?如果你也有疑問,或是想知道如何快速簡單處理手邊照片。這篇網站架設/網頁設計100問會告訴你!
Thumbnail
為什麼照片要壓縮降畫質?用攝影師拍的照片原檔,不是最清晰、也是最高畫質嗎?為什麼網頁設計師不喜歡也不建議?如果你也有疑問,或是想知道如何快速簡單處理手邊照片。這篇網站架設/網頁設計100問會告訴你!
Thumbnail
用拼圖組圖軟體或修圖APP,或LINE、Messenger或臉書等傳訊軟體傳過的圖片,圖片大小都會被壓縮,一定會模糊...  
Thumbnail
用拼圖組圖軟體或修圖APP,或LINE、Messenger或臉書等傳訊軟體傳過的圖片,圖片大小都會被壓縮,一定會模糊...  
Thumbnail
在一個網頁上,會需要使用到圖片的地方有非常多處,像是品牌主視覺、橫幅廣告、側邊廣告、主要內容的預覽圖片、縮圖、背景圖片等。
Thumbnail
在一個網頁上,會需要使用到圖片的地方有非常多處,像是品牌主視覺、橫幅廣告、側邊廣告、主要內容的預覽圖片、縮圖、背景圖片等。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News