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 meetup - Guest session #1
Search
ImageFlux
October 12, 2018
Technology
3
17k
最高の購入体験を実現するための画像ダイナミックチューニング / 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
490
画像処理サービスを作る際の落とし穴をImageFluxではいかにして超えてきたか / ImageFlux meetup #4 (5)
imageflux
1
2.9k
Webサービスにおける画像変換の実践 / ImageFlux meetup - hands-on
imageflux
2
18k
ImageFlux Live Streamingでサービス開発に集中する / ImageFlux meetup #2 - Guest Session #3
imageflux
0
5.4k
ImageFlux Live Streamingについて
imageflux
0
31k
ImageFlux Updates 2018
imageflux
2
1.2k
ピクシブの大規模ライブ配信 / ImageFlux Live
imageflux
6
10k
Other Decks in Technology
See All in Technology
よく聞くけど使ったことないソフトウェアNo.1 KafkaとSnowflake
foursue
4
360
GraphQL 成熟度モデルの紹介と、プロダクトに当てはめた事例 / GraphQL maturity model
mh4gf
7
1.4k
自己改善からチームを動かす! 「セルフエンジニアリングマネージャー」のすゝめ
shoota
6
800
Google Cloud の AI を支える裏側のインフラを垣間見る!
maroon1st
0
360
私が trocco を推す理由
__allllllllez__
1
260
サーバー間 GraphQL と webmock-graphql の話 / server-to-server graphql and webmock-graphql
qsona
2
190
Kernel MemoryでAzure OpenAI Serviceとお手軽データソース連携
mitsuzono
1
260
現代CSSフレームワークの内部実装とその仕組み
poteboy
7
3.6k
20240418_Google ColabにLLMが搭載されたようなのでPython x データ分析の勉強方法を考えてみる
doradora09
0
140
【NW X Security JAWS#3】L3-4:AWS環境のIPv6移行に向けて知っておきたいこと
shotashiratori
0
380
VSCodeの拡張機能を作っている話
ebarakazuhiro
1
590
チームでロジカルシンキングに改めて向き合っている話 〜学習環境と実践⽅法〜
sansantech
PRO
3
2.7k
Featured
See All Featured
Unsuck your backbone
ammeep
663
57k
Fantastic passwords and where to find them - at NoRuKo
philnash
37
2.5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
244
20k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
227
16k
A Tale of Four Properties
chriscoyier
151
22k
Atom: Resistance is Futile
akmur
259
25k
Making Projects Easy
brettharned
108
5.5k
Rails Girls Zürich Keynote
gr2m
91
13k
Stop Working from a Prison Cell
hatefulcrawdad
266
19k
Designing for Performance
lara
601
67k
Being A Developer After 40
akosma
57
580k
Embracing the Ebb and Flow
colly
80
4.1k
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