読者です 読者をやめる 読者になる 読者になる

メンズのスキンケア・美容研究ブログ

1980年代生まれ。162cm 49kg 紙媒体制作会社の主に内勤営業。 美容や健康について日々勉強しています。 詳しいプロフィールはaboutページをご覧ください。

はてなブログで簡単に画像を最適化する方法

スポンサーリンク

先日デザインのカスタマイズを行いましたが、より閲覧しやすく利便性のあるブログにするために細かい部分を調整していました。

今回、手を付けたのは画像の最適化です。当ブログに載せている画像の7割は自分で撮影した写真、残りはフリー素材サイトのイメージや、キャプチャした画像などです。

撮影は主にスマホを使用しています。最近のスマホはカメラ機能も進化し、高画質の写真が撮れるようになりました。それは良いことなのですがブログで使うにはマイナス面もあり、そのままではファイルサイズが大き過ぎてリサイズが必要になってしまうのです。

当ブログは美容ブログですので商品レビューの記事も掲載しています。レビュー記事ではパッケージや使用シーンなど複数の写真を載せることになるので、容量が大きい写真が何枚もあると当然そのページは重くなってしまいます。

ページが重くなることでのデメリット

①読み込みが遅くなる

アクセスしてもすぐページが表示されないと、画像も見えないしスクロールもできないし不便ですね。快適な閲覧が出来ずストレスを感じてしまいます。

②ユーザーに離脱される

検索で飛んだページがやたらと重かったらあなたならどうしますか?余程興味を惹かれるコンテンツでもなければブラウザバックしたくなるでしょう。

③検索順位が上がりにくい

Googleが検索順位を決定する要素の一つに表示速度があります。動作が重く快適な閲覧ができないページは検索で上位に表示されにくくなってしまいます。

 

Googleアナリティクスでページ表示速度のスコアをチェック

アナリティクスを使用すれば表示速度を確認することができます。中でも私が使いやすいと思ったのは「速度についての提案」機能です。メニューから行動→ページ速度→速度についての提案でこのような画面が表示されます。

※ページの欄にはサイト内のURLが出ます。

f:id:mochi-mochi-kun:20170316211721j:plain

一番右にPageSpeedスコアという項目があります。

PageSpeedスコアは読み込み速度をどの程度改善できるかを数値化しています。スコアが高いほど改善の余地がなく、スコアが低ければ改善の余地は大きくなります。当ブログではカテゴリページのようなテキスト量が少なく、画像もサムネイルになっているページはスコアが高くなっています。一番高いページで70を超えるくらいでした。

逆にスコアが低いページは10以下の数値が出てしまいました。スコアが低いページで共通するのは自分で撮影した写真を多く載せていること。やはり読み込み速度が遅くなる最大の原因は画像の大きさということです。

 

現状使用している写真について

私が自分で撮影した写真をブログに使用するときの基本的な流れはスマホの加工アプリで明るさ・彩度・コントラストなどを調整→PCに送って記事を書くタイミングでアップロードとなっています。

加工アプリを通すと自動的に長辺1280ピクセルの解像度で容量は700~800KB程度になります。「リサイズするのも面倒だしこれくらいなら問題ないだろう」という認識でしたが、やはりアナリティクスでのスコアを見ると対策の必要性を感じました。

 

容量を軽くするための画像のリサイズは一般的にはWindowsに標準装備されている「ペイント」や本格的なソフトなら「Photoshop」。あるいはスマホでも画像サイズを小さくできるアプリがありますが、実ははてなフォトライフの機能でアップロード時に自動的に最適化することができるのです。

はてなブログでの画像アップロードについて

まずははてなブログへアップロードするときの仕組みを説明します。

はてなブログの編集画面から画像をアップロードするとどんな画像でも自動的に長辺1024ピクセルにリサイズされます。数MB単位のかなり大きい画像でも自動的に一定のサイズに縮小されるというのは画像に関する知識がない状態でブログを始めた人には親切な機能だと思います。

また、はてなフォトライフからアップロードした場合、デフォルトの設定では長辺800ピクセルに自動リサイズされます。ブログの編集画面からアップするより、フォトライフからアップした方が画像が小さくなるということになります。

 

ここで一つ問題が発生します。例として事前に画像編集ソフトでサイズを512ピクセル程度に縮小した画像をブログからアップロードしたとします。そうすると、自動的に1024ピクセルに引き伸ばされてしまうので、せっかく小さくしていた画像が逆にファイルサイズが大きくなってしまうということになるのです。

これでは事前に最適化した画像を用意したのも無駄になってしまいます。

 

はてなフォトライフで画像を最適化する方法

