How to Prepare Images for a Website: Size, Format and Compression

Images are usually the heaviest part of a web page. A single photo straight from a phone can be 4 to 8 MB, more than the rest of a typical page combined. Preparing images properly before you upload them makes pages load faster, uses less of your visitors’ mobile data, and helps your search rankings, since Google uses page speed in its Core Web Vitals.

The good news is that it only takes three steps: crop, resize and compress, in that order.

Step 1: Crop to the shape you need

Decide where the image will appear and what shape that space is. A blog header might be wide (16:9 or 2:1), a product photo square, and a profile picture round but cropped from a square. Cropping first removes pixels you don’t need, so every later step works on less data.

The Crop Image has preset aspect ratios for the common shapes, and you can drag the frame to choose what stays in the picture.

Step 2: Resize to the display size

A modern phone camera produces images around 4000 pixels wide. Most websites display images at 800 to 1600 pixels wide. Uploading the full-size photo means every visitor downloads several times more data than their screen can show.

A good rule is to make the image about twice the width it is displayed at in CSS pixels, so it stays sharp on high-density (“retina”) screens. Typical targets:

• Full-width hero or banner: 1920–2400 px wide.
• Image inside an article column: 1200–1600 px wide.
• Product photo or card thumbnail: 600–1000 px wide.
• Avatar or small icon: 128–256 px.

Use the Resize Image with “keep aspect ratio” turned on so the picture isn’t stretched. Resizing alone often cuts the file size by 80 to 90 percent.

Step 3: Pick the right format

Our guide comparing WebP, PNG and JPG goes into detail, but the short version is:

• Photos: WebP, or JPG if you need to support very old software.
• Screenshots, logos, diagrams and anything with text: PNG or lossless WebP, so edges stay crisp.
• Images that need transparency: PNG or WebP. JPG has no transparency.
• Icons and simple illustrations: SVG where possible, because it stays sharp at any size and is often tiny.

WebP is supported by every current browser and is typically 25 to 35 percent smaller than a JPG of the same visual quality. The JPG to WebP and PNG to WebP convert your images in the browser, including batches of files.

Step 4: Compress

Lossy formats like JPG and WebP let you choose a quality level. For most photos a quality between 70 and 85 is visually indistinguishable from the original at normal viewing size, yet much smaller than quality 100. Lower than about 60 and you start to see blocky areas and smeared edges, especially around text and skin tones.

The Compress Image shows the new file size next to the original so you can find the point where the image still looks right. Aim for these rough budgets:

• Hero image: under 300 KB.
• Article image: under 150 KB.
• Thumbnail: under 50 KB.

For more ways to shrink files, see how to reduce image file size.

Don’t forget the HTML

A well-prepared file can still slow a page down if it is added carelessly. A few habits help:

• Set width and height attributes on the <img> tag so the browser reserves space and the layout doesn’t jump while the page loads. This improves the Cumulative Layout Shift score.
• Use loading="lazy" for images further down the page, so they load only when the visitor scrolls near them. Don’t lazy-load the main image at the top.
• Write useful alt text. Describe what the image shows for screen-reader users and search engines. Leave alt="" empty only for purely decorative images.
• Use descriptive file names such as blue-ceramic-mug.webp rather than IMG_2041.webp.

Privacy: remove what you don’t mean to share

Photos from phones often contain hidden metadata, including the date, the camera model and sometimes the GPS location where they were taken. Re-encoding an image in the browser, as the converters on this site do, writes a fresh file without that metadata. It is a good habit before you publish personal photos.

Checklist

1. Crop to the shape of the space.
2. Resize to about twice the display width.
3. Convert photos to WebP (or JPG), graphics to PNG or SVG.
4. Compress to quality 70–85 and check the result.
5. Add width, height, alt text and lazy loading in the HTML.