最高の購入体験を実現するための画像ダイナミックチューニング / ImageFlux meetup - Guest session #1

by ImageFlux

Slide 1

Slide 1 text

࠷ڧͷߪೖମݧΛ࣮ݱ͢ΔͨΊͷ ը૾μΠφϛοΫνϡʔχϯά 2018/09/25 BASE גࣜձࣾ ཽޱ ๎Ը !1

Slide 2

Slide 2 text

ࣗݾ঺հ - ཽޱ ๎Ը - BASEגࣜձࣾ - iOS ΤϯδχΞ !2

Slide 3

Slide 3 text

֓ཁ - ImageFluxಋೖ - ը૾දࣔվળ - WebP - αΠζ - ը࣭ !3

Slide 4

Slide 4 text

ImageFluxಋೖ !4

Slide 5

Slide 5 text

ϓϩμΫτʹ͍ͭͯ - EίϚʔεϓϥοτϑΥʔϜʮBASEʯ - 50ສళฮ͕ར༻͢Δωοτγϣοϓ࡞੒αʔϏε - 400ສϢʔβʔ͕ར༻͢ΔγϣοϐϯάΞϓϦ - 50ສళฮ͔Βొ࿥͞ΕΔେྔͷ঎඼Λ400ສϢʔβʔʹ࠷଎Ͱಧ ͚Δඞཁ͕͋Δ !5 ωοτγϣοϓ࡞੒αʔϏεʮBASEʯ γϣοϐϯάΞϓϦʮBASEʯ

Slide 6

Slide 6 text

ࠓ·Ͱ: ࢓૊Έ - ্͛ΒΕͨը૾ʹରͯ͠αϜωΠϧ༻ͳͲෳ਺ຕͷը૾Λੜ੒ - ClientଆͰෳ਺͋Δը૾URLͷத͔Βద੾ͳͷΛબΜͰදࣔ γϣοϓΦʔφʔ༷ web server Amazon S3 AWS Lambda Amazon RDS ϒϥ΢βɾΞϓϦ ᶃը૾ΛΞοϓϩʔυ ᶄը૾ΛS3ʹอଘ ᶅLambdaΛىಈ ᶆαϜωΠϧΛੜ੒ɾอଘ ᶇαϜωΠϧ৘ใΛDBʹ อଘ ᶈ঎඼ը૾ͷURLΛϦΫΤετ ᶉS3͔Βը૾Λऔಘ !6

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

ࠓ·Ͱ: ࢒೦ͳͱ͜Ζ - ్த͔Βը૾Λ૿΍ͤͳ͍ - ҆ఆͯ͠ͳ͍ͷେม γϣοϓΦʔφʔ༷ web server Amazon S3 AWS Lambda Amazon RDS ϒϥ΢βɾΞϓϦ ᶃը૾ΛΞοϓϩʔυ ᶄը૾ΛS3ʹอଘ ᶅLambdaΛىಈ ᶆαϜωΠϧΛੜ੒ɾอଘ ᶇαϜωΠϧ৘ใΛDBʹ อଘ ᶈ঎඼ը૾ͷURLΛϦΫΤετ ᶉS3͔Βը૾Λऔಘ !11

Slide 12

Slide 12 text

ಋೖޙ: ࢓૊Έ - ্͛ΒΕͨը૾σʔλΛImageFluxʹొ࿥ͯ͠׬ྃ - API͔ΒHost/PathΛऔಘͯ͠αΠζ౳͸ClientͰಈతʹࢦఆ γϣοϓΦʔφʔ༷ web server Amazon S3 ϒϥ΢βɾΞϓϦ ᶃը૾ΛΞοϓϩʔυ ᶄը૾ΛS3ʹอଘ ᶅ঎඼ը૾ΛΫΤϦ෇͖Ͱ ϦΫΤετ ᶇS3͔ΒΦϦδφϧը૾ Λऔಘ ᶆΫΤϦΛImageFlux΁౉͢ !12

Slide 13

Slide 13 text

ಋೖޙ: ࢓૊Έ - ্͛ΒΕͨը૾σʔλΛImageFluxʹొ࿥ͯ͠׬ྃ - API͔ΒHost/PathΛऔಘͯ͠αΠζ౳͸ClientͰಈతʹࢦఆ !13 γϣοϓΦʔφʔ༷ web server Amazon S3 ϒϥ΢βɾΞϓϦ ᶃը૾ΛΞοϓϩʔυ ᶄը૾ΛS3ʹอଘ ᶅ঎඼ը૾ΛΫΤϦ෇͖Ͱ ϦΫΤετ ᶇS3͔ΒΦϦδφϧը૾ Λऔಘ ᶆΫΤϦΛImageFlux΁౉͢

Slide 14

Slide 14 text

ಋೖޙ: ࢓૊Έ - ্͛ΒΕͨը૾σʔλΛImageFluxʹొ࿥ͯ͠׬ྃ - API͔ΒHost/PathΛऔಘͯ͠αΠζ౳͸ClientͰಈతʹࢦఆ !14 γϣοϓΦʔφʔ༷ web server Amazon S3 ϒϥ΢βɾΞϓϦ ᶃը૾ΛΞοϓϩʔυ ᶄը૾ΛS3ʹอଘ ᶅ঎඼ը૾ΛΫΤϦ෇͖Ͱ ϦΫΤετ ᶇS3͔ΒΦϦδφϧը૾ Λऔಘ ᶆΫΤϦΛImageFlux΁౉͢

Slide 15

Slide 15 text

