画像について

このページでは、WEBと印刷に利用する画像について説明しています。

画像形式(WEB)

HEIC形式

iPhoneのデフォルトheic形式。jpgよりも高画質でデータサイズが小さいのが特徴。
残念ながらheicは扱える環境が限られていてWEBには向いていないので、画像はjpgかpngで保存したものを使ってください。

JPG形式

WEBの標準的な画像の保存形式。
使用できる色数が多く、ファイルサイズもそこそこ小さい。

メリット

  • WEBはとりあえずjpgになっていれば大丈夫

デメリット

  • 繰り返し保存すると画質が悪くなる

 

PNG形式

WEBでは主に色数の少ないイラストで利用します。

メリット

  • 透明(透過)機能扱える
  • 繰り返し保存しても画像が劣化しない

デメリット

  • 色数が多いとファイルサイズが大きくなるので、写真や色数が多いイラストには向いていない

項目の意味

大きさ

画像のサイズです。横幅x縦幅が表示されています。
この画像の場合は、横幅3024px、縦幅4032pxです。

 

解像度

1インチx1インチの枠内にあるドット(ピクセル)数を表しています。単位はdpi(ドットパーインチ)。

上記の赤い1インチの枠の中にドット(ピクセル)が72×72ある状態を72dpiと言います。

WEBの場合

現在のWEBでは、画像の縦横のピクセル数を実際に表示させるサイズと同等にすることが主流の考え方となっています。

昔の一般的なディスプレイが72dpiだったので、WEBでは72dpiが標準とされてきましたが、近年ではHD画質以上が主流となり、100dpiを超えるディスプレイが主流になってきてWEB=72dpiは時代遅れな考えになっています。

ですが、HD、4kなど複数の解像度が混在している状態が続いていることから適正な解像度を定めずに、今まで通りの72dpiが設定されています。

印刷の場合

印刷の場合は、家庭用プリンターの線数が1インチあたり150線、商業印刷の場合は1インチあたり150〜175線です。
線は点(ドット)と点(ドット)で構成されているので、必要な解像度はプリンターや印刷機の線数の2倍になります。

一般的な家庭用プリンターの場合は、300dpi、商業印刷の場合は350dpiが適正になります。

解像度が低すぎるとどうなるの?

解像度が低すぎると適正なサイズで使用したつもりでも、ぼけて印刷されてしまうことがあります。

解像度が高すぎるとどうなるの?

解像度が高すぎると印刷用のファイルが重くなるというデメリットが生じます。
あまりにも大きすぎると、モアレや印刷できないといったことに繋がりますので、適正な解像度を使用してください。

 

色空間

RGBなのか、CMYKなのかを表示しています。

RGB

WEBなどデジタル表示用のデータ
光の三原色、R(レッド)G(グリーン)B(ブルー)の略

CMYK

印刷用のデータ
印刷の4原色、C(シアン)M(マゼンタ)Y(イエロー)K(ブラック)の略

⚠️注意

一般的にはJPGはRGBなのですが、一部のソフトウェアを利用するとCMYKで保存できてしまします。
CMYKで保存されたJPGをWebブラウザで開こうとするとエラーになり、ブラウザがクラッシュするなどの原因になりますので、ご注意ください。

 

WEBでの表示例

不適切なサイズの表示例

サイズが大きすぎる

チラシ画像を元にした表示例

適正サイズ

WordPressで縮小

WordPressで拡大

 

まとめ

  • 使用する画像の保存形式はjpgかpng
  • WEBは必要なピクセル数があることが重要
  • WEBは解像度は気にしなくてOK。とりあえず72dpiが主流
  • 印刷に使用する画像の適正な解像度は300〜350dpi
  • WEB用も印刷用も適正な画像を使いましょう
  • 画像を元のサイズよりも大きく使用するのはやめましょう
この記事をSNSでシェアしよう!