WordPressで特定の画像だけscrset属性を無効にする

記事内に配置したAPNGファイルがアニメーションしないというトラブルがあったので調べてみたところ、srcset属性が設定されていることが原因でした。その対策としてAPNGの画像だけsrcset属性を無効にしたのでその覚書です。

APNGにsrcset属性があるとダメな理由

WordPressはデフォルトでは画像をアップロードすると自動的に複数サイズの画像を生成し、srcset属性に割り当ててくれます。

問題はその生成される画像がAPNGではなく1コマ目だけ取り出したPNGファイルになってしまうということです。

そのため、オリジナルファイルが表示される条件ではアニメーションが表示されますが、それ以外の条件では1コマ目の画像が表示されるだけとなりアニメーションしません。

wp_calculate_image_srcset_metaフィルターを使う

WordPressでsrcset属性を無効にする方法を調べると次のコードが出てきます。

add_filter( 'wp_calculate_image_srcset_meta', '__return_null' );

このコードで確かに無効にはなるのですが、全ての画像でsrcset属性が表示されなくなってしまいます。今回はAPNGだけが無効になれば良いのでこれではやりすぎ。

wp_calculate_image_srcset_metaフックを調べてみるとパラメターが4つ用意されており、それを使えば大抵のことはできそうです。このフックの詳細はこちら

wp_calculate_image_srcset_meta | Hook | WordPress Developer Resources

このフックの動作を理解するにはこのフィルターを使っているwp_calculate_image_srcset()関数のソースも見ることをオススメします。

wp_calculate_image_srcset() | Function | WordPress Developer Resources

画像のIDを指定して無効化

一番簡単な画像のIDを利用してsrcset属性の有無を切り替える場合のコードは次のようになります。IDが3784の画像の場合にsrcset属性を無効にします。

add_filter( 'wp_calculate_image_srcset_meta', 'my_srcset_customize', 10, 4 );

function my_srcset_customize( $image_meta, $size_array, $image_src, $attachment_id ) {
	if ( 3784 === $attachment_id ) {
		return false;
	} else {
		return $image_meta;
	}
}

特定のファイル名を含む画像だけ無効にしたい

上記の例では画像をアップロードしてIDが決まってからしか設定できません。また、複数のAPNGをアップロードした場合にも面倒です。

wp_calculate_image_srcset_metaフィルターは$image_srcもパラメータとして利用できるので、ファイル名を工夫すれば汎用性が上がります。

例えば「APNGファイルにはapng-sample.pngのように接頭辞apng-を付ける」というルールを設定した場合、コードは次のようになります。

add_filter( 'wp_calculate_image_srcset_meta', 'my_srcset_customize', 10, 3 );

function my_srcset_customize( $image_meta, $size_array, $image_src ) {
	$needle = '/apng-';
	if ( strpos( $image_src, $needle ) === false ) {
		return $image_meta;
	} else {
		return false;
	}
}

このコードではパラメータの$attachment_idは使わないので省略しています。

WordPressでAPNGを使って上手くアニメーションが表示されない場合や、それ以外でもsecset属性が問題を起こしている場合に役に立つと思います。