Great images make a website feel professional. Getting there isn’t about fancy equipment — it’s about a handful of habits around sizing, weight, cropping, sourcing, and naming that most sites get wrong by default. Here are five things to get right before an image ever goes live.
Standardize Sizes
Every image slot on your site — hero banners, product photos, blog headers, thumbnails — has a defined pixel size. Decide on standard dimensions for each type of slot across your whole site, and resize every image to match before it goes up, rather than uploading whatever size you happened to shoot or export.
This matters for two reasons. First, consistency: a page where every product photo is a slightly different size looks unpolished, and it can cause layout shifts as images load. Second, efficiency: an image that’s larger than its slot forces visitors to download pixels they’ll never actually see, which slows the page down for no benefit.
Set the standard once per image type (e.g., “product images are 800×800,” “blog headers are 1600×900”), document it, and stick to it.
Know Target Weights
Correct pixel dimensions don’t guarantee a fast-loading page — file weight is a separate variable that needs its own attention. As a general guideline:
- Hero images: up to roughly 250KB. These are large, high-impact images, so a bit more weight is acceptable, but this is still a ceiling, not a target to aim for.
- Blog post and product images: aim for around 100KB. These appear more frequently on a page (and across a site), so keeping them lean matters more.
Use a compression tool, or an image CDN that compresses automatically, to hit these targets after resizing. If an image is well over these numbers, that’s usually a sign it either hasn’t been resized to its display dimensions yet or is using a heavier format than it needs to.
Crop For Uniformity
Cropping isn’t only about removing unwanted parts of a photo — it’s a design tool. When product photos, team headshots, or blog thumbnails all share the same aspect ratio and similar framing (same amount of headroom, same distance from subject, same orientation), a page reads as intentional and polished. When they don’t, even good individual photos can make a site feel amateurish.
Before uploading a batch of images, decide on a standard crop ratio for each category (square for product grids, a consistent widescreen ratio for blog headers, etc.), and crop every image in that set to match — even if it means cropping tighter or looser than the original composition.
Don’t Upload Straight From Your Camera
Photos straight off a phone or camera are usually the wrong size, the wrong weight, and often the wrong orientation for a website slot. They also frequently carry embedded metadata (location data, camera settings) that serves no purpose once the image is online and only adds to the file size.
Treat the original photo as raw material, not a finished asset. Run it through a resizing/cropping step and a compression step before it ever reaches your site — whether that’s a dedicated image editor, a bulk-processing tool, or an image CDN that does it automatically. Skipping this step is one of the most common ways oversized, inconsistent images end up live on a site.
Name Image Files Correctly For SEO
Search engines read image file names, so a default name like IMG_4821.jpg is a missed opportunity. Rename images with clear, descriptive, keyword-relevant names before uploading — something a person would plausibly search for.
For example, instead of a generic camera file name, use something like red-leather-sofa-3-seater.jpg. Keep names lowercase, use hyphens between words, and describe what’s actually in the image rather than stuffing in unrelated keywords. This small habit compounds: it helps individual images rank in image search, and it reinforces the topical relevance of the page they sit on.