$30 off During Our Annual Pro Sale. View details »

microCMSでimgixに入門する

Ryusou
December 09, 2021

 microCMSでimgixに入門する

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

Ryusou

December 09, 2021
Tweet

More Decks by Ryusou

Other Decks in Programming

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