WordPressでのブログ構築ノウハウ

WordPressが重い・遅い対策②:画像サイズ目安と最適化・圧縮⇒TinyPNGよりSquoosh

この記事の読了目安時間:5分⇒具体例など丁寧に書いたため、お急ぎの方は目次の見出しからお好きなところにジャンプしてください。

 

先日の以下の記事では、Google AdSenseの遅延読み込みでサイトの表示スピードを大幅に改善した実例及び設定方法をご紹介しました。

 

今回はページの表示スピードに大きく影響しながら、コードを編集せず、わりと簡単にできる画像・写真のサイズ調整・最適化や、画質をあまり落とさない画像圧縮の方法、そして万能に近い神アプリSquoosh及び人気のTinyPNGなどをご紹介します。

 

この記事で分かること

  • サイトの横幅に適した記事画像やアイキャッチの幅・サイズ目安
  • 画像サイズの最適化方法
  • 画質をあまり落とさない画像圧縮方法
  • TinyPNGよりSquooshをオススメの理由

 

この記事の信頼性

ゆーさん
この記事を書いている僕(@Arc_to_Future)は、WEBサイト管理者養成コース(3ヶ月間フルータイム)でコーティング及びWordPressでのサイト構築ノウハウなどを学んだ後、見本となるサイトをいろいろ研究したり、日々研鑽中!

なお、当ブログは7記事でGoogle AdSense申請・翌日審査通過し、Amazonアフィリエイトの審査にも1発合格しており、共に収益を上げることができています。

 

サイトの横幅に適した記事画像やアイキャッチの幅・サイズ目安

では、早速本題に入ります。

まず、記事やアイキャッチに挿入する画像はどのぐらいの幅と高さにすればよいかが分からず、困っているWordPress初心者にが少なくないと思います。

僕もそうでした。最初の頃、スマホで撮った写真などをそのまま記事に載せてしまい、表示上あまり問題ないのですが、ページが非常に重くなって、調べてみたら、アップロードした画像が大きすぎたことがわかりました。

 

幅の目安:サイト横幅1000px前後⇒記事画像640前後

結論からお話します。

いろいろ試したり、見本となるサイトを研究した結果、以下の表のように、サイトの横幅が1000〜1200px、記事画像が640〜700pxのほうが多いようです。

ちなみに、当ブログは以前1060px→640pxだったのですが、この記事を書いている現在では1114px→694pxにしております。

サイトの横幅記事画像やアイキャッチの幅・サイズ目安
960〜1060px640px
1114px694px
1200px700px
1380px790px

記事画像の幅は表右側の目安数値より大きくても、表示上は問題ないのですが、ファイルが無駄に大きくなって、ページ表示スピードが遅くなるので、適正の幅にしたほうがいいかと思われます。

 

画像ファイルサイズ目安:100kB以下、アイキャッチは極力20kB以下に

なお、画像ファイルのサイズは目安として100KB以下、できれば50KB以下が望ましいとされています。

特にアイキャッチ画像は一番最初に読み込まれますので、僕の場合極力20kB以下に抑えるよう心がけています。

 

下は僕のまだ最適化していない記事「【効率化】テレワーク・オンライン授業・動画時代に必須?!OneNote使用歴15年以上の僕の活用術」の悪い例です。

ファイルサイズ47.5kBのアイキャッチ画像の読み込み時間(710ms)が結局当ページの中一番長かったことがわかります。もしこれは普通のスマホ写真の2、3Mとなると、読み込み時間がさらに長くなることは想像がつきます。

アイキャッチ画像の読み込み時間が一番長かった悪い例

アイキャッチ画像の読み込み時間が一番長かった悪い例

 

記事画像やアイキャッチの幅・サイズの調整方法

サイトの横幅に適した記事画像やアイキャッチの幅・サイズ目安がわかったところで、実際どのように画像の幅・高さを調整したり、画像ファイルサイズを減らしたりするかを見ていきましょう。

