How to Prepare Images for Your Website

A photo straight off a phone is around 4000 pixels wide and 4 MB. Dropped onto a web page it will display at maybe 800 pixels — but the visitor still downloads all 4 MB. Do that five times on one page and you have built a 20 MB page that takes eight seconds to load on a phone.

Fixing this takes about a minute per image, and the order of the steps matters more than people expect.

The right order: crop, resize, convert, compress

Each step throws away data. Doing them in the wrong order means throwing away the same data twice, which costs quality for no benefit. Work from the largest reduction to the smallest:

1. Crop — remove pixels you will never show
2. Resize — scale what remains to its display size
3. Convert — choose the right format
4. Compress — squeeze the last bytes out

Compressing first and resizing after is the classic mistake: you carefully preserve detail in pixels you are about to delete, then compress a second time on the way out, and end up with a softer image than if you had simply gone in order.

Step 1 — Crop to the shape you actually need

Decide the aspect ratio before anything else, because cropping changes the dimensions everything downstream depends on. Common ratios:

• 16:9 — hero banners, video thumbnails, blog headers
• 4:3 — general photos, product shots
• 1:1 — avatars, grid layouts, most social posts

The image cropper has these as presets, and locks the ratio while you drag so you cannot accidentally end up at 15.8:9. Rule-of-thirds guides are overlaid to help you place the subject.

Step 2 — Resize to the display size (this is the big win)

This single step usually cuts file size by 80–95%. The target is simple: the largest size the image will ever be displayed at, doubled for high-density screens.

• Full-width hero: 1920 px wide
• Blog content image: 1200–1600 px wide
• Card or thumbnail: 600–800 px wide
• Avatar: 200–400 px square

Feed your 4000 px photo into the image resizer, set the width, and leave the height on aspect-lock so nothing stretches. Going from 4000 px to 1600 px removes 84% of the pixels before you have compressed anything at all.

Never resize up. Enlarging a small image cannot invent detail; it only produces a bigger, blurrier file.

Step 3 — Convert to the right format

Format choice is mostly mechanical once you know what the image contains:

• WebP — the default choice for photos today. Roughly 25–35% smaller than JPEG at the same visual quality, supported by every current browser.
• JPEG — photographs, when you need maximum compatibility with old software. No transparency.
• PNG — logos, screenshots, diagrams, anything with sharp edges, flat colour or transparency. Terrible for photographs; the file will be enormous.
• SVG — icons and logos that were drawn as vectors. Infinitely sharp and usually tiny, but it has to have been created as a vector; you cannot convert a photo.

The image converter handles PNG, JPG and WebP. One thing to know: converting a transparent PNG to JPEG fills the transparency with white, because JPEG has no alpha channel. If you need the transparency, stay on PNG or WebP.

Step 4 — Compress, and watch the number

Now squeeze what is left. The image compressor gives you a quality slider with a live preview and a running percentage saved, which is the part that matters — you are looking for the point just before visible damage.

Practical guidance: quality 80 is nearly always indistinguishable from the original at normal viewing size. 70 is fine for most photos. 60 starts to show artefacts in smooth gradients — skies are where you will notice first.

Sensible size targets once you are done:

• Hero image: under 200 KB
• Content image: under 100 KB
• Thumbnail: under 30 KB

Two things people forget

Filenames are content. IMG_20260714_093312.jpg tells a search engine nothing. blue-ceramic-coffee-mug.jpg tells it plenty. Rename before uploading — it takes two seconds and it is a real, if small, ranking signal.

Alt text is not optional.It is what screen-reader users hear and what search engines read. Describe what is in the image in a plain sentence. Skip “image of” and stop before you start stuffing keywords.

The whole chain in practice

A 4.2 MB phone photo destined for a blog post: crop to 16:9 → resize to 1600 px wide → convert to WebP → compress at quality 80. The result lands somewhere around 80–120 KB — roughly a 97% reduction, with no visible difference on screen.

Every step above runs inside your browser, so the photo is never uploaded anywhere and the chain takes seconds rather than four separate upload-and-wait cycles. If you need the finished image inline in a stylesheet or an email template, the image to Base64 tool will encode it for you — though keep that trick for genuinely small images.