Homepage Hero Image — Tight Crop vs. Wide Shot

Overview

When selecting a homepage hero image, the framing of the photo significantly affects visual impact. A wide shot that includes environmental context (hallways, offices, background clutter) can dilute focus and read as grainy or unprofessional when scaled to full-width hero dimensions. A tighter crop that centers on the subjects creates a cleaner, more confident first impression.

This principle was applied during the VCEDC website pre-launch review, where the original hero image — a photo of Kathy Schmitz and Tracey Pilsner — was replaced with a tighter crop of the same photo.

Decision

Use the tighter, cropped version of the Kathy and Tracey photo as the homepage hero.

The original image included a visible hallway in the background, which was distracting and diluted the professional tone of the page. The cropped version removes the hallway and focuses attention on the two subjects.

"I would go with the tighter shot of the two of them. Don't need to see the hallway."
— Kathy Schmitz, VCEDC Pre-Launch Review Meeting, 2025-12-02

Both Kathy and Tracey agreed on the tighter crop, noting that even if the image resolution was a concern at scale, the compositional improvement outweighed it.

Design Rationale

• Distraction removal: Background elements (hallways, furniture, signage) compete with the subjects and undermine the intended message of the hero section.
• Scale behavior: Hero images are displayed at large widths. A wide shot with peripheral detail often reads as grainy or busy at that scale; a tight crop holds better.
• Subject emphasis: For an EDC homepage, centering leadership in the hero reinforces organizational identity and approachability.

Related Decisions

• A separate lifestyle photo (horizontal orientation) sent by Kathy was earmarked for use on the ^[1] page rather than the homepage.
• Winter-themed photos were also flagged for addition to the site to reflect the current season, particularly on the Living in Vilas County page.

Application Notes

• When a client provides a hero photo that includes unwanted background elements, request a tighter crop before implementation rather than masking or blurring in CSS — the result is cleaner and more flexible across breakpoints.
• If the original photo file is high resolution, a tight crop will typically retain sufficient quality for hero use even without a reshooting session.

References

• ^[2]
• ^[3]