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
460
再実装 React Testing Library
nozaki
0
220
Hydrogenで 2022年〜を感じる
nozaki
0
620
Jamstack Conf 2021を見てブログ構成を見直した話
nozaki
1
1.4k
ユーザーが編集中の状態管理について考えよう
nozaki
3
6.9k
はじめてのUniversal JavaScript
nozaki
1
2.4k
Other Decks in Programming
See All in Programming
AI 駆動開発におけるコミュニティと AWS CDK の価値
konokenj
5
280
CSC305 Lecture 10
javiergs
PRO
0
290
オープンソースソフトウェアへの解像度🔬
utam0k
17
3.2k
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
360
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
1.2k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
690
Introduce Hono CLI
yusukebe
6
3.1k
エンジニアインターン「Treasure」とHonoの2年、そして未来へ / Our Journey with Hono Two Years at Treasure and Beyond
carta_engineering
0
440
社会人になっても趣味開発を続けたい! / traPavilion
mazrean
1
110
SODA - FACT BOOK(JP)
sodainc
1
8.9k
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.6k
iOSでSVG画像を扱う
kishikawakatsumi
0
170
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
2.9k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
How GitHub (no longer) Works
holman
315
140k
It's Worth the Effort
3n
187
28k
Building Adaptive Systems
keathley
44
2.8k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
930
Producing Creativity
orderedlist
PRO
348
40k
Automating Front-end Workflow
addyosmani
1371
200k
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 ありがとうございました