Upgrade to Pro — share decks privately, control downloads, hide ads and more …

画像処理サービスを作る際の落とし穴をImageFluxではいかにして超えてきたか / ImageFlux meetup #4 (5)

ImageFlux
August 30, 2019

画像処理サービスを作る際の落とし穴をImageFluxではいかにして超えてきたか / ImageFlux meetup #4 (5)

画像処理サービスを作る際の落とし穴をImageFluxではいかにして超えてきたか
ピクシブ株式会社
中村宇作
ImageFlux meetup #4 - 2019-08-30

ImageFlux

August 30, 2019
Tweet

More Decks by ImageFlux

Other Decks in Technology

Transcript

  1. 3 • RailsDM 2019 (2019. 3. 23)というところで、「Webアプリケーションの開発運用で当たり 前に必要とされる画像変換の中身」という発表をした https://speakerdeck.com/unak/internal-of-the-image-processing-required-on-the-d eveloping-of-web-applications

    • 自前で画像変換しようとしたら、落とし穴がいっぱいあるよ、という内容 • 結論は「ImageMagickは偉大」 • ……なんだけど、ImageFluxはImageMagickを使っていない 前置き
  2. 5 落とし穴①:Exif問題 • Exif = Exchangeable image file format ◦

    富士フイルムが考案、日本電子工業振興協会( JEIDA、現JEITA)で規格化 ◦ デジカメの機種ごとの差異を表現するためにメタ情報をいろいろ入れておく • GPS情報が入ってることがあって、撮影者の位置情報からプライバシーが漏れちゃうことが ある • サムネイル画像が入ってることがあって、本体の画像を加工してセンシティブ情報を消した のに、そっちにはそのまま残ってることがある
  3. 8 落とし穴①:Exif問題 • 色空間情報(カラープロファイル) ◦ 消すと色が変わって見える!? ◦ 詳細は後述 • 回転情報(撮影時のカメラの向き)

    ◦ 消すと画像の向きが変わって見える!? ◦ ImageFluxでは当初は r= 指定で各自で対処してください、というスタンス ◦ 解決策:r=auto オプションを新設して自動回転を可能に
  4. 9 落とし穴②:ICCプロファイル問題 • ICC = International Color Consotium • ICCプロファイル

    = ICCが定義した形式の色空間情報 • 主要画像ファイル形式での対応状況 ◦ JPEG:Exifの中にメタデータとして入れられる ◦ PNG:専用のチャンクとして入れられる ◦ WebP:メタデータとして入れられる ※出典:https://en.wikipedia.org/wiki/Color_space
  5. 12 落とし穴②:ICCプロファイル問題 • JPEGの場合、Exifをまるっと消したら一緒に消える • GIF(ICCプロファイル非対応なフォーマット)に変換したらどうなる? ◦ GIFは256色しか使えないからそこまで問題にはならないとはいえ …… •

    解決策1:出力はsRGBと決めつけて、入力時に存在した ICCプロファイルからsRGBに色を 変換しちゃう • 解決策2:GIFについては解決策1、それ以外は ICCプロファイルを覚えておいて、変換後に 再埋め込みする
  6. 17 落とし穴③:透過部背景色指定問題 • おさらい:「透過」とは? ◦ 文字通り色が透けること ◦ GIFだと「透過色」を指定できて、そのパレット番号が指定されたピクセルは透明なも のとして扱われる ◦

    PNGやWebPにはアルファチャネルというものが存在し、ピクセルごとに「不透過度」 によってどの程度透けているか(というか透けていないか)を指定できる ◦ JPEGには……ない(一切透けない)
  7. 26 落とし穴④:クロップ時内部変換問題 • 入力画像のサイズ: 10000px × 1px • 出力指定サイズ:300px ×

    300px • 横は既に満たしているので後回し • 縦は入力画像の 1px で 300px を満たさないといけないので、300倍の拡大
  8. 27 落とし穴④:クロップ時内部変換問題 • 入力画像のサイズ: 10000px × 1px • 出力指定サイズ:300px ×

    300px • 横は既に満たしているので後回し • 縦は入力画像の 1px で 300px を満たさないといけないので、300倍の拡大 • よって、横は 10000px の300倍になるので、3000000px • 3000000px × 300px の画像を内部的に生成してから、これを 300px × 300px に切り抜く ことになる