Qiitaがimgix導入でUXを大幅改善—画像の読み込み速度向上と高品質化を実現
お客様について
Qiitaは、日本最大級のエンジニア向けナレッジ共有プラットフォームであり、ブログ記事やプロフィール画像を含む月間140万枚の画像を配信しています。しかし、従来のCDNでは高トラフィック時のパフォーマンスに課題があり、画像の読み込み遅延が発生していました。
imgixのCDNとRuby SDK（imgix-rb）を導入することで、画像の読み込み速度を向上させ、高品質な画像配信を実現しました。
Qiitaは、2011年に設立された日本のエンジニア向けプラットフォームで、Qiita Jobs（リクルーティングサービス）やQiita Team（社内情報共有ツール）を提供しています。エンジニアコミュニティの中心的存在として、多くの技術者がQiitaを活用し、月間2.5M（250万）以上の画像をレンダリングしています。これに伴い、CDNのトラフィックは14TB以上、リクエスト数は3億回以上に達します。
課題
Imgix導入する前は、QiitaはRuby on Railsをバックエンドに、Reactをフロントエンドに採用し、AWS CloudFront + Lambda@Edge + Camoを組み合わせたCDN構成を使用していました。動的な画像リサイズや圧縮にはURLクエリパラメータを活用していましたが、以下の問題に直面していました。
- Lambda@Edgeでは1MB以上の画像を処理できない
- アップロードされる画像の多くが10～20MBと大容量
- ブラウザ判定・フォーマット変換（WebP対応）・ロスレス圧縮に時間がかかる
- キャッシュがない画像はロード時間が1秒以上かかる
「ユーザーは最適化された画像をまったく見ていませんでした」とQiitaのプロダクト開発マネージャー・清野氏は語ります。
実際に表示される画像はサイズ・クロッピングが適切でなく、読み込みも遅い状態でした。この結果、サイト全体のパフォーマンス低下、SEO順位の低下、コンバージョン率の低下を引き起こしていました。
また、QiitaチームはS3に保存した画像をすべて最適化することを検討しましたが、後から画像サイズを変更するたびに再最適化とURL更新が必要になるという課題がありました。内部開発での維持コストが大きすぎると判断し、SaaS型の外部サービス導入を決定しました。
解決策
「imgixのドキュメントとSDKは非常に直感的で、すぐに導入できました。Rendering APIの機能も他のCDNと比較して圧倒的に優れています。」
— 清野氏
QiitaはAmazon S3にオリジナル画像を保存し、 Imgixを介して動的に最適化された画像を配信しています。対象画像には、ブログ記事のグラフィック、ユーザーのアバター画像、OGP画像などが含まれます。
導入の第一歩として、Qiitaはimgix-rbを活用し、全画像にsrcset属性を適用することで、静的な画像配信をやめ、レスポンシブ対応を実現しました。さらに、以下のimgixの主要機能を活用し、サイトのパフォーマンスとUXを大幅に改善しました。
Qiitaが活用したimgixの主要パラメータ
導入効果と今後の展開
ImgixのCDNと画像変換機能により、Qiitaは大容量（1MB超）の画像を高速に配信できるようになりました。
あるテストでは、23MBの画像を3.51秒で完全ロード（データ量は23分の1に圧縮）することに成功しました。Imgix導入前は、同じ画像のロードに40.67秒かかっていました。
また、Imgix導入によりWebP形式の画像を200ms～300msで配信可能 (現在はAVIF形式でさらなる圧縮で配信中) になり、非対応ブラウザにはプログレッシブJPEGを最適な品質で提供。ロスレス圧縮もシームレスに適用され、CDNのキャッシュなしでもレスポンス速度が5倍向上（1000ms→200ms）しました。
Qiitaは、複数行のテキストオーバーレイや複雑な合成処理も簡単に実装できるようになり、エンジニアチームの負担を大幅に削減。清野氏は「 Imgixの充実したドキュメント、サンプルコード、詳細な実装例が非常に役立った」と評価しています。
Qiitaのエンジニアチームは、バックエンドでの画像処理に時間を費やすことなく、Imgixの機能を活用することで、より重要なプロダクト開発に集中できるようになりました。またImgixの導入により、Qiitaは画像の品質・パフォーマンスを向上させ、エンジニアコミュニティに最高のUXを提供することに成功しました。
