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
600
画像処理サービスを作る際の落とし穴をImageFluxではいかにして超えてきたか / ImageFlux meetup #4 (5)
imageflux
1
3.3k
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.3k
ピクシブの大規模ライブ配信 / ImageFlux Live
imageflux
6
11k
Other Decks in Technology
See All in Technology
今からでも間に合う! 生成AI「RAG」再入門 / Re-introduction to RAG in Generative AI
hideakiaoyagi
1
180
比起獨自升級 我更喜歡 DevOps 文化 <3
line_developers_tw
PRO
0
220
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
38k
Kotlinで学ぶ 代数的データ型
ysknsid25
5
1.1k
DenoとJSRで実現する最速MCPサーバー開発記 / Building MCP Servers at Lightning Speed with Deno and JSR
yamanoku
1
100
AIエージェントの継続的改善のためオブザーバビリティ
pharma_x_tech
6
1.2k
Web3 のリアリティ / Web3 Reality
ks91
PRO
0
100
Workflows から Agents へ ~ 生成 AI アプリの成長過程とアプローチ~
belongadmin
3
160
「実体」で築く共通認識: 開発現場のコミュニケーション最適化 / Let's Get on the Same Page with Concrete Artifacts: Optimization of Communication in dev teams
kazizi55
0
140
堅牢な認証基盤の実現 TypeScriptで代数的データ型を活用する
kakehashi
PRO
2
230
Agentic DevOps時代の生存戦略
kkamegawa
0
390
Long journey of Continuous Delivery at Mercari
hisaharu
1
220
Featured
See All Featured
How to Ace a Technical Interview
jacobian
276
23k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
123
52k
Visualization
eitanlees
146
16k
Six Lessons from altMBA
skipperchong
28
3.8k
A Tale of Four Properties
chriscoyier
159
23k
Stop Working from a Prison Cell
hatefulcrawdad
269
20k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
43
2.4k
A Modern Web Designer's Workflow
chriscoyier
693
190k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.3k
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