American Extractions Image Sizing & UX Adjustments

Overview

During the October 2025 website review, Caitlin (American Extractions) and Karly (Asymmetric) identified that product page images were too large — particularly in portrait orientation — creating a heavy, scroll-intensive experience. The agreed fix is to reduce image sizes and shift toward landscape-oriented images to better balance visual content with text.

This pattern is worth noting as a general design principle: when sidebar or adjacent text content is reduced or simplified, oversized images become more visually dominant and can feel disproportionate.

The Problem

• Product page images were rendering very tall on screen, requiring excessive scrolling past a single image before reaching content
• Portrait-oriented images compounded the issue by occupying significant vertical space
• As product page text content was being reduced (consolidating icon sections, removing redundant copy), the imbalance between image size and text became more pronounced
• At least one image (a woman on the Products & Services page) was flagged as visually off-brand — described as looking "fake" or "robotic" — and needs replacement regardless of sizing

"I had mentioned at one point just that the images feel really tall and big... it did feel just like across the website, just really large, like where I was like scrolling with a giant image."
— Caitlin Doak

Recommended Adjustments

1. Reduce Image Height / Overall Size

• Shrink image dimensions across product pages so they don't dominate the viewport
• Images should complement the text content, not dwarf it

2. Prefer Landscape Orientation

• Swap portrait-oriented images for landscape (horizontal) alternatives where possible
• Landscape images consume less vertical space and integrate more naturally into side-by-side text/image layouts

3. Replace Off-Brand Imagery

• The woman image on the Products & Services page should be replaced with a more authentic, on-brand photo
• When sourcing replacements, prefer images that feel natural and industry-relevant rather than stock-generic

4. Coordinate Image Changes with Content Reduction

• When text content on a page is being simplified or condensed, revisit image sizing in the same pass — the two are visually coupled
• A large image next to minimal text creates imbalance; reducing one should prompt rechecking the other

Application to This Project

These adjustments apply across the American Extractions product pages (Stick Packs, Gummies, Tinctures, ClearMix, and the Products & Services overview). The developer should implement image size reductions alongside the content restructuring work agreed in the same meeting.

See also:
- ^[1] — client overview
- ^[2] — full meeting notes with all website decisions
- ^[3] — related decisions on content hierarchy and CTA language

Generalizable Principle

When simplifying page content, always audit image sizing in the same pass. Portrait images in text-adjacent layouts are high-risk for creating scroll-heavy, imbalanced pages — landscape orientation is a safer default for product and service pages.