WebSurfer's Home

""

サムネイル画質改善

フォトギャラリーに表示しているサムネイル(幅 69 と 400 のもの 2 種類)の画質が悪くて気になっていました。 特に線のギザギザが出るのが気に入りませんでした。 何か改善する方法があるのではと思って調べてみたら、.NET のライブラリの中に補間のオプションがありました。

それは Graphics クラスにある InterpolationMode プロパティで、8 種類の補間モードが設定できます。 各モードの詳細説明は MSDN ライブラリ を参照してください。

で、実際に縮小してみるとどうなるかですが、以下に例を示しました。 これらは、大きさ 1600 x 1200 のオリジナル画像を、8 種類のモード別に 165 x 124 に縮小したものです。

補間を Default モードにして縮小した画像 補間を Low モードにして縮小した画像 補間を High モードにして縮小した画像 補間を Bilinear モードにして縮小した画像
Default Low High Bilinear
       
補間を Bicubic モードにして縮小した画像 補間を NearestNeighbor モードにして縮小した画像 補間を HighQualityBilinear モードにして縮小した画像 補間を HighQualityBicubic モードにして縮小した画像
Bicubic NearestNeighbor HighQualityBilinear HighQualityBicubic

縮小後のファイルサイズは、High と名前が付いているものが小さく、小さい順に HighQualityBilinear, HighQualityBicubic, High で、それぞれ 3.96 KB, 4.40 KB, 4.41 KB でした。その他はすべて 5 KB 超で、最大は NearestNeighbor の 5.23 KB という結果でした。 何故か見た目の画質の高さとファイルサイズの大きさは比例しないようです(他の画像でも試して見ましたが、大体その傾向でした)。

という訳で、中でも若干シャープに見える HighQualityBicubic を使うことにしました。 本ホームページのフォトギャラリーでは、オリジナルの画像がアップされた時サーバーのプログラムで縮小し、それをオリジナル画像と共に SQL Server のデーターベースに保存するようにしていますが、縮小するコードを書き換えました。 以下のような感じです。

iThumb = new Bitmap(targetW, targetH);
Graphics g = Graphics.FromImage(iThumb);
g.InterpolationMode = InterpolationMode.HighQualityBicubic;
Rectangle srcRect = new Rectangle(0, 0, iOriginal.Width, iOriginal.Height);
g.DrawImage(iOriginal, new Rectangle(0, 0, targetW, targetH), srcRect, GraphicsUnit.Pixel);

また、すでにフォトギャラリーにアップしてあるサムネイル画像も、すべて HighQualityBicubic 補間を使って縮小しなおし、差し替えました。 すでに差し替え済みで見比べられないのでよく分からないと思いますが、いままでの素人っぽいギザギザ画像(上の例で言うと Default 相当)が改善されて、 少しはプロっぽく見えないでしょうか? (笑)