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
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
440
再実装 React Testing Library
nozaki
0
180
Hydrogenで 2022年〜を感じる
nozaki
0
590
Jamstack Conf 2021を見てブログ構成を見直した話
nozaki
1
1.3k
ユーザーが編集中の状態管理について考えよう
nozaki
3
6.7k
はじめてのUniversal JavaScript
nozaki
1
2.2k
Other Decks in Programming
See All in Programming
クリーンアーキテクチャから見る依存の向きの大切さ
shimabox
5
1k
2025.2.14_Developers Summit 2025_登壇資料
0101unite
0
190
負債になりにくいCSSをデザイナとつくるには?
fsubal
10
2.6k
GoとPHPのインターフェイスの違い
shimabox
2
210
PHPカンファレンス名古屋2025 タスク分解の試行錯誤〜レビュー負荷を下げるために〜
soichi
1
680
Jakarta EE meets AI
ivargrimstad
0
390
Ça bouge du côté des animations CSS !
goetter
2
150
Datadog Workflow Automation で圧倒的価値提供
showwin
1
160
ソフトウェアエンジニアの成長
masuda220
PRO
12
2.1k
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
230
ML.NETで始める機械学習
ymd65536
0
230
Honoをフロントエンドで使う 3つのやり方
yusukebe
7
3.5k
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
370
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
133
33k
Become a Pro
speakerdeck
PRO
26
5.2k
Being A Developer After 40
akosma
89
590k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Writing Fast Ruby
sferik
628
61k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.4k
Building a Scalable Design System with Sketch
lauravandoore
461
33k
The Invisible Side of Design
smashingmag
299
50k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.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 ありがとうございました