ブログ画像は最適なサイズ&ピクセルに変更しよう【圧縮方法3つ紹介】

shutterstock_1248997345 (1)
調べ人

・ブログの画像で最適なサイズやピクセルを知りたい
・画像の圧縮をしてブログやサイトを軽くしたい

ー 当記事でわかること ー

  • ブログ画像に最適なサイズやピクセルがわかる
  • ブログ画像の圧縮方法を3つ知ることができる
Free

結婚を意識するようになってから、資産形成を本気で考え色々行動して、人生好転しているFreeです。
そんな僕はこんな感じです

  • 2018年副業開始:副業月収35万達成
  • 副業実績でブラック企業からITWeb業界に転職成功
  • 資産5,000万目指して爆進中
  • 副業ブログ約2年で本業×副業×共働きで月収130万円越えを達成!

当記事『ブログ画像は最適なサイズ&ピクセルに変更しよう【圧縮方法3つ紹介】』を知ることにより、ブログ画像のサイズ、ピクセルや容量を最適化することが可能。

もし、今あなたがブログにアップする画像をサイズ変更も圧縮も何もしていない状態であれば、それは自分にとっても読者にとってもかなりマイナスなことです。

当記事を読了して、すぐに行動に移しましょう。

実際にブログの画像サイズや容量を最適化するとどんなメリットがあるかというと。

以下のような2つの大きなメリットがあります。

  • 表示速度が上がりGoogleから良い評価を受けやすい
  • 読者がストレスなくブログ記事を読むことが可能

こんなに良いコトがあるなら、やらない方法はないですよね。

では、あなたのブログに最適な画像のサイズ・容量の確認方法と合わせて、圧縮方法3つをご紹介していきます。

目次

自身のブログに最適な画像サイズや容量を確認する方法

ブログに最適な画像サイズと容量の確認をしていきます。まずは最適サイズから確認。

ピクセルってなに?
って方はWEBLABでわかりやすく紹介してくれているので、参考にしてくださいね。

ブログ画像の最適なサイズとは

結論:人により異なるが横幅900pxを目安にする

なぜ横幅900pxにするのか、理由は以下の通り

使用しているテーマや各設定により、最適なサイズは人によって異なりますが大半の方は600〜900pxくらいのサイズがちょうど良いサイズになっています。

画像はサイズオーバーしても結局の所、画面上のMAXサイズに自動調節されます。

できれば自分のブログサイトのピッタリの画像サイズを知りたい!って方は下記の5ステップを参考にしてください。

なんとなく知りたかったから、900pxまでに合わせておけばいいってことがわかったから、問題ない!って方はこちらをクリックすると5ステップを飛ばすことができます。

自身のブログ画像サイズの最適なサイズを知る方法【5ステップ】

5ステップの方法は検索ブラウザのGoogle Chromeを使用します。設定がまだの方はダウンロードをお願いします。

>> Google Chromeはこちら

ブログサイズに最適なサイズを確認するために必要な作業は『デベロッパーツール』を使用することです。

はじめての人はデベロッパーツールってなに?ってなりますよね。下記のような画面です。

デベロッパーツールはこの画像のような文字列です

では、自身のブログ画像サイズの最適なサイズを知る方法を5ステップでご紹介します。

STEP
デベロッパーツールを開く

デベロッパーツールを開く方法は以下の通り2つあります。

デベロッパーツールをショートカットで開く方法
ショートカットキーで開く方法

optioncommand + i を同時押し

デベロッパーツールをMacデスクトップから開く
Macデスクトップから開く方法

Macメニューバーから
表示 ⇨ 開発/管理 ⇨デベロッパーツールをクリック

上記のどちらでも問題ありませんが、ブログ運営をしていると結構な頻度でデベロッパーツールを使用することになりますので、ショートカットで覚えておいた方が良いです。

STEP
カーソルマークをクリック
デベロッパーツールのカーソルマークをクリック

カーソルマークは『デベロッパーツールの左上』に表示されているため、カーソルをあわせてクリック。

STEP
ブログ本文内の青色で表示部分をクリック
ディベロッパーツールの青い枠をクリックする

ブログ本文内にカーソルをあわせて、青く表示されている部分をクリック。

STEP
Computedをクリック
デベロッパーツールのcomputedをクリックする

デベロッパーツールの右側に表示されている『Computed』のタブをクリック

Free

ここでComputedのタブが表示されない人はSETP2からやり直してね! 

STEP
青い枠を確認
デベロッパーツールの青い枠をクリック

青色枠内の数値に「 横幅× 縦幅× 」と表示がありますが、812pxが当ブログの横幅サイズです。

Fun

