アメブロに載せる画像はサイズ調整と圧縮で軽くして使う

この記事を読むのに必要な時間は約 11 分です。

[アイキャッチモデル: 茜さやさん]

この記事で伝えたいこと
  • 容量の大きい画像を使った記事は読まれにくい
  • ブログにアップロードする前に画像を軽くする

このブログは基本的に、メンタルセラピストやスピリチュアル系を仕事にしたい方で、ブログを書いている方でITが苦手な方を対象にしています。

アメブロで記事を書く時に、写真や図解を使って読者に分かりやすくすることは大事です。

説明に文字では何行も必要な内容でも、画像を使えば一目瞭然というのはよくある話です。

文章だけの記事を最後までしっかり読む読者は少ないので、図解を利用するのも効果的。

重い記事は読まれにくい

重いサイトというのは読み込みに時間がかかるサイトのことを言います。

アメブロはかなり重いサイトで、容量が重い画像を使用すると表示までにかなり時間がかかっています。

表示されるまでに時間がかかるサイトというのはイライラすることもあります。

実際に表示まで時間がかかる記事は、多くが離脱といって読まれずに離れてしまうというデータがあります。。

アクセスがあっても、実は全く読まれていないなんてこともよくあります。

なので画像はデータを軽くして使用することを心がけましょう。


画像を軽くするには?

画像を軽くするには次の2つのことが必要です。

画像の容量を小さくする方法
    • 画像の横幅をブログの幅に合わせた最適なサイズにする
    • 画像を圧縮する

どちらもなれると1分もかからずできる作業です。

横幅を600px以下にする

アメブロの記事に入れる画像を入れる時に最適な画像幅というのがあります。

選択しているテーマによって若干の違いはありますが2カラムの場合の横幅は620pxです。

つまり620pxよりも大きな画像はすべて620pxに縮小されます。

620pxよりも大きな画像を使ってもただ容量を使い表示を遅くするだけです。


実際に軽くするとどうなる?

今回はアイキャッチに使っている画像とほぼ同じ画像を説明に使用します。

ぱくたその「そろそろ時間だから行こっか」の写真素材をとにした画像です。

画像サイズ(幅:5760px 高さ:3840px 容量:5.8MB ファイル形式:JPG)

これを幅600px375pxに縮小します。

この時点で容量が150KBで97.5%ほど小さくなっています。

元画像度と比べた場合、ブログ上で見た場合正直差がわからないと思います。

今回の元画像はかなり多きい画像を使用しているのでサイズが100分の1近くまで落ちていますが普通にスマホの写真を使用する場合でも最低でも10分の1ぐらいにはなります。

さらに圧縮をかけた下記の写真の場合

約81KBまで落ちます。

通信状況にもよりますが、画像をそのまま使っているのとサイズを最適解して圧縮をかけた場合では、読み込み速度が10倍から100倍ほど変わります。

更に今のGoogleの検索で求められているSEOとして読み込み速度があります。

つまり画像の読み込みを早くすることはある意味必須の作業となってきています。

編集画面で小さくしても無意味

もしかするとあなたもやっているかもしれませんが、アメブロの記事の作成画面で画像を小さくしているから大丈夫と思っているかもしれません。

しかしこの方法は元の大きな画像を縮小して表示しているだけではっきり言って無意味です。

重要なのは画像をアップロードする前にサイズと容量を調整しておくことです。

画像を小さくする方法

実際に画像を小さくする手順を解説します。

画像を小さく軽くするのは前述のとおり2つの手順です。

  • 横幅を小さくする
  • 画像データを圧縮する

画像の横幅を小さくする

画像の横幅を小さくするためにはいろいろありますが、僕はphotoshopのサブスクリプションをお勧めしています。

月額で税込みで1000円ほどで使えるので無料で何とかするよりもお勧めです。

画像の編集やバナー作るにはとても便利です。

以前はとても高価なソフトでしたが今は安価で使用することができます。

photoshopでの作業での流れ

photoshopを立ち上げ画像を読み込みます。

[イメージ]-[画像解像度]をクリックします。

横幅を600に変更してOKをクリックします。

縦幅は横幅に応じて自動で変更されます。

画像が縮小されたら上書き保存で画像が小さくなります。

画像の圧縮

見た目には変化がありませんが圧縮で容量を小さくできます。

圧縮ときくと難しく聞こえるかもしれませんが「Smart PNG and JPEG compression 」をお勧めしています。

