ブログ用の画像を圧縮するならTinyPNG(パンダのサイト)がオススメ!!

この記事についての紹介

この記事では、ブログ用に画像を圧縮したい方に向けて「TinyPNG」を紹介しています。

この記事で分かること・・・

・なぜ画像圧縮が必要なのか?

・画像圧縮と表示速度の関係

・TinyPNG 画像圧縮の手順

TinyPNG 画像圧縮

ブログ用に画像圧縮をしたい方に超オススメ!!しているのは「TinyPNG」というサイトです。

画面上にチョコンと座る「パンダ」が印象的なサイトで「TinyPNG」の名前よりも「パンダのサイト」という呼び方が有名だったりします。

画像圧縮ならココだけ使用していれば大丈夫でしょ!と言い切れるほどなので、まだ使ったことのない方がいれば是非使ってほしいですね。本当に超オススメ!!

画像圧縮が必要な理由

なぜ画像を圧縮する必要があるのか?にいつては「ページの表示速度を上げるため」が1番の理由として挙げられます。

それは、表示速度が遅いページのほとんどが画像容量が多いことに原因があるからです。

null
表示速度を上げると何が変わるの?
null
ページの表示速度で大きく変わること、それはページを読んでくれるユーザーの「離脱率」だと言われています。

この「離脱率」について、ページの表示速度が遅いとどのような影響があるのかをGoogleが公表しています。

出典 : Google

上記の参考資料はモバイルページにおけるデータですが「表示速度が1秒~3秒で離脱率が32%、1秒~5秒で90%」となっています。この資料から表示速度に5秒以上かかるページは「離脱率」が大きいことが分かります。

null
ページの表示が遅いサイトはユーザーが読む前に「離れてしまう」ということ?
null
その通りです!!せっかく作ったページも「表示が遅い」という理由で、読んでもらえない可能性が大きくなるのです!!そうならないためにも表示速度を上げる必要があるのですね。

なぜ? オススメの理由

「TinyPNG」を超オススメする理由については「シンプルだから」です。圧縮するまでの手順がとても簡単で、圧縮時間も早い!そして何%圧縮できたのかが一目でわかる!!画像を加工する流れの中にひと手間加えるだけなのでとても使いやすいですよ!!



画像圧縮の手順 簡単作業!!

「TinyPNG」の圧縮手順はめちゃ簡単です。

ブラウザで「TinyPNG」を検索する

まずは普段使用しているブラウザに「TinyPNG」と入力して検索をしましょう!!

TinyPNGのサイトに入る

画面一番上に「TinyPNG」のサイトが表示されていると思います!!クリックしてサイトに入りましょう!!

圧縮したい画像を「ドラッグ&ドロップ」

笹を食べているパンダが出現しますので、パンダ横にある「Drop your .PNG or .jpg files here!」と表示されている部分に圧縮したい画像を「ドラッグ&ドロップ」しましょう!!

注意点・・・
・扱える拡張子は「.PNG」「.jpg」の2種類!!
・同時処理は最大で20枚、最大で5MB!!

「download」をクリックする

圧縮したい画像を「ドラッグ&ドロップ」したら瞬時に圧縮が始まります。1枚あたり「3秒ほどの速さ」で圧縮してくれるので「えっ!?もう終わり?」って感じで、笹を食べていたパンダが万歳をすると圧縮完了です。

圧縮が完了したら「download」をクリックして画像を保存しましょう!!ちなみにパンダの横に表示されている「%」が今回圧縮した画像の平均率になっています!!

TinyPNG +WebP

「TinyPNG」って簡単でしょ?とりあえずコレに突っ込んでおけば大丈夫!!って感じですね。本当にオススメ!!

コレだけでは物足りないよーって方には「WebP」もオススメしています!!「WebP」の実装方法については「次世代フォーマット「WebP」をプラグインで簡単に実装する方法!!」で紹介していますので、気になる方は覗いてみてね!!