WebP, JPG or PNG: choosing images for a website

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.

Format comparison for web use

A practical workflow for site owners

1. Keep original images in a source folder that is never uploaded.
2. For each image, decide its largest display width on the site. Check your theme's content width.
3. Resize to that width, or twice it if you want extra sharpness on high-density screens.
4. Export photos as WebP at around 75–80% quality. Export logos, icons and diagrams as SVG where possible, otherwise PNG or lossless WebP.
5. Name files descriptively, for example blue-ceramic-mug-front.webp, which helps people and search engines understand them.
6. Write meaningful alt text describing each image for people using screen readers.
7. Test the page on a phone over mobile data and look for images that load slowly.

Worked example: rebuilding a portfolio site

A photographer's portfolio loads slowly because every image is a full-size JPG straight from editing, around 8 MB each. They resize the gallery images to 2,400 pixels on the long edge, export them as WebP at 80% and keep a separate set of 1,200-pixel versions for the thumbnail grid. Each gallery image drops to a few hundred kilobytes, the thumbnail page downloads a fraction of its previous weight, and the images still look sharp on a large monitor. Full-resolution originals stay offline for print clients.

When to keep JPG or PNG

• Images that will also be downloaded and opened in other software, such as press-kit photos, are safer as JPG.
• Email newsletters should use JPG or PNG; support for WebP varies between email clients.
• Favicons and app icons have their own formats; use Favicon Generator rather than WebP.
• If your content management system does not accept WebP uploads, use well-compressed JPG and let any built-in optimiser create WebP versions.

Quick answers

Does WebP help search rankings? Not directly as a format, but faster-loading pages provide a better experience, and loading speed is something search engines measure.

Is AVIF better than WebP? AVIF can be smaller still, but encoding is slower and support in tools outside browsers is less consistent. WebP is a dependable default today.

Can visitors save WebP images? Yes, and modern operating systems open them, although some older desktop apps may not.

Serving several formats at once

You do not always have to choose just one format. The HTML picture element lets a page offer a modern format such as AVIF or WebP first, with JPG or PNG as a fallback for any browser that cannot use the newer format. The browser picks the first format it supports and ignores the rest.

Many platforms do this automatically. Content delivery networks and image services can convert uploads to WebP or AVIF on the fly based on what each visitor's browser accepts, and some website builders and content management systems generate WebP versions of every uploaded image. If your platform does this, upload a good-quality JPG or PNG master and let it handle the conversion.

Accessibility and SEO basics for images

Choosing the right format is only one part of good web images. Every meaningful image needs alt text that describes its content or purpose for people using screen readers, such as Blue ceramic mug with a wooden handle, front view. Decorative images that add no information should have an empty alt attribute so screen readers skip them.

Descriptive file names, captions where helpful and images placed near related text help search engines understand what an image shows. Avoid putting important text inside images, such as prices, opening hours or headings, because it cannot be read by screen readers, translated or searched, and it becomes blurry when compressed. Put that information in the page text instead.

Measuring the impact of image changes

After optimising images, measure the result rather than assuming it helped. Browser developer tools show the size of each image downloaded, and free page speed tools report total page weight and how quickly the main content appears. Compare a few key pages before and after the change, especially on mobile settings.

Look first at the largest images on your most visited pages, such as the home page hero, product listings and blog headers, because improvements there benefit the most visitors. Small icons and thumbnails rarely make a big difference unless there are many of them on one page.

Converting an existing site

For an established website with hundreds of images, converting everything at once is rarely necessary. Start with new uploads: adopt sensible dimensions and WebP for all new content. Then work through the heaviest existing pages, replacing oversized images with resized, compressed versions. Keep the same file names or update links carefully so images do not break, and keep the originals archived in case you need to regenerate images later at a different size or in a different format.

Worked example: a restaurant website

A restaurant's website shows a large hero photo of the dining room, a gallery of twelve dishes and a logo. The original site used a 6 MB PNG hero and full-size JPG dish photos, making the home page over 30 MB. The owner resizes the hero to 1,920 pixels wide and saves it as WebP at 78% quality, resizes dish photos to 1,200 pixels for the gallery and 400 pixels for thumbnails, and replaces the logo PNG with an SVG supplied by the designer.

The home page drops to a small fraction of its previous weight, the hero appears almost immediately on phones, and the dish photos still look appetising on large screens. The opening hours, which used to be text inside an image, are moved into the page text, where they can be read by screen readers, translated by browsers and shown in search results.

Format questions site owners often ask

Will WebP images work in email newsletters? Support varies between email clients, so use JPG or PNG in emails.

Do I need AVIF? Not necessarily. WebP already gives large savings with dependable support; AVIF is a further optimisation that many image services can add automatically.

What about animated images? Animated GIFs are large and limited to 256 colours. Short video files or animated WebP are usually far smaller for the same animation.

Checking browser and platform support

Before switching a whole site to WebP, confirm that your content management system, theme and any plugins accept WebP uploads and display them correctly in every template, including image galleries, social sharing previews and product feeds. Some older plugins and marketplace integrations expect JPG or PNG. Test a few pages and share a page link to a social network to make sure the preview image appears. If anything breaks, keep JPG for that specific use and WebP everywhere else.

Summary

Choose the format by content: WebP or JPG for photos, PNG, lossless WebP or SVG for graphics with sharp edges and transparency. Size images for their display, compress moderately, write good alt text, keep text out of images, and measure page weight before and after changes.