意識低いRetina対応。レガシーサイトの画像は俺の嫁に丸投げ (それとjpegノイズ対策)


三行説明

機械学習のチカラでRetina対応されてない画像の倍率をx2.0に変換して高ppi化。
jpeg臭いのが嫌ならGIMPを使おう。
iPhone6Plusの話はやりたくない。

何故やるのか

iPhoneのRetina液晶を始めとした高精細な液晶を搭載する携帯・タブレット端末・パソコンが増えた為、従来の等倍比率の画像が貼り付けられたWebをこれらの環境で閲覧すると、モヤッとしてしまう。

例えばimgタグに埋め込む画像を、今の2倍の縦横比のものにして、それを1/2の幅指定で埋め込めば良い。

もちろん、現在掲載しているjpg,pngをふつーに拡大処理するだけでは意味がない。普通のアプリケーションでこれらを拡大してもたかが知れており、モヤッは結局消えずじまいだろう。

なので全てのファイルを解像度に余裕がある.psdで管理しているならば、それを改めて書き出せば良い。画像が多ければ、全部の画像を2倍にできるようなバッチスクリプトを書けば良い。

面倒。

ならば、ここは"俺の嫁"にご登場願う他ないだろう。

何をやるのか

waifu2xを利用する。
二次元画像を拡大したいと思ったことはありませんか?
写真を綺麗に拡大できるようになった「waifu2x-caffe」の使い方

実装もいっぱい。
waifu2xとその派生ソフト一覧

コマンドラインが苦手な方へのオススメはこちら(windows)。個人的にはcaffeを推す。
waifu2x_win_koroshell
waifu2x-caffe (for Windows)

※ 本家でウェブサービス版があるが、サーバ負荷(AWSかな)が高いそうなので、なるべくスタンドアロンで使おう。

(画像はx2.0,ノイズ除去:弱)
waifu2xで吐き出した画像は、もちろん等倍で見るには微妙なところもあるものの、これを縦横比1/2に縮小した際の画質は、従来のソフトで倍化したもののそれを上回る。
「特有の塗り絵臭さ」も、Retina液晶で閲覧すると目立たなくなる(ユーザが拡大操作を行った時は流石に目につく)。

issue: jpeg特有のモスキートノイズが乗って、それがそのまま拡大される

輪郭周辺にモヤモヤができる、あのノイズの対策が肝となる。とりあえずはwaifu2xの「ノイズ除去」を試してみよう。案外と有能(実際、上記の画像例がwaifu2xでのノイズ除去。まだ目元あたりに変な色ムラが出ているのが視認できる)。

しかしそれでもどうしても取りきれないノイズも存在する。また、レンダリング速度が落ちるのも辛い。そこで、GIMPのフィルタ「選択式ガウスぼかし」を利用し、予めノイズリダクションしておこう。

tips - GIMPでJPEGの蚊を退治して"PNG"化する

ノイズ除去に有りがちな、線の輪郭がボケる感じを抑えたまま、スピーカー・スリッパなどの目立つ劣化を改善できる。また、戸棚や服などのディテールも、ある程度は保持できている。
例ではイラストだが、写真ではディテールに大きく影響する。パラメータの値を調整して妥協点を見出そう。当方では調整後に薄くシャープをかけることも多い。
もっとも、waifu2xに突っ込む前提の話なので、あまり神経質にならなくても問題ない。

issue: 「1分で実現できる有用な技術 Advent Calender」って銘打ってるけど、本当に1分で終わるの? CLIで複数画像指定とかしたら時間かかるのでは。

手間は1分、暇は1時間以上。

_人人人人人人人人人_
> カレンダー詐欺 <
 ̄Y^Y^Y^Y^Y^Y^Y^Y ̄