microCMSでimgixに入門する

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

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 ありがとうございました