女性専門ホームページ制作・アメブロカスタマイズ F-Labo

自宅サロン、女性起業向け集客をサポートする女性だけのトータルビジネスデザインチームです

【ブログの画像サイズ】おすすめの大きさや変更方法を徹底解説!

485 views
約 14 分

ブログに使う画像って、そのまま使っていいのかな?

おすすめの大きさはあるのかしら?

みんなどうやって写真の加工をしているの?

WordPressでブログ開設したばかりの頃は、こういった疑問がどんどん湧いてきますよね。

結論から言うと、ブログに使う画像には、適切なサイズや容量があります。

この記事では、

  • ブログで使う画像サイズの目安
  • 画像を適正サイズにする方法やツールの紹介

といった内容を中心に解説しています。

なぜ大きいままではダメなのか?といった理由や、画像を使って評価されるサイトに育てるコツ等にも触れています。

ブログに使う画像について、詳しく調べたことがなかった!という方は、ぜひこの記事を参考にしてみてください。

【ブログに使う画像の大きさ】ポイントは2つ

ブログに使う画像を用意するときは、

  • 画像のサイズ
  • 画像の容量

この2点を適正化する必要があります。

パソコンなどに保存している画像は、詳細情報を開くと、このようにサイズや容量が分かります。

画像情報の表示画面

この画面上での、

  • 「サイズ」は「容量」を指す
  • 「大きさ」は「サイズ」を指す

という理解で、以下を読み進めてください。

画像サイズの目安

まず、画像のサイズ(大きさ)についてです。

物の長さや幅を「センチメートル」や「インチ」といった単位で表すように、画像サイズにも単位があり、px(ピクセル)という単位を使って画像の縦横のサイズを表します。

そして、ブログで画像を使う場合、目安として横幅700pxくらいあれば大丈夫です。

例えば、この画像サイズは横700×縦525pxですが、画像が粗いということもなく、ブログ記事内で使うには十分きれいに見えますよね。

画像サイズ解説用の、景色の画像

これはスマホで撮影した写真なのですが、もともとのサイズは横4032×縦3024pxもあります。

縦横の数値を比べると、5倍以上違いますね。

スマホで撮った写真て、かなり大きいのです!

小さくした画像でもブログ上では十分見やすいので、4000pxも必要ないのが分かると思います。

もし撮影したままの大きさで、画像をブログにアップしてしまったら・・・サーバーに負担をかける原因になるなど、サイト運営に支障が出ることもあります。

なので、スマホで撮った画像は、必ずサイズ調整をしてからブログに使ってくださいね。

また、実際にブログ上にアップした後、自分で大きいと感じたら各テーマの方法でサイズ調整してください。

テーマによって、%で縮小できたり、ドラッグで調整できたりと、異なる方法で調整できると思います。

ご自身のブログ上で、これくらいが見やすいかなと思う大きさに微調整してくださいね。

画像容量の目安

続いて適正化しておきたいのが、画像の容量です。

画像の容量は

  • KB(キロバイト)
  • MB(メガバイト)

といった単位(1000KB=1MBです)で表されます。

容量は、「重い」とか「軽い」といった表現がされますが、これってどういうことなの?と思いますよね。

ちょっと例を挙げてみます。

サイズもデザインも全く同じテントAとBがあったとします。

テントをたたむと、どちらも同じサイズにたためます。

でも、Aのテントは5kg、Bのテントは2kg

持ち運びが楽なのはどちらでしょうか。

テントの重さ比べ

Bですよね。

Bの方が軽いので、ササっと運べちゃいますね。

画像の容量も、これと同じように考えることができます。

ブログの画像や文字といった情報は、インターネット上で運ばれています。

そしてこの情報はテントと同じように、軽い方が楽に早く運んでもらえるのです。

例えば、

  • サイズが横700×525pxで、容量が1,000KB(約1MB)の画像A
  • 画像Aと全く同じサイズだけど、容量が35KBの画像B
重さの違い

であれば、35kbの画像Bの方が軽く、インターネット上でスムーズに運べる、ということになります。

画像を表示するのにやたらと時間がかかるウェブサイトがあった・・・そんな経験はありませんか?

画像が重すぎると、情報が運びにくくて、こういった状態も引き起こします。

なので、できるだけ小さい容量の画像を使うことは大事です。

