拡張子って何?画像は何で保存したらいいのかな?
今回はホームページで使う画像についてRGBなど基礎的なことからおすすめ画像編集ソフトまで、初心者目線で解説します。画像の種類やホームページに適切な画像ファイルをが選ぶ方法を知りたい人に読んでほしいなと思います。
画像の種類
画像の種類は大きくいうとパソコンやデジカメなど機械で見る画像、紙で見る画像があります。この2種類について説明していこうと思います。
RGBとCMYK
機械で見る画像と紙で見る画像は、色の表し方によって分かれます。「RGB」と「CMYK」に分かれます。RCBとCMYKの違いを表にしました。
RGB | 光の三原則 | 重なると白になる | モニターなど |
CMYK | 色の三原則 | 重なると黒になる | 印刷物、ペンキなど |
ブラウン管テレビは覚えていますか?テレビの画面に近づくと赤、青、黄色の3つの点が見えました。ブラウン管テレビと同じようにモニターも作られています。RGBは光で色を作っています。色が付いた光は集まれば光が強まるので、色は消え白色になります。
一方のCMYKはインクです。絵の具や色鉛筆など塗り重ねると濁りました。CMYKは色が重なると黒くなっていきます。CMYKは写真やはがきに画像印刷するときに使います。
画像編集ソフトの「PhotoShop」ではRGBやCMYKのことを「カラーモード」と呼んでいます。
通常、ホームページ用の画像を作る場合はRGBモードになります。神社のパンフレットや会報を作る場合はCMYKモードで作ります。
画像ファイルの種類
次にホームページに使うデジタル画像のファイルにも種類があります。その画像ファイルの拡張子を調べれば、どんな種類の画像ファイルか知ることができます。
拡張子はファイル名の末尾に着けられる文字列のことです。「.(ドット)」以下の文字が拡張子になります。この拡張子はアプリごと決まっており、誤って拡張子を変えるとファイルが開けなくなることもあります。拡張子はどんなアプリに使用するファイルなのか知らせる役割があります。
では、画像ファイルの拡張子にはどんなものがあるでしょうか?よく使う4種類の拡張子をまとめました。
種類 | 色 | 特徴など | Webサイト |
JPEG | フルカラー | 写真、グラデーションなど滑らかな画像に向く | 使える |
GIF | 256色 | ロゴやドット絵などイラストに向く、透明保存ができる | 使える |
PNG | フルカラー | JPGとGIFのいいとこどり | 使える |
BMP | フルカラー | PrintScreenの画像が身近 | 使えない |
画像によって拡張子を変える
元の画像がBMPの場合、ホームページでは使用できませんので拡張子を変えなくてはなりません。また、PNGでファイルサイズが重い場合はGIFまたはJPEGに変えた方が軽くできることがあります。
どちらがいいか悩む場合は、ファイルサイズが軽くて、見た目がキレイな方を選びます。拡張子が画像に合っていない場合は、見た目がザラザラした感じやぼけた感じになります。
神社の様子やスマートホンやデジカメで撮った写真はJPEG、神紋やロゴ、イラストはGIFにします。JPEGとGIFの特徴は上の表の通りです。また、ファイル指定がある場合はそれに従います。
印刷物を作りたい時は
今までホームページ用にお話ししましたが、印刷用に画像を作りたい、編集したいときがあります。画像編集ソフトにCMYKモードがあれば、モードを変更して作ります。
もし、CMYKモードがない場合は、まずRGBモードで作ります。その後、CMYKモードに変更します。
RGBからCMYK変換はこうする
「RGB CMYK 変換オンラインツール」(https://display-sign-stand.com/rgb_cmyk_converter/)を使って、RGBからCMYKへ変換します。これを使って完成作品や試作品のイメージを確認しながら、RGBで作業します。
RGBからCMYKへの変換によって若干暗め、濁りめの雰囲気になりますので、気持ち明るめで作ります。