画像をアップロードする際に色々調べたのでメモ
画像について
参考記事
https://qiita.com/takeuchi_tsuyoshi/items/3335594543c2fb8fe507
| ファイル形式 | 特徴 | 利用用途 | 圧縮タイプ | 透明度サポート |
|---|---|---|---|---|
| JPEG (JPG) | 写真などのリアルな画像に適している。色数が多く、ファイルサイズを小さくできるが画質の劣化がある。 | 写真、ウェブサイト用の画像 | 非可逆圧縮 | なし |
| PNG | 可逆圧縮で画質劣化がない。透明度のサポートがあり、ロゴやアイコンなどに適している。 | ロゴ、アイコン、ウェブサイト用の画像 | 可逆圧縮 | サポートあり（アルファチャンネル） |
| GIF | アニメーション対応。256色までしか表示できないが、簡単なアニメーションやアイコンに適している。 | アニメーション、簡単なアイコン | 可逆圧縮 | 部分的な透明度サポート |
| BMP | 非圧縮で非常に高画質だが、ファイルサイズが大きくなる。 | 高画質が求められるアーカイブ、印刷 | 非圧縮 | なし |
| TIFF | 圧縮あり/なしを選べる。高品質の画像保存が可能で、デザイン業界や印刷向け。 | 印刷、デザイン業界 | 可逆圧縮または非圧縮 | サポートあり |
| SVG | ベクタ形式であり、拡大縮小しても画質が劣化しない。 | ロゴ、アイコン、インフォグラフィックス | 非圧縮 | サポートあり |
| WEBP | Googleが開発。JPEGよりも高圧縮で小さいファイルサイズ、かつ透明度もサポート。 | ウェブサイト、モバイルアプリ | 可逆圧縮または非可逆圧縮 | サポートあり |
| HEIC | JPEGよりも高圧縮率で品質を保持。主にApple製品で利用されている。 | スマートフォンの写真 | 非可逆圧縮 | サポートあり |
- 透明度とは
画像の一部が透明になり、背景が透けて見えること。
例えばこんな感じで、ジャンル画像の背景は透過させて切り抜き画像のようにする。
一般的なWEBサービスで利用するもの
商品写真、オンラインショップ、物件紹介 etc
JPEG or WEBP を選択
WEBPは圧縮効率が非常に高くJPEGよりも小さくでき、ページの読み込み速度向上につながる。ただし一部古いブラウザではサポートされていない場合があるらしい。(WEBPが表示できない場合にJPEGを表示するというアプローチもあるらしい)
ロゴやアイコンなど、透明度をサポートし、高画質が必要なもの
PNG を選択
ディスプレイの解像度規格について
| 解像度 | ピクセル数 | アスペクト比 | 特徴 |
|---|---|---|---|
| HD | 1280×720 | 16:9 | 旧標準解像度。フルHDより画質は劣る。 |
| フルHD | 1920×1080 | 16:9 | 現在の標準解像度。普及率が非常に高い。 |
| 2K | 2048×1080 | 17:9 | デジタルシネマの基準。フルHDと近い。 |
| 4K (UHD) | 3840×2160 | 16:9 | フルHDの4倍のピクセル数。高精細で映画向け。 |
| 8K | 7680×4320 | 16:9 | 超高解像度。主に特定のプロ用途で使用。 |
4Kの4倍のピクセル数とは？
フルHD画像（元の状態）
[ A ] [ B ] [ C ]
[ D ] [ E ] [ F ]
4Kディスプレイの表示
[ A ] [ A ] [ B ] [ B ] [ C ] [ C ]
[ A ] [ A ] [ B ] [ B ] [ C ] [ C ]
[ D ] [ D ] [ E ] [ E ] [ F ] [ F ]
[ D ] [ D ] [ E ] [ E ] [ F ] [ F ]
元画像のピクセル1つは、4つのディスプレイピクセル（縦2×横2）に拡大表示される。
画像アップロード
リサイズとは
- 画像のピクセルを新しいサイズに再配置する処理
- ピクセルを「間引く」「補完する」ことで新しいサイズにする
リサイズにはいくつかアルゴリズムがある。
- バイリニア補完
- 4つの隣接ピクセルの平均を計算して新しいピクセルの値を決定する
- 元画像の全てのピクセルデータを利用して、新しいピクセルを計算する
- リサイズ後の画像は元画像をできるだけ正確に縮小したものになる
段階的にリサイズする方が良いケースもあるらしい。
https://zenn.dev/wed_engineering/articles/20240309-resize-image
圧縮とは
ファイルサイズを減らすために画像データの情報を効率化するプロセス
JPEG（非可逆圧縮）の場合、次のような手順で圧縮が行われる
1.カラー空間変換:
RGB（赤、緑、青）カラーを YCbCr（輝度と色差）に変換。
人間の目は色の変化よりも明るさの変化に敏感なため、色差成分（Cb, Cr）を間引きます。
分割とブロック化:
2.画像を 8×8 ピクセルのブロックに分割。
各ブロックを個別に圧縮処理。
離散コサイン変換 (DCT):
3.各ブロックを周波数成分に変換。
高周波成分（細かいディテール）を削除して圧縮。
量子化:
4.周波数成分を固定の精度（量子化テーブル）に基づいて丸める。
量子化テーブルの値を調整することで圧縮率を変化させる。
エンコード:
5.ハフマン符号化などでデータを効率的に圧縮し、最終的なJPEGファイルを生成。
リサイズ後の圧縮が良いらしい。
圧縮後のリサイズについて
→ 圧縮アルゴリズムで劣化した画像を元としてリサイズするので品質が下がる
圧縮後にリサイズする場合の問題
圧縮(JPEG圧縮)では、間の目で判別しづらい色の細かい差異を間引き（量子化）して、データ量を減らします。
- このプロセスで、色や輝度の情報が削減され、ピクセルデータが完全ではなくなる
- 圧縮後の画像はすでに情報が欠けた状態となるため、次の処理に影響を与える可能性がある
リサイズは、失われた情報をもとに新しいピクセルを生成する。
pngはリサイズの効果が少ない。
- PNGの可逆圧縮はピクセルごとの詳細なデータを完全に保持するため、ピクセル数の削減（リサイズ）が直接ファイルサイズに大きな影響を与えにくい
- 非可逆圧縮（JPEG）の場合、画質を犠牲にしてデータを削減するため、リサイズ後に大幅なサイズ削減が可能です