[{"data":1,"prerenderedAt":257},["ShallowReactive",2],{"blog-tag-ja-webp":3},[4],{"id":5,"title":6,"author":7,"body":8,"category":239,"coverImage":240,"description":241,"draft":242,"extension":243,"locale":244,"meta":245,"navigation":246,"noindex":242,"path":247,"publishedAt":248,"seo":249,"slug":250,"stem":251,"tags":252,"updatedAt":248,"__hash__":256},"blog\u002Fblog\u002Fimage-convert-intro.md","画像形式変換をブラウザ内で — \u002Ftools\u002Fimage-convert の思想と使い方","Zerosend Editorial",{"type":9,"value":10,"toc":228},"minimark",[11,15,18,47,55,59,62,65,72,75,78,101,104,130,137,140,147,169,177,180,186,192,198,204,207],[12,13,14],"p",{},"「PNG で貰ったロゴを JPEG にしたい」「iPhone で撮った HEIC を JPG で送りたい」「サイト表示を速くするために WebP に揃えたい」。画像の形式変換は地味ですが発生頻度の高い作業です。",[12,16,17],{},"よくあるユースケースを整理するとこうなります。",[19,20,21,29,35,41],"ul",{},[22,23,24,28],"li",{},[25,26,27],"strong",{},"Web 担当者",": 納品された PNG 素材を WebP に変換してページ表示を高速化したい",[22,30,31,34],{},[25,32,33],{},"デザイナー",": 透過 PNG のロゴを、背景色固定の JPEG に変換してメール添付したい",[22,36,37,40],{},[25,38,39],{},"一般ユーザー",": Windows で開けない HEIC をとにかく JPG に直したい",[22,42,43,46],{},[25,44,45],{},"開発者",": 複数形式が混在した画像フォルダを WebP に一括統一したい",[12,48,49,54],{},[50,51,53],"a",{"href":52},"\u002Ftools\u002Fimage-convert","Zerosend の画像形式変換ツール"," は、この日常作業をブラウザ内で完結させます。一度も外に出さずに、あなたの端末だけで別形式に書き出します。",[56,57,58],"h2",{"id":58},"形式を変換したい主な理由",[12,60,61],{},"画像形式ごとに得意な用途が異なります。目的に合った形式を選ぶだけで、ファイルサイズが 30〜50% 小さくなったり、透過表現が使えるようになったりします。変換そのものを手軽にできる環境があると、素材管理の自由度が大きく上がります。",[56,63,64],{"id":64},"なぜブラウザ内で形式変換するのか",[12,66,67,68,71],{},"画像変換サービスの多くは、アップロード → サーバーで変換 → ダウンロード という流れです。社員写真、契約書のスキャン、製品デザイン案。",[25,69,70],{},"中身を見られたくない画像ほど、オンライン変換ツールに投げづらい","のが現実です。",[12,73,74],{},"Zerosend は、変換処理そのものがブラウザ内で完結するため、機密性の高い素材でもそのまま使えます。DevTools の Network タブを開いたまま変換しても、画像本体がアップロードされていないことを自分で確認できます。",[56,76,77],{"id":77},"使い方",[79,80,81,89,92,95,98],"ol",{},[22,82,83,88],{},[50,84,85],{"href":52},[86,87,52],"code",{}," を開く",[22,90,91],{},"画像をドラッグ&ドロップ (複数可)",[22,93,94],{},"出力形式 (JPEG \u002F PNG \u002F WebP) と品質を選択",[22,96,97],{},"「変換を開始する」をクリック",[22,99,100],{},"結果を ZIP でまとめてダウンロード",[56,102,103],{"id":103},"形式の選び方",[19,105,106,112,118,124],{},[22,107,108,111],{},[25,109,110],{},"JPEG",": 写真・背景画像。透過不要。古いブラウザ\u002Fアプリ互換性が最重要なら",[22,113,114,117],{},[25,115,116],{},"PNG",": ロゴ・UI パーツ・透過必要なグラフィック。可逆圧縮",[22,119,120,123],{},[25,121,122],{},"WebP",": 汎用。JPEG より 25〜35% 小さくなり、透過も扱える。モダン用途の標準",[22,125,126,129],{},[25,127,128],{},"AVIF",": 更に小さいが生成コストが高く、ブラウザ対応がまだ揃いきらない",[12,131,132,133,136],{},"ブログや EC で表示速度を気にするなら ",[25,134,135],{},"WebP 一択","と言って差し支えありません。",[56,138,139],{"id":139},"仕組み",[12,141,142,143,146],{},"Canvas API の ",[86,144,145],{},"canvas.toBlob(callback, 'image\u002Fwebp', quality)"," を使って変換しています。ブラウザ標準のエンコーダなので、外部ライブラリ依存もありません。",[19,148,149,156,163],{},[22,150,151,152,155],{},"入力画像を ",[86,153,154],{},"\u003Cimg>"," として読み込み",[22,157,158,159,162],{},"同寸の ",[86,160,161],{},"\u003Ccanvas>"," に描画",[22,164,165,168],{},[86,166,167],{},"toBlob"," で出力形式と品質を指定して書き出し",[12,170,171,172,176],{},"HEIC 入力のみ別ツール (",[50,173,175],{"href":174},"\u002Ftools\u002Fheic-to-jpg","HEIC → JPG",") に振り分けています。HEIC デコーダがブラウザ標準にまだ入っていないため、別ライブラリを読み込む必要があるためです。",[56,178,179],{"id":179},"よくある質問",[12,181,182,185],{},[25,183,184],{},"Q. WebP に変換するメリットは？","\nA. 同じ視覚品質で JPEG より 25〜35% 小さくなります。透過も扱えるため PNG の代替にもなり、モダンブラウザはすべて対応済みです。ブログや EC では積極的に使う価値があります。",[12,187,188,191],{},[25,189,190],{},"Q. 透過 PNG を JPEG にしたらどうなる？","\nA. 透過部分は白で塗られます。意図しない結果になりやすいので注意してください。透過を維持したい場合は WebP か PNG のままにしてください。",[12,193,194,197],{},[25,195,196],{},"Q. 元のメタデータ (EXIF) は引き継がれる？","\nA. 落ちます。位置情報漏れの予防としてはむしろ利点です。",[12,199,200,203],{},[25,201,202],{},"Q. バッチ処理の上限は？","\nA. 端末のメモリ次第ですが、実用上は 100 枚前後までを推奨します。",[56,205,206],{"id":206},"関連ツール",[19,208,209,216,223],{},[22,210,211,215],{},[50,212,214],{"href":213},"\u002Ftools\u002Fimage-compress","画像圧縮"," — 品質指定で再エンコードしてサイズ削減",[22,217,218,222],{},[50,219,221],{"href":220},"\u002Ftools\u002Fimage-resize","画像リサイズ"," — 形式変換と同時に寸法も揃えたいときは先にこちら",[22,224,225,227],{},[50,226,175],{"href":174}," — iPhone 写真専用の変換",{"title":229,"searchDepth":230,"depth":230,"links":231},"",2,[232,233,234,235,236,237,238],{"id":58,"depth":230,"text":58},{"id":64,"depth":230,"text":64},{"id":77,"depth":230,"text":77},{"id":103,"depth":230,"text":103},{"id":139,"depth":230,"text":139},{"id":179,"depth":230,"text":179},{"id":206,"depth":230,"text":206},"tech",null,"Zerosend の画像形式変換ツールは、JPEG \u002F PNG \u002F WebP \u002F AVIF をサーバーに送らず相互変換します。用途別の形式選び、透過・圧縮率の違いを Zerosend 編集部が整理します。",false,"md","ja",{},true,"\u002Fblog\u002Fimage-convert-intro","2026-04-20",{"title":6,"description":241},"image-convert-intro","blog\u002Fimage-convert-intro",[253,254,122,255],"画像","変換","ツール","xN0-q4ewAvDZNl6TjIn0v_ArxA8uRFuMBmge7YzSp3k",1777617518567]