Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
microCMSでimgixに入門する
Ryusou
December 09, 2021
Programming
0
420
microCMSでimgixに入門する
JamJamJamstack_3での資料です
https://jamjamjamstack.connpass.com/event/229334/
Ryusou
December 09, 2021
Tweet
Share
More Decks by Ryusou
See All by Ryusou
Hydrogenで 2022年〜を感じる
nozaki
0
250
Jamstack Conf 2021を見てブログ構成を見直した話
nozaki
1
610
ユーザーが編集中の状態管理について考えよう
nozaki
3
5.1k
Jamstackの社内プレゼン
nozaki
0
710
はじめてのUniversal JavaScript
nozaki
0
570
Other Decks in Programming
See All in Programming
職場にPythonistaを増やす方法
soogie
0
300
競プロへの誘 -いざな-
u76ner
0
350
Kotlin 最新動向2022 #tfcon #techfeed
ntaro
1
1k
JGS594 Lecture 23
javiergs
PRO
0
400
Language Summit 2022: WebAssembly: Python in the browser and beyond
tiran
2
310
Angular's new Standalone Components: How Will They Affect My Architecture? @iJS London 2022
manfredsteyer
PRO
0
390
Jakarta EE 10 is Coming Your Way
ivargrimstad
0
2.4k
Nix for Scala folks
kubukoz
0
120
확장 가능한 테라폼 코드 관리 (Scalable Terraform Code Management)
posquit0
1
320
Get Ready for Jakarta EE 10
ivargrimstad
0
2.3k
Update from the Elixir team - 2022
whatyouhide
0
160
TechFeed Conference 2022 - Kotlin Experimental
jmatsu
0
730
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
9
1.1k
Six Lessons from altMBA
skipperchong
14
1.3k
jQuery: Nuts, Bolts and Bling
dougneiner
56
6.4k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
15k
Atom: Resistance is Futile
akmur
255
20k
Producing Creativity
orderedlist
PRO
333
37k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
212
20k
The Most Common Mistakes in Cover Letters
jrick
PRO
4
24k
Thoughts on Productivity
jonyablonski
43
2.2k
Automating Front-end Workflow
addyosmani
1351
200k
The Pragmatic Product Professional
lauravandoore
19
2.9k
How STYLIGHT went responsive
nonsquared
85
3.9k
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 ありがとうございました