商品写真や作品画像、確認用プレビューへ「© Example」「SAMPLE」「DRAFT」のような透かし文字を入れたいとき、1枚ずつ画像編集ソフトで作業すると枚数が増えるほど手間がかかります。同じ透かしを使うなら、一度決めた処理を複数画像へまとめて適用する方が効率的です。
Browser KittyのImage Pipeline Builder / 画像処理パイプラインでは、JPEG・PNG・WebPを複数追加し、Resize → Text Watermark → Outputのような処理をノードで組んで一括実行できます。代表画像で途中結果をPreviewし、結果を個別保存またはZIP保存し、同じ処理はRecipeとして再利用できます。
Text Watermarkで設定できる内容を確認する
Image Pipeline Builder v1.0.0のText Watermarkでは、文字列、フォント、文字サイズ、色、Opacity、位置、Margin、Rotationを設定できます。位置は左上・上中央・右上・左・中央・右・左下・下中央・右下の9方向から選べます。
v1.0.0は文字による透かしを対象としており、PNGなどのロゴ画像を重ねる専用Image Watermarkノードはありません。ロゴ画像そのものを一括合成したい場合は、現在の機能範囲とは異なります。
| 設定 | 用途 |
|---|---|
| Text | ©表記、SAMPLE、DRAFTなどの透かし文字 |
| Font / Size / Color | 文字の見た目と大きさを調整 |
| Opacity | 画像を隠しすぎないよう透明度を調整 |
| Position / Margin | 9位置から選び、画像端からの距離を調整 |
| Rotation | 文字を斜めなどに回転 |
最終サイズへResizeしてから透かしを入れると調整しやすい
画像サイズが大きく違うと、同じ文字サイズでも相対的な見え方が変わります。Web掲載用など最終出力サイズを決めている場合は、Resize → Text Watermarkの順にすると、透かし文字を最終ピクセル寸法に合わせて調整しやすくなります。
Text Watermark → Resizeの順でも処理できますが、その場合は元画像へ描いた透かしも含めて後から縮小されます。Pipelineはノードの並び順どおりに処理されるため、同じノードでも順序によって結果が変わります。
代表画像でBefore / Afterを確認してからBatchへ進む
複数画像を追加しても、最初から全件を加工する必要はありません。ノードを選び、代表画像で変更前 / 変更後を切り替えて、文字が大きすぎないか、背景と同化していないか、重要な被写体を隠していないかを確認します。
明るい写真と暗い写真では同じ色・Opacityでも見え方が変わります。可能なら背景の傾向が違う画像も代表画像として切り替え、Batch実行前に極端に見えにくいケースがないか確認します。
透かしと同時にJPEG・PNG・WebPへ書き出す
OutputノードではJPEG・PNG・WebPを選べます。JPEG / WebPでは品質も設定できるため、Resize → Text Watermark → WebPのように、縮小・透かし・形式変換を1回のPipelineへまとめられます。
JPEGは透明部分を保持できないため、透明なPNGやWebPをJPEGへ出力する場合は背景色へflattenされます。PNGは透過を残したい場合の候補になります。用途に合わせてPreviewと実際の出力を確認します。
ファイル名テンプレートと複数Outputで保存先を整理する
Outputのファイル名には{name}、{index}、{index:N}、{width}、{height}を使えます。例えば{name}-watermarkedとすれば、photo-01-watermarked.webpのように元画像と加工済み画像を区別できます。保存パスが重複した場合は-2、-3のように自動回避します。
1つの出力Portから複数branchへ直接接続できるため、同じ透かし処理からWeb掲載用1600px画像とサムネイル用400px画像を同時に作ることもできます。OutputごとにZIP内フォルダを分ければ、大画像とサムネイルを整理した状態で保存できます。
Batchは1画像ずつ処理し、失敗した画像は分けて確認する
「処理を実行」で追加した全画像へPipelineを適用します。ピークメモリを抑えるため、Batchは1画像ずつ逐次処理します。1枚で失敗しても残りは継続し、失敗結果は成功した画像と分けて表示されます。
高解像度画像、大量画像、多数のbranch、高解像度Preview / Outputでは端末メモリを多く使うことがあります。ブラウザや端末の上限は一定ではないため、特定枚数なら必ず処理できるという保証はありません。
同じ透かし処理はRecipeとして保存する
毎回「長辺1600pxへ縮小 → 右下へ© Example → WebP品質82 → {name}-watermarkedで保存」のような同じ作業をするなら、現在のPipelineをRecipeへ登録できます。次回はRecipeカードから新しい画像を選び、「このRecipeを使う」で同じ設定を直接実行できます。
Recipeに保存されるのはGraphと設定で、元画像や生成画像そのものではありません。「Canvasに反映」を選べば保存済みRecipeを編集可能なGraphとして開き、透かし文字やサイズなどを変更してから実行できます。
再エンコードでEXIF / GPSやICC Profileの扱いが変わる
Image Pipeline Builderは出力画像をブラウザで新しくエンコードし、元画像のEXIF / GPSを意図的にコピーしません。Web公開用画像で位置情報を引き継ぎたくない場合には理解しておきたい挙動ですが、撮影日時やカメラ情報を保持したい用途では元画像を別に保管してください。
埋め込みICC Profileの保持も保証しないため、厳密な印刷用カラーマネジメントには向きません。一般的なWeb掲載・確認用・一括画像処理を主な用途として考え、元画像は加工前の状態で残しておくのが安全です。
手順
- Image Pipeline Builderを開き、Imagesノードまたは画像画面からJPEG / PNG / WebPを複数追加します。
- Text Watermarkノードを追加し、Images → Text Watermark → Outputのように接続します。Web用サイズへ揃える場合はText Watermarkの前にResizeを置きます。
- 透かし文字、フォント、文字サイズ、色、Opacity、9位置のいずれか、Margin、Rotationを設定します。
- 代表画像で変更前 / 変更後を切り替え、文字が大きすぎないか、背景に埋もれていないか、被写体を隠していないか確認します。
- OutputでJPEG / PNG / WebP、品質、ファイル名テンプレート、必要ならZIP内フォルダを設定します。
- 「処理を実行」で全画像へPipelineを適用し、成功結果と失敗結果を確認します。
- 結果を個別保存するか、複数画像ならZIPでまとめて保存します。
- 同じ処理を繰り返す場合はRecipeへ登録し、持ち運び用のバックアップが必要ならPipeline JSONも保存します。
画像処理パイプライン
画像処理をノードでつなぎ、JPEG・PNG・WebPの複数画像へ同じ手順を一括適用してRecipeとして再利用します。
注意点
- 画像サイズがばらばらなら、先にResizeしてから透かしを入れると文字サイズを最終出力基準で調整しやすくなります。
- 明るい画像と暗い画像の両方をPreviewし、透かし色とOpacityが極端に見えにくくならないか確認します。
- 元画像は別に保管してください。出力画像は新しくエンコードされ、EXIF / GPSやICC Profileの扱いが元画像と同じではありません。
- SAMPLEやDRAFTのような透かしは利用条件を示す表示にはなりますが、画像のコピーそのものを技術的に防ぐ仕組みではありません。
よくある質問
複数の画像へ同じ透かしを一括で入れられますか？
はい。Text Watermarkを含むPipelineを作り、追加したJPEG / PNG / WebPへまとめて適用できます。Batchは1画像ずつ順番に処理します。
ロゴ画像を透かしとして入れられますか？
v1.0.0のWatermark機能は文字用です。PNGなどのロゴ画像を重ねる専用Image Watermarkノードはありません。
透かしとリサイズを同時にできますか？
できます。Resize → Text Watermark → Outputのように接続すれば、同じ一括処理の中でリサイズ、透かし、出力を実行できます。
WebPへ変換しながら透かしを入れられますか？
できます。OutputでWebPを選べます。JPEGとPNGにも対応し、JPEG / WebPでは品質も設定できます。
透かしの透明度や位置は変えられますか？
はい。文字、フォント、文字サイズ、色、Opacity、9方向の位置、Margin、Rotationを設定できます。
元画像のEXIFやGPSは残りますか？
出力画像へ元画像のEXIF / GPSを意図的にコピーしません。メタデータ保持が必要なら元画像を別に保管してください。
同じ透かし設定を次回も使えますか？
はい。PipelineをRecipeとしてブラウザ内へ保存できます。別ブラウザや別端末へ持ち運ぶ場合はPipeline JSONを保存します。
画像はサーバーへアップロードされますか？
選択画像のデコード、加工、Preview、エンコード、ZIP生成はブラウザ内で行います。standalone版はconnect-src 'none'を使用し、クラウド画像処理APIを使いません。