[動画公開] 目指せ、爆速サイト! Cloudinaryで始める画像最適化 #devio2020

ウェブサイトを成功させるには表示速度が重要、だけど、たくさんの重い画像が遅い原因になっていませんか？そんな方に向けて、Cloudinaryを利用して画像配信を最適化し、ウェブサイトを速くする方法をお話をしました。

quiver

2020.06.23

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

6月16日より、クラスメソッドの年次技術イベント「Developers.IO 2020 CONNECT」を開催しています。期間は2020年6月16日（火）から7月7日（火）、テーマごとに7日間の日程に分けて開催、セッションはなんと合計100本以上あります。

本日「目指せ、爆速サイト! Cloudinaryで始める画像最適化」というテーマにてセッション動画と資料を公開いたしました。

セッション情報

サイトを魅力的なものにすべく、画像をふんだんに使いたい一方で、画像が重すぎてサイト表示が遅くなると、コンバージョン率が下がってしまうというジレンマがあります。

そんなときに役立つのが画像の最適化です。

画像フォーマット・画質などを最適化することで、画像サイズはかんたんに半分以下になります。

本セッションでは、Cloudinaryを使った画像最適化方法についてお話します。

画像最適化をこれから始めたいお客様には、画像最適化の評価ツールがおすすめです。画像を最適化することで、サイトがどのくらい軽くなるのか、かんたんにわかります。

本ブログの場合、Cloudinaryを導入することでトップページで使われている2MBの画像が 160KB(7.4%)になるみたいですよ。具体的にどのくらい軽くなるのか数字がある方が、説得力ありますよね。

セッションではL@E・CloudFront のエッジコンピューティングを活用し、アプリケーション改修無しにCloudinaryをポン付けする構成をご紹介しました。

この構成で、他社様の画像最適化システムをCloudinaryへシームレスに移行しました。

Cloudinartyは画像を圧縮するだけなく、画像に様々な加工を施すこともできます。

デモサイトでは様々なイフェクトを遊べます。

過去にVarnish/Nginx/ImageMagickを駆使してオレオレImage CDNを構築・運営していた身としては、当時Cloudinaryを知っていたらなぁと悔やむばかりです。

画像最適化・画像処理をこれからやってみたいお客様から、既存システムからの切り替えまで、幅広くご支援いたしますので、お気軽にお相談ください。

本セッションの準備のために、ウェブ・画像最適化関連の多くの資料を参考にさせていただきました。

面白かったものをいくつかご紹介します(全部読んだとは言っていない)。