WordPressの画像アップロード時のリサイズ・トリミングを試してみる

メディアの設定によってアップロードする画像がどのようにリサイズされるかを試してみます。

設定とテスト内容

設定 > メディア 以下のように設定してみます。

• サムネイル 300×300 (トリミングしない)
• 中サイズ 800×600
• 大サイズ 1280×720

テーマのテンプレート内で以下のように出力して、thumbnail/medium/largeそれぞれのサイズを確認してみます。

PHP

echo get_the_post_thumbnail( '', 'thumbnail' );
echo get_the_post_thumbnail( '', 'medium' );
echo get_the_post_thumbnail( '', 'large' );

1280×500の画像をアップロードすると、それぞれ以下のサイズで出力されました。

• サムネイル 300×117
• 中サイズ 800×313
• 大サイズ 1280×500

設定した幅に合わせて画像が縮小され、高さは指定よりも小さくなりました。
　

640×360の画像をアップロードすると、それぞれ以下のサイズで出力されました。

• サムネイル 300×169
• 中サイズ 640×360
• 大サイズ 640×360

サムネイルは設定した幅に合わせて画像が縮小され、高さは指定よりも小さくなりました。
中サイズと大サイズは設定サイズに満たないため、画像は生成されません。
(fullを指定した場合と同じく、アップロード画像がそのまま表示されます。)
　

900×1050の画像をアップロードすると、それぞれ以下のサイズで出力されました。

• サムネイル 257×300
• 中サイズ 514×600
• 大サイズ 617×720

設定した高さに合わせて画像が縮小され、幅は指定よりも小さくなりました。
　

高さの最大値をなくす

メディアに幅・高さを指定すると、それぞれを最大値としてそのサイズ以内に収まるようにリサイズされます。
ただ、通常サイト内でアップロード画像を使う場合、幅を指定値にして高さが可変に指定したい場合の方が個人的には多いです。
幅のみ最大値を指定したい場合、高さに0を設定します。

• サムネイル 300×0 (トリミングしない)
• 中サイズ 800×0
• 大サイズ 1280×0

この設定で先ほどと同じ900×1050の画像をアップロードしてみると、それぞれ以下のサイズで出力されました。

• サムネイル 300×350
• 中サイズ 800×933
• 大サイズ 900×1050

サムネイルと中サイズは設定した幅に合わせて画像が縮小されました。
大サイズは幅が設定サイズに満たないため、画像は生成されずにアップロード画像がそのまま表示されます。

幅の最大値をなくしたい場合は反対で、幅の値を0にすればOKです。
　

トリミングの指定

メディアの各サイズの設定を最初に戻して、サムネイルのトリミングにチェックを入れてみます。

• サムネイル 300×300 (トリミングする)
• 中サイズ 800×600
• 大サイズ 1280×720

640×360の画像をアップロードすると、サムネイルは300×300のサイズで出力されました。
設定した高さに合わせてリサイズされ、幅は左右の余分な部分が切り取られる形になりました。
　

900×1050の画像をアップロードした場合も同じく、サムネイルは300×300のサイズで出力されました。
設定した幅に合わせてリサイズされ、高さは上下の余分な部分が切り取られる形になりました。
　

250×200の画像をアップロードすると、以下のサイズで出力されました。

• サムネイル 250×200

設定したサイズに満たないため、画像は生成されずにアップロード画像がそのまま表示されます。
　

結果

• 指定した幅・高さを最大値として、そのサイズ内に収まるようにリサイズされる
• 最大値を指定したくない場合、値を0にする
• 幅・高さとも指定した値に満たない場合、そのサイズの画像は生成されない
  (アップロードした画像がそのまま出力される)
• トリミングをした場合、幅もしくは高さ似合わせてリサイズされ、はみ出している部分(上下または左右)を切り取る

【参考サイト】

• 管理画面/メディア設定 – WordPress Codex 日本語版