[{"data":1,"prerenderedAt":243},["ShallowReactive",2],{"blog-tag-ja-resize":3},[4],{"id":5,"title":6,"author":7,"body":8,"category":225,"coverImage":226,"description":227,"draft":228,"extension":229,"locale":230,"meta":231,"navigation":232,"noindex":228,"path":233,"publishedAt":234,"seo":235,"slug":236,"stem":237,"tags":238,"updatedAt":234,"__hash__":242},"blog\u002Fblog\u002Fimage-resize-intro.md","画像リサイズをブラウザ内で — \u002Ftools\u002Fimage-resize の思想と使い方","Zerosend Editorial",{"type":9,"value":10,"toc":212},"minimark",[11,15,23,27,35,42,45,69,73,112,115,122,150,153,156,159,162,168,174,180,186,189],[12,13,14],"p",{},"SNS に投稿したい、社内 Wiki に貼りたい、EC サイトの商品画像に使いたい、メールに添付したい。用途ごとに必要な画像サイズは違います。スマホで撮った 4000×3000 ピクセルの写真をそのままアップすると、受け側サーバーで勝手に縮小されたり、表示が重くなったりします。",[12,16,17,22],{},[18,19,21],"a",{"href":20},"\u002Ftools\u002Fimage-resize","Zerosend の画像リサイズツール"," は、この「用途に合う寸法に先に揃えておきたい」需要をブラウザ内で完結させます。",[24,25,26],"h2",{"id":26},"なぜブラウザ内でリサイズするのか",[12,28,29,30,34],{},"画像は、送信前に必要な解像度まで落としておくのが基本です。受け側サーバーの自動縮小に任せると、圧縮アルゴリズムを自分で選べず、結果も見えません。何より、",[31,32,33],"strong",{},"元の高解像度がサーバー側に残ります","。",[12,36,37,38,41],{},"顔写真、社員証、内装写真、診断書のスキャン。個人情報が含まれる画像を、ブラウザの「縮小してアップロード」機能付きサービスに投げることは、結果的に",[31,39,40],{},"原寸画像をそのままアップロードしている","のと同じです。Zerosend では、リサイズ処理そのものをあなたの端末で行うことで、アップロードする画像が本当に縮小済みであることを保証します。",[24,43,44],{"id":44},"使い方",[46,47,48,57,60,63,66],"ol",{},[49,50,51,56],"li",{},[18,52,53],{"href":20},[54,55,20],"code",{}," を開く",[49,58,59],{},"画像をドラッグ&ドロップ (複数ファイル対応)",[49,61,62],{},"目標サイズを指定 — 「幅」「高さ」「長辺」「短辺」のいずれかを固定",[49,64,65],{},"「リサイズを開始する」をクリック",[49,67,68],{},"結果を ZIP でまとめてダウンロード",[70,71,72],"h3",{"id":72},"用途別の推奨サイズ",[74,75,76,82,88,94,100,106],"ul",{},[49,77,78,81],{},[31,79,80],{},"X \u002F Twitter",": 長辺 1600px",[49,83,84,87],{},[31,85,86],{},"Instagram",": 正方形 1080px",[49,89,90,93],{},[31,91,92],{},"LinkedIn \u002F Facebook",": 長辺 1200px",[49,95,96,99],{},[31,97,98],{},"ブログ本文",": 幅 800〜1200px",[49,101,102,105],{},[31,103,104],{},"メールの添付",": 長辺 1024px 程度 (画質維持しつつ 500KB 以下に収まりやすい)",[49,107,108,111],{},[31,109,110],{},"ECサイトのサムネ",": 幅 400〜600px",[24,113,114],{"id":114},"仕組み",[12,116,117,118,121],{},"画像リサイズは、Canvas API の ",[54,119,120],{},"drawImage"," を使ったブラウザ標準のバイキュービック補間で行っています。外部ライブラリの呼び出しも、サーバーへの問い合わせもありません。",[74,123,124,131,138,144],{},[49,125,126,127,130],{},"画像を ",[54,128,129],{},"\u003Cimg>"," 要素として読み込む",[49,132,133,134,137],{},"目標サイズの ",[54,135,136],{},"\u003Ccanvas>"," を作成",[49,139,140,143],{},[54,141,142],{},"ctx.drawImage(img, 0, 0, targetW, targetH)"," で描画",[49,145,146,149],{},[54,147,148],{},"canvas.toBlob()"," で出力形式 (JPEG \u002F PNG \u002F WebP) を指定して Blob に",[12,151,152],{},"一括処理は Promise.all ではなく順次実行しているため、数十枚でもメモリを圧迫しません。",[24,154,155],{"id":155},"縦横比の維持について",[12,157,158],{},"リサイズで気をつけるべき最大のポイントは「アスペクト比の崩れ」です。幅だけを変えて高さはそのままにすると、人物が横に伸びたり商品が歪んだりします。本ツールでは既定で縦横比を維持するため、「幅を指定する」だけで高さは自動計算されます。強制的にトリミングするモードも選べるので、SNS の正方形サムネイルを作る際にも対応できます。",[24,160,161],{"id":161},"よくある質問",[12,163,164,167],{},[31,165,166],{},"Q. 縦横比は保持されますか？","\nA. 既定で保持されます。「幅を合わせる」を選べば高さは自動で計算されます。",[12,169,170,173],{},[31,171,172],{},"Q. EXIF (撮影情報) は？","\nA. リサイズ時に落ちます。プライバシー保護の観点ではむしろ利点です。",[12,175,176,179],{},[31,177,178],{},"Q. 拡大もできますか？","\nA. できますが推奨しません。拡大は情報を増やせないため、AI 超解像を使わない限り画質は改善しません。",[12,181,182,185],{},[31,183,184],{},"Q. 複数ファイルを一括処理できますか？","\nA. はい。ドラッグ&ドロップで複数ファイルを投入すると、同じ設定で一括リサイズして ZIP でまとめてダウンロードできます。",[24,187,188],{"id":188},"関連ツール",[74,190,191,198,205],{},[49,192,193,197],{},[18,194,196],{"href":195},"\u002Ftools\u002Fimage-compress","画像圧縮"," — リサイズ後にさらに軽くしたいときに",[49,199,200,204],{},[18,201,203],{"href":202},"\u002Ftools\u002Fimage-convert","画像形式変換"," — WebP \u002F JPEG \u002F PNG の変換",[49,206,207,211],{},[18,208,210],{"href":209},"\u002Ftools\u002Fimage-edit","画像編集"," — 切り抜き・回転・反転",{"title":213,"searchDepth":214,"depth":214,"links":215},"",2,[216,217,221,222,223,224],{"id":26,"depth":214,"text":26},{"id":44,"depth":214,"text":44,"children":218},[219],{"id":72,"depth":220,"text":72},3,{"id":114,"depth":214,"text":114},{"id":155,"depth":214,"text":155},{"id":161,"depth":214,"text":161},{"id":188,"depth":214,"text":188},"tech",null,"Zerosend の画像リサイズツールは、画像をサーバーに送らず端末内で寸法変更します。用途別の推奨サイズ、一括処理、品質を落とさないリサイズのコツを Zerosend 編集部が解説。",false,"md","ja",{},true,"\u002Fblog\u002Fimage-resize-intro","2026-04-20",{"title":6,"description":227},"image-resize-intro","blog\u002Fimage-resize-intro",[239,240,241],"画像","リサイズ","ツール","_Uhop01N2UVvIiAaq5jlsmlRm_wNoZwYVJzFkekar6Y",1777617518583]