大量の印刷用画像をウェブ用に変換する方法

こんにちは。広告事業部の上田です。
今はおもに新広告商品の開発をしていますが、少し前までプロのレシピを開発していました。 そのときの話を少し書きます。

プロのレシピは雑誌や料理本、料理研究家のレシピが見放題、横断検索もできるサービスです。
2014年9月にリリースしました。
インターネットで公開されているレシピだけではなく、雑誌や本にしかないレシピもたくさん含んでいます。
開発中、これらの大量のレシピをどうプロのレシピにインポートするかが問題の一つとなっていました。

データは出版社から、基本的にInDesignの形式で受け取りました。
テキストはPDFに変換してコピー&ペーストして手で修正という力技で対処しましたが、画像はEPSファイルをウェブ用に変換しなければいけません。 印刷用の画像なのでカラーモデルはCMYKです。 普通にJPEGに変換しただけだと『IE8以下では見られない』『ChromeやFirefoxで色がかなり変わってしまう』などの問題が起きます。

たとえばCMYKのサンプル画像を、『Photoshopで適切なカラープロファイルを用いて変換したもの』と『一般的なウェブブラウザで表示したもの』を並べてみると一目瞭然です。

Safariが一番マシですが、それでも淡い色合いになっているのが分かりますね。

試行錯誤の結果、ある程度の質を保って変換する方法が確立できたので書いておきます。

ImageMagickの準備

ここから先はMacを想定していますが、WindowsやLinuxでも可能です。

HomebrewでImageMagickを入れている場合は先にアンインストールしてください。

brew uninstall imagemagick

つぎにLittle CMSと、Little CMS対応版のImageMagickをインストールしましょう。

brew install little-cms2
brew install imagemagick --with-little-cms2

最後にAdobeからICCプロファイルをダウンロードして展開します。 使うのはその中のJapanColor2001Coated.iccだけです。

sRGBのプロファイルはMac付属のものを使いますが、無い場合はInternational Color Consortiumからダウンロードしましょう。

画像の枚数が少ないとき

CMYKなJPEGの場合:

convert -profile '/path/to/JapanColor2001Coated.icc' -colorspace cmyk -profile '/System/Library/ColorSync/Profiles/sRGB Profile.icc' -colorspace srgb cmyk.jpg srgb.jpg

EPSの場合: (EPSファイルを300dpiとみなし縦横1000px以下にする)

convert -profile '/path/to/JapanColor2001Coated.icc' -colorspace cmyk -profile '/System/Library/ColorSync/Profiles/sRGB Profile.icc' -colorspace srgb -density 300 -resize '1000x1000^>' -flatten -quality 90 src.eps dest.jpg

画像の枚数が多いとき

複数のファイルを一気に変換する場合はmogrifyコマンドを使いましょう。
CPUのコア数分、並列で変換してくれます。
リソースを食いつぶすようなら-limitで制限できます。

EPSの場合:

mogrify -profile '/path/to/JapanColor2001Coated.icc' -colorspace cmyk -profile '/System/Library/ColorSync/Profiles/sRGB Profile.icc' -colorspace srgb -density 300 -resize '1000x1000^>' -flatten -format jpg -quality 90 *.eps

カラープロファイルは決めうちでいいのか

本来、カラープロファイルは画像やInDesignのファイルに結びついたものを使うべきなのですが、往々にして指定されていません。
そういう場合は"Japan Color 2001 Coated"を指定することで大抵うまくいきます。
"Japan Color 2011 Coated"も出ていますが、"Japan Color 2001 Coated"はAdobeのデフォルトですし、デファクトスタンダードはまだしばらく続くでしょう。

変換による色の劣化


(EIZO×MdN特別セミナーより)

上の色度図のJapan Color 2001 CoatedとsRGBを見ると分かるように、お互いカバー出来ない色域が存在します。 このはみ出た部分の色を変換する場合、変換の手法によって圧縮されたり切り捨てられたりします。
(Photoshopでは『編集→プロファイル変換→マッチング方法』で切り替え可能)
つまり、sRGBからCMYKに変換したあとsRGBに再変換しても、元の色になるとは限らないということですね。

まとめ

印刷物を扱う機会はそれほど頻繁にはないでしょうが、それだけにノウハウが少なくハマりがちです。 CMYKで痛いめにあったらこの記事を思い出してください。

  • カラープロファイル無しでCYMKからRGBに変換するとたいていおかしくなる
  • カラープロファイルが謎の場合は Japan Color 2001 Coated を使おう
  • 安寧のために、なるべく元のRGB画像をもらおう
/* */ @import "/css/theme/report/report.css"; /* */ /* */ body{ background-image: url('http://cdn-ak.f.st-hatena.com/images/fotolife/c/cookpadtech/20140527/20140527163350.png'); background-repeat: repeat-x; background-color:transparent; background-attachment: scroll; background-position: left top;} /* */ body{ border-top: 3px solid orange; color: #3c3c3c; font-family: 'Helvetica Neue', Helvetica, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Meiryo, Osaka, 'MS Pゴシック', sans-serif; line-height: 1.8; font-size: 16px; } a { text-decoration: underline; color: #693e1c; } a:hover { color: #80400e; text-decoration: underline; } .entry-title a{ color: rgb(176, 108, 28); cursor: auto; display: inline; font-family: 'Helvetica Neue', Helvetica, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Meiryo, Osaka, 'MS Pゴシック', sans-serif; font-size: 30px; font-weight: bold; height: auto; line-height: 40.5px; text-decoration: underline solid rgb(176, 108, 28); width: auto; line-height: 1.35; } .date a { color: #9b8b6c; font-size: 14px; text-decoration: none; font-weight: normal; } .urllist-title-link { font-size: 14px; } /* Recent Entries */ .recent-entries a{ color: #693e1c; } .recent-entries a:visited { color: #4d2200; text-decoration: none; } .hatena-module-recent-entries li { padding-bottom: 8px; border-bottom-width: 0px; } /*Widget*/ .hatena-module-body li { list-style-type: circle; } .hatena-module-body a{ text-decoration: none; } .hatena-module-body a:hover{ text-decoration: underline; } /* Widget name */ .hatena-module-title, .hatena-module-title a{ color: #b06c1c; margin-top: 20px; margin-bottom: 7px; } /* work frame*/ #container { width: 970px; text-align: center; margin: 0 auto; background: transparent; padding: 0 30px; } #wrapper { float: left; overflow: hidden; width: 660px; } #box2 { width: 240px; float: right; font-size: 14px; word-wrap: break-word; } /*#blog-title-inner{*/ /*margin-top: 3px;*/ /*height: 125px;*/ /*background-position: left 0px;*/ /*}*/ /*.header-image-only #blog-title-inner {*/ /*background-repeat: no-repeat;*/ /*position: relative;*/ /*height: 200px;*/ /*display: none;*/ /*}*/ /*#blog-title {*/ /*margin-top: 3px;*/ /*height: 125px;*/ /*background-image: url('http://cdn-ak.f.st-hatena.com/images/fotolife/c/cookpadtech/20140527/20140527172848.png');*/ /*background-repeat: no-repeat;*/ /*background-position: left 0px;*/ /*}*/