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.4k
ピクシブの大規模ライブ配信 / ImageFlux Live
imageflux
6
11k
Other Decks in Technology
See All in Technology
Core Audio tapを使ったリアルタイム音声処理のお話
yuta0306
0
160
Fabric + Databricks 2025.6 の最新情報ピックアップ
ryomaru0825
1
160
Glacierだからってコストあきらめてない? / JAWS Meet Glacier Cost
taishin
1
110
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
bengo4com
0
1.5k
GeminiとNotebookLMによる金融実務の業務革新
abenben
0
250
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
i35_267
2
6.2k
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
940
あなたの声を届けよう! 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
kondoyuko
4
530
論文紹介:LLMDet (CVPR2025 Highlight)
tattaka
0
260
B2C&B2B&社内向けサービスを抱える開発組織におけるサービス価値を最大化するイニシアチブ管理
belongadmin
1
2.8k
OPENLOGI Company Profile
hr01
0
67k
WordPressから ヘッドレスCMSへ! Storyblokへの移行プロセス
nyata
0
360
Featured
See All Featured
Producing Creativity
orderedlist
PRO
346
40k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Designing Experiences People Love
moore
142
24k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
For a Future-Friendly Web
brad_frost
179
9.8k
Statistics for Hackers
jakevdp
799
220k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
680
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
940
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
500
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