縦幅の数値を見ると自身のブログ記事の長さを知ることができるね!もいろん記事の文字数によって縦幅は異なるよ。

上記の数値から、私のブログの場合は812pxがぴったりのサイズということがわかります。

何度やってもミスして横幅サイズの数値を取れない場合

STEP2から何度やっても横幅サイズが取れない場合は、下記の通り『本文文章』の横幅の数字を取ると記事内の横幅を把握することも可能。

ディベロッパーツールの文章をクリック

812pxの表記が左上にでていますね。これが記事内の横幅サイズです。

上記のステップ5を完遂すると、自身のブログの横幅ピッタリに合わせたピクセルサイズを把握することが可能になります。

このデベロッパーツールは画像サイズを確認すること以外にも様々な使い方あり。

デベロッパーツールについてはサルワカさんが詳しく解説してくださっているので、ブックマーク必須です。

Free

次に容量の確認をしていくね!

ブログ画像の最適な容量とは

結論:小さければ小さいほどよいが目安は100KB以下を目安にする

画像のサイズは100KB以下であればサイトのスピードをほぼ落とさずに、読者にストレスを与えることも少ないです。

最近は格安SIMのスマホでブログを見る方も多いので画像の容量は本当に重要です。

実際に通常の画像ではなかなか100KB以下にすることが困難です。例えばカメラやスマホで撮影した場合は以下の通り。

スマホで撮影した画像の容量は2.8mb
スマホで撮影
一眼レフで撮影した画像の容量は焼く8mb
一眼レフで撮影

上記のスマホで撮影した画像は2.8MB、一眼レフで撮影した画像は8.1MB、よくあるフリー素材の画像も含めて下記のような容量感です。

  • スマホ撮影:500KB〜10MB
  • 一眼レフ:3MB〜15MB
  • フリー素材画像:1MB〜20MB

すべて設定やそもそもの画像サイズの状態にもよりますが、イメージとしてはなんとなくわかりますよね。

ブログ画像の保存フォーマットは基本JPG一択

PNGやJPGが画像フォーマットの基本ですが、PNGよりJPGが重たいことは意外と知られていません。

画質はほぼ変わらないのでJPGで画像を統一すると、ブログの表示速度が早くなります。

現在、Google先生は出来る限り表示速度の早いブログやサイトを評価する仕組みになっているため、少しでも軽く・早くすることはブログ運営上正解なんですよね。

重要なことなので覚えておいてください。

画像サイズより容量が重要

ちなみにボクは前述でご紹介した900pxで設定をしていません。

理由は、ボク自身横幅いっぱいの大きすぎる画像は結構邪魔って感じてしまうタイプだからです。

Free

でも、図解などは大きくしたりして、状況に合わせてサイズを変えているよ。

画像の大きさを900pxや自身のサイトの幅ピッタリにするより、『容量』が超重要です。

なぜなら、『画像の重さ=サイトの重さ』は画像サイズではなく画像容量で決まるから。

よくツイッターなどでブログの添削をしている人で「画像のサイズに統一感がない」って言っている人がいますが、そんなに重要ではありません。

統一感を重視したところで100%と言っていい程、収益に直結なんてしないし、単なる自己満の世界です。

なんども言います。画像の大きさやサイズの統一感より何より、容量が重要!

画像容量を減らす【画像が荒くなりにくいおすすめの圧縮方法3つ】

前述の内容の通り、画像表示サイズの大きさより、何より容量が重要なことがおわかりいただけたと思います。

じゃあ、容量を小さくしよう!ってことで安易に圧縮作業をするとNG

圧縮する=画像が荒くなりやすいから、適切な方法やサイトで行う必要あり。

そこで本記事では、圧縮しても画像が荒くなりにくい『おすすめの圧縮方法3つ』をご紹介します。

ブログ画像おすすめの圧縮方法3つ

  1. BULKRESIZE【圧縮サイト】
  2. Automator【Mac専用アプリ】
  3. Compress JPEG&PNG images【プラグイン】

1つずつブログ初心者でもわかるように解説していきますね。

1. BULKRESIZE【圧縮サイト】

1つ目の方法は『 BULKRESIZEバルクリサイズ』ブログ画像圧縮サイトを利用する。

画質をキレイな状態で保ちながら、指定KBやフォーマットを変更しながら、複数枚を一気にまとめて画像圧縮できる まさにブロガーのための無料サービスです。

Free

ボク個人としては一番オススメ!まとめて一気に100KB以下にすることができるのはやばい。

画像を多く使用するブログだと、どうしても画像が多くなりがちですがBULKRESZEならあっという間に画像リサイズが可能。

BULKRESIZEで一気にリサイズ可能
BULKRESIZEトップページ

