レスポンシブイメージの概要をつかむ

1. レスポンシブイメージと
WordPressで扱われるイメージサイズ

2. レスポンシブイメージとは
レスポンシブイメージについて
http://itstudio.co/2016/01/12/5408/
srcset と sizes
http://terkel.github.io/srcset-sizes/
IEは非対応、Microsoft Edgeは対応

3. 最適なイメージの幅を決める4要素
変数 製作者がコードを書くとき
ブラウザーが
ページを読み込むとき
ビューポートの寸法 知らない 知ってる
ビューポートに対する
画像の相対的な幅
知ってる 知らない
画面密度 知らない 知ってる
ソース・ファイルの寸法 知ってる 知らない
http://terkel.github.io/srcset-sizes/ より
• CSSの読み込み後ではなく、 IMG要素を読み込むタイミングでこの情報が必要
• メディアクエリで分かるのはビューポートの寸法だけ
sizes
srccet

4. <img src=“small.jpg"
srcset="large.jpg 1024w,
medium.jpg 640w,
small.jpg 320w"
sizes="(min-width: 36em) 33.3vw,
100vw"
alt="hogehoge" />
←フォールバック
用意した画像のそれぞれの横幅
←ビューポートの寸法と
ビューポートに対する
画像の相対的な幅
すべてのメディアクエリに合致しない場合の
ビューポートに対する画像の相対的な幅
(Viewport-percentage width)

5. WordPress のメディアのサイズについて
メディアのアップロード時に作られるサイズ
ダッシュボード > 設定 > メディア で設定されているサイズ
• thumbnail（デフォルトでは150*150）
• medium（デフォルトでは各辺の上限300）
• large（デフォルトでは各辺の上限1024）
＋
• full

6. twentysixteenのfunctions.phpはどうなっているのか？

7. $GLOBALS[‘content_width'] をゴニョゴニョしている箇所
/**
* Sets the content width in pixels, based on the theme's design and stylesheet.
*
* Priority 0 to make it available to lower priority callbacks.
*
* @global int $content_width
*
* @since Twenty Sixteen 1.0
*/
function twentysixteen_content_width() {
$GLOBALS['content_width'] = apply_filters( 'twentysixteen_content_width', 840 );
}
add_action( 'after_setup_theme', 'twentysixteen_content_width', 0 );

8. サムネイル をゴニョゴニョしている箇所
/*
* Enable support for Post Thumbnails on posts and pages.
*
* @link http://codex.wordpress.org/Function_Reference/add_theme_support#Post_Thumbnails
*/
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 1200, 9999 );

9. /**
* Add custom image sizes attribute to enhance responsive image functionality
* for content images
*
* @since Twenty Sixteen 1.0
*
* @param string $sizes A source size value for use in a 'sizes' attribute.
* @param array $size Image size. Accepts an array of width and height
* values in pixels (in that order).
* @return string A source size value for use in a content image 'sizes' attribute.
*/
function twentysixteen_content_image_sizes_attr( $sizes, $size ) {
$width = $size[0];
840 <= $width && $sizes = '(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px';
if ( 'page' === get_post_type() ) {
840 > $width && $sizes = '(max-width: ' . $width . 'px) 85vw, ' . $width . 'px';
} else {
840 > $width && 600 <= $width && $sizes = '(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width:
1362px) 45vw, 600px';
600 > $width && $sizes = '(max-width: ' . $width . 'px) 85vw, ' . $width . 'px';
}
return $sizes;
}
add_filter( 'wp_calculate_image_sizes', 'twentysixteen_content_image_sizes_attr', 10 , 2 );
コンテントイメージのsizesをゴニョゴニョしている箇所

10. /**
* Add custom image sizes attribute to enhance responsive image functionality
* for post thumbnails
*
* @since Twenty Sixteen 1.0
*
* @param array $attr Attributes for the image markup.
* @param int $attachment Image attachment ID.
* @param array $size Registered image size or flat array of height and width dimensions.
* @return string A source size value for use in a post thumbnail 'sizes' attribute.
*/
function twentysixteen_post_thumbnail_sizes_attr( $attr, $attachment, $size ) {
if ( 'post-thumbnail' === $size ) {
is_active_sidebar( 'sidebar-1' ) && $attr['sizes'] = '(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 60vw, (max-
width: 1362px) 62vw, 840px';
! is_active_sidebar( 'sidebar-1' ) && $attr['sizes'] = '(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 88vw,
1200px';
}
return $attr;
}
add_filter( 'wp_get_attachment_image_attributes', 'twentysixteen_post_thumbnail_sizes_attr', 10 , 3 );
サムネイル画像（アイキャッチ）のsizesをゴニョゴニョしている箇所

11. <img class="alignnone size-full wp-image-38"
src="/PATH_TO_FILE/filename.jpg" alt="filename" width="2592" height="1936"
srcset="/PATH_TO_FILE/filename-300x224.jpg 300w,
/PATH_TO_FILE/filename-768x574.jpg 768w,
/PATH_TO_FILE/filename-1024x765.jpg 1024w,
/PATH_TO_FILE/filename.jpg 2592w"
sizes="(max-width: 709px) 85vw,
(max-width: 909px) 67vw,
(max-width: 1362px) 62vw,
840px">
吐き出されるコード（コンテントイメージ）
<img class="alignnone size-full wp-image-38"
src="/PATH_TO_FILE/filename.jpg" alt="filename" width="2592" height="1936"
srcset="/PATH_TO_FILE/filename-300x224.jpg 300w,
/PATH_TO_FILE/filename-768x574.jpg 768w,
/PATH_TO_FILE/filename-1024x765.jpg 1024w,
/PATH_TO_FILE/filename.jpg 2592w"
sizes="(max-width: 2592px) 100vw,
2592px">
twenty-sixteen
twenty-fifteen
←full（フォールバック）
/wp-content/uploadsの中身
←medium
←large
←full
ザックリ言って、
srcsetと、それなりのsizesはWPコアが吐き出している
functions.phpでsizesをきめ細かに設定できる

12. まとめ
• レスポンシブイメージを使うと、画像のセットから各端末、各レイ
アウトに最適（必要十分な幅）の画像が表示されて、動作が軽くな
る。
• WordPress4.4以降はレスポンシブイメージはコアに組み込まれてい
るので、テーマが何であれ、まあまあ対応している。
• twenty-sixteenはきめ細かに対応している。
• 仕組みを知っておくと、さらにカスタマイズが可能。
• 幅と高さが小さくてもファイルサイズが小さくなってない場合があ
るので注意（WordPressコアは画像の最適化を行っていない）。