為網站壓縮圖片

What a web page actually needs

A photograph displayed at 800 pixels wide does not need to be 4000 pixels wide. Serving the larger file costs your visitor bandwidth, slows the page, and gives them nothing — the browser throws the extra pixels away.

The single most effective thing you can do for page weight is serve images at the dimensions they are displayed at, then compress. Everything else is a smaller win on top.

Targets worth aiming for

High-DPI displays, and how to handle them

A Retina-class screen packs two or more device pixels into each CSS pixel, so an image served at exactly the display size looks slightly soft. The usual answer is to serve roughly twice the CSS dimensions and let the browser downscale — an 800-pixel image in a 400-pixel slot. The wider the availability of high-DPI screens, the more this is the default rather than the exception.

A short checklist

• Resize to the displayed dimensions — twice them if you want crispness on high-DPI screens.
• Choose the format for the content: WebP or AVIF for photographs, lossless WebP for screenshots and graphics.
• Compress at a quality setting you have actually looked at, not one you assumed was safe.
• Use <picture> with an AVIF source, a WebP source and a fallback rather than betting on one format.
• Lazy-load anything below the fold so it is not downloaded before it is needed.