スポンサーリンク

【画像の種類と拡張子】デジタル画像にむく拡張子を知って保存をしよう

2種類のウサギHP作り
スポンサーリンク

拡張子って何?拡張子って必要なの?画像は何で保存したらいいのかな?

今回はホームページで使う画像についてRGBなど基礎的なことからおすすめ画像編集ソフトまで、初心者目線で解説します。画像の種類やホームページに適切な画像ファイルをが選ぶ方法を知りたい人に読んでほしいなと思います。

目次にはリンクが張ってありますので、気になるところに飛ぶことができます

画像の種類

画像の種類は大きくいうとパソコンやデジカメなど機械で見る画像、紙で見る画像があります。この2種類について説明していこうと思います。

RGBとCMYK

機械で見る画像と紙で見る画像は、色の表し方によって分かれます。「RGB」と「CMYK」に分かれます。RCBとCMYKの違いを表にしました。

RGB光の三原則重なると白になるモニターなど
CMYK色の三原則重なると黒になる印刷物、ペンキなど
RGBとCMYKの違い

ブラウン管テレビは覚えていますか?テレビの画面に近づくと赤、青、黄色の3つの点が見えました。ブラウン管テレビと同じようにモニターも作られています。RGBはで色を作っています。色が付いた光は集まれば光が強まるので、色は消え白色になります。

一方のCMYKはインクです。絵の具や色鉛筆など塗り重ねると濁りました。CMYKは色が重なると黒くなっていきます。CMYKは写真やはがきに画像印刷するときに使います。

画像編集ソフトの「PhotoShop」ではRGBやCMYKのことを「カラーモード」と呼んでいます。

通常、ホームページ用の画像を作る場合はRGBモードになります。神社のパンフレットや会報を作る場合はCMYKモードで作ります。

画像ファイルの種類

次にホームページに使うデジタル画像のファイルにも種類があります。その画像ファイルの拡張子を調べれば、どんな種類の画像ファイルか知ることができます。

拡張子はファイル名の末尾に着けられる文字列のことです。「.(ドット)」以下の文字が拡張子になります。この拡張子はアプリごと決まっており、誤って拡張子を変えるとファイルが開けなくなることもあります。拡張子はどんなアプリに使用するファイルなのか知らせる役割があります。

では、画像ファイルの拡張子にはどんなものがあるでしょうか?よく使う4種類の拡張子をまとめました。

種類特徴などWebサイト
JPEGフルカラー写真、グラデーションなど滑らかな画像に向く使える
GIF256色ロゴやドット絵などイラストに向く、透明保存ができる使える
PNGフルカラーJPGとGIFのいいとこどり使える
BMPフルカラーPrintScreenの画像が身近使えない

画像によって拡張子を変える

元の画像がBMPの場合、ホームページでは使用できませんので拡張子を変えなくてはなりません。また、PNGでファイルサイズが重い場合はGIFまたはJPEGに変えた方が軽くできることがあります。

どちらがいいか悩む場合は、ファイルサイズが軽くて、見た目がキレイな方を選びます。拡張子が画像に合っていない場合は、見た目がザラザラした感じやぼけた感じになります。

神社の様子やスマートホンやデジカメで撮った写真はJPEG、神紋やロゴ、イラストはGIFにします。JPEGとGIFの特徴は上の表の通りです。また、ファイル指定がある場合はそれに従います。

印刷物を作りたい時は

今までホームページ用にお話ししましたが、印刷用に画像を作りたい、編集したいときがあります。画像編集ソフトにCMYKモードがあれば、モードを変更して作ります。

もし、CMYKモードがない場合は、まずRGBモードで作ります。その後、CMYKモードに変更します。

RGBからCMYK変換はこうする

「RGB CMYK 変換オンラインツール」を使って、RGBからCMYKへ変換します。これを使って完成作品や試作品のイメージを確認しながら、RGBで作業します。

RGBからCMYKへの変換によって若干暗め、濁りめの雰囲気になりますので、気持ち明るめで作ります。

Photoshop Elementsがおすすめの理由

「画像編集ソフト」といえば、Adobe Photoshopが有名です。ただ、月払いや年払いで払い続けることによって使用することができます。

Photoshopはプロのデザイナーや写真家などアーティストのための高機能な画像編集ソフトです。

「Photoshop Elements」は買い切りのソフトウェアです。「Photoshop Elements 〇〇」と後ろに「2021」ねど年号がつきますが、ずっと使い続けることが出来ます。「2021」はバージョンと考えたらいいと思います。私は「2019」を使用していますよ。

「Photoshop」と「Photoshop Elements」の違いは機能の差です。「Elements」の方が機能に制限があります。印刷物を作る時や、自分の感性を表現したい時には不便かもしれません。

  • レイヤーマスクがない
  • CMYKモードがない
  • ペンツールがない
  • カスタムシェイプが少ない
  • フィルターが少ない

でも、神社のホームページに使う画像やちょっと何かしたい時に十分な機能を備えています。作業画面は大きくシンプルなので、すぐに使い始めることができます。

画像編集ソフトの「Photoshop Elements」は9種類の画像を保存すことができます。Photoshopに比べ保存できる種類は少ないですが、JPEG、GIF、PDFがあるのでプロとして仕事をしないのなら十分だと思います。

Photoshop(*.PSD; *.PDD)JPEG(*.JPG; *.JPEG; *.JPE)PNG(*.PNG; *.PNS)
BMP(*.BMP; *.RLE; *.DIB)Photoshop PDF(*.PDF; *.PDP)TIFF(*.TIF; *.TIFF)
CompuServe GIF(*.GIF)Pixar(*.PXR)Photo Project 形式(*.PSE)

私も以前、Photoshopを使用していましたが、使いこなせませんでした(泣)「使いこなせないな」と思う方は「Photoshop Elements」をオススメします。どちらがいいかな?と悩んでいる方は、仕事で何を作るかを考えるといいと思いますよ。

 

タイトルとURLをコピーしました