上記画像内の「ここに画像をドラッグ&ドロップ!や画像選択します」部分にドラッグ&ドロップでまとめて入れるだけ。

BULKRESIZEは何枚でも圧縮できる
一気にまとめて100KB以下にすることが可能

あっという間にまとめてサイズ変更が可能です。

BULKRESIZE【圧縮サイト】の特徴

  • 一気に圧縮できる」
  • 最軽量サイズにワンタッチでできる
  • 直感的シームレスな調整が可能
  • JPEG、PNG、WEBPにフォーマットが変更可能

色々試しましたが、圧倒的に操作簡単に画質低下を最小限に食い止め、指定のKBに変更することが可能なので、必須の圧縮サイトです。

他にも画像圧縮サイトで有名どころといえば、パンダマークでおなじみの「TinyPNGタイニーピング 」がありますが、BUKRESIZEに比べると細かな設定が出来ないので、結構使いにくいです。

画像圧縮サイトは今のところ BULKRESIZEバルクリサイズ一択です。

>> BULKRESIZE公式ページ

2. Automator【Mac専用アプリ】

2つ目はMac専用アプリ『Automatorオートメーター』を使用。ボクがMacをメインマシーンにしているため、Windowsの方は該当する方法ではないので申し訳ないです。

AutomatorはMacにデフォルトで入っているアプリなので、Macユーザーなら誰でも即利用可能。

AutomatorはMac専用アプリ
Launchpad内に純正アプリとして入っている

AutomatorはLaunchpadに入っています。

AutomatorがDockに入っている状態
画像以外にも色々ショートカットキーを作成したりも出来る

画像圧縮はもちろんのこと、フォーマット変換機能も備わっているので、画像が軽くなるJPGに変換することが出来ます。

簡単にサイズ調整が可能なので、お試しあれ。Automatorでブログ画像を圧縮する方法は下記のサイトが細かく教えてくれています。

ターミナルを使用するので、初心者には億劫になるかも知れません。「え〜難しい無理」ってなるのであれば、おとなしく1. BULKRESIZE【圧縮サイト】を使いましょう。

補足:ブロガーならAutomatorを使用してショートカットキーを割り当てておく

ブロガーであれば、Automatorで簡単にメモ帳やOneNote、Evernote、Dropboxなどを一発で開けるようにしているとめちゃくちゃ時短になりますよ。

3. Compress JPEG&PNG images【プラグイン】

2つ目はプラグインの『Compress JPEG&PNG images』を使用する方法。「TinyPNGタイニーピング 」のプラグインバージョンです。

プラグインなので、今回ご紹介する3つのブログ画像圧縮方法の中では、優先順位は最下位です。

プラグインは、サイトの脆弱性やサイトが重たくなる弱点があるため、できる限り使わない方が良いので優先順位は3つの中で最下位です。

Compress JPEG&PNG images』の使い勝手は良いですが、前述の1と2の方法がなんらかの理由で困難な場合以外は、あえて導入する必要はありません。

後述しますが、『Compress JPEG&PNG images』は現在アップしている画像のサイズをまとめて変更することができるプラグインでもあるので、上手に活用しましょう。

初心者ブロガーへ『画像のサイズ・容量 / 圧縮方法』以外に確認しておくべきこと

ボクがブロガー初心者のときに疑問に思って確認してよかったこと。全部で5つあります。

初心者ブロガーが画像関連で確認してくべきこと5つ

  1. おすすめ画像/アイコン素材サイトはどこか
  2. 画像編集ソフトは何を使うべきか
  3. 画像が重たくなっている自身のブログのページを確認する方法
  4. すでにアップしている画像のサイズ変更方法はあるのか
  5. サイズが小さい画像を画質を落とさず大きくする方法

順番に確認していきます。

1. おすすめ画像/アイコン素材サイトはどこか

画像素材のサイトは「無料」と「有料」の2種類あるので、どちらも確認します。

無料画像/アイコン素材おすすめサイト

  • ODANオーダン
  • undrawアンドロー
  • ICOOON MONO
  • ソコスト
  • いらすとや

有料画像/アイコン素材おすすめサイト

  • Shutterstockシャッターストック
  • Depositphotosデポジットフォト
  • PIXTAピクスタ

ボクが実際にブログを始めたときは無料素材を使用していましたが、日が経つにつれて気づくことがあります。

他の人のブログと画像がかぶりまくること…読者目線でいうと「あれ?この画像見たことある」「よく見る感じの画像だな」と差別化できないことに気づきます。

そしてある程度記事を書いた後に変更したいと感じても結構面倒くさいんですよね。あ〜最初から有料素材にしていたらよかったと後悔します。

Free

フリー素材は本当に皆使っているからね

