Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
最高の購入体験を実現するための画像ダイナミックチューニング / ImageFlux meetu...
Search
ImageFlux
October 12, 2018
Technology
3
18k
最高の購入体験を実現するための画像ダイナミックチューニング / ImageFlux meetup - Guest session #1
最強の購入体験を実現するための画像ダイナミックチューニング
BASE 株式会社
竜口 朋恩
ImageFlux meetup #2
— 2018-09-25
ImageFlux
October 12, 2018
Tweet
Share
More Decks by ImageFlux
See All by ImageFlux
ImageFluxについて / CAMPHOR- 2021-12-18
imageflux
0
620
画像処理サービスを作る際の落とし穴をImageFluxではいかにして超えてきたか / ImageFlux meetup #4 (5)
imageflux
1
3.4k
Webサービスにおける画像変換の実践 / ImageFlux meetup - hands-on
imageflux
2
18k
ImageFlux Live Streamingでサービス開発に集中する / ImageFlux meetup #2 - Guest Session #3
imageflux
0
5.8k
ImageFlux Live Streamingについて
imageflux
0
32k
ImageFlux Updates 2018
imageflux
2
1.4k
ピクシブの大規模ライブ配信 / ImageFlux Live
imageflux
6
11k
Other Decks in Technology
See All in Technology
トヨタ生産方式(TPS)入門
recruitengineers
PRO
1
150
アジャイルテストで高品質のスプリントレビューを
takesection
0
110
LLMエージェント時代に適応した開発フロー
hiragram
1
400
帳票Vibe Coding
terurou
0
140
我々は雰囲気で仕事をしている / How can we do vibe coding as well
naospon
2
220
第4回 関東Kaggler会 [Training LLMs with Limited VRAM]
tascj
12
1.6k
あなたの知らない OneDrive
murachiakira
0
230
[CVPR2025論文読み会] Linguistics-aware Masked Image Modelingfor Self-supervised Scene Text Recognition
s_aiueo32
0
210
実践アプリケーション設計 ③ドメイン駆動設計
recruitengineers
PRO
1
110
浸透しなさいRFC 5322&7208
hinono
0
110
Observability for LLM Application lifecycle
ivry_presentationmaterials
1
240
Browser
recruitengineers
PRO
3
200
Featured
See All Featured
RailsConf 2023
tenderlove
30
1.2k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Statistics for Hackers
jakevdp
799
220k
Documentation Writing (for coders)
carmenintech
73
5k
Balancing Empowerment & Direction
lara
2
580
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
How GitHub (no longer) Works
holman
315
140k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Writing Fast Ruby
sferik
628
62k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Faster Mobile Websites
deanohume
309
31k
Transcript
࠷ڧͷߪೖମݧΛ࣮ݱ͢ΔͨΊͷ ը૾μΠφϛοΫνϡʔχϯά 2018/09/25 BASE גࣜձࣾ ཽޱ ๎Ը !1
ࣗݾհ - ཽޱ ๎Ը - BASEגࣜձࣾ - iOS ΤϯδχΞ !2
֓ཁ - ImageFluxಋೖ - ը૾දࣔվળ - WebP - αΠζ -
ը࣭ !3
ImageFluxಋೖ !4
ϓϩμΫτʹ͍ͭͯ - EίϚʔεϓϥοτϑΥʔϜʮBASEʯ - 50ສళฮ͕ར༻͢Δωοτγϣοϓ࡞αʔϏε - 400ສϢʔβʔ͕ར༻͢ΔγϣοϐϯάΞϓϦ - 50ສళฮ͔Βొ͞ΕΔେྔͷΛ400ສϢʔβʔʹ࠷Ͱಧ ͚Δඞཁ͕͋Δ
!5 ωοτγϣοϓ࡞αʔϏεʮBASEʯ γϣοϐϯάΞϓϦʮBASEʯ
ࠓ·Ͱ: Έ - ্͛ΒΕͨը૾ʹରͯ͠αϜωΠϧ༻ͳͲෳຕͷը૾Λੜ - ClientଆͰෳ͋Δը૾URLͷத͔ΒదͳͷΛબΜͰදࣔ γϣοϓΦʔφʔ༷ web server Amazon
S3 AWS Lambda Amazon RDS ϒϥβɾΞϓϦ ᶃը૾ΛΞοϓϩʔυ ᶄը૾ΛS3ʹอଘ ᶅLambdaΛىಈ ᶆαϜωΠϧΛੜɾอଘ ᶇαϜωΠϧใΛDBʹ อଘ ᶈը૾ͷURLΛϦΫΤετ ᶉS3͔Βը૾Λऔಘ !6
ࠓ·Ͱ: Έ - ্͛ΒΕͨը૾ʹରͯ͠αϜωΠϧ༻ͳͲෳຕͷը૾Λੜ - ClientଆͰෳ͋Δը૾URLͷத͔ΒదͳͷΛબΜͰදࣔ γϣοϓΦʔφʔ༷ web server Amazon
S3 AWS Lambda Amazon RDS ϒϥβɾΞϓϦ ᶃը૾ΛΞοϓϩʔυ ᶄը૾ΛS3ʹอଘ ᶅLambdaΛىಈ ᶆαϜωΠϧΛੜɾอଘ ᶇαϜωΠϧใΛDBʹ อଘ ᶈը૾ͷURLΛϦΫΤετ ᶉS3͔Βը૾Λऔಘ !7
ࠓ·Ͱ: Έ - ্͛ΒΕͨը૾ʹରͯ͠αϜωΠϧ༻ͳͲෳຕͷը૾Λੜ - ClientଆͰෳ͋Δը૾URLͷத͔ΒదͳͷΛબΜͰදࣔ γϣοϓΦʔφʔ༷ web server Amazon
S3 AWS Lambda Amazon RDS ϒϥβɾΞϓϦ ᶃը૾ΛΞοϓϩʔυ ᶄը૾ΛS3ʹอଘ ᶅLambdaΛىಈ ᶆαϜωΠϧΛੜɾอଘ ᶇαϜωΠϧใΛDBʹ อଘ ᶈը૾ͷURLΛϦΫΤετ ᶉS3͔Βը૾Λऔಘ !8
ࠓ·Ͱ: Έ - ্͛ΒΕͨը૾ʹରͯ͠αϜωΠϧ༻ͳͲෳຕͷը૾Λੜ - ClientଆͰෳ͋Δը૾URLͷத͔ΒదͳͷΛબΜͰදࣔ γϣοϓΦʔφʔ༷ web server Amazon
S3 AWS Lambda Amazon RDS ϒϥβɾΞϓϦ ᶃը૾ΛΞοϓϩʔυ ᶄը૾ΛS3ʹอଘ ᶅLambdaΛىಈ ᶆαϜωΠϧΛੜɾอଘ ᶇαϜωΠϧใΛDBʹ อଘ ᶈը૾ͷURLΛϦΫΤετ ᶉS3͔Βը૾Λऔಘ !9
ࠓ·Ͱ: Έ - ্͛ΒΕͨը૾ʹରͯ͠αϜωΠϧ༻ͳͲෳຕͷը૾Λੜ - ClientଆͰෳ͋Δը૾URLͷத͔ΒదͳͷΛબΜͰදࣔ γϣοϓΦʔφʔ༷ web server Amazon
S3 AWS Lambda Amazon RDS ϒϥβɾΞϓϦ ᶃը૾ΛΞοϓϩʔυ ᶄը૾ΛS3ʹอଘ ᶅLambdaΛىಈ ᶆαϜωΠϧΛੜɾอଘ ᶇαϜωΠϧใΛDBʹ อଘ ᶈը૾ͷURLΛϦΫΤετ ᶉS3͔Βը૾Λऔಘ !10
ࠓ·Ͱ: ೦ͳͱ͜Ζ - ్த͔Βը૾Λ૿ͤͳ͍ - ҆ఆͯ͠ͳ͍ͷେม γϣοϓΦʔφʔ༷ web server Amazon
S3 AWS Lambda Amazon RDS ϒϥβɾΞϓϦ ᶃը૾ΛΞοϓϩʔυ ᶄը૾ΛS3ʹอଘ ᶅLambdaΛىಈ ᶆαϜωΠϧΛੜɾอଘ ᶇαϜωΠϧใΛDBʹ อଘ ᶈը૾ͷURLΛϦΫΤετ ᶉS3͔Βը૾Λऔಘ !11
ಋೖޙ: Έ - ্͛ΒΕͨը૾σʔλΛImageFluxʹొͯྃ͠ - API͔ΒHost/PathΛऔಘͯ͠αΠζClientͰಈతʹࢦఆ γϣοϓΦʔφʔ༷ web server Amazon
S3 ϒϥβɾΞϓϦ ᶃը૾ΛΞοϓϩʔυ ᶄը૾ΛS3ʹอଘ ᶅը૾ΛΫΤϦ͖Ͱ ϦΫΤετ ᶇS3͔ΒΦϦδφϧը૾ Λऔಘ ᶆΫΤϦΛImageFlux͢ !12
ಋೖޙ: Έ - ্͛ΒΕͨը૾σʔλΛImageFluxʹొͯྃ͠ - API͔ΒHost/PathΛऔಘͯ͠αΠζClientͰಈతʹࢦఆ !13 γϣοϓΦʔφʔ༷ web server
Amazon S3 ϒϥβɾΞϓϦ ᶃը૾ΛΞοϓϩʔυ ᶄը૾ΛS3ʹอଘ ᶅը૾ΛΫΤϦ͖Ͱ ϦΫΤετ ᶇS3͔ΒΦϦδφϧը૾ Λऔಘ ᶆΫΤϦΛImageFlux͢
ಋೖޙ: Έ - ্͛ΒΕͨը૾σʔλΛImageFluxʹొͯྃ͠ - API͔ΒHost/PathΛऔಘͯ͠αΠζClientͰಈతʹࢦఆ !14 γϣοϓΦʔφʔ༷ web server
Amazon S3 ϒϥβɾΞϓϦ ᶃը૾ΛΞοϓϩʔυ ᶄը૾ΛS3ʹอଘ ᶅը૾ΛΫΤϦ͖Ͱ ϦΫΤετ ᶇS3͔ΒΦϦδφϧը૾ Λऔಘ ᶆΫΤϦΛImageFlux͢
ಋೖޙ: վળ͞Εͨ͜ͱ - ը૾1ຕ͋ΕQueryͰ༷ʑͳαΠζʹมͰ͖Δ - ҆ఆͯ͠·͢ʂʂʂ !15 γϣοϓΦʔφʔ༷ web server
Amazon S3 ϒϥβɾΞϓϦ ᶃը૾ΛΞοϓϩʔυ ᶄը૾ΛS3ʹอଘ ᶅը૾ΛΫΤϦ͖Ͱ ϦΫΤετ ᶇS3͔ΒΦϦδφϧը૾ Λऔಘ ᶆΫΤϦΛImageFlux͢
ը૾දࣔվળ !16
՝ - Wi-FiڥԼͰαΫαΫݟΕΔ͕ిंͱ͔ͩͱ͍ ʹͳΒͣߪೖମݧͱͯ͠ྑ͘ͳ͍ - ࣮ࡍʹը૾Λදࣔ͢Δͷʹ6ඵҎ্͔͔Δ͜ͱ͕͋Δ !17
!18
ը૾දࣔվળ 1. WebP !19
WebPͱʁ - Google͕࡞ͬͨը૾ϑΥʔϚοτ - ը࣭Λେ͖͘མͱͣ͞༰ྔΛখ͘͢͞Δ WebP: 113KB ඇWebP: 250KB !20
WebP: ରԠ - ImageFluxQuery͚ͩ͢ʂʂʂ - ΫϥΠΞϯτଆͰWebPը૾ΛදࣔͰ͖ΔΑ͏ʹ͢Δ https://test.net/c/ /test.jpg f=webp:jpeg !21
!22
ը૾දࣔվળ 2. ը૾αΠζ࠷దԽ !23
εϚϗͬͯαΠζ͍ͬͺ͍ !24
αΠζ [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
αΠζ [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
5ܥ࠷దαΠζ XS Max࠷దαΠζ !27
ͳͷͰαΠζΛ࠷దԽ !28
[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ద༻ࡁΈ
ը૾αΠζ࠷దԽ: ରԠ - ImageFluxͰQuery͚ͩ͢ʂʂʂ https://test.net/c/ /test.jpg w=640,h=640 !30
!31
ը૾࠷దԽ 3. ը࣭࠷దԽ !32
ը࣭࠷ߴͷঢ়ଶͰग़͍ͨ͠ !33
දࣔ͞Εͳ͔ͬͨΒҙຯͳ͍ !34
ճઢʹΑͬͯը࣭Λௐ !35
ճઢͷଌఆ - ಛఆͷը૾ΛಡΈࠐΈɺͦͷΛଌఆ - ͕ᮢʹରͯ͠ྼΔ߹ɺը࣭ͷௐΛߦ͏ !36
ը࣭࠷దԽ: ରԠ - ImageFluxͰQuery͚ͩ͢ʂʂʂ https://test.net/c/ /test.jpg q=30 q=75, 196KB q=50,
35KB q=10, 16KB !37 ※WebPద༻ࡁΈ
!38
·ͱΊ - WebPͰը૾αΠζΛܰ͘ʂʂ - ը૾αΠζΛͷղ૾ʹ࠷దԽʂʂ - ճઢ͕͍ਓʹը࣭ௐʂʂ https://test.net/c/ /test.jpg f=webp:jpeg,w=750,h=750,q=50
!39
!40
!41
ΤϯδχΞืू͍ͯ͠·͢ʂ - WebΞϓϦέʔγϣϯΤϯδχΞʢPHP,CakePHPʣ - ϞόΠϧΤϯδχΞʢAndroidʣ - ػցֶशΤϯδχΞ - SRE !42
ςοΫϒϩάͥͻνΣοΫ͍ͯͩ͘͠͞ʂ !43 - ʮBASE։ൃνʔϜϒϩάʯʢͯͳʣ https://devblog.thebase.in/
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂʂ !44