Tomato Note

タグ: PNG

  • JPEGとPNGの違い、圧縮、OGP画像への最適な使い方まで徹底解説

    Web開発やSNS運用、ブログ執筆などで「画像をどの形式で保存・配信するべきか？」と悩んだことはありませんか？この記事では、特に「JPEGとPNGの違い」「Sharpでの圧縮方法」「OGP画像に最適な形式」「mozjpegとは何か」などをわかりやすく解説します。Web制作や画像最適化に関わるすべての人に役立つ内容です！

    JPEGとPNGの違い

    まずは、基本的な「JPEG」と「PNG」の違いをおさらいしましょう。

    JPEG（.jpg）

    • 非可逆圧縮（lossy）：画質をある程度失って容量を減らす
    • 透明をサポートしない
    • 写真やグラデーションの多い画像に向いている
    • ファイルサイズが小さく、Web表示に最適

    メリット

    • 軽量で高速に読み込める
    • 写真や風景画像に強い

    デメリット

    • 再保存のたびに画質が劣化する
    • 透明な背景は使えない

    PNG（.png）

    • 可逆圧縮（lossless）：画質を失わずに保存できる
    • 透明（アルファチャンネル）をサポート
    • 図やスクリーンショット、ロゴなどに最適

    メリット

    • 高画質で劣化しない
    • 背景透過や半透明が使える

    デメリット

    • JPEGよりファイルサイズが大きくなりやすい

    OGP画像にはどちらが最適？

    OGP（Open Graph Protocol）画像とは、FacebookやTwitter、LINEなどでリンクをシェアしたときに表示されるサムネイル画像です。

    OGP画像に最適な形式は？

    結論から言うと、JPEGが最適です。

    理由：

    • JPEGはほぼすべてのSNSやチャットアプリに対応
    • PNGは表示される場合もあるが、ファイルサイズが重くなりやすい
    • WebPは一部プラットフォーム（TwitterやLINE）で非対応または不安定

    透過が必要な場合は？

    OGPでは透過部分が白や黒に置き換えられるため、あらかじめ背景を白などにしてJPEG化するのが安全です。

    sharp('input.png')
  .flatten({ background: '#fff' }) // 透過を白で埋める
  .jpeg({ quality: 80, mozjpeg: true })
  .toFile('ogp.jpg');

    サイズの目安：

    • 推奨サイズ：1200×630px
    • ファイルサイズ：5MB以下（多くのSNSでの上限）

    Sharpで画像を圧縮する方法

    sharpはNode.jsで人気の高性能画像処理ライブラリで、JPEGやPNG、WebP、AVIFなどに変換・圧縮できます。

    JPEGに変換して圧縮する（解像度はそのまま）

    sharp('input.png')
  .jpeg({
    quality: 75,
    mozjpeg: true
  })
  .toFile('output.jpg');

    オプションの意味：

    • quality: 画質（0〜100）。低くするほど軽量
    • mozjpeg: 高効率なJPEGエンコーダを使う（後述）
    • flatten({ background: '#fff' }): 透過を白背景で埋める

    PNGを圧縮する場合

    sharp('input.png')
  .png({
    compressionLevel: 9, // 0〜9（高いほど高圧縮）
    adaptiveFiltering: true
  })
  .toFile('output.png');

    ただし、PNGは可逆圧縮なので、画質は劣化しませんが容量もあまり減らないという特徴があります。

    WebPはOGPに使えるのか？

    WebPとは？

    Googleが開発した次世代画像フォーマットで、JPEGより軽量、PNGの透過もサポートします。

    sharp('input.png')
  .webp({ quality: 80 })
  .toFile('output.webp');

    ただし注意：

    WebPは以下のようにOGPでは互換性に注意が必要です。

    プラットフォームWebP対応備考
    Facebook○一応対応しているがJPEG推奨
    Twitter/X×表示されないことが多い
    LINE×表示されないことが多い
    Slack△表示されるが不安定

    そのため、OGPではWebPを避け、JPEGを使うのがベストです。

    mozjpegとは何か？

    概要：

    mozjpegはMozillaが開発したJPEGエンコーダで、 画質を維持しつつ、通常のJPEGよりファイルサイズを小さくできるのが特徴です。

    特徴：

    • JPEGの標準に準拠している（互換性バッチリ）
    • 圧縮効率が高く、特に中品質（quality 40〜80）で効果的
    • sharp({ mozjpeg: true }) で簡単に利用可能
    sharp('input.png')
  .jpeg({ quality: 70, mozjpeg: true })
  .toFile('compressed.jpg');

    JPEG形式でファイルサイズを可能な限り小さくしたい場合、mozjpegは必須のオプションと言えます。

    まとめ：場面ごとの最適な画像形式は？

    シーンおすすめ形式理由
    OGP画像JPEG最大互換性があるから
    写真や風景画像JPEG軽くてきれいに見える
    透過が必要なロゴやUI画像PNGアルファチャンネル対応
    画像を超軽量にしたいWebP表示用途限定なら最強

    おわりに

    画像フォーマットの選択や圧縮方法は、見た目の品質だけでなく表示速度やSNSでの拡散力にも大きく関わります。特にOGP画像はサービスの第一印象を左右する重要な要素。JPEGを使い、適切に圧縮・最適化することで、Web体験の質を大きく高められます。

    ぜひこの記事を参考に、あなたのプロジェクトでも最適な画像管理を実現してください！