「iloveimg.com」というサイトもありますが「Smart PNG and JPEG compression 」の方が圧縮率が高いようなので僕はこちらをお勧めします。

まず「Smart PNG and JPEG compression 」にアクセスし目的の画像を「Drop your .png or .jpg files here!」と書かれたエリアにドラッグ&ドロップします。


※クリックすると画像が拡大されます。

Smart PNG and JPEG compression 」にアクセスし目的の画像をドロップするとすぐに圧縮が始まります。

圧縮が完了するとパンダ画像が変化します。

右側の[download]をクリックして圧縮したが画像を保存します。

保存する場所と名前を決めて[保存(S)]をクリックします。

当たり前の話ですが同名のファイルがあれば上書きするかどうかのダイアログが開きます。

この時によくどうすればいいかと質問されますが、あなた自身で判断してください。

圧縮前の画像を残す必要があるのか、それとも上書きしていいのかはその時々によります。

クライアントに対してセッションをする立場の人間がこの程度の判断が出来ないのであればそもそもメンタルセラピストやスピリチュアル系を仕事をする資格はないと僕は考えています。


画像を軽くすることが重要なわけ

画像の容量を減らすこと自体はそれほど難しくなかったと思います。

ここで「なぜ画像の容量やサイズを軽く小さくすることが重要なのか」ということを知っておくと、ブログを運営していくために役立ちます。

表示が遅いと読んでもらえない

あなたもブログやwebが表示されるのが遅いとイラっとする時があると思います。

そして、「もういいや」となってほかのページに切り替えてしまうということをしていると思います。

表示が遅いサイトは不利になるというデータも報告されています。

 

ページの表示速度 直帰率の増加
1秒から3秒に遅くなる 32%UP
1秒から5秒に遅くなる 90%UP
1秒から6秒に遅くなる 106%UP
1秒から10秒に遅くなる 123%UP

直帰というのはあなたのブログを読んでくれたユーザーがそのほかの記事などを読んだり、問い合わせしたりすることなく1記事のみであなたのブログを離れることを言います。

表を見てわかるように表示速度が遅くなればなるほど直帰率が上昇しています。

表示されるまで待てずに、ユーザーが記事を読む前に離れていることが影響しています。

訪問した読者が記事を読んでいるかどうかはgoogleアナリティクスのデータで確認するように心がけましょう。

これはアメブロのアクセス解析では実際に読まれているかどうかわからないからです。

スマートフォンユーザーが多いからこそ

特にスマートフォンでブログを見る方が多く、ユーザーのほとんどがスマートフォンというブログも増えてきています。

スマートフォンがどれだけ高性能化してもPCと比べると処理速度や通信速度が劣ります。

そのため表示に時間がかかり影響が出やすくなります。

アメブロの記事をスマートフォンやアプリで見ている人に対し、データ量が大きい画像ではデータ量が小さい画像と比べて不利になります。

さらに付け加えてアメブロには広告が表示されることで表示速度はかなり遅いので、画像の軽量化は必須と言えます。


5Gになるから問題ない?

docomo,au,softbank各社続々と5Gに対応した機種が発売され通信速度が速くなると言われています。

そのため画像の大きさや容量は今後問題ないと思うかもしれませんが、これは大きな落とし穴です。

なぜなら、対策をしている人と対策をせずに続けたあなたとの間で表示にかかる時間の格差は更に広がるからです。

さらに、画像を保存しておく容量もにも限界があります。

現在のアメブロの容量制限1TBなので気にする必要はないかのように思われますが、それでも大量の画像を使用していればいつか限界が来ます。

そのためにできる限り容量を節約しておくというの非常に大事なことになってきます。

まとめ

画像や図解を入れ、ユーザーに分かりやすくすることはとても大事なこと。

だからこそ軽くしてからアップロードしましょう。

他にも囲み枠・見出し・ボタンなど、画像を使わなくてもユーザーに伝わりやすい工夫はたくさんあります。

アメブロの記事で文章だけで集客できるほど甘くはありません。

画像や飾り付けを積極的に使っていきましょう。

ユーザにとって読みやすい、申し込みしやすいブログを心がけましょう。


最後までお読みいただきありがとうございます。

今回の記事があなたの役に立ったなら幸いです。

質問疑問ございましたらコメント欄へお願いします。

アメブロ関連記事

設定編

技術編

集客編

WordPress関連記事

設定・インストール

トラブルシューティング

動作環境・リリース情報