画像圧縮とは

画像圧縮は、画像ファイルのサイズを小さくする技術です。適切な圧縮により、ストレージ容量の節約、通信速度の向上、Webサイトのパフォーマンス改善が可能になります。

圧縮方式の種類

可逆圧縮（ロスレス圧縮）

元の画像を完全に復元できる圧縮方式：

• PNG: 透明度を保持、イラストやロゴに最適
• WebP（ロスレス）: PNGより約26%小さいサイズ
• PNG-8: 256色制限で大幅なサイズ削減

非可逆圧縮（ロッシー圧縮）

一部のデータを削除してサイズを削減：

• JPEG: 写真に最適、品質調整可能
• WebP（ロッシー）: JPEGより25-35%小さい
• AVIF: 最新フォーマット、さらに高い圧縮率

圧縮率と品質のバランス

品質設定の目安

実践的な圧縮テクニック

1. 適切なフォーマット選択

function selectImageFormat(imageType, hasTransparency) {
  if (hasTransparency) {
    return 'WebP or PNG';
  }
  
  switch(imageType) {
    case 'photograph':
      return 'JPEG or WebP';
    case 'illustration':
      return 'PNG or SVG';
    case 'icon':
      return 'SVG or PNG';
    default:
      return 'WebP';
  }
}

2. 段階的な最適化

1. 元画像の準備

   • 不要な部分をトリミング
   • 適切なサイズにリサイズ

2. 初期圧縮

   • 品質85%で開始
   • 視覚的な品質を確認

3. 微調整

   • 5%ずつ品質を下げて最適点を探す
   • ファイルサイズと品質のバランスを確認

3. レスポンシブ画像の実装

<img 
  srcset="image-320w.jpg 320w,
          image-640w.jpg 640w,
          image-1280w.jpg 1280w"
  sizes="(max-width: 320px) 280px,
         (max-width: 640px) 600px,
         1200px"
  src="image-1280w.jpg"
  alt="説明文">

圧縮ツールの比較

オンラインツール

• i4u画像圧縮ツール: ブラウザ内処理で安全
• TinyPNG: PNG/JPEG専用、API提供あり
• Squoosh: Google製、詳細な設定可能

コマンドラインツール

# ImageMagickを使用
convert input.jpg -quality 85 -strip output.jpg

# WebP変換
cwebp -q 80 input.jpg -o output.webp

# 複数ファイルの一括処理
for file in *.jpg; do
  convert "$file" -quality 80 "compressed_$file"
done

パフォーマンスへの影響

Core Web Vitalsの改善

適切な画像圧縮により：

• LCP（Largest Contentful Paint）: 2.5秒以下を達成
• CLS（Cumulative Layout Shift）: サイズ指定で0.1以下に
• 総ページサイズ: 50%以上の削減も可能

実例：ECサイトでの改善

// Before: 3.2MB total images
// After: 890KB total images (72% reduction)

const results = {
  pageLoadTime: '4.2s → 1.8s',
  bounceRate: '45% → 32%',
  conversionRate: '2.1% → 2.8%'
};

自動化とワークフロー

Gulpを使った自動圧縮

const gulp = require('gulp');
const imagemin = require('gulp-imagemin');

gulp.task('compress-images', () =>
  gulp.src('src/images/*')
    .pipe(imagemin([
      imagemin.mozjpeg({quality: 80}),
      imagemin.optipng({optimizationLevel: 3}),
      imagemin.svgo()
    ]))
    .pipe(gulp.dest('dist/images'))
);

GitHub Actionsでの自動化

name: Compress Images
on:
  pull_request:
    paths:
      - '**.jpg'
      - '**.jpeg'
      - '**.png'
      - '**.webp'

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: calibreapp/image-actions@main
        with:
          githubToken: ${{ secrets.GITHUB_TOKEN }}
          jpegQuality: '80'
          pngQuality: '80'
          webpQuality: '80'

まとめ

画像圧縮は、単にファイルサイズを小さくするだけでなく、ユーザー体験とビジネス成果に直接影響する重要な技術です。適切なツールと設定を選び、継続的な最適化を行うことで、高速で魅力的なWebサイトを実現できます。

当サイトの画像圧縮ツールを使えば、技術的な知識がなくても簡単に最適化できます。ぜひお試しください。