File format is easy to overlook, but it directly affects image quality, page speed, and browser compatibility.
What a web image format needs to do
- Preserve the details that matter.
- Keep the download reasonably small.
- Work across common browsers and devices.
For most websites, two familiar formats cover these needs: JPEG (.jpg) and PNG (.png). The right choice depends on what the image contains.
Choose JPEG for photos and gradients
JPEG is usually the practical choice for portraits, travel photos, events, and other images with many colors or smooth tonal changes. It provides a strong balance between visual quality and file size.
Choose PNG for crisp edges and transparency
PNG often works better for document pages, UI screenshots, diagrams, logos, and graphics with a limited number of colors. It preserves sharp edges and supports transparent areas.
A simple rule of thumb
Photos and portraits: JPEG.
Diagrams, screenshots, documents, and logos: PNG.