「適切なサイズの画像」をプラグイン EWWW Image Optimizer でスピード解決する方法

PageSpeed Insightsの改善出来る項目はどうやって改善するの?シリーズの新作です。ww

今回は、「適切なサイズの画像」の改善方法についてお伝えいたします。

今回も基本、Wordpress(ワードプレス)を使用しているホームページでの対応策の案内となりますのでご注意下さい。

▼参考記事

さて!
その改善には以前、「次世代フォーマットでの画像の配信」の記事でご紹介いたしましたワードプレスのプラグインEWWW Image Optimizerを今回も利用します。

▼参考記事

さて、早速に行ってみましょう!!

適切なサイズの画像とは?

200KB以下にする

ズバリ!!
「適切なサイズの画像とは」画像1枚のファイルサイズが「200KB」が目安となります。

そして、Googleの発表によると、1ページの容量は「1.6MB以内」が目安となります。

はて??

そうなるとですよ。。。。

本文以外のサイトデータも考慮すると、200KB以下の画像だと1ぺージに5~6枚が良いという事になります。もっというなら、、、1ぺージに5~6枚以下が望ましいということになります。

うーーん。
そうなると・・・ページの内容によりますが・・・。
最近のほとんどのページは1ぺージに画像5~6枚で1.6Mの実現なんて不可能ですよね。ww

ということで・・・・あくまでも、画像については1ぺージに5~6枚を努力目標とする程度で良いと思います。

横幅は1,000px程度にする

ズバリ!!横幅は1,000px程度あれば問題ありません。
ちなみに、このサイトでは記事で使用している画像の横幅は「700px」です。

サイドナビがある場合は・・・700px~800px
サイドナビが無い場合は・・・1000px程度

に納める事を推奨いたします。

画像の高さは定番の比率を参考にする

ズバリ!!一般的な比率が良いです。ここはあくまでも見た目のバランス重視です。

一般的な比率とは下記を参考してください。

16:9(横幅1000px → 高さ562px)
4:3(横幅1000px → 高さ750px)
3:2(横幅1000px → 高さ666px)

ちなみに、、、余談ですが・・・縦横の比率と言えば・・・
日本でよく使われている名刺のサイズで有名なお話があります。

名刺の比率は1:1.654黄金比というもので作られています。このサイズは、人間がもっとも美しいと感じる比率と言われています。

