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
210
Hydrogenで 2022年〜を感じる
nozaki
0
610
Jamstack Conf 2021を見てブログ構成を見直した話
nozaki
1
1.3k
ユーザーが編集中の状態管理について考えよう
nozaki
3
6.8k
はじめてのUniversal JavaScript
nozaki
1
2.4k
Other Decks in Programming
See All in Programming
iOS開発スターターキットの作り方
akidon0000
0
240
DataformでPythonする / dataform-de-python
snhryt
0
150
MCPで実現できる、Webサービス利用体験について
syumai
7
2.4k
Google I/O Extended Incheon 2025 ~ What's new in Android development tools
pluu
1
230
Reactの歴史を振り返る
tutinoko
1
170
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)The Basics of Agent Development with ADK — A Demo-Focused Introduction
risatube
PRO
6
1.4k
管你要 trace 什麼、bpftrace 用下去就對了 — COSCUP 2025
shunghsiyu
0
230
CEDEC 2025 『ゲームにおけるリアルタイム通信への QUIC導入事例の紹介』
segadevtech
2
760
「リーダーは意思決定する人」って本当?~ 学びを現場で活かす、リーダー4ヶ月目の試行錯誤 ~
marina1017
0
130
11年かかって やっとVibe Codingに 時代が追いつきましたね
yimajo
1
240
#QiitaBash TDDで(自分の)開発がどう変わったか
ryosukedtomita
1
350
技術的負債で信頼性が限界だったWordPress運用をShifterで完全復活させた話
rvirus0817
0
290
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
53
7.7k
Designing for Performance
lara
610
69k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Balancing Empowerment & Direction
lara
1
530
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Automating Front-end Workflow
addyosmani
1370
200k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Site-Speed That Sticks
csswizardry
10
750
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 ありがとうございました