画像の容量を小さくするには、圧縮という作業が必要になります。

圧縮方法はこの後説明していますが、先に目安をお伝えすると、1枚100kb以下に圧縮しておくことをおすすめします。

画像サイズを小さくして、圧縮する。

この2ステップで、最適なブログ用の画像を準備することができます。

次に紹介する方法を参考にして、やってみてくださいね。

ブログ用の画像をリサイズ・圧縮する方法

画像のサイズ変更や圧縮は、画像編集ツールを使って行います。

画像編集ツールにはどんなタイプがある?

画像編集をするには、

  • パソコンで行う
  • スマホアプリで行う

といった2通りの方法があります。

パソコンで行う場合、

標準で付属している編集ソフトを使うのが一つの方法です。

Windowsならペイント、Macならプレビューといったソフトがこれに当たります。

また、パソコンの場合は、オンライン上の画像加工ツールを使うこともできます。

オンライン上のツールはOSに関係なく使え、無料のものも多いです。

一方、

スマホで行う場合は、スマホアプリを使って画像加工できます。

撮った写真はスマホ上でリサイズしてしまいたい! という人は、こちらの方法がいいですね。

「画像 リサイズ」といったキーワードで検索すれば、アプリが見つけられます。

私も今回、サイズ変更や圧縮ができるツールをいくつか試してみました。

以下に紹介するツールは、初心者でも使いやすいと感じましたよ。

画像のリサイズ│おすすめの無料ツール

画像リサイズには、パソコン用ツールとスマホアプリを紹介します。

パソコンでのリサイズにおすすめ:BeFunky

