レスポンシブ・イメージのWordPressへの実装と4.4

1. Implementations of Responsive Images to WordPress, and 4.4 レスポンシブ・イメージのWordPressへの実装と4.4 Toru Miki @ WordCamp Tokyo 2015 31 October 2015

2. Toru Miki Toru / @waviaei • WordPress Community • 日本語版やCodex、WordCamp等のイベントでの翻訳・通訳 • コアへのコミット • WordCamp Tokyo 2011 実行委員長 • WordPress Meetup Tokyo 共同オーガナイザー  http://www.meetup.com/WordPress-Meetup-Tokyo/ • 仕事 • テンプル大学ジャパンキャンパスｰウェブサイトの運営・構築

3. レスポンシブ・イメージのおさらい

4. レスポンシブ・ウェブデザインにおける画像の問題 • 課題 • 各種条件に合うよう作成された画像を、条件に応じて、必要な画像のみ取得して表示したい • 解決策 • レスポンシブ・イメージ • 解決策の実装手段の1つ • HTMLの仕様と、ブラウザのサポートによるネイティブ実装

5. HTML 5.1 working draft:  srcset 属性 & sizes 属性 <img src="./coffee.jpg" alt="珈琲の写真" srcset="./cofee_300.jpg 300w, ./coffee_700.jpg 700w, ./coffee.jpg 1200w" sizes="(max-width: 700px) 100vw, (max-width: 1200px) calc(100vw * 0.8), 960px" /> <img src="./coffee.jpg" alt="珈琲の写真"/> • sizes = "(メディアクエリ) 画像が占める表示領域の割合" • vw = Viewport Width

6. Further Reading • Responsive Image 101: Part 1~10  http://blog.cloudfour.com/responsive-images-101-deﬁnitions/ • Using Responsive Images (Now) · An A List Apart Article   http://alistapart.com/article/using-responsive-images-now • レスポンシブWebデザイン – Rriver  http://parashuto.com/rriver/category/responsive-web • srcset と sizes   http://terkel.github.io/srcset-sizes/

7. WordPressへのレスポンシブ・イメージの実装

8. 経緯 • 2014-04-03：Tim Evko が CSS-Tricks に記事を寄稿「Hassel Free Responsive Images for WordPress」 • 2014-10：その後、RICG (= Responsive Images Community Group) 公式のプラグインとして開発がスタート。コアへの実装を目指す • 2015-09-30： WordPress 4.4 へのマージ・プロポーザル • 2015-10-06：Changeset 34855 - Merge the Responsive Images feature plugin into core, initial commit. • 2015-10-22：WordPress 4.4 beta 1

9. Further Reading • Hassle Free Responsive Images for WordPress | CSS-Tricks   https://css-tricks.com/hassle-free-responsive-images-for-wordpress/ • ResponsiveImages.org   https://responsiveimages.org/ • WordPress › RICG Responsive Images « WordPress Plugins   https://wordpress.org/plugins/ricg-responsive-images/ • WordPress › Responsive Images: Merge Proposal « Make WordPress Core   https://make.wordpress.org/core/2015/09/30/responsive-images-merge-proposal/ • Changeset 34855 – WordPress Trac   https://core.trac.wordpress.org/changeset/34855 • WordPress › WordPress 4.4 Beta 1   https://wordpress.org/news/2015/10/wordpress-4-4-beta-1/

10. 導入方法 • プラグイン：インストールして有効化するだけでOK • 4.4：デフォルトで有効化されている • 専用の設定画面・項目などは無し • ユーザーが新たに学ぶ必要がある操作は無し

11. 仕組み • the_content フィルターを利用して img に srcset と sizes が追加される • /wp-uploads/ に存在する画像にのみ適用 • 同じ比率のバリエーションが存在する場合にのみ適用 • 以前にアップされた画像にも適用される • ギャラリーの画像や、サムネイル画像（the_post_thumbnail() 等）にも適用される • ポリフィルは Pictureﬁll 2.3.1

12. //プラグインあり <img class="alignnone size-large wp-image-12" src="~/K5TM2883_LR5-1024x678.jpg" alt="K5TM2883_LR5" width="660" height="437" srcset="~/K5TM2883_LR5-300x199.jpg 300w, ~/K5TM2883_LR5-1024x678.jpg 1024w, ~/K5TM2883_LR5.jpg 1200w" sizes="(max-width: 660px) 100vw, 660px" /> // プラグインなし <img class="alignnone size-large wp-image-12" src="~/K5TM2883_LR5-1024x678.jpg" alt="K5TM2883_LR5" width="660" height="437" /> 出力されるコード

13. 実装する際のポイント • しかし、レスポンシブ・イメージをより効果的に実装するには、なかなか難しい… • アップロードする画像のサイズと、自動生成される画像のバリエーションの見直し • sizes 属性の適切な設定

14. アップロードする画像のサイズと、自動生成される画像のバリエーションの見直し • 検討しなければならない要因が多い！ • フルサイズ、大、中、サムネイルだけで足りるのか？ • 各ブレイクポイントにおける画像の最大幅は？ • ファイルサイズは？ • ファイル数は？

15. sizes 属性の適切な設定 • 各テーマにおける、全ての画像のメディアクエリーと幅デスクリプタを自動的に取得する事ができない • (max-width: {{image-width}}) 100vw, {{image-width}} • 適切な sizes の設定を行う必要がある

16. sizes の値をフィルターする function custom_sizes( $sizes ){ $sizes = '(max-width: 680px) 100vw, (max-width: 920px) calc(100vw * 0.70), (max-width: 1160px) calc((100vw - 20px) * 0.742), 680px'; return $sizes; } add_filter( 'wp_get_attachment_image_sizes', 'custom_sizes', 11 ); • プラグインでは：tevkori_image_sizes_args（string ではなく array） apply_filters( 'wp_get_attachment_image_sizes', $sizes, $size, $image_meta, $attachment_id );

17. 4.4 ではできないこと • Imagick を利用したより高品質かつ効果的な画像のリサイズ機能（Advanced Image Compression）  4.4でのマージは見送り • srcset 属性の x デスクリプタや、アートディレクションに向いている picture 要素と source 要素は未対応  今後の開発次第

18. まだまだ絶賛開発中…！ • https://make.wordpress.org/core/tag/respimg/ • https://github.com/ResponsiveImagesCG/wp-tevko-responsive-images • Slack #feature-respimg • WordPress Trac • #34528 (Responsive Images: Don't add srcset attributes to animated gifs.) • #34430 (Improve the performance of wp_make_content_images_responsive()) • #34359 (Cache output of `wp_upload_dir()` to improve performance)

19. 24.8+% of the web

20. Thank you! @waviaei  http://waviaei.com  waviaei@gmail.com

レスポンシブ・イメージのWordPressへの実装と4.4

Toru Miki

レスポンシブ・イメージのWordPressへの実装と4.4

A particular slide catching your eye?