How to Convert Images to WebP to Speed Up Your Website

To speed up a website with WebP, first resize each image to the largest size it is actually displayed at, then convert it to WebP, and finally check the file size and look before uploading. Resizing usually saves more than the format change itself, and doing both together often cuts image weight by 70–90% compared with a camera JPEG or a PNG photo. ToolMany's Image Converter converts to WebP in your browser; the Image Resizer handles exact dimensions.

This guide is about websites you control: blogs, shop product pages, portfolio sites. For sharing files with other people or uploading to forms, JPG is still the safer choice; see WebP vs JPG vs PNG.

Why images are usually the heaviest part of a page

On most small-business and blog pages, images make up the majority of the bytes a visitor downloads. A single unoptimised phone photo is often 3–5 MB, larger than all of the page's code combined. Heavy images:

• slow down the moment the main content appears (what Google's Core Web Vitals call Largest Contentful Paint);
• cost visitors mobile data;
• make the page feel sluggish when scrolling.

Fixing images is often the single biggest speed improvement available to a site owner, and it needs no developer.

Step 1: Decide the display size

Find out how wide each image actually appears on your site. A blog content column is often 700–800 pixels wide; a full-width banner might be 1600–2000 pixels. Because many visitors have high-density screens, export at about 1.5 to 2 times the displayed width, but not more.

A 4000-pixel camera photo shown at 750 pixels wastes most of its data.

Step 2: Resize

Open the image in the Image Resizer, keep the aspect ratio locked, and type the export width. If the image needs a different shape, such as a square product thumbnail, crop it first in your photo app, then resize. Our guide on resizing without distortion shows how.

Step 3: Convert to WebP

Open the resized image in the Image Converter, choose WebP and convert. In our tests, a 1200 × 800 photo saved as a 2.6 MB PNG became a 256 KB WebP, about a tenth of the size, at the same dimensions. Photos that are already JPEG usually shrink less, but WebP typically still comes in noticeably smaller at similar visual quality.

If your browser cannot create WebP, the converter tells you and saves a PNG instead. Try a different current browser such as Chrome, Edge or Firefox.

Step 4: Check before you upload

• Look at it at 100% zoom. Faces, product edges and text should be clean.
• Check the size. Aim for roughly 100–300 KB for content images and under 500 KB for large hero images. These are guidelines, not hard rules.
• Name it meaningfully: blue-ceramic-mug-front.webp, not IMG_4021.webp. Descriptive file names help both you and search engines.

Transparent images: logos and cut-outs

WebP supports transparency, so it can replace PNG for logos and product cut-outs on your own site. Remove a plain background first with the Background Remover, keep the PNG as your master copy, and convert a WebP version for the website.

Keeping a fallback

Every current major browser displays WebP. Some situations still benefit from keeping a JPG or PNG version:

• email newsletters (many email clients handle WebP poorly);
• downloads you offer visitors, who may open them in older apps;
• marketplaces or platforms that reject WebP uploads.

Many website builders and content management systems now convert to WebP automatically when you upload a JPG. Check yours before doing it by hand; if it does, your job is mainly step 1, uploading images at a sensible size.

Don't forget alt text and dimensions

Faster images are only half the job:

• Alt text describes the image for screen-reader users and search engines: "Blue ceramic mug with a white logo, front view." Keep it short and descriptive, and do not stuff it with keywords.
• Width and height attributes on the image tag let the browser reserve space before the image loads, so the layout does not jump (a Core Web Vitals issue called layout shift).
• Lazy loading (loading="lazy") delays images further down the page until the visitor scrolls near them. Do not lazy-load the main image at the top of the page.

Keep your originals

WebP is a delivery format, not an archive format. Keep the full-size originals in a folder, so you can re-export later if your site's layout changes or a better format becomes common. Never edit and re-save the same WebP over and over; each lossy save throws away a little more detail.

A realistic before-and-after

A small shop's product page had six product photos straight from a phone camera, each around 3.5 MB, about 21 MB in total. After resizing each to 1200 pixels wide and converting to WebP, each photo was typically a couple of hundred kilobytes, about 1–2 MB for the whole set. The page looked the same, but on a mobile connection it went from several seconds of blank image boxes to images appearing almost immediately. Your numbers will depend on your photos, but improvements of this order are common.