WebP, JPG or PNG: choosing images for a website
Compare compatibility, transparency, compression and visual quality before selecting a web image format.
Choose by image content
Photographs contain gradual color changes and usually compress well as JPG or WebP. Screenshots, logos and graphics with sharp edges often look cleaner as PNG or lossless WebP.
Transparency rules out JPG because it has no alpha channel. Fill transparent pixels with a deliberate background only when JPG compatibility is required.
WebP can reduce page weight
Modern browsers support WebP, and it often creates smaller photographic files than JPG at comparable visual quality. It also supports transparency, which can make it useful for illustrations and interface assets.
Compatibility outside browsers can still matter. An email workflow, older editor or upload form may accept JPG or PNG but reject WebP.
Dimensions matter as much as format
A correctly formatted image is still wasteful when its pixel dimensions are several times larger than its displayed size. Resize close to the largest rendered width and use responsive image markup where possible.
Do not enlarge a small source to meet an arbitrary preset. It adds bytes without restoring real detail.
Test real visual details
Compare text, edges, gradients and faces at the size visitors will see. Extremely low quality can create ringing around contrast edges and blockiness in smooth areas.
Measure the downloaded file rather than relying on a promised percentage. The best setting depends on each image and encoder.
Keep a source master
Store the original or an editing-quality master outside the website's delivery folder. Generate new web outputs from that master instead of repeatedly converting an already compressed file.
Review metadata before publishing photographs. Remove location and camera data when it is unnecessary for the visitor experience.