こんにちは、みよし之です。
ブログを書き始めて、ようやく記事を書くことに慣れてきました。
PageSpeed Insightsというサイトでパフォーマンスなどを計測することができると分かり、やってみました。
そして、この項目が目に留まりました。
ここでは、この問題で悩んだ時、私なりに解決した方法を記事で説明しています。
さて、調べてみるとアスペクト比とは縦・横の比率のことを意味していることが分かりました。
不適切なってどういうことなんだろう・・・
この比率がおかしいですよっていう意味になります。
そこで、この方法でやってみたら次のように改善することができました。
83 92
どの画像が不適切なアスペクト比なのか？
まずは、該当する画像を探し出す必要があります。
- 不適切なアスペクト比の画像が表示されていますの項目をクリックして展開
- 表示されたURLをクリック
- 問題となる画像が表示される
画像の何がダメなのかについては、URLの右側を確認することで分かります。
私の場合を例にとって説明します。今回、問題となった画像はプロフィール画像です。
（表示）
200×200
（1.00）
（実際）
501×508
（0.99）
このようになっていました。
ここでのポイントは、実際に使用している画像は501×508ですが、それを200×200に変更しましたということです。
これが、問題だというわけです。
501×508 501×501
つまり、このようにすれば良いということです。
では、なぜこのようにアップロードされたかという問題について説明します。
なお、今回の問題については、テーマCocoonを使っていたときに起こったものです。そのため、他のテーマの人は問題となるところが少し違うかもしれません。
- ワードプレス管理画面左側にあるユーザー という項目からプロフィールを開く
- プロフィールの画面を下にスクロールする
- プロフィール画像のアップロードという項目があるので、ここから画像をアップロードする
ここから画像をそのままアップロードした人は、この問題が起こる可能性があります。
アップロードする前に、画像を編集できる項目があったのです。
しかし、いろいろ試しても全く解決しませんでした。
アップロードする時、501×508の画像を240×240に編集しようとします。
私の場合は、縮尺変更で240と入力しても、もう一方が243となってしまいました。
画像自体を切り取ってみても、トリミングができません。
30分以上画像を編集してみましたが、ついに諦めました。そして、仕方なくそのまま画像を貼り付けしてしまいました。
その結果、元のサイズ501×508となり、不適切なアスペクト比の画像が表示されていますと表示されたのです。
アスペクト比を正しいものに変えましょう
なお、テーマが関係しているかどうかは分かりませんが、先ほど確認したところメディアライブラリから240×240に変更することができました。
画像を編集 画像切り抜き：縦横比240×240 一度点線の範囲を変更して元に戻す 切り抜きを適用
編集を保存する（この作業で501×501になる）
画像編集 伸縮 サイズを240×240に変更 伸縮 画面一番下の更新をクリック
この記事は新たに書き直しているのですが、もしかして上の赤いラインをしなかったため、切り抜き適用ができなかっただけかもしれません。
特に、ブログを始めて浅い人は、私と同じでこの事実に気づかない可能性があります。
もし、アスペクト比の修正で悩んでいる人は、これを参考にしてみてください。
また、どうしてもメディアライブラリで編集できない場合は、GIMPなどの画像編集ソフトでトリミングをすると解決すると思います。
なお、画像を何度もアップロードした人は、メディアライブラリに使わなくなった画像が保存されています。
こちらも削除しておきましょう。
削除した方がいい理由について書いた記事がありますので、よろしければご覧ください。
まとめ
PageSpeed Insightsを使って計測し、不適切なアスペクト比の画像が表示されていますという項目は、メディアライブラリの画像編集をすることで解決しました。
単に画像をトリミングで切り取るだけでなく、伸縮機能を使い、適正なピクセルサイズにすることも分かったのではないでしょうか。
他にもいい方法があるのかもしれませんが、私にとってはこれでいいのではないかなと思いました。
もし、メディアライブラリの編集ができない場合は、GIMPなどの画像編集ソフトで修正してみましょう。
ブログ作りは奥が深いです。レンダリングを妨げるリソースの除外という項目なんて意味不明でしたよ。ブログに慣れてきてもこの気持ちは変わりません。
最後まで読んでいただきありがとうございました。
