画像サイズ調整

ツール概要：画像サイズ調整ツール

複数の調整モードと高品質な画像処理をサポートする専門的なオンライン画像サイズ調整ツール。ソフトウェアのインストールは不要で、ブラウザで直接画像のスケーリング、圧縮、最適化を完了できます。

画像サイズ調整ツールとは？

画像サイズ調整ツールは指定サイズにリサイズするし、素早くプレビューと出力ができます。

使い方

1. ファイルをアップロードするか内容を入力します。
2. サイズ・品質・形式・効果を調整します。
3. プレビューしてダウンロードします。

よくある利用シーン

• Webやアプリ用素材の最適化
• デザイン/開発向けの形式変換
• SNSやEC向けの簡易編集

❓ よくある質問

Q1: 圧縮後にぼやける？
A: 品質を上げるか圧縮率を下げてください。

Q2: 透明背景を保持したい？
A: PNG/WebP など対応形式を使ってください。

Q3: 一括処理は？
A: 安定のため小分け処理を推奨します。

🎯 主要機能

複数の調整モード

• 比例スケーリング: 元のアスペクト比を維持してパーセンテージでスケーリング
• カスタムサイズ: ターゲットの幅と高さを正確に設定
• 最大サイズ制限: 指定範囲内で最適なサイズに自動適合

高度なオプション

• 品質制御: 10%-100%の調整可能な圧縮品質
• アスペクト比ロック: 画像の比率を自動的に維持
• リアルタイムプレビュー: 調整効果を即座に表示
• バッチ処理: 複数の画像形式をサポート

📋 サポート形式

入力形式

• JPEG/JPG: 最も一般的な写真形式
• PNG: 透明背景をサポートする画像
• GIF: 動的画像と静的画像
• WebP: 現代的で効率的な画像形式
• BMP: Windows ビットマップ形式

出力最適化

• 元の形式を自動的に維持
• スマート圧縮アルゴリズム
• ファイルサイズを最小化
• 視覚品質を保持

💡 使用シナリオ

1. ウェブサイト画像最適化

// ウェブサイト画像最適化のベストプラクティス
const imageOptimization = {
  // 異なる用途の推奨サイズ
  thumbnails: {
    size: '150x150',
    quality: 80,
    description: 'サムネイル、高速読み込み'
  },
  
  productImages: {
    size: '800x600',
    quality: 85,
    description: '商品表示画像、品質とサイズのバランス'
  },
  
  banners: {
    size: '1920x600',
    quality: 90,
    description: 'バナー画像、高品質表示'
  },
  
  avatars: {
    size: '200x200',
    quality: 75,
    description: 'ユーザーアバター、円形クロップに適している'
  }
}

// 自動化された画像処理ワークフロー
class ImageProcessor {
  constructor() {
    this.canvas = document.createElement('canvas')
    this.ctx = this.canvas.getContext('2d')
  }

  // スマート画像リサイズ
  async smartResize(file, targetWidth, targetHeight, quality = 0.8) {
    return new Promise((resolve, reject) => {
      const img = new Image()
      
      img.onload = () => {
        // 最適なサイズを計算
        const { width, height } = this.calculateOptimalSize(
          img.width, 
          img.height, 
          targetWidth, 
          targetHeight
        )
        
        // キャンバスサイズを設定
        this.canvas.width = width
        this.canvas.height = height
        
        // リサイズされた画像を描画
        this.ctx.drawImage(img, 0, 0, width, height)
        
        // 最適化された画像を出力
        this.canvas.toBlob(resolve, file.type, quality)
      }
      
      img.onerror = reject
      img.src = URL.createObjectURL(file)
    })
  }

  // 最適なサイズを計算
  calculateOptimalSize(originalWidth, originalHeight, maxWidth, maxHeight) {
    const widthRatio = maxWidth / originalWidth
    const heightRatio = maxHeight / originalHeight
    const ratio = Math.min(widthRatio, heightRatio, 1)
    
    return {
      width: Math.round(originalWidth * ratio),
      height: Math.round(originalHeight * ratio)
    }
  }

  // 画像をバッチ処理
  async batchProcess(files, options) {
    const results = []
    
    for (const file of files) {
      try {
        const processedBlob = await this.smartResize(
          file,
          options.maxWidth,
          options.maxHeight,
          options.quality
        )
        
        results.push({
          original: file,
          processed: processedBlob,
          compressionRatio: (1 - processedBlob.size / file.size) * 100,
          success: true
        })
      } catch (error) {
        results.push({
          original: file,
          error: error.message,
          success: false
        })
      }
    }
    
    return results
  }
}

// 使用例
const processor = new ImageProcessor()

// 商品画像を処理
const productFiles = document.getElementById('productImages').files
const productResults = await processor.batchProcess(productFiles, {
  maxWidth: 800,
  maxHeight: 600,
  quality: 0.85
})

