WordPressで画像の保存場所がどこにあるのか覚えると共に、WordPressが画像の保存場所に自動生成する仕組みについても画像設定を理解することで知識が深められるように記事にまとめました。
また、WordPressが自動生成する画像ファイルの保存場所にフルサイズの画像のみを自動生成するようにするPHPコードも紹介しています。
WordPressは画像を自動生成して保存している
WordPressはメディアライブラリで1つの画像サイズをアップロードすると、その画像をメディアライブラリで管理できるようにしますが、同時にアップロードした画像をリサイズして自動生成します。
ここで言うリサイズは、WordPressのメディアライブラリにアップロードした画像サイズを小さくすることで、ピクセル数を少なくし容量を小さくした画像のこと。これをWordPressが自動生成しています。
そしてWordPressはアップロードした画像とリサイズして自動生成した画像をメディアライブラリ以外の場所に保存します。
画像の保存場所としてwp-contentフォルダから階層を下げたフォルダの場所に「元画像」と「自動生成した画像」を保存しています。具体的には以下の2つのフォルダです。
- uploadsフォルダ
- 年月フォルダ
自動生成した画像ファイルの保存場所がuploadsフォルダと年月フォルダの2つがあるのは、WordPressのメディア設定の違いにより画像の保存場所の階層が変わるためです。
実際にはどのように画像が自動生成されて、2つの保存するフォルダの場所に格納されるのか、サンプル画像をアップロードしながら各フォルダに画像が自動生成するのを確認してみました。
よければ読み進めることで知識の片隅にでも含めてみてください。
自動生成する画像ファイルの保存場所
WordPressが自動生成する画像ファイルの保存場所がuploadsフォルダになる場合には、WordPressのメディア設定で「ファイルアップロード」項目の「アップロードしたファイルを年月ベースのフォルダーに整理」にチェックがしてない場合に保存場所がuploadsフォルダになります。
たとえば「年月ベースのフォルダーに整理」の設定をチェックなしでoriginal.jpgというファイル名の画像をWordPressのメディアライブラリでアップロードした場合
WordPressはuploadsフォルダを保存場所にしてoriginal.jpgとoriginal.jpgをリサイズした画像を保存します。画像URLは以下のようになります。
http://localhost/wordpress/wp-content/uploads/original.jpg
uploadsフォルダの場所に自動生成されるリサイズ画像については、WordPressのメディア設定で指定している「サムネイルのサイズ」「中サイズ」「大サイズ」で該当した画像サイズをリサイズの対象にし、自動生成後に保存場所のuploadsフォルダに格納します。
すべてuploadsフォルダの場所一つだけにまとめらるので、いい感じの保存場所かと思いきや、画像をバックアップするときなどでは、毎回すべての画像をバックアップすることになるので、画像管理が大変になりそうな予感がします。
年月ベースで自動生成した画像の場所
WordPressのメディア設定で年月ベースにチェックを入れた設定の場合は、自動生成された画像ファイルの場所が、uploadsフォルダから階層を2つ下げた場所になりなります。
このときのuploadsフォルダから階層を2つ下げた場所には、年月ベースのフォルダで画像管理できるようになり、月ベースのフォルダがWordPressの自動生成した画像ファイルの保存場所になります。
確認も兼ねてWordPressのメディア設定で年月ベースにチェックを入れてメディアライブラリに画像をアップロードし、リサイズ画像の自動生成をしてみました。
アップロードするとuploadsフォルダの場所には、元画像と自動生成される画像が保存されません。
その代わりuploadsフォルダから1つ階層を下げた場所に2020という年ベースのフォルダが自動作成されています。
さらに1つ階層を下げた場所に月ベースのフォルダを画像の保存場所として、元画像とWordPressがリサイズして自動生成した画像が格納されます。画像URLは以下のようになります。
http://localhost/wordpress/wp-content/uploads/2020/09/original.jpg
このようにWordPressが自動生成する画像ファイルの保存場所はメディア設定によって保存先の場所が変わることが理解できます。
WordPressが自動生成する画像設定の場所も理解する
画像ファイルの保存場所は理解できたと思います。ここからは、おせっかいおばちゃんレベルの説明かもしれません。
WordPressが画像の保存場所に格納する元画像以外のリサイズ画像や画像編集をして画像保存されることに関係が深い画像設定の場所に視点を移して理解を深めてみたいと思います。
WordPressの画像設定関係の中でアップロードした画像をリサイズしたり編集する設定場所は以下の2つの場所です。
- メディア設定
- メディアライブラリ
上記2つの設定場所で「メディア設定」は画像保存場所のフォルダに保管するリサイズ画像のサイズを設定できる場所。
「メディアライブラリ」は画像のアップロードや画像編集などをする場所。
WordPressでメディア設定とメディアライブラリのそれぞれの設定に場所を移して説明します。
メディア設定と画像保存場所との関係
WordPressのメディア設定では「サムネイルのサイズ」「中サイズ」「大サイズ」の画像サイズの設定項目があります。
メディア設定をすると、WordPressがどんなリサイズをして画像を保存場所に自動生成するかコントロールできます。実際にやってみたので自動生成する画像の保存場所に関係するヒントになればと思います。
メディア設定で指定する画像サイズ
- サムネイルサイズ 150×150
- 中サイズ 300×300
- 大サイズ 1024×1024
WordPressのメディア設定で上記の3つのサイズを指定しておきます。これはデフォルトの設定サイズでもあります。
そして「アップロードしたファイルを年月ベースのフォルダーに整理」にチェックする。自動生成する画像は年月ベースのフォルダを保存場所にします。
元画像サイズ
3000×2000
メディアライブラリで3000×2000の画像(original.jpg)をアップロードします。
アップロード後にWordPressが自動生成した画像保存場所のフォルダを確認すると、年月ベースフォルダの場所にはサイズが異なる同じ画像9枚が保存されます。
- original.jpg
- 150×150
- 300×200
- 730×410
- 768×512
- 1024×683
- scaled
- 1536×1024
- 2048×1365
WordPressが自動生成した画像保存場所に9枚もの画像が自動生成されて保存される理由は以下の3つと関係しています。
- WordPressのVer 4.4から新たに横768pxの画像が自動生成するような仕様になった
- アップロード画像が2560pxを超えるサイズの画像はWordPressがチェックしてフルサイズを2560pxに抑えるため。これはVer 5.3からの仕様。
- テーマのfunctions.phpで指定してる画像サイズのもの。テーマのadd_image_size記述に依存する。
上記の理由からWordPressが自動生成する画像ファイルの保存場所には、たくさんのリサイズされた画像が自動生成されているのですね。
またメディア設定のサイズ指定より若干違うサイズで勝手に縮小されてるのも、相対的なリサイズをしてWordPressが保存場所に格納してるからです。
画像編集ソフトやMacやWindowsで元画像をカスタムサイズでサイズ変更してみるとWordPressが自動生成したリサイズと同じになるので相対的にという意味が理解しやすくなります。
このように保存場所がどこにあるのか理解するだけではなく、メディア設定も理解しておくと、保存場所のフォルダを確認したときに「知らないサイズの画像が勝手に縮小されて保存されてるんですけどぉ…」の不思議とはおさらばできます。
メディアライブラリと画像保存場所との関係
メディアライブラリの設定場所で画像編集をすることで、画像ファイルの保存場所には、新たにWordPressは画像を追加します。
たとえばメディアライブラリにアップロードした画像を画像編集から水平方向に反転した画像に編集して保存します。
そうするとWordPressは編集済みの画像の状態をメディア設定で指定したサイズにリサイズして自動生成をし、「アップロードしたファイルを年月ベースのフォルダーに整理」のチェック有り無しの違いにより、各画像保存場所に編集した画像を自動生成します。
画像縮尺の変更をした編集画像も新たにフォルダに自動生成される。
トリミングした場合も新たにリサイズ画像が自動生成される。
さらに復元したときには、編集した画像を自動生成した複数の画像は消えることなく画像の保存場所になるフォルダに保存されることになる。
このようなWordPressが自動生成する画像ファイルの保存場所に、画像の編集をして保存をするたびに、WordPressは編集済みの画像をリサイズして自動生成します。
保存場所がuploadsフォルダでも年月ベースフォルダでも画像保存場所には、使用することがない画像もリサイズされて自動生成されているのが理解できますね。
おせっかいおばちゃんレベルの内容だったかもしれません。ですがWordPressが画像をリサイズして自動生成するときの仕組みを理解できていない場合、保存場所の画像フォルダをのぞいて戸惑う人もいるかもしれません。
そのためWordPressが自動生成する画像設定の場所も理解することで、画像設定と画像保存場所との関係性を説明してみました。
画像の保存場所にフルサイズのみ自動生成する
WordPressが自動生成する画像ファイルの保存場所について2つの理解ができました。
- WordPressが自動生成する画像ファイルの保存場所がどこにあるのか
- 保存場所にどんな画像設定で自動生成されたリサイズ画像が保存されるか
理解できると必ず思うことがあります。
「画像保存場所の容量が重くなる…こんなに自動生成されるリサイズ画像いらなくね？」
そんなときにはWordPressが自動生成する画像ファイルの保存場所に画像をフルサイズのみWordPressが自動生成するようにします。
function no_resize_image($sizes){
unset($sizes['thumbnail']);
unset($sizes['medium']);
unset($sizes['medium_large']);
unset($sizes['large']);
unset($sizes['1536x1536']);
unset($sizes['2048x2048']);
return $sizes;
}
add_filter('intermediate_image_sizes_advanced', 'no_resize_image');
add_filter( 'big_image_size_threshold', '__return_false' );
上記のPHPの記述はfunctions.phpに記述します。そうするとアップロードした画像のフルサイズのみをWordPressが自動生成します。(正確にはテーマ依存のリサイズ画像は自動生成させている)
仕組みを軽く説明すると、画像のアップロード時に自動的に生成される画像サイズをintermediate_image_sizes_advancedでフィルタリングします。
scaledのファイル名の画像はintermediate_image_sizes_advancedでフィルターできなかったので、big_image_size_thresholdでフィルターしてfalseで無効にします。
テーマに依存してリサイズする画像は個人的ではありますが、そのサイズがテーマにおいてベストなコンテンツがあるかと考えたため、保存場所に自動生成するようにしています。
