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

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

Edd44584a6d94211d9b7b33b57e4a875?s=47 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 属性についておさらいしておくことをオススメします。

Edd44584a6d94211d9b7b33b57e4a875?s=128

Toru

October 31, 2015
Tweet

Transcript

  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. None
  4. ϨεϙϯγϒɾΠϝʔδ ͷ͓͞Β͍

  5. Ϩεϙϯγϒɾ΢ΣϒσβΠϯ ʹ͓͚Δը૾ͷ໰୊ • ՝୊ • ֤छ৚݅ʹ߹͏Α͏࡞੒͞Εͨը૾Λɺ৚݅ʹԠͯ͡ɺඞཁͳ ը૾ͷΈऔಘͯ͠ද͍ࣔͨ͠ • ղܾࡦ •

    ϨεϙϯγϒɾΠϝʔδ • ղܾࡦͷ࣮૷खஈͷ1ͭ • HTMLͷ࢓༷ͱɺϒϥ΢βͷαϙʔτʹΑΔωΠςΟϒ࣮૷
  6. 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
  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/
  8. WordPress΁ͷ ϨεϙϯγϒɾΠϝʔδͷ ࣮૷

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

  14. ࢓૊Έ • the_content ϑΟϧλʔΛར༻ͯ͠ img ʹ srcset ͱ sizes ͕௥Ճ͞Ε

    Δ • /wp-uploads/ ʹଘࡏ͢Δը૾ʹͷΈద༻ • ಉ͡ൺ཰ͷόϦΤʔγϣϯ͕ଘࡏ͢Δ৔߹ʹͷΈద༻ • ҎલʹΞοϓ͞Εͨը૾ʹ΋ద༻͞ΕΔ • ΪϟϥϦʔͷը૾΍ɺαϜωΠϧը૾ʢthe_post_thumbnail() ౳ʣʹ ΋ద༻͞ΕΔ • ϙϦϑΟϧ͸ Picturefill 2.3.1
  15. //ϓϥάΠϯ͋Γ <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" /> ग़ྗ͞ΕΔίʔυ
  16. ࣮૷͢ΔࡍͷϙΠϯτ • ͔͠͠ɺϨεϙϯγϒɾΠϝʔδΛΑΓޮՌ తʹ࣮૷͢Δʹ͸ɺͳ͔ͳ͔೉͍͠… • Ξοϓϩʔυ͢Δը૾ͷαΠζͱɺࣗಈੜ ੒͞ΕΔը૾ͷόϦΤʔγϣϯͷݟ௚͠ • sizes ଐੑͷద੾ͳઃఆ

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

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

    {{image-width}} • ద੾ͳ sizes ͷઃఆΛߦ͏ඞཁ͕͋Δ
  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 );
  20. 4.4 Ͱ͸Ͱ͖ͳ͍͜ͱ • Imagick Λར༻ͨ͠ΑΓߴ඼࣭͔ͭޮՌతͳը૾ͷ ϦαΠζػೳʢAdvanced Image Compressionʣ
 㱺ɹ4.4ͰͷϚʔδ͸ݟૹΓ •

    srcset ଐੑͷ x σεΫϦϓλ΍ɺΞʔτσΟϨΫγϣ ϯʹ޲͍͍ͯΔ picture ཁૉͱ source ཁૉ͸ະରԠ
 ɹ㱺ɹࠓޙͷ։ൃ࣍ୈ
  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)
  22. 24.8+% of the web

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