BeFunky(https://www.befunky.com/)は、オンライン上で使える画像編集ツールです。

操作画面がシンプルで分かりやすく、アカウント作成をしなくてもすぐに使えます。

リサイズやトリミング、文字入れといった基本的な機能は無料で使えます。

もともと英語表記のため、日本語表示設定にしてから使うと楽ですよ。

使い方は次の通りです。

①画面左下か右上にある[Get Started]をクリック。

befunky使い方の手順1番目

②次の画面で左側の[Edit a Photo]を選びます。

befunky使い方の手順2番目

③日本語表示にするには、画面上右端のアイコンをクリックし、[Settings]を選択します。

befunky使い方の手順3番目

④設定画面が開くので、一番下にある[Language]から[日本語 ] を選び、画面を閉じればOKです。

befunky使い方の手順4番目

⑤日本語表示に切り替わりました。

befunky使い方の手順5番目

では、ここから画像のリサイズをやってみます。

⑥画面上部の[開く]から画像を開きます。パソコンに保存している画像を開くときは[コンピュータ]を選びます。

befunky使い方の手順6番目

⑦画像が開くと、左側に編集メニューが自動でスライド表示されます。もし出てこないときは、左端の上から2つ目のアイコンをクリックすると、出てきます。

befunky使い方の手順7番目

⑧編集メニューの中から[リサイズ]を選びます。

befunky使い方の手順8番目

⑨リサイズ画面で[縦横比を固定]にチェックが入っていることを確認し、数値を変更します。[✓]ボタンをクリックすれば、リサイズ完了です。

befunky使い方の手順9番目

⑩ 画像の保存は、画面上部の[保存]から行います。パソコンに保存する場合は[コンピュータ]を選んでください。

befunky使い方の手順10番目

操作中のやり直しは、画面右下にある左向きの矢印ボタンで、元に戻すことができますよ。

スマホでのリサイズにおすすめ:画像サイズ

スマホアプリでは「画像サイズ」というアプリを紹介します。Android版、iOS版ともにあります。

アプリ画像サイズの画面

使い方は次の通りです。

①アプリを立ち上げ、左上のアイコンから写真を開きます。

画像サイズアプリの使い方手順1

②数値ボックス間の鎖マークをタップして縦横比を固定し(有効の状態だとアイコンが青くなる)、変更したい数値を入れます。

画像サイズアプリの使い方手順2

③画面左下の矢印アイコンで、保存すれば完了です。

画像サイズアプリの使い方手順3

スマホアプリなら、ちょっとした隙間時間にも作業ができそうですね。ぜひ使ってみてください。

画像の圧縮│おすすめの無料ツール

リサイズできたら圧縮もしておきましょう。

圧縮ツールは、オンライン上でできるものを2つご紹介します。

パソコンでの圧縮におすすめ1: TinyPNG

TinyPNG(https://tinypng.com/)は、一度に20枚の画像を圧縮できる、便利なツールです。

tinypngトップ画面

こちらも無料で利用でき、ログインなども必要ありません。

使い方はとても簡単です。

① 画面上に画像をドラックして放り込みます。

tinypngの使い方手順1

②自動的に圧縮されて、完了です!55%も圧縮できて、115.1KBあった画像が52.3KBになりました。

tinypngの使い方手順2

③最後に[Download all]をクリックして、パソコンに保存してください。

tinypngの使い方手順3

一度に複数枚の画像を圧縮したいとき、こちらのサイトはおすすめですよ。

パソコンでの圧縮におすすめ2:Squoosh

Squoosh(https://squoosh.app/)もオンライン上で使える無料の画像圧縮ツールです。

Squoosh トップ画面

Squoosh は、MozJpegというJpegよりも小さいサイズになる画像フォーマットに圧縮できるのが特徴です。

TinyPNGで圧縮しても100KB以下にならないときなど、こちらを使ってみるとよいですよ。

1枚ずつ圧縮するタイプなのですが、その代わり画面上で画質を確認しながら作業できる、というメリットがあります。

使い方はTinyPNGと同様です。

①画面上に画像をドラックして放り込むと、自動的に圧縮が始まります。

Squoosh の使い方手順1

②水色の線を境に左側がオリジナル画像、右側が圧縮後の画像です。中心線は左右にドラッグでき、画質の変化を確認できます。

Squoosh の使い方手順2

自動圧縮された画質を左側のオリジナル画像と比べると、肉眼ではほとんど変わらないように見えます。

実際に使うときは、中心線を左右に動かして比べてみてください。

左右の下にはそれぞれ、オリジナル画像の容量、圧縮後の容量が表示されています。

この画像は、115KBから36.5KBに圧縮できています。

③圧縮画像は右下端のアイコンをクリックして、ダウンロードできます。

Squoosh の使い方手順3

TinyPNGとSquoosh、それぞれの使いやすさがあります。

ご自身にあったものを利用してみてくださいね。

ブログで使う画像は、適正サイズにすることが大事です。

次の内容を知っておくと、なぜ画像サイズがそんなに大事なのか、ということが分かってくると思います。

ブログの画像が大きいと何がマズイ?

大きすぎる画像を使ってブログを更新していると、何がダメなのでしょうか。

一言でいうなら、

ユーザーに見てもらえないサイトになってしまうかもしれません、ということです。

サイト表示速度が遅くなる原因の一つになる

画像が大きくて重いと、画像表示に時間がかかったりしますよ、というお話をしました。

画像表示が遅い=サイト表示が遅い

ということです。

サイト表示に時間がかかれば、ユーザーはどんな反応をするでしょうか。

きっとストレスを感じて、ページを閉じてしまいます。

お客様に読んでもらおうとサイト運営をしているのであれば、ストレスを感じずに見てもらいたいですよね。

表示速度を遅くしないためにも、画像を適正サイズにする必要があるのです。

また、サイトの表示速度は、Googleにサイト評価をされる要素の一つにもなっています。

そのため、表示速度が遅いと良い評価を得られず、検索順位が下がる・・・という結果につながる可能性もあります。

細かい話をすると、画像が重いことだけがサイト表示を遅くするわけではありません。

しかし、主な原因の一つであるため、不必要に大きな画像は使わない、ということを知っておいてください。

サイト表示速度の調べ方

サイトの表示速度は、アナリティクスから調べることができます。

アナリティクスのメニューで、[行動]→[サイトの速度]→[ページ速度]の順に進むと、下のような画面が表示されます。

アナリティクス、速度表示の画面ショット

画面右側に、緑や赤の棒グラフがあります。

これはざっくり説明すると、サイトの平均表示速度に対して、各ページがどれくらい速いのか(あるいは遅いのか)を表したものです。

  • 赤く伸びているのは、平均速度よりも遅いページ
  • 緑に伸びているのは、平均速度よりも速いページ

と理解しておけば大丈夫です。

ですので、ここをチェックすれば、サイトの中で足をひっぱっているページはどれなのか、ということが分かります。

赤い方に伸びているページがあったら、画像のサイズどうかな?とチェックができますね。

アナリティクスでは、 サイト表示速度の他にも、アクセスに関する色々なデータを見ることができます。

まだアナリティクスを使っていない・・という方は、この機会に利用を考えてみると良いですよ。

アナリティクスってなに?という方は、

こちらの記事で基礎部分を解説しているので、参考にしてくださいね。

画像を使ってブログ評価を上げる2つのコツ

ブログで使う画像を適切な大きさにすることは、

  • サイト表示がスムーズになり
  • ユーザーが使いやすくなる

といった結果につながります。

また、サイト評価が上がる要因の一つにもなります。

多くの人の目に留まるサイトにしたい、と考えてるなら、画像の扱いもおろそかにはできませんね。

適正サイズの画像を使えるようになれば、第一段階はクリアです!

ここで最後に、画像を使ってより適正に評価してもらうためのコツを2つご紹介します。

SEOも意識しているよ!という方は、ぜひ以下のことを意識してみてください。

1. 画像の内容を表すファイル名をつける

一つ目は、画像のファイル名を内容にあったものに変更しておく、ということです。

画像が最初に保存されるときって、大抵アルファベットや数字の羅列ですよね。

このまま使っても、ブログ作成上は特に問題ないです。

しかし、

検索エンジンに対してサイトの評価を上げて、上位表示させたい!といったSEOを意識した考えがあるなら別です。

ファイル名は、画像の内容にあったものに変更しておきましょう。

そうすることで、検索エンジンが画像の内容を適切に理解してくれます。

例えば、この桜の画像だったら、sakura.jpgのような名前をつけます。

ファイル名の例の、桜の画像

ファイル名は、日本語でなく、半角英数字を使ってください。

画像に合った名前をつけることで、検索エンジンが「あーこの画像は桜なんだな」と認識してくれるのです。

ここで注意したいのは、記事の内容に関連性のある画像を使うこと。

極端な例ですが、

料理の記事なのに動物の画像が挿入されていたら、違和感ありますよね。

記事の文脈に合ってないような画像を使っていると、検索エンジンに「いい記事ではないな」という評価をされてしまう可能性があります。

なので、SEOを気にするなら、どんな画像を使うかにも気を付けていきましょう。

2. 代替テキスト(altタグ)を入れる

もう一つは、代替テキスト(altタグ)を入れるということです。

WordPressで画像の編集画面を開くと、代替テキストを入力する場所があります。

代替テキスト画面のスクリーンショット

代替テキストを入れると、画像にファイル名をつけるのと同様、検索エンジンに画像の内容が正しく伝わります

また、代替テキストを入れることで、

  • 何らかの理由でブラウザに画像が表示されないときに、画像の代わりに表示される
  • 視覚障害の方などが音声ブラウザを使うときに、テキストが読み上げられるため、画像の内容が理解しやすくなる

といったメリットもあります。

代替テキストは、ファイル名よりも少し詳しく入れておくと良いようです。

例えば、さっきの桜の画像なら、

  • ファイル名を「sakura.jp」
  • 代替テキストを「満開になった桜」

などと入れておきます。

最初はテキスト内容を考えるのもちょっと大変かもしれませんが、少しずつ慣れていきましょう。

まとめ

ブログに使う画像サイズは、適正サイズに調整する必要があります。

  • サイズの目安は横幅700pxくらい
  • 圧縮して軽量化すること
  • 画像加工はオンラインツールやアプリでできる

何より大事なのは、ウェブサイトはユーザーのためにあるということ。

ユーザーに好まれるサイトになれば、評価も徐々に上がっていきます。

そのためにも、まずは「適正サイズの画像」を意識してみてくださいね。

あなたのサービスを【もっと多くの人】に知ってもらうには?

いまさら人に聞けない【ネット集客の基本】をまとめたPDF資料が今すぐダウンロードできます!

  • 検索にひっかかるってどういうこと?
  • WordPressって何?
  • SNSってやったほうがいいの?
  • メルマガって何のためにやるの?
  • LINE@って必要?
    ・・・他

一般的なネット集客のノウハウをおうちサロン・女性個人事業主の方向けにアレンジしてまとめました。

資料の詳細を見てみる

【ブログの画像サイズ】おすすめの大きさや変更方法を徹底解説!
この記事が気に入ったらいいね!をしよう
485 views