How to prepare images for a website

By The HandyTechHelper team · 7 min read · Published November 2, 2026

Images are usually the heaviest part of a web page. Uploading photos straight from a phone or camera makes pages slow, especially on mobile data. This workflow keeps them sharp and small.

1. Find out how large the image is displayed

Check the width the image actually takes up on the page. A blog column might be 700 pixels wide; a full-width banner might be 1600 pixels or more. Your browser’s developer tools show the rendered size when you hover over an image.

2. Allow for high-density screens

Phones and many laptops have screens with two or three device pixels for every CSS pixel. An image shown 700 pixels wide looks sharpest on them at about 1400 pixels. Going far beyond twice the display size rarely improves anything but the file size.

3. Resize to that size

Use the image resizer and keep the original proportions; the resizing guide explains how to calculate the matching height. If the layout needs a particular shape, crop first.

4. Choose the format

• Photos: WebP or JPEG.
• Screenshots, diagrams and logos with flat colour: PNG or WebP.
• Anything that needs transparency: PNG or WebP, never JPEG.

All current major browsers display WebP, so it is a safe default for your own site. The format guide covers the details.

5. Compress and check

Start at about 80% quality and look at the result at 100% zoom, paying attention to faces, text and smooth areas like skies. Lower it until you can see a difference, then go back one step. The compression guide shows what the artifacts look like.

6. Name, describe and size it in the HTML

• Use a short, descriptive file name such as red-bike-front.webp instead of IMG_4831.webp.
• Write alt text that says what the image shows for people who cannot see it. Leave alt empty (alt="") for purely decorative images.
• Add width and height attributes. Browsers use them to reserve space, so the page does not jump while images load.
• Add loading="lazy" to images further down the page so they load only when needed. Do not lazy-load the main image at the top.

7. Check for location data

Photos from phones can contain GPS coordinates and the camera model. The file metadata inspector shows what a file contains. When HandyTechHelper’s converters re-save an image, they redraw it from its pixels, so this kind of camera metadata is not copied into the new file.

A worked example

A 4032 × 3024 phone photo for a 700-pixel blog column: resize to 1400 × 1050 (same 4:3 shape), convert to WebP at about 80% quality, then upload it with alt text and width="700" height="525" in the HTML. The display size halves both numbers; the extra pixels serve high-density screens.

Written with AI assistance, then checked against how HandyTechHelper’s tools actually behave. Figures from other companies link to their source. Spotted a mistake? Tell us.