Enable JavaScript in your browser. このウェブサイトはJavaScriptをオンにしてご覧下さい。

画像を圧縮してページの表示を早くする方法

画像を圧縮してページの表示を早くする方法

画像が重くてページの表示速度が遅いと悩んではいませんか?悩む顔通販ショップには魅力的な商品画像は必須。でも多くの画像を使えばどんどんページは重くなるばかりです。ページの表示速度はSEOの評価の一つになっているので、ユーザビリティ・SEOどちらにも表示速度が影響しているのです。

そんな相反する状態を解決してくれるのが、画像の圧縮です。表示する画像を圧縮すればページサイズが減り、見ている人もSEOにも好影響が出てきます。上手にやれば60%以上の圧縮が可能で、しかも見た目ではほぼ分からないレベル。そんな画像の圧縮方法を紹介します。

ワードプレスサイトで画像を圧縮する方法

ショップをワードプレスで作っている人にめっちゃオススメのプラグインがあります。その名も「EWWW Image Optimizer」!イメージオプティマイザーは読めるけど、最初の「EWWW」は何て読めばいいのか。「イーダブリューダブリューダブリューイメージオプティマイザー」かな(言いにくい喜ぶ顔)。

このプラグインは自動的に画像を圧縮してくれるとても便利なもので、新たにアップする画像はもちろん既存する画像を圧縮することもできます。さらにテンプレートに組み込まれている画像も圧縮することができるので、とても重宝するプラグインです。

「EWWW Image Optimizer」の準備

まずはプラグインの追加画面で検索窓にEWWW Image Optimizerと入力して検索してみよう。

EWWW Image Optimizer画面

すると数種類ヒットするので「EWWW Image Optimizer」の「いますぐインストール」をクリックします。

EWWW Image Optimizer画面

インストールが完了したら「プラグインを有効化」をクリックすれば使えるようになります。

EWWW Image Optimizer画面

「EWWW Image Optimizer」の設定方法

有効化したらワードプレス管理画面の設定メニューに「EWWW Image Optimizer」が追加されるので、まずはそれをクリックして設定画面に行きます。

EWWW Image Optimizer画面

すると画面いっぱいに英語が並び、少し抵抗感のある画面になります。が、設定はたったの3つととても簡単なので大丈夫。画面中央に4つのタブがあるのが分かりますが、そのうち左側の「cloud settings」は有料オプションに関する項目なので気にする必要はありません。

EWWW Image Optimizer画面

ポイントは3点

  1. 「Basic Settings」の「Remove metadata」にチェック
  2. 「Advanced Settings」の「disable pngout」にチェック
  3. 「Conversion Settings」の「Hide Conversion Links」にチェック

です。

「Remove metadata」

これは画像にメタデータが付いていた場合に勝手になくしてくれる機能で、より圧縮することができるようになります。「Basic Settings」タブにあります。

EWWW Image Optimizer画面

「disable pngout」

これは「pngoutを無効化する」という意味で、pngoutは手間で初心者には必要ないということです。「Advanced Settings」にあり、デフォルトでチェック入っていると思います。

EWWW Image Optimizer画面

「Hide Conversion Links」

これはプラグインが「png⇒jpg」など勝手に拡張子を変えるのを防ぐための項目。「Conversion Settings」にあります。予期せぬ画像クオリティの低下を防ぐためにも必ずチェックをいれたいですね。

EWWW Image Optimizer画面

「EWWW Image Optimizer」の使い方

インストールして設定が済んだら後はどんどん画像を圧縮していこう。使い方はとっても簡単で、まず新たにアップした画像は勝手に圧縮してくれます。

新規の画像の圧縮

EWWW Image Optimizer画面

メディアライブラリの画面の右側に「Image Optimizer」の項目が増えており、そこでどの程度圧縮されたかが一目でわかるようになっています。ちなみにこの画像は上から順に「gif,jpg,png,ico」という拡張子の画像の結果です。

gifに関してはなぜか圧縮できませんでした(なぜ…?放心状態の顔)。分かる方ぜひ教えてください。でも次のjpg画像はアップしただけで10.9KBの圧縮がされています。これが10枚の広告画像全部なら100KB以上の圧縮ができるということになります。png画像に関してはさらにすごいことに。なんと40.4%も圧縮されています。もちろん画像の劣化は見る限りではほぼありません。

