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
microCMSでimgixに入門する
Search
Ryusou
December 09, 2021
Programming
0
970
microCMSでimgixに入門する
JamJamJamstack_3での資料です
https://jamjamjamstack.connpass.com/event/229334/
Ryusou
December 09, 2021
Tweet
Share
More Decks by Ryusou
See All by Ryusou
Astro 3.0入門
nozaki
0
420
再実装 React Testing Library
nozaki
0
160
Hydrogenで 2022年〜を感じる
nozaki
0
540
Jamstack Conf 2021を見てブログ構成を見直した話
nozaki
1
1.2k
ユーザーが編集中の状態管理について考えよう
nozaki
3
6.5k
はじめてのUniversal JavaScript
nozaki
1
2.1k
Other Decks in Programming
See All in Programming
色んなオートローダーを覗き見る #phpcon_okinawa
o0h
PRO
5
360
DjangoNinjaで高速なAPI開発を実現する
masaya00
0
420
Cohesion in Modeling and Design
mploed
3
180
CSC509 Lecture 01
javiergs
PRO
1
200
"型"のあるRailsアプリケーション開発 / Typed Rails application development
sinsoku
8
2.2k
AWS Lambda Web Adapterを活用する新しいサーバーレスの実装パターン
tmokmss
6
5.4k
GraphQLとGigaViewer for Apps
numeroanddev
4
880
sqlcを利用してsqlに型付けを
kamiyam
0
230
5年分のツケを一気に払った話
soogie
3
1.1k
M5Stackボードの選び方
tanakamasayuki
0
200
NEWTにおけるiOS18対応の進め方
ryu1sazae
0
180
推しの夫に恋のGPS「ときメーター」#M5Stack #IoT #M5JPTour2024
riyu
0
220
Featured
See All Featured
Docker and Python
trallard
40
3k
It's Worth the Effort
3n
183
27k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
Optimising Largest Contentful Paint
csswizardry
31
2.8k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Become a Pro
speakerdeck
PRO
24
4.9k
Building an army of robots
kneath
302
42k
Learning to Love Humans: Emotional Interface Design
aarron
271
40k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
109
6.9k
Robots, Beer and Maslow
schacon
PRO
157
8.2k
Building Better People: How to give real-time feedback that sticks.
wjessup
360
19k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
355
29k
Transcript
microCMSでimgixに 入門する @ryusou
話すこと imgixの使い方とか なんで画像最適化って必要なんだっけ →pictureタグで画像の出し分け → 動的OGPの生成方法を少し
microCMSでの画像の取り扱い 画像はimgixを通じて配信されています!! imgixとは.... アップロードした画像に様々な加工・最適化するCDNです。 https://imgix.com/
画像の最適化?? ??
画像の最適化 こんな小さいスマホに こんな大きな画像を表示させようとすると.... スマホさんが「入らないよ〜〜」って泣いてしまいます
画像の最適化 おりゃーー!!圧縮!! max-width: 360px こんなことをして画像をスマホに表示させてい ませんか? これでは「りゅーそう君」が泣いてしまいます
画像の最適化 おりゃーー!!圧縮!! max-width: 360px ここでの問題点は、 ・画像の大きさは変わったように見えても、内 容量は変わっていない ・「圧縮する」という処理が加わるため、パフ ォーマンスが悪くなってしまいます
画像の最適化 ならば...!! 分身.....!!
画像の最適化 CDN
・<picture>タグでデバイスごとに最適な画像を出す microCMSのブログで書いたのでぜひご覧ください..! https://blog.microcms.io/imgix-picture Demo どう実装するの?
まとめ imgix×microCMSで画像最適化・加工にチャレンジしてみて下さい! https://blog.microcms.io/imgix-ogp
良きimgixライフを! @ryusou ありがとうございました