The wrong image format can double your page weight or destroy quality. The right one is usually obvious — once you know the rules.
JPG for photographs
Lossy compression tuned for natural images. Bad for sharp edges, text, and transparency, but unbeatable for general photography. Default quality target: 80.
PNG for graphics
Lossless, supports transparency, perfect for logos, icons, screenshots, and any image with sharp edges. File sizes balloon for photos.
WebP for everything modern
Better compression than both JPG and PNG, supports transparency, supports animation. Browser support is now universal — use it as the default and only fall back when a tool can't open it.