Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Toru
October 31, 2015

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

Slide for my presentation at WordCamp Tokyo 2015 (2015/10/31 - 11/1)

WordCamp Tokyo 2015(2015/10/31-11/1)のスライド
--------
概要

Ethan Marcotte 氏がレスポンシブ・ウェブデザインを提唱して5年以上経ちますが、未だ完全な解決策が無い問題として「レスポンシブ・ウェブデザインにおける画像(レスポンシブ・イメージ)の問題」があります。

画像がページサイズの大きな割合を占めることが多い事や、昨今のデバイスの多様化、パフォーマンスの重要性を鑑みると、この問題の解決はウェブ全体にとってとても重要な事柄です。

しかし、ようやく、最近になって解決への道しるべが作られてきています。picture 要素や srcset 属性などのレスポンシブ・イメージを実現する仕様が含まれるHTML 5.1が草案(Working Draft)となり、多くのブラウザでも対応が進んでいます。

このセッションでは、RICG Responsive Images プラグインと、このプラグインの 4.4 へのマージについてお話し、srcset 属性と sizes 属性の WordPress へのネイティブ実装をどのように実現するかご紹介します。

注:時間の都合上、レスポンシブ・イメージの詳細な仕様は紹介しません。srcset 属性と sizes 属性についておさらいしておくことをオススメします。

Toru

October 31, 2015
Tweet

More Decks by Toru

Other Decks in Technology

Transcript

  1. Toru Miki Toru / @waviaei • WordPress Community • ೔ຊޠ൛΍CodexɺWordCamp౳ͷΠϕϯτͰͷ຋༁ɾ௨༁

    • ίΞ΁ͷίϛοτ • WordCamp Tokyo 2011 ࣮ߦҕһ௕ • WordPress Meetup Tokyo ڞಉΦʔΨφΠβʔ
 http://www.meetup.com/WordPress-Meetup-Tokyo/ • ࢓ࣄ • ςϯϓϧେֶδϟύϯΩϟϯύεɹŖɹ΢ΣϒαΠτͷӡӦɾߏங
  2. 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
  3. Further Reading • Responsive Image 101: Part 1~10
 http://blog.cloudfour.com/responsive-images-101-definitions/ •

    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/
  4. ܦҢ • 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
  5. 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/
  6. ࢓૊Έ • the_content ϑΟϧλʔΛར༻ͯ͠ img ʹ srcset ͱ sizes ͕௥Ճ͞Ε

    Δ • /wp-uploads/ ʹଘࡏ͢Δը૾ʹͷΈద༻ • ಉ͡ൺ཰ͷόϦΤʔγϣϯ͕ଘࡏ͢Δ৔߹ʹͷΈద༻ • ҎલʹΞοϓ͞Εͨը૾ʹ΋ద༻͞ΕΔ • ΪϟϥϦʔͷը૾΍ɺαϜωΠϧը૾ʢthe_post_thumbnail() ౳ʣʹ ΋ద༻͞ΕΔ • ϙϦϑΟϧ͸ Picturefill 2.3.1
  7. //ϓϥάΠϯ͋Γ <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" /> ग़ྗ͞ΕΔίʔυ
  8. 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 );
  9. 4.4 Ͱ͸Ͱ͖ͳ͍͜ͱ • Imagick Λར༻ͨ͠ΑΓߴ඼࣭͔ͭޮՌతͳը૾ͷ ϦαΠζػೳʢAdvanced Image Compressionʣ
 㱺ɹ4.4ͰͷϚʔδ͸ݟૹΓ •

    srcset ଐੑͷ x σεΫϦϓλ΍ɺΞʔτσΟϨΫγϣ ϯʹ޲͍͍ͯΔ picture ཁૉͱ source ཁૉ͸ະରԠ
 ɹ㱺ɹࠓޙͷ։ൃ࣍ୈ
  10. ·ͩ·ͩઈࢍ։ൃத…ʂ • 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)