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

Toru Miki Toru / @waviaei • WordPress Community • ೔ຊޠ൛΍CodexɺWordCamp౳ͷΠϕϯτͰͷ຋༁ɾ௨༁ • ίΞ΁ͷίϛοτ • WordCamp Tokyo 2011 ࣮ߦҕһ௕ • WordPress Meetup Tokyo ڞಉΦʔΨφΠβʔ
 http://www.meetup.com/WordPress-Meetup-Tokyo/ • ࢓ࣄ • ςϯϓϧେֶδϟύϯΩϟϯύεɹŖɹ΢ΣϒαΠτͷӡӦɾߏங

No content

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

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

HTML 5.1 working draft:
 srcset ଐੑ & sizes ଐੑ • sizes = "(ϝσΟΞΫΤϦ) ը૾͕઎ΊΔදࣔྖҬͷׂ߹" • vw = Viewport Width

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/

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

No content

No content

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

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/

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

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

//ϓϥάΠϯ͋Γ // ϓϥάΠϯͳ͠ ग़ྗ͞ΕΔίʔυ

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

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

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

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

4.4 Ͱ͸Ͱ͖ͳ͍͜ͱ • Imagick Λར༻ͨ͠ΑΓߴ඼࣭͔ͭޮՌతͳը૾ͷ ϦαΠζػೳʢAdvanced Image Compressionʣ
 㱺ɹ4.4ͰͷϚʔδ͸ݟૹΓ • srcset ଐੑͷ x σεΫϦϓλ΍ɺΞʔτσΟϨΫγϣ ϯʹ޲͍͍ͯΔ picture ཁૉͱ source ཁૉ͸ະରԠ
 ɹ㱺ɹࠓޙͷ։ൃ࣍ୈ

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

24.8+% of the web

Thank you! @waviaei
 http://waviaei.com
 [email protected]