microCMSでimgixに入門する

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

Ryusou