ಋೖޙ: վળ͞Εͨ͜ͱ - ը૾1ຕ͋Ε͹QueryͰ༷ʑͳαΠζʹม׵Ͱ͖Δ - ҆ఆͯ͠·͢ʂʂʂ !15 γϣοϓΦʔφʔ༷ web server Amazon S3 ϒϥ΢βɾΞϓϦ ᶃը૾ΛΞοϓϩʔυ ᶄը૾ΛS3ʹอଘ ᶅ঎඼ը૾ΛΫΤϦ෇͖Ͱ ϦΫΤετ ᶇS3͔ΒΦϦδφϧը૾ Λऔಘ ᶆΫΤϦΛImageFlux΁౉͢

Slide 16

Slide 16 text

ը૾දࣔվળ !16

Slide 17

Slide 17 text

՝୊ - Wi-Fi؀ڥԼͰ͸αΫαΫݟΕΔ͕ిं಺ͱ͔ͩͱ࢖͍෺ ʹͳΒͣߪೖମݧͱͯ͠ྑ͘ͳ͍ - ࣮ࡍʹ঎඼ը૾Λදࣔ͢Δͷʹ6ඵҎ্͔͔Δ͜ͱ͕͋Δ !17

Slide 18

Slide 18 text

!18

Slide 19

Slide 19 text

ը૾දࣔվળ 1. WebP !19

Slide 20

Slide 20 text

WebPͱ͸ʁ - Google͕࡞ͬͨը૾ϑΥʔϚοτ - ը࣭Λେ͖͘མͱͣ͞༰ྔΛখ͘͢͞Δ WebP: 113KB ඇWebP: 250KB !20

Slide 21

Slide 21 text

WebP: ରԠ - ImageFlux͸Query଍͚ͩ͢ʂʂʂ - ΫϥΠΞϯτଆͰWebPը૾ΛදࣔͰ͖ΔΑ͏ʹ͢Δ https://test.net/c/ /test.jpg f=webp:jpeg !21

Slide 22

Slide 22 text

!22

Slide 23

Slide 23 text

ը૾දࣔվળ 2. ը૾αΠζ࠷దԽ !23

Slide 24

Slide 24 text

εϚϗͬͯαΠζ͍ͬͺ͍ !24

Slide 25

Slide 25 text

αΠζ [inch] ୺຤ [iPhone] ը໘αΠζ [ԣ*ॎ] Retina ϐΫηϧ[ԣ*ॎ] 4 5* 320*568 2 640*1136 4.7 6*/7/8 375*667 2 750*1334 5.5 *Plus 414*736 3 1080*1920 5.8 X/XS 375*812 3 1125*2436 6.1 XR 414*896 2 828*1792 6.5 XS Max 414*896 3 1242*2688 !25

Slide 26

Slide 26 text

Slide 27

Slide 27 text

5ܥ࠷దαΠζ XS Max࠷దαΠζ !27

Slide 28

Slide 28 text

ͳͷͰαΠζΛ࠷దԽ !28

Slide 29

Slide 29 text

୺຤ [iPhone] ࠷దαΠζ [ॎ*ԣ] ༰ྔ[KB] 5* 640*640 49 6*/7/8 750*750 60 *Plus 1080*1080 96 X/XS 1125*1125 102 XR 828*828 69 XS Max 1242*1242 113 !29 ※WebPద༻ࡁΈ

Slide 30

Slide 30 text

ը૾αΠζ࠷దԽ: ରԠ - ImageFluxͰQuery଍͚ͩ͢ʂʂʂ https://test.net/c/ /test.jpg w=640,h=640 !30

Slide 31

Slide 31 text

!31

Slide 32

Slide 32 text

ը૾࠷దԽ 3. ը࣭࠷దԽ !32

Slide 33

Slide 33 text

ը࣭͸࠷ߴͷঢ়ଶͰग़͍ͨ͠ !33

Slide 34

Slide 34 text

දࣔ͞Εͳ͔ͬͨΒҙຯͳ͍ !34

Slide 35

Slide 35 text

ճઢ଎౓ʹΑͬͯը࣭Λௐ੔ !35

Slide 36

Slide 36 text

ճઢ଎౓ͷଌఆ - ಛఆͷը૾ΛಡΈࠐΈɺͦͷ଎౓Λଌఆ - ଎౓͕ᮢ஋ʹରͯ͠ྼΔ৔߹ɺը࣭ͷௐ੔Λߦ͏ !36

Slide 37

Slide 37 text

ը࣭࠷దԽ: ରԠ - ImageFluxͰQuery଍͚ͩ͢ʂʂʂ https://test.net/c/ /test.jpg q=30 q=75, 196KB q=50, 35KB q=10, 16KB !37 ※WebPద༻ࡁΈ

Slide 38

Slide 38 text

!38

Slide 39

Slide 39 text

·ͱΊ - WebPͰը૾αΠζΛܰ͘ʂʂ - ը૾αΠζΛ୺຤ͷղ૾౓ʹ࠷దԽʂʂ - ճઢ͕஗͍ਓʹը࣭ௐ੔ʂʂ https://test.net/c/ /test.jpg f=webp:jpeg,w=750,h=750,q=50 !39

Slide 40

Slide 40 text

!40

Slide 41

Slide 41 text

!41

Slide 42

Slide 42 text

ΤϯδχΞืू͍ͯ͠·͢ʂ - WebΞϓϦέʔγϣϯΤϯδχΞʢPHP,CakePHPʣ - ϞόΠϧΤϯδχΞʢAndroidʣ - ػցֶशΤϯδχΞ - SRE !42

Slide 43

Slide 43 text

ςοΫϒϩά΋ͥͻνΣοΫ͍ͯͩ͘͠͞ʂ !43 - ʮBASE։ൃνʔϜϒϩάʯʢ͸ͯͳʣ https://devblog.thebase.in/

Slide 44

Slide 44 text

͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂʂ !44