Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
microCMSでimgixに入門する
Search
Ryusou
December 09, 2021
Programming
0
1.1k
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
460
再実装 React Testing Library
nozaki
0
220
Hydrogenで 2022年〜を感じる
nozaki
0
630
Jamstack Conf 2021を見てブログ構成を見直した話
nozaki
1
1.4k
ユーザーが編集中の状態管理について考えよう
nozaki
3
6.9k
はじめてのUniversal JavaScript
nozaki
1
2.5k
Other Decks in Programming
See All in Programming
Jetpack XR SDKから紐解くAndroid XR開発と技術選定のヒント / about-androidxr-and-jetpack-xr-sdk
drumath2237
1
160
Findy AI+の開発、運用におけるMCP活用事例
starfish719
0
1.6k
ハイパーメディア駆動アプリケーションとIslandアーキテクチャ: htmxによるWebアプリケーション開発と動的UIの局所的適用
nowaki28
0
440
Pythonではじめるオープンデータ分析〜書籍の紹介と書籍で紹介しきれなかった事例の紹介〜
welliving
2
420
脳の「省エネモード」をデバッグする ~System 1(直感)と System 2(論理)の切り替え~
panda728
PRO
0
110
perlをWebAssembly上で動かすと何が嬉しいの??? / Where does Perl-on-Wasm actually make sense?
mackee
0
100
堅牢なフロントエンドテスト基盤を構築するために行った取り組み
shogo4131
8
2.5k
dotfiles 式年遷宮 令和最新版
masawada
1
800
「コードは上から下へ読むのが一番」と思った時に、思い出してほしい話
panda728
PRO
39
26k
Developing static sites with Ruby
okuramasafumi
0
310
tparseでgo testの出力を見やすくする
utgwkk
2
260
AIコーディングエージェント(NotebookLM)
kondai24
0
220
Featured
See All Featured
Tell your own story through comics
letsgokoyo
0
750
Build The Right Thing And Hit Your Dates
maggiecrowley
38
3k
Amusing Abliteration
ianozsvald
0
63
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
231
22k
Odyssey Design
rkendrick25
PRO
0
430
How to build a perfect <img>
jonoalderson
0
4.6k
Building a A Zero-Code AI SEO Workflow
portentint
PRO
0
180
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.6k
jQuery: Nuts, Bolts and Bling
dougneiner
65
8.3k
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
madoxten
47
33k
Building Flexible Design Systems
yeseniaperezcruz
330
39k
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 ありがとうございました