画像ファイルについて

ブログは文字だけだと味気ないですよね。写真をのせて彩を添えたいところです。
その画像については、ブログに載せる際に気を付ける３つのことがあります。

画像のファイル形式
画像の大きさ
ファイルのサイズ
著作権

それと最後に、画像を編集するソフトについてお話しします。

画像ファイル形式

画像ファイルにはいろいろなファイル形式があります。
その中でもウェブサイトで一般的に使用されるファイル形式は限られています。

主に、JPEG（ジェイペグと読みます）とPNG（ピーエヌジーと読みます）のどちらかになります。
（以前はGIFも使われていましたが今ではあまり使われません）

JPEG と PNG について違いを説明します

JPEG	ファイルサイズがPNGに比べて小さい。画像はPNGに比べて荒くなる。
PNG	JPEGに比べてファイルサイズが大きくなりがち。画像はJPEGに比べて鮮明。透明部分を持つことができるのでロゴなどに使用しやすい。

どちらの形式も一長一短あり、どちらが良いということではありませんが、この後説明するフィルサイズの大きさは、ページの読み込み速度にも影響を与えますので、ファイルサイズを小さくしやすい JPEG をなるべく使用することをお勧めします。
PNG は、とうしてもきれいに見せたい、透明部分を生かしたデザインをしたいという場合に使用しましょう。

画像ファイルの種類の見分け方

画像ファイルは、ファイル名の拡張子で見分けがつきます。
ファイル名は、”.”（ドット)で区切られていて、ドットの右側が拡張子と呼ばれます。

もしファイル名が ○○○○.jpg となっていたら、JPEG形式の画像ファイルです。
PNG の場合は、○○○○.png となります。

拡張子が見れませんか？
Windows のエクスプローラーの設定で、拡張子を隠す設定になっているためです。

その場合は、画像を選択して右クリック。表示されるメニューから「プロパティ」を選びます。

次に開く画面で画像のファイル形式が分かります。
下の例ですと、JPEGファイルであることが分かります。

なお、画像を選択して右クリック、プロパティを見るということは、この後の説明でもでてきますし、今後よく使うことになりますので覚えておいて損はありません。

画像の大きさ

画像の大きさ、サイズは、ウェブサイトに載せる場合気にしておかなければなりません。
ブログに配置する際に見た目の大きさを変更はできますが、極端に大きくしたり小さくしたりすると画像が荒れて表示されます。

極端な例ですが下の画像。元のサイズは、下のように小さいものです。

これを無理やり大きく表示させると、下のように画像が荒れます。

このようにならないように、画像は表示したい大きさよりも小さいものを使わないのが鉄則です。

画像のサイズは、縦横のピクセル数で表します。

ピクセルとは、画像の一つ一つの点のことで、上の例では、横に 640個、縦に480個の点を持つ画像ということになります。

ブログに配置するときは、なるべく見た目の大きさを変えずに配置できる大きさで画像ファイルを作成しましょう。

画像が大きい分はそれほど問題になりませんが、最大でも横幅が 1200ピクセルくらいの画像で作成してください。

画像の大きさは、プロパティで確認できます。

画像を選択して右クリック。現れたメニューのプロパティを選択。

現れたメニューの「詳細」タブをクリック。

次に現れた画面で画像の大きさを見ることができます。

下の例ですと、幅 512ピクセル、高さ 512ピクセルの画像であることが分かります。

スマートフォン、デジカメなどで撮影した写真をそのまま使用しないでください。
画像の大きさを調べていただければわかりますが、スマートフォンなどで撮影した写真そのものは 4000ピクセルを超える幅（または高さ）になります。
必ず画像編集ソフトで大きさを調節してから画像をアップロードしてください。

ファイルのサイズ

先ほどは画像の大きさそのもののサイズのことでご説明しましたが、ここでお話しするのは、ファイルのサイズです。
ファイルサイズが大きいと画像読み込みに時間がかかり、見た人に「遅いサイト」と思われてしまいます。
ウェブサイトを見ていて画像がなかなか読み込まれなくてイライラした経験はございませんか？
これは画像ファイルが大きすぎることが原因です。
ファイルサイズは小さいほうが良いです。

ファイルサイズを小さくするには、先ほど説明した画像の大きさを小さくすることが第一です。
あまりにも画像サイズが大きいものは、画像編集ソフトで適切な大きさまで縮小ましょう。

または、画像圧縮のレベルを調節します。
画像圧縮とは、ファイルサイズが大きくならないようにするための技術です。
圧縮するレベルを上げるとファイルサイズは小さくなりますが、画像の乱れの原因になります。

画像編集ソフトでJPEG画像を保存する際に、ファイルサイズを優先するか、画像のきれいさを優先するかを選択するメニューが出てきます。そこでフィルサイズも小さく画像もきれいとなるちょうどいいところを選ぶしかありません。

ファイルサイズの目安としては、100キロバイト以下。
どうしてもきれいで大きい画像を見せたいという場合以外は、100キロバイト以下になるようにしましょう。

画像ファイルのファイルサイズの確認方法は、画像を選択して右クリック。現れたメニューでプロパティを選択。

次で表示された画面でファイルサイズを確認することができます。
下の例では、462 KB （キロバイト）だということが分かります。少し大きすぎますね。

note: 今のご時世、光回線などのブロードバンドが当たり前ですし、携帯電話にいたっても 5G も普及し始めていますので、ファイルサイズが大きいから読み込みが遅い・・・という場面もなかなかないというのも正直なところです。
ですが、見てくださる方たちのことを考えたら、ファイルサイズは小さいほうが良いです。
ファイルサイズの大きさは、パケットの使用量と直結します。
パケット使用量を抑えてあげたほうが親切ですよね？