Upgrade to Pro — share decks privately, control downloads, hide ads and more …

microCMSでimgixに入門する

4bffe6720aa22b10feef2456e5d495bb?s=47 Ryusou
December 09, 2021
Programming
0
420

 microCMSでimgixに入門する

JamJamJamstack_3での資料です
https://jamjamjamstack.connpass.com/event/229334/

4bffe6720aa22b10feef2456e5d495bb?s=128

Ryusou

December 09, 2021
Tweet

More Decks by Ryusou

See All by Ryusou
Hydrogenで 2022年〜を感じる
4bffe6720aa22b10feef2456e5d495bb?s=48 nozaki
0
250
Jamstack Conf 2021を見てブログ構成を見直した話
4bffe6720aa22b10feef2456e5d495bb?s=48 nozaki
1
610
ユーザーが編集中の状態管理について考えよう
4bffe6720aa22b10feef2456e5d495bb?s=48 nozaki
3
5.1k
Jamstackの社内プレゼン
4bffe6720aa22b10feef2456e5d495bb?s=48 nozaki
0
710
はじめてのUniversal JavaScript
4bffe6720aa22b10feef2456e5d495bb?s=48 nozaki
0
570

Other Decks in Programming

See All in Programming
職場にPythonistaを増やす方法
86b349524dfba1c635e944f2a9c92e91?s=48 soogie
0
300
競プロへの誘 -いざな-
Efbc292fd2e2c4caa0ede1d1532804a9?s=48 u76ner
0
350
Kotlin 最新動向2022 #tfcon #techfeed
14c9795d267f5b85abb98ca5e8780646?s=48 ntaro
1
1k
JGS594 Lecture 23
B546a9b97d993392e4b22b74b99b91fe?s=48 javiergs
PRO
0
400
Language Summit 2022: WebAssembly: Python in the browser and beyond
33bd15feb2558d0050e863875e0f5f60?s=48 tiran
2
310
Angular's new Standalone Components: How Will They Affect My Architecture? @iJS London 2022
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
390
Jakarta EE 10 is Coming Your Way
B489790e1a844284d7cd1fa2cd6e021f?s=48 ivargrimstad
0
2.4k
Nix for Scala folks
08f642741fba006656cb86fb61c160b3?s=48 kubukoz
0
120
확장 가능한 테라폼 코드 관리 (Scalable Terraform Code Management)
330c5e37fb238d6b319ae6e18770f44b?s=48 posquit0
1
320
Get Ready for Jakarta EE 10
B489790e1a844284d7cd1fa2cd6e021f?s=48 ivargrimstad
0
2.3k
Update from the Elixir team - 2022
Faafc04d9e69b73b9f49995fd4c94d4d?s=48 whatyouhide
0
160
TechFeed Conference 2022 - Kotlin Experimental
D4133d8efb46ae872d7a563b619bfc83?s=48 jmatsu
0
730

Featured

See All Featured
No one is an island. Learnings from fostering a developers community.
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
9
1.1k
Six Lessons from altMBA
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
14
1.3k
jQuery: Nuts, Bolts and Bling
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
56
6.4k
Fight the Zombie Pattern Library - RWD Summit 2016
9fa239b3154a0169d99ab7bf1422dd12?s=48 marcelosomers
226
15k
Atom: Resistance is Futile
7fa6101cd43067653cf4ac6c7ca54305?s=48 akmur
255
20k
Producing Creativity
Ae14cc4491ac334f9cd23f9f93b4305e?s=48 orderedlist
PRO
333
37k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
212
20k
The Most Common Mistakes in Cover Letters
1ce0eb06fd6a9e9566a0cb310cfee635?s=48 jrick
PRO
4
24k
Thoughts on Productivity
A16eb159db895e3b01d3dc95767ad595?s=48 jonyablonski
43
2.2k
Automating Front-end Workflow
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
1351
200k
The Pragmatic Product Professional
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
19
2.9k
How STYLIGHT went responsive
F716e5f737fcfb03f2cf8d1a184f1dbe?s=48 nonsquared
85
3.9k

Transcript

  1. microCMSでimgixに 入門する @ryusou

  2. 話すこと imgixの使い方とか なんで画像最適化って必要なんだっけ →pictureタグで画像の出し分け → 動的OGPの生成方法を少し

  3. microCMSでの画像の取り扱い 画像はimgixを通じて配信されています！！ imgixとは.... アップロードした画像に様々な加工・最適化するCDNです。 https://imgix.com/

  4. 画像の最適化？？　 ？？　

  5. 画像の最適化 こんな小さいスマホに こんな大きな画像を表示させようとすると.... スマホさんが「入らないよ〜〜」って泣いてしまいます

  6. 画像の最適化 おりゃーー！！圧縮！！ max-width: 360px こんなことをして画像をスマホに表示させてい ませんか？ これでは「りゅーそう君」が泣いてしまいます

  7. 画像の最適化 おりゃーー！！圧縮！！ max-width: 360px ここでの問題点は、 ・画像の大きさは変わったように見えても、内 容量は変わっていない ・「圧縮する」という処理が加わるため、パフ ォーマンスが悪くなってしまいます

  8. 画像の最適化 ならば...！！ 分身.....！！

  9. 画像の最適化 CDN

  10. ・<picture>タグでデバイスごとに最適な画像を出す microCMSのブログで書いたのでぜひご覧ください..！ https://blog.microcms.io/imgix-picture Demo どう実装するの？

  11. まとめ imgix×microCMSで画像最適化・加工にチャレンジしてみて下さい！ https://blog.microcms.io/imgix-ogp

  12. 良きimgixライフを！ @ryusou ありがとうございました