Hello, 我是 Weber，一位工程師，斜槓鼓手與行銷顧問。
Rails 開發，每日一套件第 11 天，跟我一起認識 Rails 開發好用的 30 個套件，建立出自己的常用套件庫吧！

Day 11: ImageProcessing

延續昨天的內容，今天接著來介紹圖片壓縮的套件。
這裡介紹的是搭配 Rails 的 Active Storage 的使用，不過它也支援昨天介紹的 CarrierWave 套件。

為什麼會需要這個工具呢？因為使用者將原始的圖檔上傳資料庫後，如果直接抓取 render 出來，常常會因為檔案太大，而讓網站的載入速度變慢。網站讀取的速度越慢，使用者的體驗越差，在 PC 終端慢，在 Mobile 終端一定更慢，後續甚至會延伸例如 SEO 分數不佳等問題。

當然可以說，那就限制使用者上傳檔案的大小呀！
也是一種方式，其實不衝突。不過一來現在手機拍出來的照片隨便也都會有個好幾Mb，如果要限制在kb為單位的大小，使用者能上傳的圖片畫質可能就會是非常差的檔案。延伸的問題是，強迫使用者去壓縮自己原本的圖片，也不是每個使用者都知道怎麼做。

以使用者的頭像為例，我有一張 535^2 px 的png頭像圖，大小是299kb。

透過 ImageProcessing 這個過程後，在我的 view render 出來的 只有 200^2 px, 大小是73kb，蠻顯著的壓縮。

至於具體是怎麼做的，其實蠻複雜的。我可以解釋到前半段 Active Storage 透過套件跟 Model 的設定，做了什麼事情。以及因為使用者透過瀏覽器讀取而多產出的 thumb。不過後半段實際 resize 並壓縮的方式，比較算是另外的工具發生的事，目前的我，還無法解釋。

很有趣的是，在 ImageProcessing 官方文件裡，也寫了一段：

Let's be honest. Image processing is a dark, mysterious art.

非常有意思，也是我今天標題的由來。
如果之後我能弄懂的話，我可能再來寫一篇吧。

ImageProcessing 的安裝與使用方式：

首先要先安裝一個叫做 ImageMagick 及 libvips 的 library。
這兩個是開源的圖片處理套件，需要透過 brew 安裝。
也就是我說的，真正魔法產生的地方。

$ brew install imagemagick vips

而 image_processing 則扮演著比較像是銜接前者 ImageMagick、libvips 與Rails 的關係套件。
（完全是我的研究與解讀，超級無法驗證。如果不正確請大力鞭我！！！）
所以接著老招 bundle add

bundle add image_processing

事情走到這邊，我又很想收尾了，大喊說就這樣了！哈哈哈
並沒有！在官方文件裡有好幾個運用的範例，疑似牽扯到 pipeline，目前的我暫時無法解釋。
不過我可以說明，我們在rails中，是怎麼使用的。

回到剛剛我的頭像，假設每個使用者 profile 都有一張頭像，那在 Profile.rb 中，可以寫成這樣。

has_one_attached :avatar do |attachable|
  attachable.variant :thumb, resize_to_limit: [200, 200]
end

也就是運用 active storage 並使用 .variant 變體的方式去 resize
並且在 View 裡使用 helper

<%= image_tag Model.avatar.variant(resize_to_limit: [100, 100]) %>

以上面的例子，我們就寫成：

<%= image_tag Profile.avatar.variant(:thumb) %>

並且會在 db 的 table 內產生出兩個檔案，原生上傳的圖 ＋ resize 後的縮圖

今天就先介紹到這邊，如果對這個題目您有更精闢的見解，也歡迎留言告訴我
謝謝你們！我們明天見！