5.3の新機能:JPEG画像の向きを自動調整

説明

WordPress 5.3 Beta 1」に記載されていた「Automatic image rotation during upload」という見出し。画像ファイルに含まれるEXIF情報内の「向き」により、画像の向きを自動的に調整するというもの。どんな実装なのか気になったのでソースコードをざっくり眺めてみた。

はじめに、この記事は公開された5.3 Beta 2をもとにしており、正式リリースの際に変更される可能性があることを予めお断りする。

EXIF情報のOrientation

JPEG画像の向きをどこで調整しているのかを調べていくと、WP_Image_Editorクラスのmaybe_exif_rotateメソッドにたどり着く。このメソッドは wp_get_image_editor関数を使ってWP_Image_Editorオブジェクト(サーバー環境に応じてWP_Image_Editor_ImagickまたはWP_Image_Editor_GDオブジェクト)を生成して使用するものだ。

maybe_exif_rotateメソッドでは、PHPのexif_read_data関数を使用してEXIF情報を読み取り、その中にOrientationが含まれ、1以外の場合にその内容に応じてイメージの向きを調整するが、向きを調整する前にフィルターを実行するのがWordPressらしさである。

$orientation = apply_filters( 'wp_image_maybe_exif_rotate', $orientation, $this->file );

サイトのコンテンツで自動的に向きを調整してほしくない場合は、この'wp_image_maybe_exif_rotate'フィルターを使用してコントロールできる。例えば、無条件に向きを調整させない場合は次のようにすればよい。

add_filter( 'wp_image_maybe_exif_rotate', '__return_zero', 10, 2 );

アップロード時に作られる縮小イメージ

5.3では向きの自動調整に加え、高解像度への対応が行われている。この対応の一環だと思われるが、アップロード時に自動的に作成される縮小イメージが変更されている。次の表は解像度3024×4032ピクセルで縦向きのJPEG画像をアップロードした場合に作成される縮小イメージの違いを示すものだ。

幅×高さ5.2.3
Twenty Nineteen
5.2.3
Twenty Twenty
5.3 Beta 2
Twenty Nineteen
5.3 Beta 2
Twenty Twenty
150×150
225×300
300×225
768×576
768×1024
1024×768
1152×1536
1200×900
1200×1600
1536×2048
1568×1176
1568×2091
1920×2560
1980×1485
1980×2640

まず5.2.3と5.3 Beta 2では縦向き画像が自動的に向きを調整されたことにより、作成される縮小イメージの幅と高さが異なることがおわかりいただけるだろう。

次は使用するテーマに依存する違いになるが、緑字の幅についてはテーマ「Twenty Nineteen」の指定によるものだ。

set_post_thumbnail_size( 1568, 9999 );

またテーマ「Twenty Twenty」では青字赤字の幅がそれぞれ指定されており、その指定にしたがって縮小イメージが作成されている。

set_post_thumbnail_size( 1200, 9999 );

add_image_size( 'twentytwenty-fullscreen', 1980, 9999 );

【追記】フルサイズのしきい値

5.3ではフルサイズのしきい値(標準時2560ピクセル)が設定されている。上記の解像度3024×4032ピクセルで縦向きのJPEG画像の場合は、メディアにフルサイズとして登録されるのはアップロードしたオリジナルではなく、1920×2560ピクセルにリサイズされたものが適用される。このフルサイズのリサイズ処理は幅または高さのいずれかがしきい値より大きい場合に行われるようになっている。

フルサイズのしきい値を設定せずにオリジナルのサイズをフルサイズとして扱いたい場合は、次のように'big_image_size_threshold'フィルターを使用することで対応できる(既存のサイトで幅または高さが2560ピクセルの画像をアップロードしている場合は事前に対応を検討しておくこと)。

add_filter( 'big_image_size_threshold', '__return_false', 10, 4 );

こうすることで、アップロードしたJPEG画像がEXIF情報のOrientationがないか1の場合はそのままフルサイズの画像と適用される。EXIF情報のOrientationが1以外の場合は解像度を維持して向きを調整したもの生成され、フルサイズの画像として適用される。


5.3(Beta 2)では背景の違いで区分けした従来よりも大きな解像度の縮小イメージが追加されている。コンテンツで高解像度の写真やイラストを扱っているサイトはストレージの容量にも留意する必要がありそうだ。


最後にここに記載した内容を確認する際に私がやらかしてしまったことについて触れておく。スマートフォンで撮影した際に撮影者が横向きで撮ったと思っても実際には縦向きで保存されている場合がある。このようなJPEG画像をアップロードすると、自動向き調整が正常に機能していないかのような状況になる。そんな時は、まず落ち着いてアップロードした画像ファイルを確認すべきだ。WordPressの機能を疑うのはその後でいい。


最終更新 : 2019年10月17日 14:25


お勧め

convert_invalid_entities(2018年5月27日 更新)

string convert_invalid_entities( string $content )
コンテントに含まれる無効なHTMLエンティティを変換する。

wp_die(2019年5月10日 更新)

void wp_die( string | WP_Error $message [ , string | int $title = '' [ , mixed $args = array() ] ] )
エラーメッセージ(ページ)を表示する。

remove_meta_box(2011年8月25日 更新)

void remove_meta_box( string $id, string $page, string $context )
投稿ページのメタボックスを削除(非表示)する。

get_header_image_tag(2018年5月27日 更新)

string get_header_image_tag( array $attr = array() )
カスタムヘッダーのimg要素を取得する。

wp_schedule_single_event(2019年3月20日 更新)

void bool wp_schedule_single_event( int $timestamp, string $hook [ , array $args = array() ] )
一度だけ実行するアクションをスケジュールに登録する。