ブログに写真や画像を表示する際の形式やサイズの目安は?画像の取り扱いの基本を覚えよう!

あなたはブログに画像を掲載する時に、画像の形式やサイズ、名前を意識していますか?

画像のサイズや形式はとても大切。

これらがきちんと設定できていないと、ブログの表示速度が遅くなったり画質が悪くなったりします。

また、画像に名前を付ける際も、日本語で名前を入力するとデータとして表示される場合にはおかしな表記になってしまいます。

なので、画像の扱い方を知っておくのはとても大切です。

今回は今さら人に聞きにくい、ブログに使う画像のサイズや種類、名前の付け方について解説します。

ブログに使う画像の基本

ブログに使う画像の基本は下記の通りです。

これだけ覚えておけばOK

ブログに使う画像のポイント

  • 画像の種類は「JPEG」か「PNG」にする。
  • 画像の容量を小さくしてブログの表示速度を速めたいなら 「JPEG」 、背景を透明にしたりきれいな画質で表示したいなら 「PNG」 で保存する。
  • ブログにアップする画像の大きさは横幅1000pxくらいに調整する(この数値は好みでOK)。
  • ファイル名は日本語ではなく英語で付ける

では、それぞれの項目について詳しく見ていきましょう。

画像の種類やサイズを調整しないとどうなる?

あなたはブログに画像を投稿する場合、iPhoneで撮影した画像やフリー素材サイトから用意した画像をそのままアップロードしていませんか?

その画像が適正なサイズになっていればいいのですが、サイトで画像を使用する場合、種類やサイズには気を配る必要があります。

画像サイズが大きすぎると容量が重くなってしい、ページが表示されにくくなるというデメリットがあります。

また、それほど高画質な画像を必要としない場所に、超高画質の画像を使っている場合などもページの表示が遅くなります。

なので、最低でも画像サイズの調整だけはしておくようにしましょう。

ブログに使う画像サイズをどれくらいにするかは人それぞれですが、少なくとも横幅が2000pxを超えるような画像は必要ありません。

コーポレートサイトなど、デザイン重視のサイトを制作する場合はこの限りではありません。

ブログのアイキャッチや装飾画像に関してです。

基本的にブログの横幅は1000px前後に設定されていることが多いので、基本的には1000pxくらいに調整しておけばOKだと思います。

画像の形式と使い分け

画像の形式にはいくつかありますが、ここでは代表的な三つの形式について説明します。

画像ファイルには、「〇〇.png」といった形で、最後に拡張子がつけられています。

これによって、画像の種類を判別しています。

それぞれの特徴は下記の通りです。

背景が透明にできるきれいな画像

png(ピング)

png(ピング)は、主にWEBサイトでの表示用の画像形式です。

一番の長所特徴は背景を透明にできるということです。

その他にも色数が多い、繰り返し加工しても画質が劣化しないといった点が挙げられます。

ただ、画像がきれいに表示できる分、容量が大きくなり、ページの表示スピードが遅くなりがちというデメリットもあります。

写真に使われる一般的な表示形式

jpeg(ジェイペグ)

jpeg(ジェイペグ)は写真によく使われる画像形式。

ブログなどで画像や写真を使用する場合は、基本的にこのjpegが良く使われます。

長所として色数が多く、容量が小さめという点が挙げられます。

ただ、加工を繰り返すと画質が悪くなるデメリットがあります。

パラパラアニメのような画像が作れる

gif(ジフ)

gif(ジフ)は、アニメーションを表示できる形式として知られています。

長所としてアニメーションの表示、透過が可能、容量が小さい、という点が挙げられます。

短所として、色数が少ない(画質が悪くなる)という点があります。

それぞれ長所と短所を考慮して、基本的な使い方をまとめると下記のようになります。
(好みにもよるのであくまでも目安としてください。)

ブログのロゴ画像 png
一般的なブログの写真 jpeg
アート作品などきれいに見せることが重要な画像 png
画質のきれいさが重要なコーポレートサイトの写真 png
パラパラアニメのような画像 gif
画像で作った図や表など jpeg

