行銷需求｜與我們聯繫
摘要
在 iOS 開發中，如何有效管理影像資源對於應用程式效能至關重要。本篇文章提供了五個實用的策略，幫助你優化影象處理流程。 歸納要點:
- 選擇 PNG 格式以獲得更佳透明效果和顏色表現。
- 運用 WebP 格式來提升影像品質並減少檔案大小。
- 採用懶加載技術及影像快取來加速網站載入。
檔案格式優先順序：優先選擇 PNG 而非 PDF
管理影象資源是工程師經常忽略的一個方面。如果我們不夠重視，這不僅會影響應用程式的效能，還會降低我們的生產力。在本文中，我將展示一些我們工程團隊用來管理影象資源的有效策略。將這些策略應用到您的專案中，可以幫助減少應用程式大小、降低記憶體佔用並提升應用程式效能。讓我們開始吧！
PDF 還是 PNG？
壓縮資產
影象降取樣
移除重複的資產
移除未使用的資產
＃1． 選擇 PNG 格式而非 PDF 格式。在我之前的專案中，團隊使用 PDF 格式來儲存所有圖片。主要原因有：
－ 易於維護：我們只需要維護一個 PDF 圖片，而不是三個 PNG 圖片（1x、2x、3x）。
－ Xcode 支援保留向量資料（Preserve Vector Data）功能，用於 PDF 格式。
PDF 圖片比 PNG 圖片更大。
我們在研究許多文章後,彙整重點如下
網路文章觀點與我們總結
- 使用高效率影片編碼(HEVC)、高效率影像編解碼器(HEIC)或Apple ProRes可以確保影片和影像格式較新。
- Pages可將HEVC、HEIC和ProRes媒體檔案轉換為H.264、JPEG和PNG,方便在舊裝置上瀏覽。
- 針對HDR顯示器最佳化讓影像更加寫實,Lightroom提供相關HDR功能如「合併為HDR」。
- 開啟iCloud照片選項並選擇「最佳化iPhone儲存空間」,可備份至iCloud。
- 網站管理者需注意HEIF/HEIC格式僅能在Apple裝置上瀏覽,建議轉換格式後再上傳。
- 影像最佳化工具可減少檔案大小,加快網頁載入速度,Next.JS等框架提供回應式影像元件。
現代人越來越注重數位生活中的便利與效能，利用高效能的影像編解碼技術如HEVC和ProRes，不僅提升了畫質，也減少了儲存空間。此外，即使是舊設備也能透過Pages自動轉換格式無縫兼容。而HDR顯示技術更是讓視覺效果大幅升級。對於日常照片管理，例如使用iCloud備份也是很好的策略。不論你是一般用戶還是網站管理者，都應該善用這些工具來優化你的數位內容體驗。
觀點延伸比較:| 策略 | 描述 | 優點 | 缺點 |
|---|---|---|---|
| 使用高效率影片編碼(HEVC)、高效率影像編解碼器(HEIC)或Apple ProRes | 確保影片和影像格式較新,提升畫質及壓縮效能。 | 提供更高品質的視覺效果,同時減少檔案大小。 | 某些舊裝置可能不支援該格式。 |
| Pages轉換媒體檔案為H.264、JPEG和PNG | 將HEVC、HEIC和ProRes媒體檔案轉換為常見格式,方便在舊裝置上瀏覽。 | 提高跨平台相容性,使得內容更廣泛可用。 | 可能會損失部分原始畫質和壓縮效能。 |
| 針對HDR顯示器最佳化影像(Lightroom等工具) | 利用Lightroom的HDR功能如「合併為HDR」,讓影像更加寫實。 | 提升視覺感受,特別是顏色與亮度範圍的表現。 | 需要專業知識才能有效操作這些功能。 |
| 開啟iCloud照片選項並選擇「最佳化iPhone儲存空間」 | 自動備份至iCloud並節省本地儲存空間。 | 無縫備份,避免資料遺失風險,同時節省裝置空間。 | 需要穩定網路連線且有額外雲端存儲費用。 |
| 網站管理者需注意HEIF/HEIC格式僅能在Apple裝置上瀏覽,建議轉換格式後再上傳 | 將不兼容格式轉換成通用格式以適應更多設備觀看需求. | 提高網站訪問者的流暢體驗,降低跳出率. | 增加工作量,需要額外步驟來進行批次處理. |
| 影像最佳化工具 (Next.JS等框架) 提供回應式影像元件 | 減少檔案大小,加快網頁載入速度,提供多設備友好的圖像顯示. | 改善網站性能,提高SEO排名及用戶體驗. | 需要了解程式設計基本知識來設定及維護. |
在 Xcode 15 之前，當進行歸檔時，Xcode 會將你的 PDF 影象轉換為三個 PNG 影象。從 Xcode 15 開始，當你進行歸檔時，Xcode 將會把你的 PDF 影象轉換為三個 PDF 影象。然後，它會使用應用瘦身技術（App thinning）來消除不必要的資源。以下影象顯示的是我對範例專案進行歸檔後生成的 ′Assets．car′ 檔案。你會看到每個 PDF 影象都被生成為三個 PDF 影象：
現在，讓我們比較使用 PNG 圖片和 PDF 圖片時 ′Asset．car′ 檔案大小：
運用影像格式最佳化，打造順暢的應用程式體驗
在專案中使用 PNG 影象的 ′Assets．car′ 大小比使用 PDF 影象要小得多。為了獲得更佳的應用程式大小和效能，請使用 PNG 格式的影象。對於需要保留向量資料以支援在不同檢視框架中縮放的影象，則使用 PDF 格式。專案 1：PNG 格式在不同裝置螢幕下的顯示最佳化
PNG 格式相較於 PDF 格式，在顯示於不同尺寸的螢幕裝置上，能維持較佳的畫質。這是因為 PNG 圖檔儲存的是點陣資料，隨著螢幕解析度的變化，點陣會自動調整尺寸，保持清晰度。而 PDF 檔案則是儲存向量資料，縮放後可能產生失真或模糊。
2． 如果可能，在將影象嵌入專案之前壓縮它們。第二個減少應用程式大小的方法是先壓縮圖片，再新增到專案中。我們來看看以下圖片。經過幾次壓縮後，圖片大小減少了 83％，但你幾乎注意不到任何品質差異（尤其是在 iPhone 螢幕上）。考慮到影象的用途，可以幫助你決定最佳壓縮設定，以達到應用程式所需的效果。
專案 2：自動化圖片壓縮最佳化
透過採用自動化圖片壓縮工具，開發人員可以快速且有效地壓縮專案中的圖片，同時保持良好的畫質。這些工具能根據圖片的特性和使用場景，自動調整壓縮率，最佳化檔案大小和畫質之間的平衡。這樣做能進一步減少應用程式大小，提高效能。
在確保影像品質不受損害前提下合理選擇和處理影像格式，是提升應用效能的重要策略之一。同時，自動化工具也提供了一個便捷而高效的方法來管理影像資源，使你的開發工作更加順暢並達成更好的成果。
善用影像最適化策略，提升網站效能
使用 TinyImage Compressor——這是一款 Figma 外掛工具，可以直接從 Figma 匯出壓縮的圖片。在我們龐大的工程團隊中，我們擁有數百個圖示。為了管理它們的大小，我們在 pre－commit hook 工作流程中加入了一段指令碼。該指令碼會檢查新新增的圖示是否超過 100 KB。如果是，它會要求工程師壓縮這些影象。＃3． 使用與 UIImageView 尺寸匹配的圖片。切勿盲目使用任何圖片而不考慮其尺寸。WWDC 2018 的提醒：
記憶體使用量與圖片的尺寸有關，而不是檔案大小。—— WWDC 2018。計算顯示圖片時所需記憶體佔用量的公式是：
memory footprint ＝ 寬度 * 高度 * 每畫素 4 位元組。因此，如果我有一張 5MB 的圖片（6000x4000 畫素），解碼和顯示該圖片所需的記憶體佔用將達到 96MB。
**專案1：使用最適化演演算法**
透過採用先進的演演算法，如 WebP 或 AVIF，可以進一步縮小影象尺寸，同時保持良好的視覺品質。針對某些影象型別，這些演演算法可以比傳統方法（如 JPEG 或 PNG）提供更好的壓縮率。
使用進階技術最佳化 iOS 影像顯示
在一個 300x200 的 UIImageView 中顯示 6000x4000 畫素的影象是一種極大的記憶體浪費。在 WWDC 2018 中，Apple 引入了一種名為 ′Downsampling′ 的技術，可以在影象顯示於螢幕之前對其進行縮放，從而顯著降低記憶體消耗。這裡有一些由 swiftsenpai 和 Kseniia Zozulia 撰寫的優秀文章，介紹瞭如何應用 Downsampling 技術。
那麼，我們如何知道自己是否在顯示大影象時浪費了不必要的記憶體呢？手動的方法是將影象大小與 UIImageView 的框架進行比較。是的，我們都討厭手動完成繁瑣的事情 🥵
一個簡單的自動化方法是建立 UIImageView 的子類。每當我們使用比 UIImageView 框架更大的影象時，我們可以在該 ImageView 上顯示一個警告影象。
以下是一個此方法的範例版本：
｀｀｀swift
import UIKit
class WarningImageView： UIImageView ｛
override var image： UIImage？ ｛
didSet ｛
guard let currentImage ＝ image else ｛ return ｝
if currentImage．size．width ＞ self．frame．size．width ｜｜ currentImage．size．height ＞ self．frame．size．height ｛
／／ 顯示警告圖片或其他提示
print（′Warning： Image size exceeds the bounds of the image view．′）
｝
｝
｝
｝
｀｀｀
**自動化快取管理：**
與手動管理記憶體不同，現在可以使用快取來自動處理影象縮放和快取。這可以簡化流程並確保最佳記憶體使用。
**持續整合工具整合：**
可以使用持續整合工具將影象最佳化作為開發流程的一部分。這有助於在部署之前自動檢查和修正影象，從而提高應用程式的品質和效能。
final class CustomImageView: UIImageView { var warning: UIImageView? var blurBackground: UIVisualEffectView? override var image: UIImage? { didSet { super.image = image // If in Debug and the image is too big, show a warning on top of the image view. #if DEBUG if isImageTooLarge { if warning != nil { return } let blurBackground = UIVisualEffectView(effect: UIBlurEffect(style: .systemUltraThinMaterial)) addSubview(blurBackground) blurBackground.frame = bounds blurBackground.alpha = 0.7 self.blurBackground = blurBackground let warning = UIImageView(image: UIImage(systemName: "exclamationmark.triangle")) warning.tintColor = .red warning.translatesAutoresizingMaskIntoConstraints = false addSubview(warning) NSLayoutConstraint.activate([ warning.centerXAnchor.constraint(equalTo: centerXAnchor), warning.centerYAnchor.constraint(equalTo: centerYAnchor) ]) self.warning = warning } else { warning?.removeFromSuperview() warning = nil } } #endif } // Check if the image is bigger than the image view's frame private var isImageTooLarge: Bool { guard let image = image else { return false } return image.size.height * image.size.width > self.frame.height * self.frame.width } }這就是我們使用不適當的圖片大小時的樣子。工程師可以立即注意到這一點，然後他們可以應用下取樣技術來調整圖片 👏
最佳化影像管理：降低應用程式大小並簡化維護
支援根據特定尺寸獲取影像，例如：https：／／｛PATH＿TO＿IMAGE｝／｛IMAGE＿ID｝／｛size｝．jpg。使用 Downsampling 技術來調整影像尺寸。
4． 移除專案中的所有重複影像。在大型專案中，不同的工程師會在各自的功能團隊中工作。他們經常面臨的一個情境是，專案中存在著重複的影像。這不僅會增加應用程式的大小，還使得手動維護這些影像變得繁瑣且耗時。我們的團隊已經自動化了檢查重複影像的過程。我們建立了一個 Python 指令碼，用於掃描專案中的所有影像並進行重複性比較。我們將該指令碼整合到 CI（持續整合）工作流程中，定期執行檢查，並將報告傳送給團隊。
建議：GitHub 上有一些開源的 Python 專案可以用來偵測重複影像，例如這個專案。你可以下載並無縫地整合到你的專案中。
**1． 採用影像縮放技術調整影像尺寸**
除使用 Downsampling 技術調整影像尺寸外，也可採用其他縮放技術，例如 Upsampling、Interpolation 等，依據特定需求調整影響品質與檔案大小。例如，Upsampling 可用於放大圖象，而 Interpolation 可用於調整圖象解析度。
**2． 匯入 AI 技術偵測重複圖象**
除了使用Python 指令碼偵測重複圖象外，也可匯入 AI 技術強化偵測準確度。現有 AI 技術，例如「圖象辨識」、「機器學習」等，可以更有效率地辨別視覺上相似的圖象，大幅提升重複圖象偵測的精確度。
＃5． 移除專案中所有未使用的圖片。與重複圖片類似，未使用的圖片會不必要地增加應用程式的大小，因此我們應該將它們移除。FengNiao 是一個開源工具，可以幫助你檢測並移除未使用的圖片：
你可以將這個工具整合到我們的 CI 工作流程中，並在有任何未使用的圖片時傳送 Slack 通知給團隊。團隊會再次檢查並在需要時手動移除這些圖片。透過花一些額外的努力來管理圖片資源，我們可以有效地提升應用程式的效能。如果你有其他管理資產的小技巧，不要猶豫，請隨時留言分享 ：D。如果你覺得這篇文章對你有幫助，請點選讚並留言，以便 Medium 可以推薦這篇文章給其他人。謝謝閱讀。
參考來源
在iPhone 上為Pages 文件設定影片和影像格式
若想確保影片和影像是使用較新的格式，你可以更改最佳化設定，例如高效率影片編碼（HEVC）、高效率影像編解碼器（HEIC）或Apple ProRes，這些格式可在任何電腦或裝置上檢視 ...
來源： Apple Support在iPhone 上的Pages 文件中設定影片及影像格式
最佳化影片及影像格式 ... 當你將HEVC、HEIC 和ProRes 媒體檔案加至文件時，Pages 可將其轉換為H.264、JPEG 和PNG，讓媒體檔案可在較舊的Mac、iPhone 和iPad 裝置上檢視。
來源： Apple Support在Lightroom 行動版(iOS) 中將HDR 相片最佳化
針對HDR 顯示器最佳化會具有更明亮的亮部和更細膩的陰影，能顯得更加寫實，影像整體也更具震撼力。 Lightroom 已提供相關HDR 功能，例如「合併為HDR」，可 ...
iPhone照片儲存空間異常——詳細解決方法
iCloud｜到「設定」進入「照片」選項後開啟「iCloud 照片」並且選擇「最佳化iPhone 儲存空間」。 備份照片至iCloud. iTunes｜以傳輸線連接iPhone 與Mac 後 ...
來源： iMyFone怎麼讓iPhone照片從HEIC檔轉成JPG檔？｜天矽科技網頁設計
使用iPhone的網站管理者，若想要將拍攝的照片直接上傳到網站中，由於該檔為HEIF/HEIC格式，此檔案類型僅能在Apple裝置上瀏覽檢視，因此我們會建議使用iPhone的網站管理 ...
來源： tsg.com.tw在Lightroom 行動版(iOS) 中轉存和共用相片
瞭解如何從Lightroom 行動版(iOS) 應用程式轉存相片和影片，以及共用相簿。透過中繼資料共用相片並視需要加上浮水印。
什麼是影像最佳化程式？| 如何縮小影像
影像最佳化工具可減少影像檔案大小，讓影像針對網際網路進行最佳化，並可快速載入。 更多有關效能的資訊. 為什麼網站速度至關重要; 效能優勢; 負載平衡
來源： Cloudflare影像最佳化
最常見的影像最佳化使用案例需要根據使用者瀏覽器功能進行自動格式化，並讓前端可調整影像大小。熱門Web 開發框架，例如Next.JS，會提供回應式影像元件，可根據裝置檢視區 ...
全部
生活休閒
相關討論