sorademo.com

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

sorademo.com

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

こんにちは。sorademoです。

 

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

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

f:id:sorademo:20190526004937j:plain

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

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

 

今回はこちらの写真

f:id:sorademo:20180510013853p:plain

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

 

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

f:id:sorademo:20180510014218p:plain

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

 

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

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

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

①写真画像を圧縮する!

こちらの圧縮サイト( 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

ってことで、トップページ記事数は影響が大きそうです。

⑤【追記】「続きを読む」を設定しよう!

後日談です。トップページの記事数の違いが最適化スコアに大きな影響を与えていたのは、トップページに記事の内容が全部出てしまっていたからだと思われます!

編集画面から「続きを読む」の設定があることを学習しまして、各記事において、序文と本編の間に「続きを読む」の設定をして、トップページの記事一覧を多めに表示しています。これならば記事の内容は各記事に飛んでから表示されるので、トップページもスッキリです!

 

ということで、今回は写真画像容量を軽くしてページ読み込み速度を上げるノウハウでした。色々と工夫をして、快適なブロガーライフを過ごしたいですね!