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
940
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
400
再実装 React Testing Library
nozaki
0
150
Hydrogenで 2022年〜を感じる
nozaki
0
530
Jamstack Conf 2021を見てブログ構成を見直した話
nozaki
1
1.2k
ユーザーが編集中の状態管理について考えよう
nozaki
3
6.5k
はじめてのUniversal JavaScript
nozaki
1
2k
Other Decks in Programming
See All in Programming
Cloudflare Workers x AWS Lambdaの組み合わせユースケース / Cloudflare Workers x AWS Lambda Combination Use Case
seike460
PRO
2
310
Play Billing Library 7.0.0 変更点まとめ@potatotips#88
kako351
0
160
I/O Extended Android in Korea 2024 ~ Whats new in Android development tools
pluu
0
250
AHC035解説
terryu16
0
730
Introduction to GitOps
hwchiu
0
110
入社1ヶ月でここまでやった!Findy Toolsインフラ支援の最適化
rvirus0817
6
1.4k
最近追加した型の紹介とその振り返り
aki19035vc
0
180
DDDを志して3年経ったら「DDDの皮を被ったクリーンアーキテクチャ」になった話【デブサミ2024夏】
texmeijin
1
620
Introduction of Happy Eyeballs Version 2 (RFC8305) to the Socket library
coe401_
1
220
DynamoDB コスト最適化っぽいことの基本 with Terraform
kuro_kurorrr
2
250
データカタログ運用物語 〜令和6年夏の理想と現実〜
kuro_kurorrr
0
110
20240706_CDKConf
takuyay0ne
0
1.2k
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
31
4.7k
Navigating Team Friction
lara
181
13k
We Have a Design System, Now What?
morganepeng
46
7k
The MySQL Ecosystem @ GitHub 2015
samlambert
248
12k
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.6k
Bash Introduction
62gerente
607
210k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
17
8.7k
YesSQL, Process and Tooling at Scale
rocio
166
14k
Art, The Web, and Tiny UX
lynnandtonic
291
20k
Large-scale JavaScript Application Architecture
addyosmani
506
110k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
Adopting Sorbet at Scale
ufuk
71
8.8k
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 ありがとうございました