Turadise

圖片壓縮 Squoosh 教學, Google 開發解決照片jpg檔案太大問題

  • 發佈於
  • 更新於

數據統計在網頁加載的過程中,有超過一半的數據屬於圖片加載。為了優化網站載入的性能,Google團隊便開發了圖像壓縮工具 Squoosh.App來使檔案縮小,當照片檔案太大或jpg檔案太大時,可作照片壓縮軟體、優化圖片、照片並修改尺寸,解決檔案或尺寸過大的問題教學。

隨著網際網路的發達,使用網路服務服務的需求倍數成長,全球網路服務每分鐘以數以兆計的位元上傳/下載,因此網頁的優化顯得十分重要。搜尋引擎巨頭公司Google公司近年來致力於優化網頁的加載速度,並確保網頁載入時提供流暢的體驗,要求在 1/10 秒內響應用戶輸入,確保用戶不會產生「卡頓」的現象。

下面將介紹什麼是Squooch、如何使用,以及它們如何幫助使用者優化他們的網站,以提供用戶最佳體驗。

內容目錄顯示
  1. 1什麼是Squoosh.App
  2. 2如何使用Squoosh.App
  3. 2.1Step1. 前往網站Squoosh.App
  4. 2.2Step2. 查看預設結果
  5. 2.3Step3. 選擇輸出圖像格式
  6. 2.4Step4. 選擇輸出圖像品質(視需求)
  7. 2.5Step5. 圖像大小調整(視需求)
  8. 3結論Q&A
  9. 3.1Squoosh優缺點為何?
  10. 3.2照片檔案太大,如何使用線上壓縮jpg軟體
  11. 3.3Squoosh可輸出哪些檔案格式?
  12. 3.4圖像有損(Lossy)和無損( Lossless)的差異為何?
  13. 3.5如何去除圖像背景?

什麼是Squoosh.App

Squoosh

Squoosh.App是由GoogleChromeLabs實驗室開發的網路工具,提供免費線上使用。專為壓縮圖片而設計,Squoosh可以在web瀏覽器上在線和離線使用。

Squoosh最大的優勢是會將上傳的圖片分割成兩部分,呈現「優化前vs優化後」的成果。這項工具可以讓用戶先行看到圖片是否變得過度模糊。以網站站主來說,圖片的壓縮跟優化有助於網站的加載速度並提供更好的用戶體驗,甚至能提高網站的SEO排名。

Squoosh 屏幕被分割,因此用戶可以看到圖像壓縮前後的結果。這個工具讓您可以窺見原始圖像和壓縮圖像之間通常可以忽略不計的差異(如果有的話)。但是,已針對速度進行壓縮和優化的圖像有助於加快加載時間並提供更好的用戶體驗。他們甚至可能有助於提高您的 SEO 排名。

在 Squoosh 中壓縮圖像既快捷又簡單,用戶可以在編輯後立即下載壓縮圖像。現在,讓我們來看看如何使用該應用程序。

如何使用Squoosh.App

Step1. 前往網站Squoosh.App

打開Squoosh.App後,便可以上傳照片或拖放照片到網頁上。
但Squoosh並未支援批次壓縮的功能,一次僅能選取一張圖像。

Step2. 查看預設結果

中間有個滑塊可以左右滑移
左側為壓縮前的圖像,左下角會顯示檔案大小。
右側為壓縮後的圖像,右下角會顯示檔案大小及壓縮比率。

若要在修訂壓縮細節,可以在右邊的編輯器做進階編輯。
確認無誤後,點選最右下角的下載,即可獲取圖像。

Step3. 選擇輸出圖像格式

在右邊的編輯欄位中,點選「Compress」下方的下拉選單後,可以選擇要輸出的圖檔
常用的圖檔格式有
・MozJPEG,輸出JPEG(或JPG)圖檔,在不改變圖像品質的前提下提高編碼效率,可同時保持JEEG兼容性和品質。
・OxiPNG,輸出JPNG 圖檔,可在不影響品質的情況下壓縮和優化圖像。
・WebP,一種由 Google 開發的壓縮方法,支援度較低,但對Google搜尋的SEO 非常友好,支援無損壓縮(Lossless)。
目前沒有一個格式可以通用最佳壓縮效率,要多嘗試不同格式來取得最佳壓縮效率。

Step4. 選擇輸出圖像品質(視需求)

在右邊的編輯欄位中,有個「Quality」(圖像品質)可左右拖移,來更變圖像品質。
可以看到目前將圖像品質設定為5時,有98%的壓縮比,檔案大小為115kB
但在圖像右上角的雲已經糊在一起,因此若無特殊需求,壓縮比維持在預設的75為最佳選擇。

Step5. 圖像大小調整(視需求)

在右邊的編輯欄位中,有個「Resize」(重設圖像尺寸大小)可勾選,來更變圖像檔案尺寸。
透過縮小檔案尺寸也能壓縮圖片,但圖片品質可能變得更差,視需求調整即可。

結論Q&A

優化圖像以加快網站加載時間對於使用者和網站SEO 排名都非常重要,Squoosh.app用來壓縮圖像,同時維持圖像品質。

Squoosh優缺點為何?

Squoosh 優點:
Squoosh為免費線上壓縮程式,並且可透過分割屏幕來即時查看壓縮後的結果,也有可以選擇壓縮後檔案格式、尺寸大小,為一輕量、多功能且易上手網站服務。
Squoosh 缺點:

照片檔案太大,如何使用線上壓縮jpg軟體

當照片或jpg圖檔案太大時,可以使用Google開發的線上軟體Squoosh,使用方法可以參考連結。

Squoosh可輸出哪些檔案格式?

Squoosh支援輸出AVIF、Browser JPEG、Browser PNG、JPEG XL (beta)、MozJPEG、OxiPNG、WebP、WebP v2 (unstable)等格式。

 圖像有損(Lossy)和無損( Lossless)的差異為何?

・有損壓縮(Lossy)通過刪除盡可能多的數據來減小文件大小,可能會導致圖像品質下降,無法將文件恢復為原始形式。
・無損壓縮(Lossless)不會從圖像文件中刪除任何關鍵數據,解壓縮工具「ZIP」與PNG圖像正是無損壓縮的一種形式。

如何去除圖像背景?

在進行網站圖像設計時,有時需將圖像去除部分背景,使其「透明化」,讓圖像呈現為其他背景的外觀。
可參考網站:免費線上【圖片去背】實測3款快速去除背景軟體網站比較:Adobe、AirMore、Figm

相關文章

應用資源

【圖片背景】一鍵生成,懶人與設計苦手的背景圖案素材產生器。|2022 best

在設計精選圖片(Featured Image)或簡報頁面時,使用單一圖片背景顏色可能較為單調。本篇將介紹4款免費線上製作背景圖案工具,提供背景素材。 Svgwave - 波浪形狀顏色背景圖案 Svgwave 是一款小巧、免費且美觀的顏色漸變波生成器,適用於使用者介面、網站設計。可以根據客製化、自定義,來設置波浪數、頻率

應用資源

SVG圖片格式是什麼?如何用線上軟體Figma免費製作.svg素材

在網路上有許多方案(有免費、有些則須付費)可以減小圖片檔案大小,以幫助提高網站的性能。其中之一便是將網站的Logo從png檔或jpg圖檔轉換為使用svg格式,SVG 是一種可擴展的圖像格式,通常檔案可以極致壓縮到很小,而且不需要考量到retina @2x的使用情境。本篇將介紹如何用線上軟體Figma免費製作.svg。