Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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/

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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/

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

24.8+% of the web

Slide 23

Slide 23 text

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