レスポンシブ・イメージの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 属性についておさらいしておくことをオススメします。

Transcript

1. Implementations of
   Responsive Images to
   WordPress, and 4.4
   ϨεϙϯγϒɾΠϝʔδͷWordPress΁ͷ࣮૷ͱ4.4
   Toru Miki @ WordCamp Tokyo 2015
   31 October 2015
   

   View Slide

2. Toru Miki
   Toru / @waviaei
   • WordPress Community
   • ೔ຊޠ൛΍CodexɺWordCamp౳ͷΠϕϯτͰͷ຋༁ɾ௨༁
   • ίΞ΁ͷίϛοτ
   • WordCamp Tokyo 2011 ࣮ߦҕһ௕
   • WordPress Meetup Tokyo ڞಉΦʔΨφΠβʔ

   http://www.meetup.com/WordPress-Meetup-Tokyo/
   • ࢓ࣄ
   • ςϯϓϧେֶδϟύϯΩϟϯύεɹŖɹ΢ΣϒαΠτͷӡӦɾߏங
   

   View Slide

3. View Slide

4. ϨεϙϯγϒɾΠϝʔδ
   ͷ͓͞Β͍
   

   View Slide

5. Ϩεϙϯγϒɾ΢ΣϒσβΠϯ
   ʹ͓͚Δը૾ͷ໰୊
   • ՝୊
   • ֤छ৚݅ʹ߹͏Α͏࡞੒͞Εͨը૾Λɺ৚݅ʹԠͯ͡ɺඞཁͳ
   ը૾ͷΈऔಘͯ͠ද͍ࣔͨ͠
   • ղܾࡦ
   • ϨεϙϯγϒɾΠϝʔδ
   • ղܾࡦͷ࣮૷खஈͷ1ͭ
   • HTMLͷ࢓༷ͱɺϒϥ΢βͷαϙʔτʹΑΔωΠςΟϒ࣮૷
   

   View Slide

6. HTML 5.1 working draft:

   srcset ଐੑ & sizes ଐੑ
   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" />
   
   • sizes = "(ϝσΟΞΫΤϦ) ը૾͕઎ΊΔදࣔྖҬͷׂ߹"
   • vw = Viewport Width
   

   View Slide

7. 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/
   

   View Slide

8. WordPress΁ͷ
   ϨεϙϯγϒɾΠϝʔδͷ
   ࣮૷
   

   View Slide

9. View Slide

10. View Slide

11. ܦҢ
    • 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
    

    View Slide

12. 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/
    

    View Slide

13. ಋೖํ๏
    • ϓϥάΠϯɿΠϯετʔϧͯ͠༗ޮԽ͢Δͩ
    ͚ͰOK
    • 4.4ɿσϑΥϧτͰ༗ޮԽ͞Ε͍ͯΔ
    • ઐ༻ͷઃఆը໘ɾ߲໨ͳͲ͸ແ͠
    • Ϣʔβʔ͕৽ͨʹֶͿඞཁ͕͋Δૢ࡞͸ແ͠
    

    View Slide

14. ࢓૊Έ
    • the_content ϑΟϧλʔΛར༻ͯ͠ img ʹ srcset ͱ sizes ͕௥Ճ͞Ε
    Δ
    • /wp-uploads/ ʹଘࡏ͢Δը૾ʹͷΈద༻
    • ಉ͡ൺ཰ͷόϦΤʔγϣϯ͕ଘࡏ͢Δ৔߹ʹͷΈద༻
    • ҎલʹΞοϓ͞Εͨը૾ʹ΋ద༻͞ΕΔ
    • ΪϟϥϦʔͷը૾΍ɺαϜωΠϧը૾ʢthe_post_thumbnail() ౳ʣʹ
    ΋ద༻͞ΕΔ
    • ϙϦϑΟϧ͸ Picturefill 2.3.1
    

    View Slide

15. //ϓϥάΠϯ͋Γ
    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" />
    // ϓϥάΠϯͳ͠
    class="alignnone size-large wp-image-12"
    src="~/K5TM2883_LR5-1024x678.jpg"
    alt="K5TM2883_LR5" width="660" height="437" />
    ग़ྗ͞ΕΔίʔυ
    

    View Slide

16. ࣮૷͢ΔࡍͷϙΠϯτ
    • ͔͠͠ɺϨεϙϯγϒɾΠϝʔδΛΑΓޮՌ
    తʹ࣮૷͢Δʹ͸ɺͳ͔ͳ͔೉͍͠…
    • Ξοϓϩʔυ͢Δը૾ͷαΠζͱɺࣗಈੜ
    ੒͞ΕΔը૾ͷόϦΤʔγϣϯͷݟ௚͠
    • sizes ଐੑͷద੾ͳઃఆ
    

    View Slide

17. Ξοϓϩʔυ͢Δը૾ͷαΠζͱɺࣗಈ
    ੜ੒͞ΕΔը૾ͷόϦΤʔγϣϯͷݟ௚͠
    • ݕ౼͠ͳ͚Ε͹ͳΒͳ͍ཁҼ͕ଟ͍ʂ
    • ϑϧαΠζɺେɺதɺαϜωΠϧ͚ͩͰ଍ΓΔͷ
    ͔ʁ
    • ֤ϒϨΠΫϙΠϯτʹ͓͚Δը૾ͷ࠷େ෯͸ʁ
    • ϑΝΠϧαΠζ͸ʁ
    • ϑΝΠϧ਺͸ʁ
    

    View Slide

18. sizes ଐੑͷద੾ͳઃఆ
    • ֤ςʔϚʹ͓͚Δɺશͯͷը૾ͷϝσΟΞΫ
    ΤϦʔͱ෯σεΫϦϓλΛࣗಈతʹऔಘ͢Δ
    ࣄ͕Ͱ͖ͳ͍
    • (max-width: {{image-width}}) 100vw,
    {{image-width}}
    • ద੾ͳ sizes ͷઃఆΛߦ͏ඞཁ͕͋Δ
    

    View Slide

19. 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 );
    

    View Slide

20. 4.4 Ͱ͸Ͱ͖ͳ͍͜ͱ
    • Imagick Λར༻ͨ͠ΑΓߴ඼࣭͔ͭޮՌతͳը૾ͷ
    ϦαΠζػೳʢAdvanced Image Compressionʣ

    㱺ɹ4.4ͰͷϚʔδ͸ݟૹΓ
    • srcset ଐੑͷ x σεΫϦϓλ΍ɺΞʔτσΟϨΫγϣ
    ϯʹ޲͍͍ͯΔ picture ཁૉͱ source ཁૉ͸ະରԠ

    ɹ㱺ɹࠓޙͷ։ൃ࣍ୈ
    

    View Slide

21. ·ͩ·ͩઈࢍ։ൃத…ʂ
    • 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)
    

    View Slide

22. 24.8+%
    of the web
    

    View Slide

23. Thank you!
    @waviaei

    http://waviaei.com

    waviaei@gmail.com
    

    View Slide