【WordPress対応】WebKit Nightly Buildsに実装されたsrcsetを試してみた

itmedia_retina_technique

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

この前にリニューアルしたDevelopers.IOですが、srcset属性に対応しています。
高精細ディスプレイ(Retina Display)に対応するには、CSSだとMedia Queriesで実現できましたがHTMLではスマートな実現方法がありませんでした。srcsetの実装が進むことで高精細ディスプレイへの対応が容易になります。

srcsetは今のところWebKit Nightly Buildsでしか実装されていないので残念ながら見られることはないと思いますがMacbook Pro Retinaをお持ちの方はWebkit Nightly BuildsをダウンロードしてDevelopers.IOを開いて画像を見てみてください。とても綺麗に画像が表示されます。

srcsetの今後に期待しつつ、今回はsrcsetの使い方とWordpressのアイキャッチ機能でsrcsetを指定する方法を紹介したいと思います。

srcsetの指定方法

srcsetはimgタグの属性です。ブラウザ側が対応していなくても無視されるため、現時点で指定しても特に問題は起こりません。

サンプルコード

まずはどんな感じに指定するのかサンプルコードを見てください。

<img src="image.png" srcset="image-2x.png 2x" />

ぱっと見ただけでも何を表しているのか想像がつくと思います。image-2x.pngが対象の画像であり、2xがデバイスピクセル比ですね。ブラウザはデバイスピクセル比が2の時にimage-2x.pngが表示されます。

デバイスピクセル比とはMedia Queriesのdevice-pixel-ratioresolutionのdppxと同じ値です。

ディスクリプタ

デバイスピクセル比の他にviewportの横幅、縦幅でも制御することができます。デバイスピクセル比やviewportに合わせて別々の画像を指定したい場合は,コンマ区切りでこのように指定する。

<img src="image.png" srcset="image-2x.png 2x, image-1.5x.png 1.5x, image-hvga.png 320w" />

指定できるディスクリプタは以下の通り。

意味
[path] 画像のURL image.png
x デバイスピクセル比 1.5x
w viewportの横幅 320w
h viewportの縦幅 480h

詳しい仕様はこちらを参照してください。

WordPressのアイキャッチにsrcsetを指定する

WordPressのアイキャッチ機能を使ってsrcset属性を指定する方法を紹介します。

thumbnailsのサポートを有効にする

まず、thumbnailsを有効化しましょう。細かな説明は省きますが通常の解像度と高解像度の画像を書き出すようにadd_image_size(解説)をfunctions.phpの中に記述してください。

<?php
add_theme_support( 'post-thumbnails' );
add_image_size( 'clip100', 100, 100, true );
add_image_size( 'clip200', 200, 200, true );

ループ内の処理

わかりやすいように関数などにはしていません。以下のようにループ内で指定することでアイキャッチにsrcset属性を指定することができます。

<?php while( have_posts() ): the_post(); ?>
<div class="thumbnail">
<?php
    if( has_post_thumbnail() ):
        //属性情報を格納する配列を作る
        $attrs = array();
        
        //get_post_thumbnail_idを使い指定サイズの画像情報を取得する
        $srcset_image = wp_get_attachment_image_src( get_post_thumbnail_id(), 'clip200' );
    
        //配列の最初に格納されている画像のURLとデバイスピクセル比を属性情報の配列に入れる
        $attrs['srcset'] = $srcset_image[0] . ' 2x';
        
        //属性情報を第2引数に指定する
        the_post_thumbnail( "clip200", $attrs );
    endif;
?>
</div>
<?php endwhile; ?>

WordPressの画像を再書き出しする

すでに運用中のサイトで新たにadd_image_sizeを指定した場合、画像の再書き出しが必要になります。「Regenerate Thumbnails」というプラグインを使うことで一括書き出しが可能です。

注意点

Regenerate Thumbnailsを使う際にはこの点に注意してください。

  • 追加したadd_image_sizeより元画像のサイズが大きいこと
  • Webサーバーの容量に余裕があること
  • アクセスの多い時間帯は避けること

実際の表示

たぶん、高精細ディスプレイ(Retina Display)で見ないと実感しづらいと思います。画像にすると倍の解像度で書き出されるのですが、ダウンロードして比較してみるとわかりやすいかもしれません。

通常

1,209 * 971

通常

高精細ディスプレイ

2,418 * 1942

Retina Display

以上になります。

参考サイト