sorademo.com

お妻さんとの旅行記をメインに綴るブログ

sorademo.com

はてなブログで写真画像の容量を軽くして、ページ読み込み速度を上げる方法【JPG/PNG】

こんにちは。sorademoです。

 

 

はてなブログの画像容量を軽くして、ページ読み込み速度を上げる方法です。

 

ページ読み込み速度が遅いと、それだけユーザーが離れていってしまうので、ユーザビリティ(使いやすさ)の向上はブログ運営には欠かせないです!

 

 

最近、いろいろな人のブログを拝見して、ノウハウを学びましたので、私はこうやっていますよっていうのを紹介します。

せっかく撮った写真の容量が重すぎて、ブログにアップできないでお困りの方は、ぜひご参照くださいませ!

 

今回はこちらの写真

 

f:id:sorademo:20180510013853p:plain

 

サイズはなんと5.5MBという特大サイズの写真を軽くしていきたいと思います。

 

ちなみに、このままはてなブログに貼り付けようとすると、

 

f:id:sorademo:20180510014218p:plain

 

アップロード中がいつになっても終わりません。。。

 

写真を撮影するために私が愛用しているのは、デジカメとXperiaで、かなり高画質の写真が撮れる一方で、その容量は大きくなってしまいます。

 

お気に入りのガジェットで撮影したのに、ブログに使うことができないなんて、悲しいですよね。

 

ではでは、その方法を見ていきましょう!

 

 

①写真画像を圧縮する!

 

こちらの圧縮サイト( http://compressjpeg.com/ja/ )を使います。

f:id:sorademo:20180510014152p:plain

 

JPGとPNGを選択する箇所があるので、画像に応じて選択します。

次に、アップロードをクリックして、圧縮したい画像を選択します。

 

f:id:sorademo:20180510013845p:plain

 

こんな感じで次々と圧縮が進んでいきます。

-〇〇%と表示されるので、それだけ容量を軽くすることができます。

 

ちなみにこの作業で、先ほどの画像は1.3MBまで軽くなりました!

 

f:id:sorademo:20180510013900p:plain

 

圧縮後の画像は〇〇minというファイル名になるので、分かりやすいです。

まだまだ重めなので、さらなる作業を進めていきます!

 

はてなフォトライフを使う!

 

はてなブログのページからも、Google検索からもはてなフォトライフのページにアクセスできます!

 

f:id:sorademo:20180510165601p:plain

 

まず、右上の設定をクリックして、以下のとおり設定を変更しました。

 

f:id:sorademo:20180510014144p:plain

 

画像サイズを800ピクセル

画質80%

 

次に画像をアップロードするフォルダを作成します。

最初はトップフォルダのみですが、私は記事ごとにフォルダを分けるようにしています。

 

f:id:sorademo:20180510014156p:plain

公開範囲はすべて自分のみにしています。

 

写真をフォルダにアップロードするには、画面右上のアップロードをクリックします。

 

f:id:sorademo:20180510014140p:plain

この画面で、先ほど圧縮した画像を選択し、下のアップロードをクリックします!

 

アップロードが完了したら、すべての準備は完了です!

これによって、画像の容量は

 

f:id:sorademo:20180510013856p:plain

 

59KBまで小さくなりました!

画質の違いは、私のような素人には分からないレベルです。

 

ちなみに、圧縮サイトを使わずに、はてなフォトライフにアップロードした結果はこちら

 

f:id:sorademo:20180510013848p:plain


111KBです!

そんなに大差はないような気がしますが、1つの記事にたくさん画像をアップしがちな方は、ぜひ圧縮サイトも使った方が良いと思います。

 

軽くした画像を記事に使うには、

 

f:id:sorademo:20180510014011p:plain

 

画面右のサイドバーから「写真を投稿」を選択して、該当のはてなフォトライフフォルダから写真を選択するだけです!

 

f:id:sorademo:20180510014014p:plain

 

③ブログトップページの表示記事数を少なくする!

 

いままで変更したことがあったか、なかったか覚えていないのですが、私はブログトップページの記事数を7にしていました(デフォルトだっけ)。

 

せっかくブログを開いても、そのトップページが長すぎて、しかも読み込みも遅いとすぐにブラウザバックしたくなりますよね。

 

はてなブログから

「設定」→「詳細設定」→「トップページの記事数(PC版)」

を選択して、私は記事数を1に変更しております。

 

④ ページ読み込み速度をチェックする!

 

いままでの作業でどれだけユーザビリティが向上したかチェックします。

ブロガーの皆さんにはお馴染みの Google PageSpeed Insights( https://developers.google.com/speed/pagespeed/insights/?hl=ja )を使用します。

f:id:sorademo:20180510172350p:plain

「ウェブページのURLを入力」の部分に、自分のブログURLを貼り付けて確認します。

 

①~③すべてに取り組んだ結果がこちら

 

モバイル

f:id:sorademo:20180510014146p:plain

PC

f:id:sorademo:20180510014018p:plain

 

速度スコアがUnavailableになっていますが、これはアクセス数が足りないんだったかな?ちょっと調べておきます。

 

最適化スコアは

スクロールせずに見える範囲のコンテンツの読み込み時間: ユーザーが新しいページをリクエストした瞬間から、スクロールせずに見える範囲のコンテンツがブラウザで表示されるまでの経過時間。

ページ全体の読み込み時間: ユーザーが新しいページをリクエストした瞬間から、ブラウザでページが完全に表示されるまでの経過時間。

 

ってことは、このスコアが良いとオッケーって感じですかね。

 

スマホからアクセスする人が多いことを考えると、まずまずって感じですかね。 

 

ちなみに、③の記事数を3つと7つにしてそれぞれ検証してみると、

 

PC(トップページ記事数3)

f:id:sorademo:20180510014020p:plain

PC(トップページ記事数7)

f:id:sorademo:20180510014024p:plain

 

ってことで、少なくとも7は避けた方がよさそうですね♪

 

ということで、今回は写真画像容量を軽くしてページ読み込み速度を上げるノウハウでした。

 

快適なブロガーライフを過ごしましょう♪

 

追記

その後、編集画面から「続きを読む」の設定があることを学習しまして、

各記事において、画像の前に「続きを読む」の設定をして、

トップページの記事一覧を5記事に設定しました。

これでも表示速度は維持できていたと思います。

 

はてなブログPROに移行してからは、

設定→詳細設定より、

トップページの表示形式(PC版)を一覧形式にしております。

 

当ブログはレスポンシブデザインを採用しておりますので、

スマホにおいてもレイアウトを損なうことなく表示するように

努めております。ご参考まで!