最近、下記の理由から、WordPressの挿入した画像のimgタグにwidth/heightがあることに違和感を感じてました。
- レスポンシブにフルードイメージとして画像を取り扱う際に、imgタグ内のwidth/heightの値の意味が薄れる (画像本来のサイズを指定すればよいのだろうか？)。
- imgタグ内のwidth/heightは、alt属性のように必須ではない。
- width/height属性のせいで、微量ではあるがhtmlのコードサイズが肥大化してしまう。
- FTPなどで違うサイズの画像を差し替えた際に、該当のimgタグのwidth/height値を直してあげないといけない。
しかしながら、imgタグのwidth/heightを削除すると下記のようなデメリットもあるようです。
- 画像のレンダリング速度の低下（１割程度？）
- JavaScriptのwidth/height取得のタイミングがズレてうまく機能しないことがある
→ でも、これって「jQuery(document).ready(function(){」内でwidth/heightを取得してるからであって、「jQuery.event.add(window,”load”,function(){」内でwidth/heightを取得すればOK？ - HTMLのローディングが途中で止まった際にレイアウトが崩れる可能性がある
→ 画像が飛んでしまって崩れるようなレイアウトって・・・
上記の１は痛いですが以上を踏まえて、imgタグのwidth/heightを削除したいと考えた場合、他のブログでも紹介されているとおり、下記のような方法になります。
/**
* 画像挿入時にwidthとheightを削除する
*/
function remove_width_attribute( $html ) {
$html = preg_replace( '/(width|height)="\d*"\s/', "", $html );
return $html;
}
add_filter( 'post_thumbnail_html', 'remove_width_attribute', 10 );
add_filter( 'image_send_to_editor', 'remove_width_attribute', 10 );
しかしながら、上記の方法では、画像挿入時にしかwidth/heightを削除しません。具体的には、WP3.9あたりからTinyMCEが4.0にアップされ画像変更のUIが改善されましたが、画像変更(右寄せ・左寄せ等)すると、width/height属性が復活してしまいます。そこで、更に下記のように行えば、width/height属性は復活せず消えたままにしておけます。
// 画像編集の際に勝手にwidth/heightが入るので削除
function my_tinymce_remove_width_attribute( $options ) {
if ( $options['tinymce'] ) {
wp_enqueue_script( 'tinymce_remove_width_attribute', get_template_directory_uri() . '/js/wp-admin-remove_width_attribute.js', array( 'jquery' ), '1.0.0', true);
}
}
add_action( 'wp_enqueue_editor', 'my_tinymce_remove_width_attribute', 10, 1 );
(function( $, wp, _ ) {
if ( ! wp.media.events ) {
return;
}
wp.media.events.on( 'editor:image-update', function( options ) {
var editor = options.editor,
dom = editor.dom,
image = options.image;
dom.setAttribs( image, {'width': null, 'height': null});
} );
})( jQuery, wp, _ );
以上、何かのご参考になりましたら幸いです。
※上記の内容は全て自己責任のもとでご参考ください。