この比率は古代から現代までに様々な作品に取り入れられています。例えば・・・・

  • ピラミッド
  • モナ・リザ
  • ミロのヴィーナス
  • パルテノン神殿
  • 凱旋門
  • クレジットカードのサイズ
  • Apple社のロゴ
  • Twitterのロゴ
  • などなど・・・・。

    何気なく作ってるのかな?と思っていた作品にはしっかりとした理由があるという

    余談でした・・・。

    画像最適化におすすめのツールやプラグイン

    さてさて、いよいよ本題。
    WordPressで制作しているホームページをEWWW Image Optimizerを利用してスピード解決する方法について説明していきます。

    EWWW Image Optimizerの機能は「新規画像の圧縮」と「既存画像の圧縮」の2つです。
    「新規画像の圧縮」では、プラグインが有効化されている状態であれば、画像をWordPressに追加する際に自動的に圧縮されます。

    プラグインが有効化されている状態で、メディアの「一括最適化」を選び、「最適化されていない画像をスキャンする」を選択するだけで、「既存画像の圧縮」ができます。

    非常に簡単に利用できるため、WordPressでホームページを運営しているなら、おすすめしたいプラグインです。

    さて、今回もインストール方法からご紹介いたします。

    インストール方法

    プラグインの新規追加で検索窓にewwwと入れると検索結果に出てきます。

    今すぐインストール】を押し、有効化すれば完了です。

    設定方法

    初期設定

    プラグインからEWWW Image Optimizerを探して【設定】を選択します。

    上側のチェックボックスは目指す目標を選択します。
    選択した方に最適な設定を推奨してくれるようになります。
    両方にチェックを付けても大丈夫です!

    下側のチェックボックスは有料のサポートが必要か、無料モードの選択になりますので【今は無料モードのままにする】にチェックを入れて【】を押します。

    基本的にはデフォルト状態のチェック項目のままで問題ありません。
    初期設定が完了した後でも変更出来るのでご安心ください。

    • メタデータを削除
      メタデータとは簡単に言えばデータのデータです。作成日やサイズなど、写真の場合は撮影した位置情報もメタデータです。このデータを削除することで画像の軽量化につながります。
    • 遅延読み込み
      遅延読み込みはファーストビュー以外の画像を後から後から表示します。初期表示の高速化になりますのでチェックしておいてください。
    • WebP変換
      画像サイズを自動的にリサイズする機能です。
      後から変更出来るのでとりあえずの数値で構いません。
    • 埋め込みヘルプ
      チェックあり。
    • 著名の報告
      チェックなし。

    設定を保存】を押します。

    完了】を選択して初期設定は以上です。

    画像リサイズ設定

    初期設定が終わったら通常の設定画面に切り替わりますので、こちらでリサイズ設定をします。

    画像リサイズという項目でピクセル数の設定ができます。

    ホームぺージでの定番のサイズは、上記で説明しましたように1,000px程度ですので、ここでは1,000とします。

    あくまで上限サイズの指定なので、上限サイズより小さい画像は関係ありません。
    大きいサイズの画像を軽量化するために、わざわざリサイズしてアップロードするのが面倒な時に役に立つ機能です。

    高さの上限は基本的に0のままがおすすめです。
    0にすることで幅の縮小比率に合わせて自動でリサイズされます。

    設定が完了したら忘れずに【変更を保存】を押します。

    以上の作業が完了すれば、これからアップロードする画像は自動的にリサイズされてアップロードされるようになります。

    一括最適化

    次は既にアップロードされている画像を一括で最適化する方法を説明していきます。

    ここで注意が必要なのは一括最適化を行った画像は、元に戻すことができないという事です。
    あらかじめ画像のバックアップをとっておきましょう。

    設定画面の上の方にある【一括最適化】を選択します。

    最適化されていない画像をスキャンする】を押します。

    最適化できる画像が〇〇点ありますと出るので【〇〇点の画像を最適化】を押します。

    完了になれば最適化終了です。

    まとめ

    簡単な設定で自動的にリサイズしてくれるのでとても便利なプラグインです。
    さらに既にアップロードされている画像も一括で最適化出来ます。

    ▼該当サービス

    ホームぺージレスキューサービス

    メールでのお問い合わせ

    お問い合わせはこちら
    メールフォームの内容をご確認頂きまして送信してください。

    LINEでのお問い合わせ

    お友達登録はこちら
    お友達登録をして頂いて
    お問合せ内容をトーク画面から送信してください。

    SEO対策が得意なホームぺージ制作会社エクセレント

    筒井 章年

    1,000サイト以上のWeb集客のサポート経験を持つ。 その経験で得た知識や経験でホームぺージ戦略の立案やマーケティングを担当しています。多くの方に共有させて頂いて、多くの方に成功を実感して頂きたいと考えております。

    関連記事

    無料相談行っています!!お気軽にご利用ください。
    最近の記事 おすすめ記事
    1. 外壁塗装会社がやるべきSEO対策のポイントとキーワードの選定方法を解説します。

    2. リフォーム会社がやるべきSEO対策のポイントとキーワードの選定方法を解説します。

    3. 外構工事・エクステリア業者がやるべきSEO対策のポイントとキーワードの選定方法を解説します。

    4. 歯科医院がやるべきSEO対策のポイントとキーワードの選定方法を解説します。

    5. コンテンツマーケティングって何?簡単にその特徴を説明します。

    6. メールマーケティングの現状と効果的な配信方法とは

    7. Web集客方法を業種別にまとめました。成功のポイントや種類など徹底解説!

    8. エクステリア・外構工事業者のWeb集客で利用出来るポータルサイトを紹介します

    9. 歯科医院・歯医者・矯正歯科専用のポータルサイト一覧

    10. 治療院の新規患者の集客にもう悩まない。最新のWeb集客のコツと考え方

    1. Googleにインデックスされない理由とその調査方法を解説します。

    2. SEO対策の内製化を積極的に取組んでいる中小企業の多くは自社でするSEO対策に迷走している。

    3. 売れているホームぺージ = 集客型ホームぺージに共通しているぺージ構成の法則

    4. これを見れば完璧!Google Maps API 取得方法をご紹介します。

    5. WordPressで投稿するブログで <br> と <br /> はどちらが正しいの?何が違うのか解説します。

    6. WordPressのブロックエディタを利用してページ編集する方法とその投稿方法

    7. Instagramのリールの音源を保存して活用する方法

    8. 「レンダリングを妨げるリソースの除外」という項目はプラグイン Autoptimize  を使って簡単に解決出来ます

    9. コピペで使える!ビジネスブログ向けのシンプルなCSSで飾る見出しデザイン30選

    10. 「使用していない JavaScript の削減」をプラグイン Flying Scripts でスピード解決する方法 

    資料を無料ダウンロード

    弊社の会社概要と、ご提供サービスのご紹介資料です。
    ご覧いただき、お気軽にお問い合わせください。

    TOP