SNSプラットフォームの正しい画像サイズは？

主要プラットフォームのプリセットが組み込まれています：Twitter/X投稿(1200x675)、Instagramフィード(1080x1080)、Instagramストーリー(1080x1920)、Facebook投稿(1200x630)、YouTubeサムネイル(1280x720)、LinkedIn投稿(1200x627)など。「プリセット」モードで対象プラットフォームを選ぶだけでワンクリックリサイズ。

画像リサイズ - サイズ指定・パーセント・SNSプリセットでオンライン変換

正確なサイズ指定、パーセントスケール、SNSプリセットで画像をリサイズ。フォーマット変換、品質調整 — 100%ブラウザ処理、サーバー送信なし。

画像をここにドロップまたはクリックして選択

PNG, JPG, WebP対応

一度に最大20枚 · 1枚あたり最大50MB

画像はすべてブラウザ内で処理されます。サーバーへの送信は一切ありません。

よくある質問

画像リサイズとは何ですか？なぜ必要ですか？

画像リサイズは、画像のピクセル寸法を変更するツールです。ウェブページの最適化（読み込み時間短縮）、SNSプラットフォームの要件対応（各プラットフォームで異なる画像サイズ）、メールテンプレート用画像の準備、サムネイル作成などに不可欠です。例えばInstagramは正方形フィード投稿に1080x1080ピクセル、YouTubeサムネイルは1280x720ピクセルが必要です。

この画像リサイズツールの使い方は？

1. リサイズモードを選択：サイズ指定（正確なピクセル値入力）、パーセント（倍率でスケーリング）、プリセット（SNSプラットフォームサイズ選択）。2. アップロードエリアに画像をドラッグ＆ドロップ。3. リサイズ設定を調整。4. 必要に応じて出力フォーマットと品質を変更。5. 「すべてリサイズ」をクリック。6. 個別ダウンロードまたは「すべてダウンロード（ZIP）」を使用。

画像データは安全ですか？サーバーにアップロードされますか？

画像は100%安全で、ブラウザの外に出ることはありません。すべてのリサイズはHTML5 Canvas APIを使用してクライアントサイドで実行されます。画像データはどのサーバーにも送信されません。ブラウザのネットワークタブで確認できます。

フィット、フィル、ストレッチモードの違いは？

フィットは元のアスペクト比を維持しながら目標サイズ内に収めます。フィルはアスペクト比を維持しながら目標サイズを完全にカバーし、はみ出た部分をトリミングします。ストレッチは画像を目標サイズに正確に合わせ、アスペクト比が異なると画像が歪む可能性があります。ほとんどの場合、フィットモードがおすすめです。

どの画像フォーマットに対応していますか？

3つの一般的なウェブ画像フォーマットに対応しています：PNG（ロスレス、透明度対応）、JPEG（品質調整可能な非可逆圧縮、透明度非対応）、WebP（非可逆・ロスレス両方対応の最新フォーマット、透明度対応）。リサイズ時にフォーマット変換も可能です。

リサイズすると画像品質に影響しますか？

縮小は一般的に品質が良好に保たれます。拡大はバイリニア補間を使用し、やや不鮮明な結果になる場合があります（Canvas APIの制限）。非可逆フォーマット（JPEG、WebP）では品質スライダーで圧縮レベルを調整できます。PNG出力は常にロスレスです。

対応する最大ファイルサイズと解像度は？

1ファイルあたり最大50MB、解像度最大16384 x 16384ピクセル（ほとんどのブラウザのCanvas API制限）に対応しています。バッチ処理では最大20枚の画像を同時にリサイズ可能です。モバイルデバイスではメモリ制約により最大解像度が低い場合があります。

コード例

// Client-side image resizing using Canvas API
async function resizeImage(file, targetWidth, targetHeight, options = {}) {
  const { quality = 0.85, format = null, fitMode = 'fit' } = options;

  return new Promise((resolve, reject) => {
    const img = new Image();
    const url = URL.createObjectURL(file);

    img.onload = () => {
      URL.revokeObjectURL(url);
      const origW = img.naturalWidth;
      const origH = img.naturalHeight;
      let canvasW, canvasH, drawX = 0, drawY = 0, drawW, drawH;

      if (fitMode === 'fit') {
        const scale = Math.min(targetWidth / origW, targetHeight / origH);
        canvasW = Math.round(origW * scale);
        canvasH = Math.round(origH * scale);
        drawX = 0; drawY = 0; drawW = canvasW; drawH = canvasH;
      } else if (fitMode === 'fill') {
        const scale = Math.max(targetWidth / origW, targetHeight / origH);
        drawW = Math.round(origW * scale);
        drawH = Math.round(origH * scale);
        drawX = Math.round((targetWidth - drawW) / 2);
        drawY = Math.round((targetHeight - drawH) / 2);
        canvasW = targetWidth; canvasH = targetHeight;
      } else {
        canvasW = targetWidth; canvasH = targetHeight;
        drawW = targetWidth; drawH = targetHeight;
      }

      const canvas = document.createElement('canvas');
      canvas.width = canvasW; canvas.height = canvasH;
      const ctx = canvas.getContext('2d');

      const outputType = format || file.type || 'image/jpeg';
      if (outputType === 'image/jpeg') {
        ctx.fillStyle = '#ffffff';
        ctx.fillRect(0, 0, canvasW, canvasH);
      }

      ctx.drawImage(img, drawX, drawY, drawW, drawH);

      canvas.toBlob(
        (blob) => {
          if (!blob) { reject(new Error('Resize failed')); return; }
          resolve({
            blob, width: canvasW, height: canvasH,
            originalSize: file.size, resizedSize: blob.size,
          });
        },
        outputType,
        outputType === 'image/png' ? undefined : quality
      );
    };

    img.onerror = () => { URL.revokeObjectURL(url); reject(new Error('Failed to load')); };
    img.src = url;
  });
}

// Usage
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', async (e) => {
  const file = e.target.files[0];
  const result = await resizeImage(file, 800, 600, { quality: 0.9, fitMode: 'fit' });
  console.log(`Resized: ${result.width}x${result.height}, ${result.resizedSize} bytes`);

  const url = URL.createObjectURL(result.blob);
  const a = document.createElement('a');
  a.href = url; a.download = 'resized.jpg'; a.click();
  URL.revokeObjectURL(url);
});