mottox2こんにちは、もっと(@mottox2)といいます。普段はフリーランスでウェブやスマホアプリのフロントエンド周りのあれこれをやっています。)という技術同人誌即売会の運営メンバーをやっています。さくらインターネットの運営するクラウド画像変換サービス「ImageFlux」を提供していただいたので、さくらのナレッジで記事を書かせてもらうことになりました。技書博ウェブについて技書博のウェブサイトは、一般参加者からは参加するサークルの情報、頒布物の情報、ブックマーク機能が提供されています。サークル参加者からはサークル・頒布物情報を登録できるようなウェブアプリ的な見え方になっています。ウェブサイトはFirebaseで構築しています。Authenticationで認証を行っています。Analyticsを見るとイベント当日がアクセスのピークになっています。イベント当日にはPCよりモバイル端末のアクセスが増えることがわかっています。当日のトラフィックが多く、モバイルが多いことで問題になるのが表示速度です。表示速度を上げるには、様々な要因が考えられますが、一番のネックになっていたのが画像のデータ量です。技書博のウェブサイトにおける画像は、サークル参加者からアップロードされた画像です。本来はアップロード時にリサイズを行うべきですが、優先度が上げることができず対応できないままになっていました。Imagesを使うのが一般的だと思います。Imagesは画像のアップロード時に、事前に指定したリサイズを行うFirebaseの拡張機能です。簡単に導入できるメリットもある一方、何点か気になる箇所がありました。事前に設定した内容に応じて画像のリサイズが行われ、ディレクトリ等画像の種類に関係なくサイズの設定を行う必要があります。UIにあり、コードと管理画面に設定がバラけるアップロード後、実際のリサイズ後の画像URLを取得するのが面倒。Imagesを利用するとFirebaseで完結するメリットはありますが、以上のような点から導入を見送っていました。ImageFluxの導入これらの課題を一気に解決するのが『ImageFlux』です。ImageFluxは「クラウド画像変換サービス」と名乗っているさくらインターネットの運営するサービスの一つです。クラウド画像変換サービスというととらえどころがないように感じますが、具体的には画像のリサイズ・クロップ、画像フォーマットの変換等を行い、画像の配信まで含めて面倒を見てくれる便利なサービスです。技書博ではさくらインターネットからツールスポンサーという形でImageFluxの提供をいただくことができたので、ウェブサイトに導入を行いました。導入は非常に簡単でした。会員登録のメール開封からデプロイまで2時間ちょっとという短い時間で行うことができました。次の2ステップで導入が完了します。それぞれのポイントについて説明します。会員登録して管理画面で画像のオリジンを指定コード中での画像の参照を書き換えるオリジンの指定ImageFluxでは画像があるオリジンを指定するだけで使い始められます。example.comというオリジンを指定した際に、example.imageflux.jpといったImageFlux用のオリジンが割り当てられます。その設定でexample.imageflux.jp/sample.jpgというURLにアクセスするとexample.com/sample.jpgという画像が帰ってくる形になります。その際にパラメータを指定することでリサイズなどの処理を行えます。Storageを使っていたので、そのオリジンを指定するだけでオリジンの設定は完了しました。画像の参照を置き換える技書博ではもともとFirestoreに画像のURLを保存していました。今回、ImageFluxの導入を行う際にはFirestoreの画像URLをオリジンという扱いにし、Firestore(Firebaseのデータストア)のデータの変更は行わずHTMLをレンダリングする際にURLを書き換える形にしました。画像を読み込む際にはデータストアに保存されているURLをImageFluxのオリジンに書き換えるメソッドを用意し、そのメソッドだけがImageFluxに関心を向かせるようにしました。具体的には次のようなオリジナルの画像URLを引数にした簡単な関数です。imageParams)}技書博のフロントエンドはTypeScriptで書かれているので、パラメータをリーダブルなものにし内部でImageFlux形式のパラメータに書き換えています。外部からの引数はImageFluxに依存しないものにしておき、できるだけSaaSに依存しないように意識しています。この形式にしておけば、SaaSをやめたり、乗り換えたりするタイミングで困ることは少なくなります。導入する際も「すぐロールバックできる」という保険を持っておくことで精神的なコストも抑えられます。コスパを考えて、ImageFluxを完全に使い尽くすことには力を入れず、基本的な機能を使って効果の高そうな箇所に取り組むことにしました。そこで取り組んだのが次の機能です。画像のリサイズ1つめが画像のリサイズです。一般的にユーザーが投稿する画像は(推奨サイズを指定していたとしても)画像サイズがバラバラで、こちらの意図したサイズになることはほとんどありません。実際に表示するサイズにリサイズするだけで大きく容量が削減され、ページの高速化に寄与します。画像の枚数が多い一覧系のページでは顕著に高速化を感じられます。ImageFluxではwとhのパラメータを付与するだけでリサイズが行われます。次の画像は幅504px、高さ710pxに変換して画像を配信してくれます。画像フォーマットの変換2つめが画像フォーマットです。画像フォーマットというとpngやjpgが思い浮かぶと思いますが、ここで利用するのはWebP(ウェッピー)というフォーマットです。WebPはGoogleが開発している画像フォーマットで、以前からにわかに話題になっていました。話題になっていた当時はChromeでしか対応していなかったのですが、最近はEdgeやFirefoxも対応してSafariでなければ大半のブラウザがサポートするに至っています。WebP?)「うちのサービスはSafariも対応ブラウザだから、WebPは採用できない」と思われる方もいるかもしれません。ImageFluxにはWebP対応ブラウザはWebPを、非対応ブラウザにはオリジナルのフォーマットで配信するオプションが用意されています。ImageFlux)例えば、次の画像はWebP対応ブラウザにはWebP、それ以外にはpngで配信されているはずです。効果ImageFluxを利用した場合の一例を示します。技書博に参加した、とあるサークルカット画像ではオリジナルが319KBなのですが、リサイズとWebPを併用することで36KBまでデータ量を減らすことに成功しています。この例ではリサイズの効果は弱く見えますが、想定より大きい画像がアップロードされたときは効果が顕著に見えます。WebP化ではかなりのデータ量が削減されていることがわかります。このように、ImageFluxを使えば簡単に画像のデータ量を削減できることが伝わったかと思います。まとめImageFluxは基本的な機能を使うだけでもページの高速化の役に立つ上に、考えることも少ない素晴らしいサービスです。「画像変換系のサーバーなら自分でも立てられる!」という方もいるとは思いますが、それはおすすめしません。無料トライアルもあるので、一旦試してImageFluxの便利さを体験してもらいたいです。