14 個可在瀏覽器中執行的免費影像和設計工具

影像工作有一個特定的問題：工作通常很小，但提供的工具卻非常多。您需要從英雄影像中刪除 400 KB，或獲得設計師提到的十六進位值，或產生一個尚未製作的圖示。這不需要訂閱。

以下的 14 個工具涵蓋了準備圖片、處理顏色、產生 CSS 效果以及遺漏的小型製作資產。每個都在本地執行，這對於影像比對於文字更重要：您剛剛壓縮的照片通常是您尚未發布的照片​​。

大多數影像問題實際上都是重量問題。感覺緩慢的頁面通常包含大於其顯示尺寸的影像，格式錯誤，品質設定無人質疑。

你應該壓縮多少？誠實的答案是：直到看起來不對勁，然後退後一步。對於攝影英雄影像，70% 到 80% 的品質通常與正常觀看尺寸下的原始影像無法區分。對於標誌、螢幕截圖或任何具有平坦顏色和硬邊的內容，請使用 PNG 並進行更嚴格的壓縮 - 這些增益更多，損失更少。

一個實用的經驗法則：對於英雄影像來說，任何低於 200 KB 的內容都可以，對於縮圖來說，低於 80 KB 的內容都可以，如果不能低於 300 KB，則可能存在尺寸問題，而不是品質問題。

將影像轉換為 Base64 資料 URI 會刪除 HTTP 請求，這聽起來像是純粹的勝利。通常情況並非如此。編碼後的字串大約比二進位檔案大三分之一，它無法單獨快取，並且會使您的 CSS 或 HTML 膨脹。

僅當影像很小（低於幾千位元組）且僅使用一次且至關重要時才內聯。單一電子郵件範本中的小圖示是典型的案例。對於跨頁面重複或大於幾千位元組的任何內容，將其作為檔案提供並讓瀏覽器快取它。

清楚這是做什麼的。它消除或遮蓋了可見標記。它無法重建底層畫素——被覆蓋的資訊已經消失，並且沒有過濾器將其重新發明出來。結果範圍從當標記位於普通背景上時不可見到當標記位於細節上時出現明顯的汙點。

還有一件事值得明確地說：刪除別人的浮水印並發布結果在大多數司法管轄區都是版權問題，並且無論您是否會被抓住，都屬於許可違規行為。此工具適用於從您自己的影像或您已許可的庫存中刪除標記。

顏色是小錯誤變得非常明顯的地方。無法存取的對比度、實際上是 HSL 三元組的十六進位值、在顯示器上看起來連貫但在投影機上看起來渾濁的調色盤。

關於顏色工具的一個警告：它們都假設您的顯示器已校準並且檢視頁面的人有眼睛。這兩種假設都不安全。這就是為什麼比起主觀組合更喜歡對比檢查組合的原因。

手動編寫漸層或分層陰影確實是一項令人不快的任務。語法很繁瑣，你看不到你正在生成什麼，好陰影和壞陰影之間的差異就是幾個畫素的模糊。

解決這四個問題的秘訣就是剋制。兩個陰影——一個緊密的深色陰影和一個寬闊的柔和陰影——被解讀為物理高度。一個影子讀起來像是十五年前的網站。產生、複製、然後刪除，直到您無法辨別它的存在。

這是整個叢集在做一項真正的工作。一個頁面需要一個帶有背景影像、標題和按鈕的英雄，但目前還沒有建構這些內容。

五種工具，沒有設計套件，每個輸出都是一個可以直接貼到程式碼中的值。

我的影像上傳到任何地方了嗎？ 沒有。壓縮、調整大小和 Base64 轉換都在您的瀏覽器中進行，這就是為什麼沒有檔案大小限制和上傳佇列的原因。

壓縮影像會降低品質嗎？ 根據定義，總是如此。問題是它是否可見。在 70% 到 80% 的品質和正確的尺寸下，通常並非如此。

為什麼調整大小後的影像看起來仍然很大？ 十有八九你在調整大小之前進行了壓縮，或者當照片儲存為 JPEG 更好時，你卻儲存為 PNG。

我可以將它們用於客戶工作嗎？ 可以，沒有歸屬權，也沒有商業限制。

它們可以在手機上使用嗎？ 可以，但在手機上調整大照片的大小和壓縮取決於裝置的記憶體而不是伺服器。

在壓縮之前調整大小，在爭論顏色之前檢查對比度，保持陰影微妙，並且永遠不要忘記網站圖示。無論如何，這就是設計套件為您做的大部分事情。