Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
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
630
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
分散DBって何者なんだ... Spannerから学ぶRDBとの違い
iwashi623
0
160
Module Harmony
petamoriken
2
600
MAP, Jigsaw, Code Golf 振り返り会 by 関東Kaggler会|Jigsaw 15th Solution
hasibirok0
0
200
俺流レスポンシブコーディング 2025
tak_dcxi
13
6.9k
20 years of Symfony, what's next?
fabpot
2
280
【CA.ai #3】Google ADKを活用したAI Agent開発と運用知見
harappa80
0
140
バックエンドエンジニアによる Amebaブログ K8s 基盤への CronJobの導入・運用経験
sunabig
0
110
AIコードレビューがチームの"文脈"を 読めるようになるまで
marutaku
0
260
【Streamlit x Snowflake】データ基盤からアプリ開発・AI活用まで、すべてをSnowflake内で実現
ayumu_yamaguchi
1
110
大体よく分かるscala.collection.immutable.HashMap ~ Compressed Hash-Array Mapped Prefix-tree (CHAMP) ~
matsu_chara
1
200
「文字列→日付」の落とし穴 〜Ruby Date.parseの意外な挙動〜
sg4k0
0
350
無秩序からの脱却 / Emergence from chaos
nrslib
2
11k
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Why Our Code Smells
bkeepers
PRO
340
57k
Thoughts on Productivity
jonyablonski
73
4.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
355
21k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
196
69k
Building a Modern Day E-commerce SEO Strategy
aleyda
45
8.1k
The Language of Interfaces
destraynor
162
25k
BBQ
matthewcrist
89
9.9k
The Pragmatic Product Professional
lauravandoore
37
7k
Six Lessons from altMBA
skipperchong
29
4.1k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
25
1.6k
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 ありがとうございました