「Re-optimize」という項目がありますが、やってみたところほとんど変わらなかったので必要ないかなと思います。ちなみに下の画像が上記のjpg画像を圧縮した後の画像。もしもでも大人気の「サイクルツイスタースリム」の広告画像ですが、文字のにじみもなくとってもキレイな状態です。

EWWW Image Optimizer画面

ファビコン用の「.ico」画像はサポート外のようです。まぁ小さな画像なので圧縮する必要もありませんね。

既存する画像の圧縮

「EWWW Image Optimizer」のいいとこは、既存の画像も圧縮できるところ。数クリックで簡単にできます。また同時にテンプレートに入ってる画像の圧縮方法も紹介します。

まず左側のメニューに追加された「メディア⇒Bulk Optimize」をクリックします。

EWWW Image Optimizer画面

するとこのような画面になるはずです。

EWWW Image Optimizer画面

この中の「Optimize Media Library」が既存する画像を圧縮する場所で、「Optimize Everything Else」がテンプレートの画像を圧縮する場所です。なのでそれぞれの下にある「Start Optimizing」「Scan and optimize」をクリックすればOKです。

EWWW Image Optimizer画面

これが既存画像を圧縮した画像。ファイル名とどの程度圧縮されたがが、結果一覧として表示されます。

EWWW Image Optimizer画面

そしてこれがテンプレート画像を圧縮した結果。テンプレート画像は多くのページに登場する画像なので、圧縮する価値がとても高いです。しかもたった数クリックで簡単にできるので絶対入れておきたいプラグインです。

今回お世話になったサイトは相変わらず素敵なコンテンツのバズ部さんです。こちら⇒EWWW Image Optimizer の設定方法と使い方

HTMLサイトで画像を圧縮する方法

HTMLサイトと言っていますが、別の言い方をすれば「ワードプレス以外」ということです。便利な「EWWW Image Optimizer」以外での方法ということですね。これには画像圧縮サイトを利用します。流れとしてはアップする画像を圧縮サイトで圧縮してからアップするという感じになります。

png画像を圧縮する方法

png画像を圧縮するには「tinypng」というサイトを利用します。こちら⇒tinypng

tinypng画面

笹を食べてるパンダが印象的なサイト。上部の「Drop your .png files here!」にファイルをドロップすると画像が圧縮されます。で、圧縮が終わったらこのような画面になります。

tinypng画面

16.7KBの画像が60%(10KB)圧縮され、6.7KBになっているのが分かると思います。もちろん画像の劣化はほぼありません。手動でやる分手間がかかりますが、相当大きな軽量化に繋がります。ダウンロードするには右側にある「download」をクリックします。一度に最大20枚まで、計5MBまでドロップできるようです。

jpg画像を圧縮する方法

jpg画像を圧縮するには「Compressor.io」というサイトを使います。こちら⇒Compressor.io

Compressor.io画面

こちらはカメレオンが印象的な画像圧縮サイト。画面中央の「TRY IT!」をクリックすると使えます。

Compressor.io画面

このような画面になるので真ん中に圧縮したいjpgファイルをドロップします。

Compressor.io画面

圧縮が完了するとこのような画面になります。なんと56%もの圧縮がされています。289KBの画像が125KB、164KBもの圧縮ができたことになります。ちなみにこの画像は上記の「サイクルツイスタースリム」の広告画像です。

「DOWNLOAD YOUR FILE」をクリックすればダウンロードできます。ファイルは「C-ユーザー-アカウント名-ダウンロード」にあります。まだ続けるときは「Compress another picture」をクリックします。

Compressor.io画面

Compressor.io画面

上が圧縮前で下が圧縮後です。多少粗くなっているのがわかりますが、この程度なら劣化によるデメリットよりも軽量化のメリットのほうが大きいように思います。

まとめ

ウェブページの軽量化はユーザビリティに加えSEOにも効果が期待できそうです。ワードプレスの場合は、設定さえすればあとは自動的なのでぼく的には必須のプラグインだと思います。手動で行う2サイトも、手間はかかりますが容量の大きな画像だけ行ったりするのにとても重宝します。理想は全部ですけどね。
もしもで人気の小型カメラなどは、広告画像が魅力的ですが枚数が多いのでこのような圧縮サイトはとても役に立ってくれるのではないでしょうか。

もしもドロップシッピングで稼ぐためのブログページトップへ戻る