ちなみに、画像や写真の入手方法について、僕の場合は自分の撮った写真やスクショしたもの以外に、「o-dan」などの無料写真素材サイトからダウンロードすることが多いです。 なお、上の画像みたいに、フレーズや矢印などを追加したりする編集はPowerpointをよく使いますが、Canvaも結構人気があります。

 

イチオシの画像幅・サイズ調整・圧縮無料アプリ:「Squoosh」

まず一番オススメの画像の幅・サイズ調整・圧縮アプリとして、「Squoosh」を挙げたいと思います。

Mac版Squooshの初期画面

Mac版Squooshの初期画面

 

「Squoosh」はGoogleが開発した無料WEBアプリで、ブラウザ上で使うのもいいし、MacやWindowsPCにアプリとしてダウンロードして使うのもできて、またスマホでも使えるし、しかもサクサク動くので、本当にオススメできる便利アプリです!

ブラウザバージョン

 

【Squooshの使い方】アップロードはドラッグあるいはコピー・ペーストだけ

Squooshの使い方も非常に直感的にわかりやすいです。

編集したい画像をSquooshの初期画面の真ん中にドラッグしたり、あるいはコピーしてSquooshにペースト(貼り付ける)だけです。これは以下の理由で地味に便利で、大好きな機能の1つです。

僕はよくPowerpointで編集し、そのまま画像と矢印、コメントなどを「ctrl+A」で全選択肢してコピーし、そのままSquooshに貼り付けて、サイズ調整したりフォーマットを変更したりしています。

Squooshを使う前までは、一旦右クリックして「図として保存」してから、後で紹介するTinyPNGなどにドラッグしていました。本当に手間が減りました。

 

【Squooshの使い方】幅・高さを決め、変換可能フォーマットを選び、圧縮率を決めて、リアルタイムで確認

以下のgif図は本記事のアイキャッチをSquooshで編集した時に撮ったものです。

画面右側の設定欄に、以下の通り設定しました。

  • 「Edit」>「Resize」→「Width」:694(高さは幅に合わせて自動的に適用してくれる;変更する必要がなければ「Resize」をOFFのままでよい)
  • 「Compress」:デフォルトの「MozJPEG」で、「Quality」の数値(圧縮率)を75%のままにしてあります(数字を直接変えたり、数値バーを動かしたりして自由に調整でき、画像の圧縮効果もリアルタイムで「圧縮前(左の赤い◀)」と「圧縮後(右の青い▶)」で確認できます)。

※「Method」や「Reduce palette」(色彩情報)、「Advance Setting」などの項目は特にいじっていなくて、デフォルトのままにしています。

以上の設定で、右下にあるように、サイズ調整した結果、容量が38%減の17.9kBの画像を右側のボタンでダウンロードできます。

Squooshで画像の圧縮前後のリアルタイム比較

Squooshで画像の圧縮前後のリアルタイム比較

 

上のgif図では、圧縮前後の比較ではあまり違いが分からないと思います。もちろん、写真によってはっきり荒くなっているなと分かる場合もあるので、実際の使用場面や用途に応じて記事後半で紹介するTinyPNGなどと使い分けています。

 

 

Squooshと有名画像圧縮Webサービス「TinyPNG」との比較

以上、Squooshを使用して、画像をリサイズ、圧縮する方法を実例でご紹介しました。

実は似ているWebサービスとして、「TinyPNG」も非常に人気です。

TinyPNGの初期画面

TinyPNGの初期画面

 

ただし、以下のいくつかの点において、TinyPNGよりSquooshの使い勝手がいいと思って、今はメインに使っています。

TinyPNGに比べ、Squooshが画像の幅・高さを指定できる(リサイズ)

Squooshはそのままコピー・ペーストができる点は自分の使用環境において非常に便利であると上にも書きましたが、画像の幅・高さを自由に指定できることも非常に便利です。

