アメブロ 画像サイズを変えるだけで読み込みは早くなる。最適なサイズとは

アメブロコピペで使える見出しデザインセット 24選を追加しました
知っておきたいアメブロのカスタマイズ方法 CSS編集を追加しました
アメブロスマホのデザインをCSSでカスタマイズする方法を追加しました
アメブロ画像に代替テキストつけてますか？画像に追加して、SEO対策しようを更新しました

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

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

この記事で伝えたいこと

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

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

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

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

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

画像を小さくする方法

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

画像を小さく軽くするのは前述のとおり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

引用元: モバイルページ速度の新しい業界ベンチマーク-ThinkWith Googleより

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

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

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

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

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

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

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

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

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

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

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

５Gになるから問題ない？

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

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

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

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

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

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

まとめ

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

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

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

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

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

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

アメブロの画像や写真のサイズ編集・大きさ変更