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 Agent 時代的開發者生存指南
eddie
4
2.1k
NIKKEI Tech Talk#38
cipepser
0
240
理論と実務のギャップを超える
eycjur
0
180
When Dependencies Fail: Building Antifragile Applications in a Fragile World
selcukusta
0
110
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
900
ソフトウェア設計の実践的な考え方
masuda220
PRO
5
670
開発組織の戦略的な役割と 設計スキル向上の効果
masuda220
PRO
9
1.6k
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
340
Catch Up: Go Style Guide Update
andpad
0
250
20251016_Rails News ~Rails 8.1の足音を聴く~
morimorihoge
3
740
Ktorで簡単AIアプリケーション
tsukakei
0
110
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.5k
Featured
See All Featured
Unsuck your backbone
ammeep
671
58k
How STYLIGHT went responsive
nonsquared
100
5.9k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Writing Fast Ruby
sferik
630
62k
Agile that works and the tools we love
rasmusluckow
331
21k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
Rails Girls Zürich Keynote
gr2m
95
14k
Designing Experiences People Love
moore
142
24k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
116
20k
Balancing Empowerment & Direction
lara
5
700
Product Roadmaps are Hard
iamctodd
PRO
55
11k
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 ありがとうございました