サイト高速化は、知識なくても簡単!画像を圧縮するプラグイン

おなやみさん
サイトが重たい・・・( ;∀;)
Googleのアップデートで遅いサイトは順位に影響するっていうし早くなんとかしないとまずいかも。
ゆーへー
とりあえず画像圧縮して対応しよう

こんにちは。ユーヘーです。
Googleのスピードアップデートがはじまって、サイトが極端に遅いサイトは順位に影響するようになりました。

サイトの高速化って専門知識が必要で難しいんですよね。
例えば、CSSやJavascriptの読み込み順であったり、Javascriptの非同期設定。
CSS、Javascritp、HTMLの圧縮に、gzip、CDNを活用などなど。

簡単じゃーないんです!
プロに依頼したら数万円とれるくらいの作業なのです。

しかし、今回は、もっともお手軽な対応として画像を軽くしてみようと思います。

WordPressをお使いの方におススメのプラグインを紹介していこうと思います。

WordPress以外をお使いの方は、画像圧縮ツールを使って圧縮するのが良いかと思います。
個人的に使ってるのが、「PNG Gauntlet 、Caesium」の2つです。
画像の圧縮率は80とかでOKです。

WordPressならプラグインをいくつかいれるだけで解決することが出来る。

  • Imsanity
  • EWWW Image Optimizer

Imasanityはこれから画像をアップロードする用のプラグイン
アップロードした時に画像サイズや画質を圧縮して軽くくれます。

EWWW Image Optimizerは今までアップロードした画像を圧縮してくれます。

Imsanityの使い方

  1. Imasanityを有効化
  2. プラグインの設定
    ・最大サイズを1920pxに高さは1920pxにしておけばとりあえず問題なし
    ・JPG image qualityは90でOK
    ・Convert BMP to JPG Convert PNG to JPGの設定はNOにしておく。
    BMPとPNGをアップロードした時にJPGに変更するかどうかの設定です。
  3. 画像をアップロード

クライアントに渡す場合は、Imasanityをいれておくと便利です。

デジカメで撮影したものを直接アップロードすると最近のカメラだと7~10MBくらいのサイズになってしまうので、初期設定だと2MBまでしかアップロードできないですし、それを回避できます。
画像の読み込みスピード問題もこれで解決ですね。

Imasanityをダウンロード

EWWW Image Optimizerの使い方

  1. EWWW Image Optimizerを有効化
  2. プラグインの設定
    ・Conversion setting >Hide Conversion Linksにチェック
    ・基本はデフォルト値でOK。画質の変更も可能です。

既存の画像圧縮にはEWWW Image Optimizerが定番

こちらもImasanityと同じくアップロード時に画質を圧縮してくれます。が有効にしてると管理画面が重たくなる場合があったので、一度使ったら無効にして、Imasanityだけで運用するのがいいのではないかなーと思います。

EWWW Image Optimizerをダウンロード

画像圧縮の豆知識

Photoshopやillustratorで画像を書き出す際に、画質の設定を100にする必要はありません。80でOKです。ブラウザで確認した時に80でも100でも大差ないからです。

ただRetinaだと若干荒れて見えるかも。

画像圧縮は最低限入れておいた方が良いプラグインです。

サイトの高速化に画像の圧縮はつきものです。
Googleのスピードチェックをしても画像を圧縮するだけで点数がアップします。
他にも最適なサイズに画像を変更したり、imgタグにwidthとheightをしっかりいれておくなど、スピードには大した影響はありませんがやっておいた方がいいことはあります。

画像の圧縮だけでなく、他にもスピード対策はあります。
一番簡単な対策としては画像といったところで、他の対策は専門的な知識がいるものが多いですね。

高速化の参考にしているサイトはバズ部です。

キャッシュ周りは設定すると修正した時、反映されないとか問題でてきたりするので扱いに難しいですが他は問題ないのでやっておいてもいいかも

この記事を書いた人

Yuhei Katayama

【フロントエンドエンジニア】

2014年よりフリーランスとして活動開始、3年目。タイが好きでよく行く。人手不足を補うをもっとうに仕事しています。HTML、Wordpress、EC-CUBE、MakeShop、カラーミーショップ、楽天のカスタマイズ経験あり。

この記事が気に入ったら
いいね!しよう

最新の情報をお届けします

赤ヒツジ先生~コーディングチェック~

このサービスは、コーディングのHTMLチェックではなく、デザイン通りにコーディングできているかをチェックするサービスです。