microCMSでimgixに 入門する @ryusou

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

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

画像の最適化？？　 ？？　

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

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

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

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

画像の最適化 CDN

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

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

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