WordPressで画像をリサイズする方法

この記事を読むのに必要な時間は約 11 分です。

WordPressに画像をアップロードするときにスマホで撮ったままアップロードしていませんか? 画像編集ソフトがなくてもWordPressではある程度、画像を編集できる機能があるのをご存知ですか? 画像をリサイズするとか切抜きするということが可能だったりします。 投稿の記事内で表示する画像は、それほど大きいサイズの画像は必要ありません。 画像をリサイズすることで画像のファイルサイズを小さくすることができるのでその分、表示も早くなるということです。

 

目 次

画像のリサイズ

投稿画面
画像を挿入する場合に「メディアの追加」をクリックして追加していくだけなのでさほど難しいことではないのですが、その画像のファイルサイズのままでいいですか?
投稿画面は、通常2カラムで横幅およそですが、750px程度です。
ということは、それ以上に大きい画像って詳しく見せない場合は、必要ありません。
というのも画像が大きいと表示するまでにかかる時間も多くかかります。
であれば、表示できる大きさにすることでファイルサイズを小さくすることができてファイルサイズが小さいので表示もその分早くなるということなのです。

画像のリサイズ
上記のような画面を見られたことありますか?
Photoshopのような画像加工ができるようなソフトがなくてもリサイズは可能なのです。

写真のデータ比較


上記の画像でデータの比較をしてみたいと思います。画像クリックで大きい画像を見ていただけます。

ファイルサイズが大きいままの状態
上記は、画像をダウンロードしてそのままアップロードした状態です。赤枠の中のファイルサイズに注目してください。589kbもあるのです。
リサイズ後の状態
上記は、リサイズした状態です。左のファイルサイズが大きいままの画像のファイルサイズと比べて見て下さい。

いかがでしょうか?
画像を大きいままの場合に589kbあったファイルサイズが横幅を750pxにリサイズしただけで98kbにまでファイルサイズが小さくなりました。
必要以上に大きい画像が必要ない場合は、できるだけ早く表示させるようにリサイズした方が訪問してくれた方にとって助かるのです。

表示速度


表示速度は、毎回読み込むスタイルシートJavaScript・画像を使ってる枚数などによって異なりそれらはすべて表示速度に関連します。画像は、枚数が少ない・ファイルサイズが小さいという場合には比較的早く表示されますが、ファイルサイズが大きいままアップロードしてそのまま使うと当然のことながら表示速度は、遅くなります。

Googleもモバイルファーストを推奨して以来、表示速度をSEOに影響させるとかいろいろ表示速度についても力を入れています。そういったことからもせめて画像については、適度な大きさにリサイズしていた方が今後の流れとしては、それが主流になる可能性が高いですね。

WordPress内での写真の取扱い

WordPressの中では基本2カラムのテーマが多くコンテンツエリアの横幅は、750pxくらいが圧倒的に多いです。
ということは、それ以上に大きい画像は基本的に必要ないことが多いのです。
スマホで撮ったままの写真は、iPhone XRで4032X3024pxの写真です。ファイルサイズが2MBを超えます。通常は、アップロードできないほどです。
そのままアップロードする方法もあったりしますが・・・

画像編集
画像のリサイズは、メディアで画像を開き「画像を編集」ボタンをクリックします。

リサイズ
この画面でサイズを変更して「縮尺変更」ボタンをクリックします。

上記画像がリサイズされた画像になります。リサイズだけならそれほど操作は難しくありません。
リサイズだけでPhotoshopを開いたりするより断然楽ですね。
試してみてください。

YouTubeチャンネル

WEBのことならくまはちLABにお任せください。

サービス 制作事例
お問い合わせ

くまはちLABのご利用ありがとうございます!くまはちLABの最新情報をフォローしてゲットしてください!