画像処理技術の裏側教えます！ImageFlux meetup #4 レポート

こんにちは、さくらのナレッジ編集部の大喜多です。

「ImageFlux」は、さくらインターネット株式会社とピクシブ株式会社が共同開発している画像変換サービスです。画像ファイルの拡大縮小、切り抜き、重ね合わせなどによりUXに配慮したデバイスに最適な画像を簡単に生成し、高速かつ高品質で配信するクラウドサービスです。

さくらインターネット株式会社とピクシブ株式会社では、このImageFluxをより多くの方に知っていただくとともに、最新情報をお届けすることを目的としてミートアップを開催しています。2019年8月30日(金)の夜、ピクシブ本社にて4回目のイベントとなる「ImageFlux meetup #4」をおこないました。今回は特に「画像処理のための技術」「画像処理サービスを活用する技術」といった「技術」にフォーカスしたイベントとなりましたので、その模様をレポートいたします。

画像変換サービス ImageFlux の紹介

さくらインターネット株式会社の税所達朗からは、ImageFluxのサービス紹介と、利用される背景についての紹介がありました。

近年、世界のトラフィックは半分以上がスマートフォンからのアクセスとなっており、Google が検索順位の評価基準としてモバイル向けサイトの表示速度を採用したことにより、「モバイルサイトの表示速度向上と次世代フォーマットへの対応」が重要視されている状況について説明しました。

Webサイトのデータは半分以上が画像のため、ImageFlux で画像サイズを最適化し、次世代フォーマットで配信することにより、Webサイトの表示速度と SEO 評価スコアの向上、ユーザビリティの改善、画像運用負荷の削減を実現できるとのことでした。

ピクシブ社内のImageFlux利用事例紹介

ピクシブ株式会社CTOの高山温さんより、ピクシブ社内でImageFluxがどのように使われているのか紹介がありました。

ピクシブでは、イラストコミュニケーションサービス pixivをはじめとして、数多くのサービスの開発・運用しています。そのサービスの多くは画像を多用するサービスであり、画像変換のためにいろいろな仕組みが開発運用されてきました。現在のImageFlux（ピクシブ社内ではpximgと呼称）は、2014年に開発された、特定のJPEG画像だけを高速に変換するプロキシサーバーであるgo-thumberを改良するかたちで、2016年から運用が開始されました。

pixivでは、画像品質を細かく使い分けたり、イラスト主体のサービスのためイラスト向けのチューニングを施すなどに活用されているそうです。

また、ピクシブが提供しているサービスは現在19個あるそうですが、その中でImageFlux（pximg）が使用されているのは13サービスに及ぶとのことです。

ここでピクシブ社内でのImageFlux（pximg）利用シーン上位3位が発表されました。

第1位はリサイズ・WebP（ウェッピー）化。例として挙げられたpixivコミックというサービスでは、当初はアップロードされた画像をそのままサムネイルとしても利用していたために、1ページの中に大きなサイズの画像がいくつも存在しデータ容量が大きいページとなっていましたが、ユーザーのスマートフォンへのシフトに併せてサイト高速化に取り組み、今では全てのサムネイルが10キロバイト以下になっているとのことです。高山さんは「pixivコミックは漫画のサービスなのでグレースケール画像が多い。グレースケール画像はWebP化の恩恵が非常に大きい」と、サービスとの親和性が高かったことも説明していました。また「管理画面からアップされた画像に対して『大きすぎるので小さくしてアップし直してください』というコミュニケーションがなくなった」ことが、ユーザーとサービス提供者両方にメリットをもたらしたともしていました。

第2位はog:image。og:imageとは、TwitterなどのSNSで表示されるサムネイル画像のことだそうです。ImageFlux（pximg）を使って動的に生成しているとのことです。例として挙げられたVRoid Hubという3Dモデルを扱ったサービスでは、1枚のバックグラウンド画像に対して2枚の画像を重ね合わせたいという要望があり、合計3枚の画像重ね合わせに対応する改修をおこなったとのことです。

第3位は切り抜き。例として挙げられたpixivisionというサービスでは、記事を投稿する際に画像を切り抜いて入れられるようにしているとのことです。

ImageFluxのキャッチコピーである「開発サイクルを促進するクラウド画像変換サービス」というのは高山さんが考えられたそうですが、「開発サイクル促進を最も実感しているのはピクシブ自体ではないだろうか？」と締めくくっていました。

ImageFluxの便利機能を、自社サービスで使い倒した件

株式会社extの高橋悠さんより、サービス開発におけるImageFluxの活用事例が紹介されました。

高橋さんの所属する株式会社extはとあるベンチャー企業のグループに所属しており、そのグループ企業の新規事業立ち上げに関わっている会社で、その中でImageFluxを活用されているとのことです。このセッションではサービス開発における活用事例が紹介されました。

1つ目はLINEのチャットボット開発におけるLINE Messaging APIとの連携です。画像にリンクを付与してメッセージとして配信するイメージマップと呼ばれる機能の中で、画像の生成や配信にImageFluxを使用されているとのことです。イメージマップでは複数のサイズの画像を用意する必要があるそうですが、ImageFluxを使うことであらかじめ複数の画像を用意する必要がないことや、CDNとしても使えることをメリットとして挙げていました。

