画像最適化で爆速サイトを実現する方法 with Cloudinary
はじめに
皆さんはWebアプリケーションを作成する際に画像の最適化はしていますか？
現代のWebサイトにおいて、画像は不可欠な要素となっています。しかし、高画質な画像の大量使用は表示速度を低下させ、ユーザーエクスペリエンスを著しく損なう可能性があります。本記事では、無料で実装できる画像最適化手法を紹介し、サイトパフォーマンスを劇的に改善する方法をご紹介します。
モチベーション
私は現在、「AI辞書」というプロジェクトを趣味で開発しています。Google翻訳やDeepLなどでは文脈理解が不完全で、従来の辞書サイトは広告が多く使いづらいという問題から自分用に作成しようと思いました。また、このアプリではAIによる画像生成で視覚的な理解をサポートする機能をつけており、画像をユーザーに届ける必要がありました。そこで、低コストで高パフォーマンスを出せるサービス手法を探していました。
広告なしで無料で辞書機能を使い放題ですので、よければ使ってみて下さい。
最適化手法
一般的な手法としては、GCPやAWSなどのCDNを使用してユーザーの一番近いサーバーにキャッシュを作成することで、画像の表示時間を短くすることです。他にもブラウザやメモリに画像のキャッシュを作成し、HTTPリクエストを減らす考えもあります。ただし、普段使いでGCPやAWSなどのCDNはかなり値段が高いです。。また1MBを超える大容量の画像はキャッシュするのも大変です。ブラウザによっては拒否される可能性があります。そこで私が一番効率が良いと思った手法は、画像を動的にリサイズし画質を変えることでCDNのコストを抑え、画像のキャッシュも作成しやすくすることです。ただ、動的にリサイズするのは大変そうと思いますよね。朗報です。Cloudinaryにはすでに画像最適化手法が数多く用意されており、無料で使用することができます。（CDNももちろん含まれています。）
Cloudinaryの使用方法
まず簡単な使用例をTypescriptで示します。
export const getOptimizedImageUrl = (imageUrl: string, width: number = 300) => {
if (!imageUrl.includes("cloudinary.com")) return imageUrl;
// Parse the existing URL
const baseUrl = imageUrl.split("/upload/")[0];
const imagePath = imageUrl.split("/upload/")[1];
// Add transformation parameters:
// - f_auto: automatic format selection
// - q_auto: automatic quality
// - w_300: width 300px
// - c_limit: limit mode
return `${baseUrl}/upload/f_auto,q_auto,w_${width},c_limit/${imagePath}`;
};
ここでは元々の画像のURLにパラメーターを含めることで動的に画像の最適化を行います。
具体的には以下のパラメーターを使用します。
- f_auto: 自動フォーマット選択
- q_auto: 自動画質
- w_300: 幅300px
- c_limit: リミットモード
他にも多くのパラメーターが存在するので、気になる方は公式サイトを確認して下さい。
結果的に元々1.5MBもあった画像が11.1KBまで縮小しました。また画像の取得時間も360msが60msとなりました。たった数行のコードで、sizeは138倍、timeは6倍の短縮になりました。ただ元々のサイズが大きかったことは否めません。。
まとめ
Cloudinaryを使用することで、画像サイズと画像取得時間を大幅に改善することができ、高パフォーマンスなサイトを構築することに成功しました。画像の取得時間やCDNのコストが気になっている方がいればCloudinaryの導入を検討してみるのも一つの手かもしれません。
Discussion