ブログの世界観などを統一したい。大切にしたい。と考えている方は有料素材を使用すれば後悔しないですよ。

2. 画像編集ソフトは何を使うべきか

画像編集ソフトは下記の通り。

  • CANVAキャンバ
  • GIMPギンプ
  • fotorフォター
  • Adobe(Photoshop/Illustrator/Lightroom)
  • PowerPoint

CANVAは基本無料で使用可能で、利用者が日本にも多いため、編集方法や技をググってもすぐに出てくるのでオススメです。

CANVAはアイキャッチから文章間の画像編集まで万能に編集できます。GIMPやfotorはCANVAでもの足りない人や人とあまりかぶりたくない方にもってこいです。基本無料。

Free

ボクは図解などを作るときはパワポ一択。

3. 画像が重たくなっている自身のブログのページを確認する方法

画像が重たくなっているページの確認はアナリティクスでチェックできます。アナリティクスの登録がまだの方は「Google Analyticsの導入方法」で設定してくださいね。

重たいページをアナリティクスで確認している画像は下記の通り。

サイドバー「行動」 ⇨ 「サイトの速度」 ⇨ 「ページ速度」をクリックすると表示可能

アナリティクスでページの重たさを確認する

上画像で自身のブログ記事でどのページが重たくなっているか確認することが出来ます。

赤いゲージがながければ長いほど、ページ速度が遅くなっていますが、画像が主な原因になっているとは限りません。

あまりにも赤いゲージが多かったり、原因がわからない場合はGoogle PageSpeed Insightsで自身のブログのURLを入れてみて、ブログ自体のスピードチェックも行いましょう。

4. すでにアップしている画像のサイズ変更方法はあるのか

前述のプラグイン『Compress JPEG&PNG images』で対応が可能です。

Compress JPEG & PNG imagesのインストール後は有効化をクリック

プラグイン『Compress JPEG&PNG images』有効化します。

Compress JPEG & PNG imagesをライブラリから1つずつ画像を圧縮する

WordPressダッシュボード内の「メディアライブラリ」 ⇨ 「Compress」をクリックすると画像サイズをリサイズすることが可能。

かなり便利です。

サイドバーのBulk Optimizationの操作を行うことで、画像を一括でリサイズすることも可能なので、現在記事をある程度書き進めていて、一括で画像リサイズをしたい方は活用しましょう。

詳しい設定方法や使用方法は「プラグイン Compress JPEG&PNG imagesの設定方法や使用方法」にて解説しています。

5. サイズが小さい画像を画質を落とさず大きくする方法

サイズが小さいからといって、無理やり引き伸ばしたことありませんか。無理やり引き伸ばすと完全に画質が劣化します。

そこでどのように対応するかというと、『waifu2x-multi』を利用すること。

詳しい使用方法は「waifu2x-multiの使い方や設定方法」にて解説しています。

waifu2x-multiを使用することにより、画像やイラストを通常で引き伸ばすより、実際に目で見てわかるほど綺麗に引き伸ばすことができるし、基本無料のwebサービスなので使わない手はありません。

ブログ画像は最適なサイズ&ピクセルに変更のまとめ

本記事『ブログ画像は最適なサイズ&ピクセルに変更しよう【圧縮方法3つ紹介】』をご紹介しました。

もう一度まとめを確認をしておきます。

ブログ用の画像適切なサイズ/容量

  • 画像サイズ:900px前後
  • 画像容量:100KB以下

*自身のブログ画像のサイズを知りたい方は『デベロッパーツール』を使用する。

>> ブログ用の画像適切なサイズ/容量をもう一度確認する

ブログ画像のおすすめ圧縮方法3つ

  • BULKRESIZE【圧縮サイト】
  • Automator【Mac専用アプリ】
  • Compress JPEG&PNG images【プラグイン】

>> ブログ画像のおすすめ圧縮方法3つをもう一度確認する

初心者ブロガーが画像関連で確認しておくべきこと5つ

  1. おすすめ画像/アイコン素材サイトはどこか
  2. 画像編集ソフトは何を使うべきか
  3. 画像が重たくなっている自身のブログのページを確認する方法
  4. すでにアップしている画像のサイズ変更方法はあるのか
  5. サイズが小さい画像を画質を落とさず大きくする方法

>> 初心者ブロガーが画像関連で確認しておくべきこと5つをもう一度確認する

重要なことは、画像のサイズよりサイトのスピードにモロに影響がある画像の容量を小さくすることです。

読者のため、ユーザービリティを下げないために画像を圧縮しても画像が荒くなりにくい方法*本記事でご紹介している圧縮方法3つを実践しましょう。

よかったらシェアしてね!

コメント

コメントする

CAPTCHA


目次
閉じる