画像の形式を変更する方法

画像の形式はパソコンを使って簡単に変更することができます。

Windowsであれば標準で搭載されている「ペイント」というアプリを使用することで、形式を変更することができます。

では、実際の変更手順について説明していきます。


①ペイントを起動します。

スタートボタンをクリックし、ペイントを選択します。

見つからない場合は、下部の検索フォームに「ペイント」と入力してみましょう。

②ペイントが起動したら、形式を変更したい画像を開きます。左上の「ファイル」から、「開く」を選択し、任意の画像を選びましょう。

③では、形式を変更します。再び左上の「ファイル」をクリックし、今度は「名前をつけて保存」にカーソルを合わせます。

④任意の形式を選択して、任意の場所に保存します。

これで画像の形式を変更することができます。

正確に言えば、「別の形式で同じ画像を複製した」という形ですので、元々の画像はそのまま残っています。

二つの画像を比べてみると、最後の拡張子が「.png」と「.jpg」で異なっていることが分かると思います。

画像のサイズ変更方法

画像のサイズも、同じくペイントで変更することができます。

①画像が開かれた状態から、左上の「サイズ変更」をクリックします。


②すると、以下のような画面になります。

ピクセル単位でサイズ変更する場合は、表示されている現在のピクセル数を基準にサイズを指定します。

パーセント単位でサイズ変更する場合は、現在のサイズを100%とした時に何%にするのかを指定します。

ここでは、パーセント単位で80%で指定してみましょう。

これで、画像のサイズが変更が完了です。

画像ファイルにつける名前は日本語ではなく英語にする

最後に、画像を保存するときの名前は日本語ではなく英語で付けるようにしましょう。

日本語だとデスクトップなどで表示した時にはきちんと表示されます。

ただ、WordPressなどのブログに取り込んだ時には、日本語が意味の分からない英語表記に書き換えられてしまいます。

コンピューターが日本語を理解する時は、一度このような英語表記に変換して理解しているんですね。

なので、画像のファイルを検索する時に、何の画像なのかが分からなくなってしまいます。

そのため、画像ファイルに名前を付ける場合は英語で付けるクセを付けましょう。

まとめ

今回は画像の種類とサイズ、その変更方法について解説してきました。

ブログ等に画像を掲載する際には形式やサイズ、ファイルの名前に気を配りましょう。

サイトや画像の用途に合わせて、適切な画像を用意してサイトを彩りましょう!

そうするとブログの画像がきれいに表示されるだけでなく、表示速度が速くなったり、画像ファイルが整理しやすくなるというメリットがあります。

ネットで収益を上げる仕組みを学びたいあなたへ

オンラインビジネスの教科書

有料で販売している動画コンテンツをメルマガ会員限定で無料公開中!

ストライクアップのメルマガ会員限定で、

  • 商品が売れるまでの流れ
  • 自分の商品の作り方
  • 決済サービスの導入方法
  • オンラインビジネスにおけるSNSやブログの役割

などを解説した動画講座(合計15本、約1時間半の動画)を完全無料で公開しています。

  • ネットで収益を上げたい方
  • オンラインで商品が売れるまでの流れ(全体像)を理解したい方
  • オンラインビジネスに必要なモノを知りたい方
  • 自分のデジタルコンテンツを作って販売したい方

はぜひ活用してください。

現在、新規メンバーの受付を停止しています。

近日開催予定のセミナー

ONLINE COURSE

オンライン講座

現在、提供しているオンライン講座です。

>>オンライン講座一覧<<

この記事を書いた人

たかゆき

広島でWEBメディアの運営やオンライン講座の制作&販売を行っている人。
WordPressを使ってホームページを作って運営できるようになるためのセミナーも開催してます。

WEBメディア運営/オンラインスクール運営/WordPress講師/Udemy講師/アフィリエイトスクールのコーチ