Stop resizing images by eye

Define your image sizes first

Before you start resizing images, list every context where images appear on your site: hero banners, post thumbnails, inline content images, author avatars, gallery tiles.

For each context, specify the exact dimensions you need. Not approximate—exact. If your post thumbnail is 400×300, write that down. If your hero image is 1200×600, write that down.

Now you have a spec. Stop eyeballing it every time you upload.

Use CMS image processing

Most modern CMSs can generate multiple sizes from one upload. You upload the largest version you need, and the system creates the smaller variants automatically.

WordPress does this with image sizes registered in your theme. Craft CMS does it with transforms. Statamic has asset presets. Learn your CMS's method and configure it once.

Now every image gets resized consistently without manual intervention.

Set minimums, not maximums

Don't tell contributors "images should be around 800 pixels wide." That's a guess, and half your contributors will upload 750 and half will upload 900.

Instead: "Images must be at least 1200px wide. The CMS will resize them to fit."

You're specifying the minimum quality threshold and letting the system handle the output. No ambiguity.

Crop to ratio, not to pixel dimensions

If you need images at 1200×600 and 400×200, you're working with a 2:1 ratio. Specify the ratio in your upload guidelines, and let contributors crop to that.

Most image editors and CMS upload interfaces can overlay a ratio grid. Contributors crop once to the right proportion, then the CMS generates the exact sizes you need.

Ratio-based cropping is easier to explain and harder to mess up than pixel dimensions.

Template enforcement beats documentation

If your templates request a specific image size from the CMS and that size doesn't exist, something should break visibly in preview. Don't let mismatched images silently stretch or squash.

When the preview looks broken, contributors notice and fix it. When it "sort of works," they move on and you get inconsistent layouts.

Name your sizes semantically

Don't name an image size "large" or "medium." Name it for where it's used: `post-thumbnail`, `hero-banner`, `author-avatar`.

Semantic names make it obvious which size to pick. Relative names like "large" require contributors to guess what "large" means in each context.

Audit your actual image usage

Crawl your site and check what image dimensions are actually being served. You'll find oversized images loading in small spaces, inconsistent aspect ratios, and sizes you defined once and never used.

Delete the unused sizes. Regenerate images that don't match your current spec. Inconsistent image sizing compounds over time if you don't periodically clean it up.