Basics of image compression (differences between JPEG, PNG, and WebP and how to use them)

When building websites or apps, have you ever wondered which image format to use?

JPEG, PNG, WebP… With so many options, it can be confusing, right? But once you understand the characteristics of each, you’ll naturally know which one to use in which situation.

In this article, we’ll explain the mechanics and proper usage of these three image formats in an easy-to-understand way.

Why is compression necessary?

Digital photos generate a huge amount of data when left uncompressed. If you use large images on a website…

• Page load times will slow down
• Users are more likely to leave
• Server bandwidth costs increase

That’s why we use “image compression” to reduce file sizes while preserving image quality as much as possible.

Two Types of Compression: Lossless and Lossy

Recommendations by Scenario

Decision Flowchart

Embedding images in HTML

To prioritize WebP while providing JPEG to unsupported browsers, <picture> Use the tag.

<!-- pictureタグを使ったフォールバック -->
<picture>
  <!-- WebP対応ブラウザはこちらを使う -->
  <source srcset="image.webp" type="image/webp">
  <!-- 非対応ブラウザはJPEGに切り替わる -->
  <source srcset="image.jpg" type="image/jpeg">
  <!-- 最後はimg要素（必須） -->
  <img src="image.jpg" alt="説明文">
</picture>

Writing it this way ensures that WebP-compatible browsers display the fast WebP version, while non-compatible browsers automatically display the highly compatible JPEG version.

Converting to WebP in Python

You can convert images in just a few lines using Python's Pillow (PIL) library. To install it, pip install Pillow here.

from PIL import Image

# JPEG を WebP に変換（非可逆、quality=85 が一般的）
img = Image.open("photo.jpg")
img.save("photo.webp", "WEBP", quality=85)

# PNG を WebP（透過あり）に変換（可逆）
img = Image.open("logo.png")
img.save("logo.webp", "WEBP", lossless=True)

# フォルダ内の全JPEGをまとめて変換
import os

for filename in os.listdir("./images"):
    if filename.endswith(".jpg"):
        img = Image.open(f"./images/{filename}")
        name = filename.replace(".jpg", ".webp")
        img.save(f"./output/{name}", "WEBP", quality=85)
        print(f"変換完了: {name}")

I hope this article helps you understand image formats.