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
570
画像処理サービスを作る際の落とし穴をImageFluxではいかにして超えてきたか / ImageFlux meetup #4 (5)
imageflux
1
3.2k
Webサービスにおける画像変換の実践 / ImageFlux meetup - hands-on
imageflux
2
18k
ImageFlux Live Streamingでサービス開発に集中する / ImageFlux meetup #2 - Guest Session #3
imageflux
0
5.7k
ImageFlux Live Streamingについて
imageflux
0
31k
ImageFlux Updates 2018
imageflux
2
1.3k
ピクシブの大規模ライブ配信 / ImageFlux Live
imageflux
6
10k
Other Decks in Technology
See All in Technology
技術的負債解消の取り組みと専門チームのお話 #技術的負債_Findy
bengo4com
1
1.3k
インフラをつくるとはどういうことなのか、 あるいはPlatform Engineeringについて
nwiizo
5
2.6k
組織貢献をするフリーランスエンジニアという生き方
n_takehata
1
1.3k
プロダクトエンジニア構想を立ち上げ、プロダクト志向な組織への成長を続けている話 / grow into a product-oriented organization
hiro_torii
0
110
Swiftの “private” を テストする / Testing Swift "private"
yutailang0119
0
130
データマネジメントのトレードオフに立ち向かう
ikkimiyazaki
6
930
転生CISOサバイバル・ガイド / CISO Career Transition Survival Guide
kanny
3
970
個人開発から公式機能へ: PlaywrightとRailsをつなげた3年の軌跡
yusukeiwaki
11
3k
「海外登壇」という 選択肢を与えるために 〜Gophers EX
logica0419
0
700
Platform Engineeringは自由のめまい
nwiizo
4
2.1k
モノレポ開発のエラー、誰が見る?Datadog で実現する適切なトリアージとエスカレーション
biwashi
6
800
データの品質が低いと何が困るのか
kzykmyzw
6
1.1k
Featured
See All Featured
Making Projects Easy
brettharned
116
6k
Statistics for Hackers
jakevdp
797
220k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
RailsConf 2023
tenderlove
29
1k
Faster Mobile Websites
deanohume
306
31k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Building Applications with DynamoDB
mza
93
6.2k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
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