ブログの読み込みを少しでも速くするために、「JPEGmini」と「TinyPNG」で画像を軽量化！

20140504075814

こんにちは！　Hike×Hackのかけすけ( @kakesuke02 )です！

「ブログの読み込み速度」って、とっても大事です。

たとえばの話、この記事が表示されるのに３０秒４０秒とかかっていたら、きっとあなたはこの文章を読んでいなかったことでしょう。

つまり、「１　２　３　……ダアァァー！！読み込み遅いわ、もう帰る！」と鬼の形相になってしまうわけです。桃太郎も泣いて里に帰るほどです。そして、あなたはブラウザを閉じるか、そっと「戻る」ボタンを押すことでしょう。

そうなのです。ブログに限った話ではありませんが、「ページの読み込み速度」とは植物が光合成するための二酸化炭素と同様に、重要なものなのです。そしてもちろん、読み込み速度は「速いほうがいい」に決まっています。

とはいえ、スピードだけを重視すると、デザインはシンプル過ぎになるでしょう。極端にいえば、「まるで.txtファイル」のようなものがそうだと言えます。画像もなく、ヘッダもなく、シェアボタンもなければ記事一覧もない。

あまりに極端すぎる例ですが、ここで言いたいことは「デザインと読み込み速度のバランスが大切」だということです。私もシンプルなのは好きですが、かといって味気がないのも物足りない。そのため、日頃からデザインと読み込み速度の両立を心がけているつもりです。

ブログにはほとんどの場合「アイキャッチ画像」があります。これはつまり、feedlyなどで表示される、いわば「タイトル画像」です。私はその「アイキャッチ画像」には並々ならぬ執心をもっていて、これまでも、そしてこれからもすべての記事にアイキャッチ画像を入れていきます。

ですが、画像はそのページの読み込み速度に影響を与えます。たとえば、1GBの画像を記事に貼り付けたとしましょう。(極端に極論です)

すると、その記事は他の記事に比べてずっと読み込みが遅くなるはずです。

このことから、「読み込み速度を向上する」という観点から見ると、「画像のファイルサイズはなるべく小さいほうが良い」ということになります。

そこで、「画像の容量を小さくするために何ができるか」が大切になります、簡単な例でいえば、画像の大きさ自体を小さくすることが挙げられるでしょう。(例=500px:500pxの画像を250px:250pxに縮小する)

とはいえ、これでは画像の見た目に問題が生じる可能性があります。アイキャッチ画像を1px:1pxにでもしたら、もはや画ではなく点です。3200px:3200pxを800px:800pxにするのはよいでしょうが、あまりにも縮小し過ぎると、画像の意味がなくなってしまいます。

では、「画像を縮小せずに、ファイルサイズをなるべく軽くしたい」というときに。一体、どうすればいいのでしょうか？難しい設定をこなさなくてはいけないのでしょうか？

果たして、その答えはシンプルです。あなたがブログに貼り付けるであろう「JPEG」や「PNG」形式の画像は、なんと「ドラッグ＆ドロップ」や「ファイルを選択」するだけで、いとも簡単に軽量化できてしまうのです。

難しい設定もなければ、有料でもありません。そんな素晴らしいwebサービスを、２つお伝えしましょう。

以上の２つを私は愛用しています。それぞれのサービスについては、後日改めて記事にするつもりです。少しでも「ブログの読み込み速度を向上したい」と考えているあなたにとって、この記事が役に立つものになれたならば、嬉しいです。

■ ブログは読み込み速度が速いに越したことはない！

■ 普段から貼り付けている「画像」に注目。

■ 画像の「ファイルサイズ」をなるべく小さくすることで、読み込み速度は向上する。

――あなたの旅先案内人　かけすけ( @kakesuke02 )より

この記事、元はJPEGmini紹介記事の導入部分にする予定でした。ですが、思った以上に内容が長くなってしまい、「導入」のボリュームではなくなったため、個別の記事にさせていただきました。文中のたとえが極端ですが、「極端すぎィ！」と笑っていただければ幸いです。

Hike×Hack