【Cloundinary入門】

概要

Cloudinaryは、画像及びビデオといったメディアを管理、効率的に配信し、ブラウザの表示スピード改善することができるサービスです。
利用方法としては以下2通りのパターンがあります。

Cloudinary上でコンテンツを管理し配信
コンテンツをS3等で管理し配信

Cloudinary上でコンテンツを管理し配信

Cloudinary上でメディアコンテンツを保管し、webサイトはCloudinary上のコンテンツを取得する使い方になります。

コンテンツをS3等で管理し配信

S3等のストレージサービスでコンテンツを管理し、Cloudinary経由で取得する使い方になります。
現状のこちらの使い方がメジャーな気がしています。

特徴

ではCloudinaryを使用する上でのメリットとなる特徴を解説します。

１．最適な画像形式での配信

画像配信のパフォーマンスを上げるためには、画像ファイルサイズを最小限に抑えることが重要になってきます。
webサイト上における画像の読み込み時間の短縮に繋がり、結果としてサイトの表示が速くなるからです。

そこで、Cloudinaryが着目したのはGoogleが開発した"WebP"と呼ばれる画像フォーマットです。

WebPは、"2010年にGoogleが初めて発表した強力な画像フォーマットで、高度な圧縮技術により、WebP形式は、一般的なJPEG（非可逆）およびPNG（可逆）画像形式よりも大幅に小さいファイルを使用して写真をエンコードする技術。"の様です！
しかし、全てのブラウザでWebPが利用できるわけでないようで、WebPがサポートされていないブラウザもある様です。（Google Cromeは利用できる模様）

そこでCloudinaryは、webサイトを開くブラウザがWebPをサポートするかどうかを識別し、サポートする場合は自動的に画像をWebPフォーマットに変換し配信します。（その場合、呼び出しURLに'f_auto'パラメータを設定する必要がありますが本記事では割愛）

２．Cloudinary側での画像加工

Cloudinaryを使用して画像や動画を呼び出す際に、Cloudinary側で対象のメディアを加工しサイトに表示することができます。
これの何がいいかというと、サイトで画像を表示する際に通常CSSを使用して画像のリサイズ等を行いますが、これでは画像取得→CSS適用→表示の処理を踏む為、パフォーマンスが落ちてしまいます。

Cloudinary側で加工処理をになってあげると、サイト側では画像取得→表示だけになるので結果として、サイトの表示速度の向上が期待できます。
また、RESTful APIやSDKといった、開発者に対して使いやすいインターフェースを提供しているので、アプリケーションへの組み込みも簡単に行うことができます。