【JPEG,GIF,PNG,BMP】ホームページに使える画像はどれ?

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

画像のファイルが色々あるけど、どれを使ったらいいの?

今回はこういった画像の種類と拡張子のお悩みに添いたいと思います。「基本過ぎる!」って思う人はこのページは飛ばしてください。

画像の種類は大きくいうとホームページに使う画像、印刷に使う画像があります。この2種類について説明していこうと思います。

これを読めば、ホームページに適切な画像ファイルをが選べ、印刷用画像への変換が出来るようになりますよ。

画像の種類

RGBとCMYK

画像の種類は大きく分けると印刷用の画像と、ホームページなどモニターで見る画像の二種類があります。

「画像の種類」は、画像の色の表し方の違いによってわかれます。「RGB」と「CMYK」と言われます。

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

RGBはテレビのブラウン管を思い出して頂ければ、理解しやすいと思います。テレビの画面に近づくと赤、青、黄色の3つの点が見えました。モニターなどは光で色を作っています。

一方のCMYKはインクです。絵の具や色鉛筆など塗り重ねると濁りました。紙などに画像を映し出すときにはCMYKになります。

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

通常、慣れ親しんでいるのはRGBモードになります。神社のパンフレットや会報を作る場合はCMYKモードで作ります。RGBからCMYKへの変換によって若干暗め、濁りめの雰囲気になりますので、気持ち明るめで作るといいと思いますよ。

画像ファイルの種類

次に画像のファイルの種類です。これは拡張子をみればわかります。

拡張子はファイル名の末尾に着けられる文字列になります。.(ドット)以下の文字が拡張子になります。この拡張子はアプリごと決まっている場合が多く、うっかり変えるとファイルが開けなくなることもあります。逆に拡張子からどんなアプリに使用するファイルなのか検討をつけることができます。

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

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

ちなみに、画像編集ソフトの「Photoshop Elements」は9種類の画像を保存すろことができます。

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)

目的によって画像の種類(拡張子)を変える

私の経験ですが、神社のホームページには2種類の画像で十分です。なにか書類を載せたい場合はPDFで保存しますが、ほぼGIFかJPEGでしか保存していません。

それは高画質の画像はデータのサイズが大きくなります。そのため、ホームページが表示されるまでに時間がかかります。時間がかかると、待っている方はイライラすると思うで、なるべく軽いなるGIFとJPEGを使っています。

神社の様子やスマートホンやデジカメで撮った写真はJPEG、神紋やロゴ、イラストはGIFにします。

どちらがいいか悩む場合は、データのサイズが小さくて、画質がキレイな方を選びます。下の「画像編集ソフトの検索結果画像」はGIFで保存しました。画像ソフトのアイコンが砂絵みたいになっています。JPEGなのかGIFなのか、画質をとるかで悩みます。厳密でなくても許容範囲で拡張子を考えればいいと思いますよ。

Photoshop Elementsがおすすめ

Google検索で「画像編集ソフト」の結果が、下の画像です。無料で使える画像編集ソフトが多く紹介されていますね。ダウンロードやサイト上で編集するタイプのソフトがあります。

フリーソフトを使う場合はセキュリティが心配なので信用できるサイトからダウンロードして使用してくださいね。

セキュリティが心配という方には「Photoshop Elements」をおすすめします。「Photoshop Elements」ならばメジャーなソフトなので、もし使い方に困った時は検索すれば悩みの答えにすぐにたどり着くことができます。

通常の「Photoshop」だと月々や年払いでずっと使い続けることができません。「Photoshop Elements」は機能が落ちますが、買ったらずっと使えるます。コスト削減に努めなくてはならない神社さんには「Photoshop Elements」がいいと思います。

印刷物を作りたい時は

今までホームページ用にお話ししましたが、印刷用に画像を作りたい、編集したいときがあります。残念ながら、「Photoshop Elements」にはCMYKモードがありません。

その方法を次に説明します。

RGBからCMYK変換はこうする

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

CMYKはRGBより、濁った暗さを感じるかもしれません。それは光とインクの違いで起こります。RGBで作る時に少し明るめに作業してもいいかもしれませんね。

HP作成
スポンサーリンク
いつもありがとうございます!
楽カミほむぺ★
タイトルとURLをコピーしました