はてなフォトライフで適切な設定にすることで、画像編集ソフトなどでリサイズ作業を行わなくてもアップロードするだけで画像を最適化することができます。

 

f:id:mochi-mochi-kun:20170316231537j:plain

設定画面を開くと画像サイズはデフォルトで800ピクセルとなっています。これはそのままでOKです。実際ブログでフルサイズで画像を載せることはほとんどないので640ピクセルくらいでも問題ないかと思います。

重要なのは画質に関してです。そのままだと100%になっていますが、これは圧縮をせずに100%の画質でJPEG保存するという設定です(圧縮をしないといってもJPEG形式にする過程で劣化はします)。

実際には少々圧縮をかける程度では画像の見た目はほとんど変わりません。印刷用データとは違いweb用の画像は高画質である必要性はないのです。

100%を90%にするだけでファイルサイズは大きく変わってきます。私は80%に設定しているので700KBくらいの画像が100KB以下まで容量を落とすことができます。

 

参考までに100%と80%でアップした画像をそれぞれ載せておきます。

f:id:mochi-mochi-kun:20170312223244j:plain

これが100%

ファイルサイズは727KB

 

f:id:mochi-mochi-kun:20170316162822j:plain

こちらが80%

ファイルサイズは77.5KB

 

ディスプレイで見る限り違いが分かりませんね。これでファイルサイズは90%近く下がっています。設定で画質を下げるのは圧倒的にメリットの方が多いということです。

 

画像を最適化してどれだけ表示速度スコアを改善できるか

過去記事すべての撮影写真を80%の設定で再UPして貼り換えました。

めちゃ苦労しましたよ……

撮影写真以外で使用しているフリー素材サイトのイメージは平均サイズが100~200KBだったので200KBを超えるような画像だけリサイズしました。

 

それではGoogleアナリティクスのページ表示速度スコアで20以下の特に悪い数値になった記事の画像を最適化することで、どれだけ改善することができたのでしょうか。

※使用画像数横の( )は撮影以外の画像です。

 

乳酸菌と腸内フローラのこと【改訂版】 

使用画像数:3(3)

スコア:18→21

コンビニ食ダイエット!セブンイレブンのヘルシーメニュー5選

使用画像数:11

スコア:9→20

外食でも体に良いヘルシーなラーメンを食べよう

使用画像数:4(2)

スコア:17→20

【レビュー】モッチスキン 吸着泡洗顔を使ってみた

使用画像数:3+YouTube貼り付けあり

スコア:9→29

【レビュー】エンナチュラル マクロビ雑穀スムージーを飲んでみた

使用画像数:6

スコア:10→24

【レビュー】スリムマウスピースで表情筋を鍛えて小顔に

使用画像数:3+YouTube貼り付けあり

スコア:17→27

【レビュー】石澤研究所 もちっと泡立ていらず洗顔を使ってみた

使用画像数:4(1)

スコア:18→27

【レビュー】アサヒ スリムアップスリム 5種のナッツ&タイガーナッツスムージーを飲んでみた

使用画像数:4

スコア:13→24

甘酒ブーム到来?その効果と飲み方&おすすめの甘酒紹介

使用画像数:2(1)

スコア:17→22

実は美容効果もすごい「ミロ」

使用画像数:2(1)

スコア:19→22

 

全てスコア20以上に改善することができました!

セブンイレブンの記事は画像の数が多かったので容量削減の恩恵を受けてのスコア大幅UPには納得です。

しかしモッチスキンの記事でここまでの差が出た理由はよく分かりません。考えられる理由としては画像の貼り方に問題があったのかもしれません。やや大きめに表示していると感じたので貼り換えるときに少し縮小しました。

甘酒の記事も唯一の撮影写真をかなり大きく表示していたので縮小しています。

元々の画像のファイルサイズだけでなく、スペースいっぱいに使って載せたりするとページ読み込み速度が遅くなる原因になると思われます。

 

さて、前回のカスタマイズの記事に続いて美容以外のテーマでかなりの文字数の記事を書いてしまいました。実はwebやブログは初心者でも紙媒体の印刷物を作るのが本職でして、画像の取り扱いに関してはそれなりに知識があったので一生懸命書いてみました。

レビューや紹介記事で写真を沢山載せたい方のお役に立てたら幸いです。

 

【追記】

過去画像をリサイズして貼り換えるときにはアイキャッチ画像も忘れずに設定し直しましょう。変更しなければ過去にアップロードしてフォトライフに残ってる画像からリンクが取られたままです。アイキャッチ画像の容量を落とせばTOPページやサイドバーにサムネイルとして表示されたときに読み込みが少し軽くなるはずです。

 

 関連記事

www.mochi-mochi-kun.com

 

 

スポンサーリンク