rokujiro.qrunch.io

Webエンジニアなら知っておくべき画像の最適化について

2018/12/05に投稿
この投稿は別サイトからのクロス投稿です(クロス元:https://dolphin-rokujiro.com/wor...

みなさん、webサイトを作る際や、ブログに記事を投稿するとき、画像の最適化はしていますか?
画像の最適化とは画像のサイズ、解像度を維持しつつ、容量を下げることです。
これはwebサイト制作において、必ずすべきことです。

今回の記事では、画像の最適化について、

  • なぜ必要なのか
  • しないとどうなるのか
  • どうやってするのか

ということを紹介したいと思います。

なぜ画像最適化をすべきなのか

ページの表示速度に影響する

画像の最適化をすることで、画像の容量を下げることができます。
つまり、ページを表示する際に読み込むデータの容量を減らすことができます。
読み込む容量が少なければ少ないほど、読み込む速度が早くなるので、結果として、ページの表示速度が短縮されます。

画像が大量に使用されていて、最適化が考慮されていない状態のサイトはかなり読み込み速度が遅いです。
画像がゆっくりと徐々に読み込まれるサイトを見たことがある方も多いと思います。
最近はネット回線が高速になったこともあり、あまり見かけなくなった気がしますが、すごくストレス感じますよね。あれ。

SEOの評価にも影響がある

Googleは、PageSpeed InsightsLighthouseなど、ページの表示速度を測定するツールをいくつか提供しており、実際に改善案などを出しています。

つまり、Googleがwebサイトのページの表示速度を重視しているのは明らかです。
そういった意味でも、SEOの評価の指標の一つに入っているのはほぼ間違いないでしょう。
Googleは「ユーザーにとって快適で有益であるwebサイトを優先的に表示する」というスタンスなので、当然かもしれませんね。

SEOの観点から考えても、ページの表示速度を改善する可能性が高い「画像の最適化」は重要ということがわかると思います。
Googleは、web開発者向けの記事でも画像の最適化に言及しています。

ちょっと難しい内容ですが、読んでみる価値はあると思います(^^)

画像最適化の方法

画像最適化サービス:TinyPNG

画像の最適化が必要ということはわかってもらえたと思います。
では、実際にどうやって画像の最適化をするのかということになると思いますが、そういった作業は世の中に出てる信頼できるツールですませましょう!

TinyPNGというwebサービスで画像の最適化ができます。
ここでは、拡張子がpngとjpgのファイルの最適化ができます。

TinyPNGの使い方

では、使い方をざっくり説明します。

  1. TinyPNG(https://tinypng.com/)を開く
  2. 画面上部の「Drop your .png or .jpg files here!」という部分をクリック
  3. フォルダが開くので、最適化したいファイルを選ぶ
  4. 自動的に最適化がスタート。完了後、最適化されたファイルをダウンロード

これだけです。
会員登録も不要で、お金もかかりません。
注意点としては、一度に20枚までしか最適化できません。
ページを再読み込みすることで枚数のカウントがリセットされますので、もし20枚以上最適化したい場合は、その方法でどうぞ。

どれくらい容量が下がるのか、画像劣化はないのか

気になるのはこの部分ですよね。
では、実際にTinyPNGで最適化して比較してみましょう!

[最適化前(114KB)]

[最適後(43KB)]

どうでしょうか?
容量としては114KBから43KBなので、半分以下に下げられました。
そして、画像の劣化もまったく無いかと思います。

画像の最適化で表示速度はどれくらい改善するのか

サーバーの応答時間や、スクリプトの読み込み時間なども関わってくるので、具体的に何秒早くなるかというのは計測が難しいです。
なので、容量がどれくらい削減できるかという視点で考えてみます。

先ほどの例だと、1枚の画像を最適化することで、70KBほど削減できました。
たいしたことがないように思えますが、これがページ全体に対して最適化されると、1MBほどの削減になることもよくあります。
(たまに1枚の画像だけで数百KBの削減ができることもあります。)

ちなみに、一般的なブログの記事全体の容量(画像だけでなく、スクリプトファイルや、HTMLファイルなど、読み込むすべてのファイルの容量)がだいたい1MBほどです。
そう考えると、画像の最適化によって削減できる容量が数MBにもなってくると、速度改善にかなり大きな影響があると思います。

画像最適化はいつすべきか

具体的に、効果的なタイミングというものが存在するわけではありませんが、よくないタイミングはあります。
それは、ページ公開後、サイト公開後、つまり、世にページが公開された後です。
理由は二つあります。

  1. ページの表示速度が遅い状態で、たまたま見に来たユーザーがストレスを感じると、もう二度と見に来ない可能性がある。
  2. 画像が多いと、最適化と差し替えの作業が面倒になる。

ブログなら記事の公開前に、webサイト全体であれば制作中に、こまめに最適化を行いましょう。
ちなみに僕自身も、画像最適化の重要性にあとあと気づいたので、最適化されていない画像を使った記事がいくつかあります..
よく見られている記事を優先的に最適化を行ったのですが、なかなか骨の折れる作業でした。
みなさんも気をつけましょう。

また、これはとくにブロガーさんは気をつけるべきなのですが、スマホで撮った写真をブログに使う際は、絶対に画像の最適化をしましょう。
スマホで撮った写真は1枚で数MBくらいあるので、かなり容量が大きいです。
PCの画面キャプチャも要注意です。

まとめ

  • ページの表示速度、SEOに大きく関わるので、画像の最適化は必ずするべし
  • TinyPNGというwebサービスを利用して画像の最適化をするべし
  • 画像の最適化は、ページを世に公開する前に行っておくべし

画像の最適化ツールは、今回紹介したTinyPNG以外にも色々あるので、興味のある方は調べてみてください。

関連記事

コメントはありません。
rokujiro.qrunch.io
元SIerのWebプログラマー HTML/CSS/PHP/jQuery/Vue.js/Wordpress/MySQL このあたりを業務で扱っています。 社員数4人の会社で精一杯働いています。 一応、会社全体のタスクマネジメントしてます。 組織マネジメント、コミュニケーション、モチベーションみたいな部分の投稿が多いと思います。
フォロー
フォロワー
ブログを開設

クランチで技術ブログを
始めてみませんか?

この先は、クランチへのアカウント登録、及びログインが必要なページになります。

Markdownの書き方
見出し # 見出し(h1)
## 見出し(h2) , ### 見出し(h3) ...
リスト - 箇条書き
   - タブでインデント
番号付きリスト 1. テキスト
2. テキスト
改行 行末に半角スペース2つ
リンクの挿入 [タイトル](https://xxx.com)
引用 > テキスト
コード挿入 ```cpp:title
code
```
画像の挿入 ![代替テキスト](URL "タイトル")
太字 **テキスト**
斜体 *テキスト*
打消し線 ~~テキスト~~
水平線 ***
技術ブログを開設
ログイン