Stop Cropping the Same Stock Photo: A Better Workflow for WordPress Hero Images

Most WordPress hero-image problems do not begin in the Media Library. They begin with a perfectly decent photograph that was never composed for a headline, a button, a mobile crop, and a theme overlay at the same time. The designer keeps moving the focal point, darkening the overlay, and trimming the subject until the image feels less like a photograph and more like evidence of a compromise.

A better approach is to design the background around the content slot. Generative editing can help, but only when the original subject is worth preserving and the team knows exactly what the theme needs. I walked through the current APOB AI image editor to map a workflow that a WordPress site owner can follow without turning a simple hero image into an open-ended art project.

Step 1: Measure the slot before editing the image

Open the page at desktop, tablet, and mobile widths. Record the visible hero ratio, where the heading sits, and what the theme crops. A common working file might be 1600 x 900 pixels, but the correct number is the one your theme actually renders.

Mark three zones on a rough sketch:

• protected subject area;
• copy-safe area for the heading and button;
• expendable edge area that may be cropped on smaller screens.

This matters because a beautiful centered composition often fails when left-aligned copy is added. Decide first whether the subject belongs on the left or right, then generate negative space on the other side.

Step 2: Start with a photograph you can legally use

Choose an owned, commissioned, licensed, or otherwise authorized image. The subject should be sharp and separated from the background, with complete edges around hair, sleeves, or the product silhouette. Avoid starting with a low-resolution thumbnail and asking AI to repair every problem at once.

In APOB, open Image, choose Edit image, then Chat to edit. Upload the source as the Base image. The editor keeps the source visible beside the written instruction, which is useful for comparing what changed.

Figure 1. Begin with a clear base image. The empty edit panel is a good moment to list the details that must remain untouched.

Step 3: Describe the new background and the protected subject

The AI image background generator is most useful when the prompt describes a complete photographic situation. “Make it nicer” gives the system permission to change too much. Use this six-part formula instead:

1. Change: replace only the background.
2. Scene: location, surface, props, and depth.
3. Light: direction, softness, time of day, and shadows.
4. Composition: subject position and copy-safe area.
5. Preserve: face, product shape, clothing, pose, and crop.
6. Exclude: text, logos, extra people, duplicate objects, and visual clutter.

For a service-business homepage, a complete prompt could be:

Replace only the background with a bright, calm studio-office interior in soft morning daylight. Keep the person on the right third of the frame and create a clean, low-detail wall area on the left for a two-line heading and button. Match the original camera height, lens perspective, light direction, and natural contact shadows. Preserve the face, hair, skin tone, clothing, pose, hands, body shape, crop, and expression. No readable text, logos, extra people, plants behind the head, or furniture crossing the subject.

Figure 2. A precise edit description tells the tool what to replace and, just as importantly, what must stay fixed.

Choose Keep original for the first comparison. If the source crop is wrong for the theme, make a separate version at the target ratio rather than forcing one file to serve every placement.

Step 4: Inspect edges before downloading

Review at 100% zoom. Check hair, fingers, transparent fabric, glasses, product labels, and the contact point between shoes or objects and the ground. Compare light direction on the subject with shadows in the new scene. A warm sunset behind a face lit by a cool front softbox will feel wrong even when both parts look realistic alone.

Figure 3. The completed scene should be checked for edge quality, perspective, and believable light before it reaches WordPress.

If the subject changed, narrow the next instruction: “Keep the person pixel-consistent; change only the wall and distant furniture.” If the composition is strong but one edge is weak, fix that issue rather than rewriting the entire scene.

Step 5: Prepare the web file, not just the master file

Keep a high-quality master, then export a web version at the dimensions your theme needs. Use WebP or AVIF when your stack supports it, with a JPEG fallback where required. Compress until the file is meaningfully smaller without obvious banding around gradients, hair, or shadows.

Google recommends sharp, high-quality images but also notes that images are often the largest contributor to page weight. Its guidance favors responsive delivery, descriptive filenames, useful alt text, and standard HTML image elements that crawlers can discover (Google Image SEO best practices).

Rename the upload before it reaches the Media Library. consulting-team-homepage-hero.webp is more useful than final-v7-new.webp. In WordPress:

1. Upload the optimized file to the Media Library.
2. Add alt text that describes the image’s purpose, not a list of keywords.
3. Set it as the featured image or use it in an Image/Cover block according to the theme.
4. Keep the heading as live HTML text instead of baking it into the image.
5. Preview desktop and mobile before publishing.

WordPress’s current Image block documentation confirms that the editor supports upload, Media Library selection, responsive resolution choices, captions, and contextual alt text. It also recommends marking an image decorative when it adds no meaningful information (WordPress Image block documentation).

A five-minute launch check

Before publishing, answer yes to these questions:

• Is the subject fully visible at the narrowest mobile crop?
• Does the headline remain readable without an excessively dark overlay?
• Is the button separated from detailed areas of the photograph?
• Is the file compressed and served responsively?
• Does the alt text explain the image’s role?
• Are all depicted people, products, and brand assets authorized?
• Has someone checked the generated edit for invented text or misleading details?

The practical advantage of an AI background workflow is not unlimited image production. It is rescuing a strong, authorized subject from the wrong setting and making one intentional asset for a real page. Measure the slot, protect the subject, create space for content, and let the WordPress layout do the rest.