「写真」の中に文字等を入れた際に「文字周り」の表示が「くすんだような表示」になってしまうことがあります。

文字の周りがくすんでいるのは「目立つ」部分でもあるので改善したいところです。

他にも「写真」や「イラスト」などが「ボヤけた」ように見えることもあります。

「Apple」の「MAC PC・iPhone・iPad」などでは「Retinaディスプレイ」と呼ばれる「通常サイズの2倍のピクセル」を持つディスプレイが採用されています。

下図の写真は「iPhone」で表示された状態をキャプチャしたものですが、「等倍サイズ」の方が「２倍サイズ」の画質と比較するとよりボヤけたように見えてしまいます。

「出来る限り良い画質」で「画像」や「写真」を表示すると「画像ファイルの容量」が増えてしまうというデメリットもあります。

「画像ファイルの容量」が大きくなると、「データのダウンロード」に時間がかかることになり、ページの表示まで待たされることになるため、「ユーザーのストレスの増加」に繋がってしまう可能性があります。

「画像サイズ」を「元の画像サイズ」より大きくすると、「画像」が引き延ばされるため「画質の劣化」に繋がってしまいます。

「写真」などを扱う際に「WEBデザイン」でよく利用されている「画像編集ソフトウェア」が「Photoshop」ですが、「Photoshop」で「画像や写真」を拡大すると「格子状」になっている「ピクセル」を見ることができます。

上図は「縦30ピクセル」と「横30ピクセル」の「ビットマップ画像」を「Photoshop」で作成したものです。

右下から左上に向けて「グラデーション」を使用しているため、それぞれのピクセルごとに異なった「色情報」を持っています。

グレースケール

「グレースケール（白黒）」の色情報を持つ場合は「1ピクセル当たり8ビット」の「画像ファイルサイズ」が必要となります。

この画像の「総ピクセル数」は「30（縦） x 30（横）」なので、「900ピクセル」になります。

「900ピクセル x 8ビット」の「画像サイズ」は「7200ビット」になります。

「8ビット」で「1バイト」なので、この画像の「画像データ部分」は「900バイト」になります。

カラー

「カラー（RGB）」の色情報を持つ場合は「1ピクセル当たり24ビット」の「画像ファイルサイズ」が必要となります。

「Red（赤）」「Green（緑）」「Blue（青）」の３つの色がそれぞれ「8ビット」の色情報を持ちますが、「8ビット」 は「256段階の色情報」を持つことができるため、「256(Red) x 256(Green) x 256(Blue)」 の「16,777,216(1677万)」の階調の色を表現することができます。

「30（縦） x 30（横）」の場合は「グレースケール」の3倍の「データ容量」となるため、「2700バイト」のデータが必要となります。

実際の「画像ファイルサイズ」は「画像識別用の情報」などがさらに付加されるため「ピクセルデータサイズ」より「画像ファイルサイズ」の方が大きくなります。

また「画像データの圧縮形式」などによっても「画像ファイルサイズ」が変化します。

Bitmap

「データ圧縮を行わない方式」で、前項で計算した「画像データサイズ」に基づいて、「画像ファイルサイズ」が決まります。

「色情報（ビット）」が「1ピクセル」と対になって「Mapping（マッピング）」されているため、「Bitmap」と呼ばれています。

「データサイズ」を小さくする「圧縮」が行われず「画像ファイルサイズ」が大きくなるため、「WEBサイト」の制作ではあまり利用されていません。

「Bitmap形式」の画像ファイルの「拡張子」は「画像ファイル名.bmp」になります。

JPEG

「JPEG（Joint Photographic Experts Group）」は「データ圧縮」を行うことができる「データ保存形式」で、この規格を制定した組織の名前でもあります。

圧縮方式には「一部のデータを捨てる圧縮方法」と「データを捨てない圧縮方式」があります。

多くの場合は「一部のデータを捨てる圧縮方法」が採用されていますが、「データを捨てる」という特徴があるため、「圧縮データ」から元のデータを復元することができません。

「RGB（Red・Green・Blue）」のデータを「輝度・赤の色相・青の色相」に変換して圧縮処理を行っています。

「WEBサイト制作」でも頻繁に利用されている「画像形式」になります。

「JPEG形式」の画像ファイルの「拡張子」は「画像ファイル名.jpg」または「画像ファイル名.jpeg」になります。

PNG

「PNG（Portable Network Graphics）」は「データ圧縮」を行う「データ保存形式」で、「データ圧縮」を行う際に「データを捨てない圧縮方式」のため、「元の画像データ」へ変換することができる「可逆圧縮」の「画像フォーマット」です。

「圧縮方式」には「deflate」と呼ばれる方式が採用されていて、「LZ77」と「ハフマン符号化」を合わせた圧縮方式となっています。

「WEBサイト制作」でも比較的頻繁に利用されている「画像形式」になります。

「JPEG形式」の画像ファイルの「拡張子」は「画像ファイル名.png」になります。

GIF

「gif（Graphics Interchange Format）」は「データ圧縮」を行うことができる「画像フォーマット」です。

扱える色は「256色」までとなるため「色数が少ない画像」に適しています。

「アニメーション」を作成できるため、「アニメーションバナー」や「アニメーションアイコン」などの作成を行うこともできます。

「GIF形式」の画像ファイルの「拡張子」は「画像ファイル名.gif」になります。

TIFF

「TIFF（Tag Image File Format）」は「データ圧縮」を行うことができる「画像フォーマット」です。

「データ圧縮」を行わないまま用いられることも多く、「画質を優先するケース」で「非圧縮TIFF画像」が主に利用されています。

「TIFF形式」の画像ファイルの「拡張子」は「画像ファイル名.tif」または「画像ファイル名.tiff」になります。

SVG

「SVG（Scalable Vector Graphics）」は、「ベクターデータ」で構成されている「画像フォーマット」です。

「画像の拡大・縮小」を行っても画質が劣化せず「アニメーション」を作成することもできます。

「XMLベース」の「画像データ」で「SVGタグ」を作成して描画をしていきます。

「SVG形式」の画像ファイルの「拡張子」は「画像ファイル名.svg」になります。

WebP

「WebP」は、「JPEG・PNG」と比較して約20～30%ほど画像サイズを縮小できる「画像フォーマット」で「Google」が開発しています。

「アニメーション」を作成することもでき、対応ブラウザが増えていくことで今後普及していく可能性がある「画像フォーマット」です。

「WebP形式」の画像ファイルの「拡張子」は「画像ファイル名.webp」になります。

「画像フォーマット」の形式にはさまざまなものがありますが、現在「WEB制作」で利用されている画像は「JPEG・PNG」が多く、少しずつ「WebP」が代替していくのではないかと思います。

「WEB制作」ではさまざまな「画像・写真データ」を扱うため、「写真素材」などを選ばれる際の参考にしていただければと思います。