上の例でいうと、本記事のアイキャッチ画像は「o-dan」でダウンロードした無料写真素材で、「4722*3148」の大きいJPEG画像(ファイルサイズ549kB)でした。

TinyPNGではリサイズができないため、圧縮後は64%節約の200kBの画像になって、だいぶ小さくなりましたが、画像の幅・高さはまだ無駄に大きいため、さらに別の方法でリサイズする手間が増えます。

 

TinyPNGは圧縮のみでリサイズしない

TinyPNGは圧縮のみでリサイズしない

 

もちろん「EWWW Image Optimizer」など自動的に圧縮・リサイズしてくれるプラグインもありますが、たまに機能しない場合があったり、プラグインをあまり使いたくない人にとってSquooshは間違いなく考慮すべき選択の1つだと言えます。

 

TinyPNGに比べ、Squooshの変換可能フォーマットが多く、対応サイズも制限なし

Squooshは以上の実例で示したように、幅・高さも調整したうえ、わりときれいに圧縮でき、かつリアルタイムで確認できる以外、対応可能なフォーマットの多さも非常に優秀です。

以下のリストは僕が現在使っているMac版Squooshアプリの変換可能フォーマットです。

多様な変換可能フォーマット

  • AVIF
  • Browser JPEG
  • Browser PNG
  • JPEG XL(beta)
  • MozJPEG(デフォルト)
  • OxiPNG
  • WebP
  • WebP v2(unstable)

結構新しい「AVIF」やGoogleが推し進める「WebP」などのフォーマットも対応可能で、「PNG」と「JPG」しか対応しないTinyPNGに比べると、守備範囲の広さが驚きです。

しかも、TinyPNGは処理できる画像のサイズ制限が5MBのに対して、Squooshには特にそういう制限がないのもすばらしいですね。

 

Squooshの欠点:一括処理ができない;たまにTinyPNGのほうが画質を保つ

しかし、TinyPNGの方が20画像まで一括でアップロード→圧縮→ダウンロードができるのに対し、Squooshは一括処理ができないので、画像を多く処理する場合、TinyPNGの方がよいと思います。

さらに、画像にもよるのですが、TinyPNGのほうがやや画質をきれいにキープしてくれる場合もあるので、うまく使い分ける手もあると思います。

ちなみに、本記事のアイキャッチの場合、SquooshとTinyPNGとの間、圧縮後の画質の違いがありませんでした。

 

結論

以上の比較の通り、総合的にSquooshのほうが使い勝手がよく、オススメできるのではないかと思います。もちろん、場合によってはTinyPNGも活躍してくれるので、うまく使い分けていきましょう!

 

まとめ

以上、前回の「WordPressが重い・遅い対策①:第三者コードGoogle AdSenseの遅延読み込みで高速化」の続きで、ページの表示スピードに大きく影響しながら、コードを編集せず、わりと簡単にできる画像・写真のサイズ調整・最適化や、画質をあまり落とさない画像圧縮の方法、そして万能に近い神アプリSquooshと、バックアップWebサービスとしてTinyPNGなどをご紹介しました。

また、基本知識として、以下のように画像の幅及びサイズの目安としてあげさせていただきました。

幅の目安:サイト横幅1000px前後⇒記事画像640前後

サイトの横幅記事画像やアイキャッチの幅・サイズ目安
960〜1060px640px
1114px694px
1200px700px
1380px790px

画像ファイルサイズ目安:100kB以下、アイキャッチは極力20kB以下に

 

少しでもご参考になれば嬉しいです。

 

 

  • この記事を書いた人
  • 最新記事

ゆーさん

30代後半の離職者。コロナ感染拡大中の介護で退職の道を… その後緊急事態宣言等が追い討ち、貯金もそろそろ底がつく崖っぷちの状態に…新たなスキル・資格の獲得と新しいキャリアを目指し、崖っぷちから這い上がろうと全力で頑張っている者です。

-WordPressでのブログ構築ノウハウ

© 2021 崖っぷちからの這い上がり