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
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
450
再実装 React Testing Library
nozaki
0
200
Hydrogenで 2022年〜を感じる
nozaki
0
610
Jamstack Conf 2021を見てブログ構成を見直した話
nozaki
1
1.3k
ユーザーが編集中の状態管理について考えよう
nozaki
3
6.8k
はじめてのUniversal JavaScript
nozaki
1
2.3k
Other Decks in Programming
See All in Programming
関数型まつり2025登壇資料「関数プログラミングと再帰」
taisontsukada
2
800
F#で自在につくる静的ブログサイト - 関数型まつり2025
pizzacat83
0
290
人には人それぞれのサービス層がある
shimabox
3
670
ドメインモデリングにおける抽象の役割、tagless-finalによるDSL構築、そして型安全な最適化
knih
10
1.8k
Go1.25からのGOMAXPROCS
kuro_kurorrr
0
230
Use Perl as Better Shell Script
karupanerura
0
690
Bytecode Manipulation 으로 생산성 높이기
bigstark
1
310
データベースコネクションプール(DBCP)の変遷と理解
fujikawa8
1
250
つよそうにふるまい、つよい成果を出すのなら、つよいのかもしれない
irof
1
280
Cloudflare Realtime と Workers でつくるサーバーレス WebRTC
nekoya3
0
400
コードに語らせよう――自己ドキュメント化が内包する楽しさについて / Let the Code Speak
nrslib
6
1.4k
プロダクト開発でも使おう 関数のオーバーロード
yoiwamoto
0
150
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
RailsConf 2023
tenderlove
30
1.1k
Site-Speed That Sticks
csswizardry
10
630
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
780
Music & Morning Musume
bryan
46
6.6k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Fireside Chat
paigeccino
37
3.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
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 ありがとうございました