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

最強の購入体験を実現するための画像ダイナミックチューニング
BASE 株式会社
竜口 朋恩
ImageFlux meetup #2 — 2018-09-25

Transcript

1. ࠷ڧͷߪೖମݧΛ࣮ݱ͢ΔͨΊͷ ը૾μΠφϛοΫνϡʔχϯά 2018/09/25 BASE גࣜձࣾ ཽޱ ๎Ը !1
2. ࣗݾ঺հ - ཽޱ ๎Ը - BASEגࣜձࣾ - iOS ΤϯδχΞ !2
3. ֓ཁ - ImageFluxಋೖ - ը૾දࣔվળ - WebP - αΠζ - ը࣭ !3
4. ImageFluxಋೖ !4
5. ϓϩμΫτʹ͍ͭͯ - EίϚʔεϓϥοτϑΥʔϜʮBASEʯ - 50ສళฮ͕ར༻͢Δωοτγϣοϓ࡞੒αʔϏε - 400ສϢʔβʔ͕ར༻͢ΔγϣοϐϯάΞϓϦ - 50ສళฮ͔Βొ࿥͞ΕΔେྔͷ঎඼Λ400ສϢʔβʔʹ࠷଎Ͱಧ ͚Δඞཁ͕͋Δ !5 ωοτγϣοϓ࡞੒αʔϏεʮBASEʯ γϣοϐϯάΞϓϦʮBASEʯ
6. ࠓ·Ͱ: ࢓૊Έ - ্͛ΒΕͨը૾ʹରͯ͠αϜωΠϧ༻ͳͲෳ਺ຕͷը૾Λੜ੒ - ClientଆͰෳ਺͋Δը૾URLͷத͔Βద੾ͳͷΛબΜͰදࣔ γϣοϓΦʔφʔ༷ web server Amazon S3 AWS Lambda Amazon RDS ϒϥ΢βɾΞϓϦ ᶃը૾ΛΞοϓϩʔυ ᶄը૾ΛS3ʹอଘ ᶅLambdaΛىಈ ᶆαϜωΠϧΛੜ੒ɾอଘ ᶇαϜωΠϧ৘ใΛDBʹ อଘ ᶈ঎඼ը૾ͷURLΛϦΫΤετ ᶉS3͔Βը૾Λऔಘ !6
7. ࠓ·Ͱ: ࢓૊Έ - ্͛ΒΕͨը૾ʹରͯ͠αϜωΠϧ༻ͳͲෳ਺ຕͷը૾Λੜ੒ - ClientଆͰෳ਺͋Δը૾URLͷத͔Βద੾ͳͷΛબΜͰදࣔ γϣοϓΦʔφʔ༷ web server Amazon S3 AWS Lambda Amazon RDS ϒϥ΢βɾΞϓϦ ᶃը૾ΛΞοϓϩʔυ ᶄը૾ΛS3ʹอଘ ᶅLambdaΛىಈ ᶆαϜωΠϧΛੜ੒ɾอଘ ᶇαϜωΠϧ৘ใΛDBʹ อଘ ᶈ঎඼ը૾ͷURLΛϦΫΤετ ᶉS3͔Βը૾Λऔಘ !7
8. ࠓ·Ͱ: ࢓૊Έ - ্͛ΒΕͨը૾ʹରͯ͠αϜωΠϧ༻ͳͲෳ਺ຕͷը૾Λੜ੒ - ClientଆͰෳ਺͋Δը૾URLͷத͔Βద੾ͳͷΛબΜͰදࣔ γϣοϓΦʔφʔ༷ web server Amazon S3 AWS Lambda Amazon RDS ϒϥ΢βɾΞϓϦ ᶃը૾ΛΞοϓϩʔυ ᶄը૾ΛS3ʹอଘ ᶅLambdaΛىಈ ᶆαϜωΠϧΛੜ੒ɾอଘ ᶇαϜωΠϧ৘ใΛDBʹ อଘ ᶈ঎඼ը૾ͷURLΛϦΫΤετ ᶉS3͔Βը૾Λऔಘ !8
9. ࠓ·Ͱ: ࢓૊Έ - ্͛ΒΕͨը૾ʹରͯ͠αϜωΠϧ༻ͳͲෳ਺ຕͷը૾Λੜ੒ - ClientଆͰෳ਺͋Δը૾URLͷத͔Βద੾ͳͷΛબΜͰදࣔ γϣοϓΦʔφʔ༷ web server Amazon S3 AWS Lambda Amazon RDS ϒϥ΢βɾΞϓϦ ᶃը૾ΛΞοϓϩʔυ ᶄը૾ΛS3ʹอଘ ᶅLambdaΛىಈ ᶆαϜωΠϧΛੜ੒ɾอଘ ᶇαϜωΠϧ৘ใΛDBʹ อଘ ᶈ঎඼ը૾ͷURLΛϦΫΤετ ᶉS3͔Βը૾Λऔಘ !9
10. ࠓ·Ͱ: ࢓૊Έ - ্͛ΒΕͨը૾ʹରͯ͠αϜωΠϧ༻ͳͲෳ਺ຕͷը૾Λੜ੒ - ClientଆͰෳ਺͋Δը૾URLͷத͔Βద੾ͳͷΛબΜͰදࣔ γϣοϓΦʔφʔ༷ web server Amazon S3 AWS Lambda Amazon RDS ϒϥ΢βɾΞϓϦ ᶃը૾ΛΞοϓϩʔυ ᶄը૾ΛS3ʹอଘ ᶅLambdaΛىಈ ᶆαϜωΠϧΛੜ੒ɾอଘ ᶇαϜωΠϧ৘ใΛDBʹ อଘ ᶈ঎඼ը૾ͷURLΛϦΫΤετ ᶉS3͔Βը૾Λऔಘ !10
11. ࠓ·Ͱ: ࢒೦ͳͱ͜Ζ - ్த͔Βը૾Λ૿΍ͤͳ͍ - ҆ఆͯ͠ͳ͍ͷେม γϣοϓΦʔφʔ༷ web server Amazon S3 AWS Lambda Amazon RDS ϒϥ΢βɾΞϓϦ ᶃը૾ΛΞοϓϩʔυ ᶄը૾ΛS3ʹอଘ ᶅLambdaΛىಈ ᶆαϜωΠϧΛੜ੒ɾอଘ ᶇαϜωΠϧ৘ใΛDBʹ อଘ ᶈ঎඼ը૾ͷURLΛϦΫΤετ ᶉS3͔Βը૾Λऔಘ !11
12. ಋೖޙ: ࢓૊Έ - ্͛ΒΕͨը૾σʔλΛImageFluxʹొ࿥ͯ͠׬ྃ - API͔ΒHost/PathΛऔಘͯ͠αΠζ౳͸ClientͰಈతʹࢦఆ γϣοϓΦʔφʔ༷ web server Amazon S3 ϒϥ΢βɾΞϓϦ ᶃը૾ΛΞοϓϩʔυ ᶄը૾ΛS3ʹอଘ ᶅ঎඼ը૾ΛΫΤϦ෇͖Ͱ ϦΫΤετ ᶇS3͔ΒΦϦδφϧը૾ Λऔಘ ᶆΫΤϦΛImageFlux΁౉͢ !12
13. ಋೖޙ: ࢓૊Έ - ্͛ΒΕͨը૾σʔλΛImageFluxʹొ࿥ͯ͠׬ྃ - API͔ΒHost/PathΛऔಘͯ͠αΠζ౳͸ClientͰಈతʹࢦఆ !13 γϣοϓΦʔφʔ༷ web server Amazon S3 ϒϥ΢βɾΞϓϦ ᶃը૾ΛΞοϓϩʔυ ᶄը૾ΛS3ʹอଘ ᶅ঎඼ը૾ΛΫΤϦ෇͖Ͱ ϦΫΤετ ᶇS3͔ΒΦϦδφϧը૾ Λऔಘ ᶆΫΤϦΛImageFlux΁౉͢
14. ಋೖޙ: ࢓૊Έ - ্͛ΒΕͨը૾σʔλΛImageFluxʹొ࿥ͯ͠׬ྃ - API͔ΒHost/PathΛऔಘͯ͠αΠζ౳͸ClientͰಈతʹࢦఆ !14 γϣοϓΦʔφʔ༷ web server Amazon S3 ϒϥ΢βɾΞϓϦ ᶃը૾ΛΞοϓϩʔυ ᶄը૾ΛS3ʹอଘ ᶅ঎඼ը૾ΛΫΤϦ෇͖Ͱ ϦΫΤετ ᶇS3͔ΒΦϦδφϧը૾ Λऔಘ ᶆΫΤϦΛImageFlux΁౉͢
15. ಋೖޙ: վળ͞Εͨ͜ͱ - ը૾1ຕ͋Ε͹QueryͰ༷ʑͳαΠζʹม׵Ͱ͖Δ - ҆ఆͯ͠·͢ʂʂʂ !15 γϣοϓΦʔφʔ༷ web server Amazon S3 ϒϥ΢βɾΞϓϦ ᶃը૾ΛΞοϓϩʔυ ᶄը૾ΛS3ʹอଘ ᶅ঎඼ը૾ΛΫΤϦ෇͖Ͱ ϦΫΤετ ᶇS3͔ΒΦϦδφϧը૾ Λऔಘ ᶆΫΤϦΛImageFlux΁౉͢
16. ը૾දࣔվળ !16
17. ՝୊ - Wi-Fi؀ڥԼͰ͸αΫαΫݟΕΔ͕ిं಺ͱ͔ͩͱ࢖͍෺ ʹͳΒͣߪೖମݧͱͯ͠ྑ͘ͳ͍ - ࣮ࡍʹ঎඼ը૾Λදࣔ͢Δͷʹ6ඵҎ্͔͔Δ͜ͱ͕͋Δ !17
18. !18
19. ը૾දࣔվળ 1. WebP !19
20. WebPͱ͸ʁ - Google͕࡞ͬͨը૾ϑΥʔϚοτ - ը࣭Λେ͖͘མͱͣ͞༰ྔΛখ͘͢͞Δ WebP: 113KB ඇWebP: 250KB !20
21. WebP: ରԠ - ImageFlux͸Query଍͚ͩ͢ʂʂʂ - ΫϥΠΞϯτଆͰWebPը૾ΛදࣔͰ͖ΔΑ͏ʹ͢Δ https://test.net/c/ /test.jpg f=webp:jpeg !21
22. !22
23. ը૾දࣔվળ 2. ը૾αΠζ࠷దԽ !23
24. εϚϗͬͯαΠζ͍ͬͺ͍ !24
25. αΠζ [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
26. αΠζ [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 !26
27. 5ܥ࠷దαΠζ XS Max࠷దαΠζ !27
28. ͳͷͰαΠζΛ࠷దԽ !28
29. ୺຤ [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ద༻ࡁΈ
30. ը૾αΠζ࠷దԽ: ରԠ - ImageFluxͰQuery଍͚ͩ͢ʂʂʂ https://test.net/c/ /test.jpg w=640,h=640 !30
31. !31
32. ը૾࠷దԽ 3. ը࣭࠷దԽ !32
33. ը࣭͸࠷ߴͷঢ়ଶͰग़͍ͨ͠ !33
34. දࣔ͞Εͳ͔ͬͨΒҙຯͳ͍ !34
35. ճઢ଎౓ʹΑͬͯը࣭Λௐ੔ !35
36. ճઢ଎౓ͷଌఆ - ಛఆͷը૾ΛಡΈࠐΈɺͦͷ଎౓Λଌఆ - ଎౓͕ᮢ஋ʹରͯ͠ྼΔ৔߹ɺը࣭ͷௐ੔Λߦ͏ !36
37. ը࣭࠷దԽ: ରԠ - ImageFluxͰQuery଍͚ͩ͢ʂʂʂ https://test.net/c/ /test.jpg q=30 q=75, 196KB q=50, 35KB q=10, 16KB !37 ※WebPద༻ࡁΈ
38. !38
39. ·ͱΊ - WebPͰը૾αΠζΛܰ͘ʂʂ - ը૾αΠζΛ୺຤ͷղ૾౓ʹ࠷దԽʂʂ - ճઢ͕஗͍ਓʹը࣭ௐ੔ʂʂ https://test.net/c/ /test.jpg f=webp:jpeg,w=750,h=750,q=50 !39
40. !40
41. !41
42. ΤϯδχΞืू͍ͯ͠·͢ʂ - WebΞϓϦέʔγϣϯΤϯδχΞʢPHP,CakePHPʣ - ϞόΠϧΤϯδχΞʢAndroidʣ - ػցֶशΤϯδχΞ - SRE !42
43. ςοΫϒϩά΋ͥͻνΣοΫ͍ͯͩ͘͠͞ʂ !43 - ʮBASE։ൃνʔϜϒϩάʯʢ͸ͯͳʣ https://devblog.thebase.in/
44. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂʂ !44