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

    [email protected]

    View Slide