VS Codeで画像背景を1クリックで切り抜けるremove-bgは使わないほうが良い

remove.bgのVS Code拡張機能

remove.bgとは画像背景を自動的に切り抜くことができるWebサービス。

最近remove.bgのVS Code拡張機能がコリスで紹介されて話題になっていた。

まじか!VS Codeでできることがまた増えた、エディタで画像から背景を1クリックで切り抜けるようになったぞ

使用するにはremove-bgの拡張機能をインストールしたあとremove.bgにログインしてMy DashboardからAPI Keyを生成してVS Code側に貼り付けて保存する。

VS Code拡張機能を使わないほうが良い理由

VS Code拡張機能 remove-bgを使わないほうが良い理由は4つあります。

「使わないほうが良い」というのは本番のWebサイト用の画像には使わないほうが良いという意味で書いています。

理由1 元画像からサイズを変えてしまう

remove-bgはサイドバーの画像のファイル名を右クリックして「Remove background」を選択すると同じフォルダ内にファイル名のうしろに「-no-bg」が付いた画像が書き出される。

girl.jpgの場合はgirl-no-bg.pngになる。

このとき、画像が大きい場合は元画像の大きさから自動リサイズされる。

例えば1600 × 1069の大きさの画像の場合、611 × 408で書き出されます。

理由2 切り抜きの精度がPhotoshopより低い

Photoshopでも自動切り抜きすることができるのですが、remove-bgはPhotoshopに比べて自動切り抜きの精度が低いです。

以下の画像はPhotoshopの自動切り抜き画像とremove-bgの自動切り抜き画像に黒背景を追加して書き出したものです。

Photoshopのほうは髪の毛の細かい部分まで残して切り抜いていますが、remove-bgのほうは髪の毛の細かい部分を残さず切り抜いています。

元画像はぱくたそにあります。

Photoshopの自動切り抜き画像
Photoshopの自動切り抜き画像
remove-bgの自動切り抜き画像
remove-bgの自動切り抜き画像

理由3 Photoshopより画質が劣化する

先ほどの画像はどちらも切り抜いたあとPhotoshopで画質80で書き出していますが、よくみるとremove-bgのほうはPhotoshopに比べて画質が少し劣化しているのがわかります。

理由4 切り抜き画像の調整ができない

remove-bgは切り抜き画像が書き出されたあとに透過箇所の調整ができません。

Photoshopであれば切り抜きはレイヤーマスクを使って元画像のピクセルの直接削除は行わないので透過箇所の調整ができます。

今回の例だと、どちらも顔の右の髪の毛の内側に緑の背景が残っているが、Photoshopであればレイヤーマスクに透過する範囲を追加すれば、この部分も追加で透過させることができます。

Photoshopは透過部分の調整可能
Photoshopは透過部分の調整可能
remove-bgは透過部分の調整不可
remove-bgは透過部分の調整不可

Photoshopプラグインは使用不可

ちなみにコリスの記事内に記載されているremove.bgのPhotoshopプラグインはPhotoshop 2021ではインストール不可です。

remove.bg Photoshop Extension