2つ目はWebサイトでの利用例で、近年ではSEOなどの観点から画像をWebPなどの次世代フォーマットで配信することが推奨されているそうですが、WebPは対応しているデバイスと対応していないデバイスがあり、通常であれば非対応の場合に通常のフォーマットで配信するようにWebサイト側で対応する必要がありますが、ImageFluxでは自動的に対応しているフォーマットで配信するようにできるので、「画像のことはImageFluxに任せられる」とのことでした。

ImageFlux と画像バイナリ処理

株式会社awmの山崎義弘さんはImageFluxの開発に携わっている方で、このセッションではImageFlux開発において欠かせない画像バイナリ処理についての解説がありました。

画像処理サービスであるImageFluxは、内部的に画像処理をする際にバイナリを意識した動作をすることがあるそうです。画像ファイルはRGB配列のデータにメタデータが付与されたかたちでパッケージングされているそうです。画像データとメタデータの組み合わせのことを画像コンテナと呼び、山崎さんは画像ファイルをバイナリエディタで解析する業務を主に担当されているとのことです。画像ファイルのバイナリデータの読み方や、読むために必要な仕様書についての詳細な解説がありました。

画像処理サービスを作る際の落とし穴をImageFluxではいかにして越えてきたか

ピクシブ株式会社の中村宇作さんからは、自前で画像処理をする過程で多くの落とし穴を踏んできて、それらをどのように解決してきたかについての話がありました。

①Exif問題
デジカメの画像にはExifというメタデータが含まれていて、ExifにはGPS情報が含まれていてプライバシー上の問題があったり、本体画像とは別にサムネイル画像を持っていて、本体の画像を加工してもサムネイルはそのままだったりしてセンシティブな情報が漏洩してしまう可能性があったりするなどの問題があるそうです。しかしExifを消せば解決するという単純な問題ではなく、Exifには色空間情報や回転情報が含まれていて、単純に削除すると表示に問題が出るということで、必要な情報を残すように処理しているそうです。

②ICCプロファイル問題
ICCプロファイルとはICCという団体が定めている色空間情報のことで、色空間情報とは可視光の中でどの色が表示できるかという情報を持ったものだそうです。

ICCプロファイルと画像表示の関係は画像を表示するソフトウェアの対応次第で、ICCプロファイルがないからうまく表示できない場合もあれば、その逆にICCプロファイルがあるからうまく表示できない場合もあるといい、かつてはブラウザによってもばらつきがあったそうです。近年ではICCプロファイルが適切に存在していれば問題なく表示できるようになっているそうです。

ImageFluxにおいてICCプロファイルが問題となる場面のひとつとして、画像の重ね合わせがあるそうです。重ね合わせる画像Aと画像BのICCプロファイルが違ったらどうするのか？ImageFluxでは重ね合わせる際にベースとなる画像（下の画像）と、重ね合わせる画像（上の画像）を区別しており、ベースとなる下の画像に合わせてICCプロファイルを変更しているそうです。ただ稀に非互換な組み合わせがあり、そういった場合は両方の画像を、最も一般的なICCプロファイルとされるsRGBに変更することで対応しているとのことです。

③透過部背景色指定問題
GIF形式やPNG形式には透過度というものが存在します。透明または半透明になっていて下が透けるというものですが、JPEG形式にはこの機能がありません。PNG等の透過部をJPEGに変換するときにどうするのかというのがこの問題です。ImageFluxでは背景色というものを指定することができ、透過度に応じて背景色を合成することで対応するようになっているそうですが、従来はリサイズしてから背景色の合成をおこなっていたため、本来の画像にはない灰色の線ができてしまうことがあったそうです。現在ではリサイズ前に背景色の合成をおこなうようにして解決したとのことです。

このように画像処理には非常に多くの落とし穴があって、しかも「このように処理すればよい」という正解があるとは限らないそうで、すべては「どう表示させたいか」という要件次第なのだそうです。ImageFluxではサービス運用の過程で多くの問題をクリアしてきたので、現在ではかなり高水準の画像処理ができるようになっているとのことで、画像のことはImageFluxにまかせればよいのでは？と思わせる内容でした。

画像変換サービスが目指す世界

ピクシブ株式会社の道井俊介さんからは、ImageFluxはどのようなシステム構成になっているのかということや、これからImageFluxが目指していく未来についての話がありました。

ImageFluxの特徴として、マイクロサービスであることとGoで書かれていることが挙げられるそうです。ほとんどの処理が状態を持たない（ステートレスな）処理であることから障害の範囲を小さくできたり、スケールしやすくできるというメリットがあるといいます。Goを採用していることについては、高速かつセキュアなHTTPサーバーが実装できることと、C言語のライブラリを呼び出すことができることなどが挙げられるそうです。C言語のライブラリを改修して使用した方がいいところではC言語を採用する一方、多くの部分ではメンテナンスや最適化のしやすさを考えてGoを採用したメリットがでているとのことです。

未来については「開発サイクルを促進するために、開発者が画像について悩まないでよい未来をつくる」ということをテーマとして、可用性の向上や設定のシンプル化などに取り組んでいるとのことでした。

まとめ

このように、今回のmeetupは技術的に濃いセッションが多く用意されていました。このあとの懇親会でも、ユーザーとImageFlux開発メンバーによる情報交換がおこなわれ、非常に活気のあるイベントになっていました。これを機に、画像のことはImageFluxにまかせて、より開発者が本来の開発に専念できるような未来になるとよいな、と思いました。