console.log('商品画像処理完了:', productResults)

2. ソーシャルメディア画像適応

// ソーシャルメディアプラットフォーム画像仕様
const socialMediaSpecs = {
  instagram: {
    post: { width: 1080, height: 1080, ratio: '1:1' },
    story: { width: 1080, height: 1920, ratio: '9:16' },
    reel: { width: 1080, height: 1920, ratio: '9:16' }
  },
  
  facebook: {
    post: { width: 1200, height: 630, ratio: '1.91:1' },
    cover: { width: 1640, height: 859, ratio: '1.91:1' },
    profile: { width: 400, height: 400, ratio: '1:1' }
  },
  
  twitter: {
    post: { width: 1200, height: 675, ratio: '16:9' },
    header: { width: 1500, height: 500, ratio: '3:1' },
    profile: { width: 400, height: 400, ratio: '1:1' }
  },
  
  linkedin: {
    post: { width: 1200, height: 627, ratio: '1.91:1' },
    cover: { width: 1584, height: 396, ratio: '4:1' },
    profile: { width: 400, height: 400, ratio: '1:1' }
  }
}

// ソーシャルメディア画像アダプター
class SocialMediaAdapter {
  constructor() {
    this.canvas = document.createElement('canvas')
    this.ctx = this.canvas.getContext('2d')
  }

  // 指定されたプラットフォームとタイプに適応
  async adaptForPlatform(imageFile, platform, type) {
    const spec = socialMediaSpecs[platform]?.[type]
    if (!spec) {
      throw new Error(`サポートされていないプラットフォームまたはタイプ: ${platform}-${type}`)
    }

    return new Promise((resolve, reject) => {
      const img = new Image()
      
      img.onload = () => {
        this.canvas.width = spec.width
        this.canvas.height = spec.height
        
        // 中央クロップパラメータを計算
        const { sx, sy, sw, sh } = this.calculateCenterCrop(
          img.width, 
          img.height, 
          spec.width, 
          spec.height
        )
        
        // 適応された画像を描画
        this.ctx.drawImage(
          img, 
          sx, sy, sw, sh,
          0, 0, spec.width, spec.height
        )
        
        // 適応された画像を出力
        this.canvas.toBlob(resolve, 'image/jpeg', 0.9)
      }
      
      img.onerror = reject
      img.src = URL.createObjectURL(imageFile)
    })
  }

  // 中央クロップパラメータを計算
  calculateCenterCrop(imgWidth, imgHeight, targetWidth, targetHeight) {
    const imgRatio = imgWidth / imgHeight
    const targetRatio = targetWidth / targetHeight
    
    let sw, sh, sx, sy
    
    if (imgRatio > targetRatio) {
      // 画像がより幅広い、高さでスケール
      sh = imgHeight
      sw = imgHeight * targetRatio
      sx = (imgWidth - sw) / 2
      sy = 0
    } else {
      // 画像がより高い、幅でスケール
      sw = imgWidth
      sh = imgWidth / targetRatio
      sx = 0
      sy = (imgHeight - sh) / 2
    }
    
    return { sx, sy, sw, sh }
  }
}

// 使用例
const adapter = new SocialMediaAdapter()

// 複数のソーシャルメディアプラットフォームに適応
const originalImage = document.getElementById('imageInput').files[0]
const adaptResults = await adapter.batchAdapt(originalImage, {
  instagram: ['post', 'story'],
  facebook: ['post', 'cover'],
  twitter: ['post', 'header']
})

console.log('ソーシャルメディア適応完了:', adaptResults)

🔧 技術的特徴

クライアントサイド処理

• プライバシー保護: 画像はサーバーにアップロードされず、ローカルで処理
• 即座の処理: アップロード/ダウンロードの待機不要
• オフライン利用可能: オフラインでの使用をサポート
• 制限なし: ファイルサイズと数量に制限なし

高品質アルゴリズム

• バイリニア補間: 滑らかなスケーリング効果
• シャープニング: 画像の鮮明さを維持
• 色忠実度: 元の色空間を保持
• エッジ最適化: エイリアシングとぼかしを削減

⚠️ 使用推奨事項

1. 品質設定: ウェブ用画像は70-85%、印刷用画像は90-95%を推奨
2. サイズ選択: 実際の表示ニーズに基づいて適切なサイズを選択、過度なスケーリングを避ける
3. 形式選択: 写真はJPEG、アイコンはPNG、アニメーションはGIF
4. バッチ処理: 同じ仕様の画像は効率を向上させるためにバッチ処理可能

📱 モバイル最適化

• レスポンシブインターフェースデザイン
• タッチフレンドリーな操作
• 画面サイズに適応
• 最適化された読み込みパフォーマンス