Zenn
🎅

【iOS】画像のリサイズ方法について(feat. UIGraphicsImageRenderer & preparingThumbnail)

2024/12/15に公開
Swift
uikit
tech

はじめに

どうもこんにちは、iOSバリバリ初心者のKyuleeです！
今回は、「画像のリサイズ方法(feat. UIGraphicsImageRenderer & preparingThumbnail)」について記事を書こうと思います！
それでは、よろしくお願いします！🙇

画像のサイズを再調整したい！

意図通りのサイズで画像が表示されなくて、画像をリサイズしないといけない時ってたまにありますよね？！🚀

画像のリサイズ方法はいくつかありますが、今回はその中でもよく使われる UIGraphicsImageRendererと iOS15以降に登場した割と新しい preparingThumbnailについて見てみようと思います！

UIGraphicsImageRenderer を用いた方法

UIGraphicsImageRendererのドキュメントを見ると、これを使用することで、色の深みや画像のスケールなどを処理でき、CoreGraphicsのコンテキストを直接管理せずに画像を生成することができるようです！

東京タワーの写真 View Hierarchy

縦長の元の画像を正方形のサイズで表示したいので、上記のView Hierarchyで見える左右の余白を無くしたいですね！🧐

早速修正してみましょう！🪂

// 使用する画像指定
let image = UIImage(named: "tokyoTowerSample")
let imageSize = CGSize(width: 150, height: 150)
let renderer = UIGraphicsImageRenderer(size: imageSize)
let resizedImage = renderer.image { _ in
    image.draw(in: CGRect(origin: .zero, size: imageSize))
}

我々の目的は画像のリサイズなので、上記にはリサイズのコードのみを書きました。
image(actions:) メソッドを使うことで、いろいろな編集を加えつつ、最終的に画像を生成して返すことができます。画像をリサイズするためには、一定のサイズを描画する draw(in:)メソッドを利用すると良いです！ただし、指定したサイズが元の画像の縦横比と異なる場合は、画像が引き伸ばされたり縮小される可能性があるので、注意が必要です！⚠️

ビルドすると、以下のように綺麗に画像がリサイズされます！
（比率は重視していないので、ご了承を！🙏）

正方形に写真を表示 View Hierarchy

preparingThumbnailを用いた方法

preparingThumbnailのドキュメントを見ると、このメソッドを使用することで、指定したサイズで画像を表示することができそうですね！

ドキュメントのDiscussionの部分を見ると、このメソッドはサイズが大きい画像のデコーディング過程で発生する不要なメモリ使用を減らすことが主な目的のようです。参考にすると良さそうです！

But when the native image size is much larger than the bounds of the view, decoding the full size image creates unnecessary memory overhead. By creating a thumbnail image at a specified size with this method, you avoid the overhead of decoding the image at its full size.

それでは、このメソッドを使ってリサイズしてみます！

private lazy var thirdImageView: UIImageView = {
    let imageView = UIImageView()
    let imageSize = CGSize(width: 150, height: 150)
    let resizedImage = UIImage(named: "tokyoTowerSample").preparingThumbnail(of: imageSize)
    imageView.translatesAutoresizingMaskIntoConstraints = false
    imageView.contentMode = .scaleAspectFit
    imageView.image = resizedImage

    return imageView
}()
正方形へのリサイズを試した結果 View Hierarchy

うん？？！！画質が悪くなったぞ？なんで？？😅

注意点

私はすごくすごく重要なことを見落としてしまったようです..😇
改めてpreparingThumbnail の公式ドキュメントを見直したところ、このメソッドは以下のようにサムネイルの画像生成に特化したメソッドだったんです！😳

Returns a new thumbnail image at the specified size.

つまり、このメソッドは画像を小さなサムネイル用にリサイズする際、パフォーマンスを優先するため、画質が若干劣化することがあるようです📝 メソッド名からその用途を推測するべきでしたね..

また、ビルドしてみた結果、元画像の縦横比が維持されており、指定したサイズ（正方形）に画像をリサイズすることができなかったです。おそらく、このメソッドは元画像の縦横比を優先する仕様になっているようです。

おわりに

高品質の画像が必要な場合は、UIGraphicsImageRendererを、小さなサムネイル用の画像が必要な場合は、preparingThumbnailを使った方がパフォーマンス的に良さそうです！
画像をリサイズする時は、ご注意を！🫡
それでは、次回の投稿まで BYE BYE〜🤟！

Discussion