---
title: American Extractions Image Sizing & UX Adjustments
type: article
created: '2025-10-09'
updated: '2025-10-09'
source_docs:
- raw/2025-10-09-website-sync-americanasymmetric-93155391.md
tags:
- design
- ux
- images
- website
- american-extractions
layer: 2
client_source: null
industry_context: null
transferable: true
---

# 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:
- [[wiki/clients/american-extractions/_index]] — client overview
- [[wiki/meetings/2025-10-09-website-sync-american-extractions]] — full meeting notes with all website decisions
- [[wiki/knowledge/design/product-page-content-structure]] — 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.