Image Handling

Image Handling Overview

Our image handling system ensures consistent, high-quality visuals across the platform while maintaining optimal performance. This system covers organization, naming conventions, responsive sizing, optimization, and implementation.

Image Organization Structure

Images are organized by purpose and content type in a structured directory system:

assets/
└── images/
    ├── brands/             # Brand-specific images
    │   └── [brand-name]/   # Each brand gets its own folder
    │       ├── originals/  # Original high-res images
    │       └── [generated responsive images]
    │
    ├── site/               # Site-wide design elements
    │   ├── layout/         # Layout elements (headers, backgrounds)
    │   ├── icons/          # UI icons and small graphics
    │   ├── logos/          # Site logos and logomarks
    │   └── ui/             # UI elements (buttons, decorations)
    │
    ├── pages/              # Page-specific images
    │   ├── home/           # Homepage images
    │   ├── about/          # About page images
    │   └── [other pages]/  # Other main sections
    │
    ├── posts/              # Blog post images
    │   └── YYYY-MM-DD-post-slug/  # Folder per post
    │
    ├── people/             # Team/people images
    │   ├── headshots/      # Professional portraits
    │   └── team/           # Group photos
    │
    └── sectors/            # Sector/industry imagery
        ├── hotels/         # Hotel sector images
        ├── spirits/        # Spirits sector images
        └── [other sectors]/

Brand Image Organization

Brand images are organized by brand name, with each brand having its own directory:

Image Naming Conventions

Brand Image Naming

Brand images follow this standardized naming pattern:

Standard Purpose Identifiers

Common purpose identifiers for image naming:

Non-Brand Image Naming

Non-brand images follow a similar pattern but may omit the brand component:

Responsive Image Sizes

All responsive images are generated in these standard widths:

Recommended Aspect Ratios

To maintain visual consistency across the platform, use these standard aspect ratios:

Special Case: Logo Images

Logo images should be:

• Provided in PNG format with transparency
• Available in both light and dark versions when applicable
• Sized appropriately for various use cases (header, footer, social sharing)

Image Optimization Process

Automation Workflow

The image processing workflow uses a custom script to generate responsive versions automatically:

Image Processing Script

The script, located at scripts/resize_images.sh, automatically:

• Detects the purpose from the filename
• Creates multiple responsive sizes
• Applies appropriate optimization
• Places files in the correct directory
• Maintains consistent naming patterns

# Process images for a specific brand
./scripts/resize_images.sh teatime

# Process all brand images
./scripts/resize_images.sh

# Process all image categories
./scripts/process_all_images.sh

Quality Settings

Standard quality settings for optimal balance between file size and appearance:

# From resize_images.sh script
convert "$IMG" -resize "${SIZE}x" -quality 85 "$BRAND_DIR/$OUTPUT_FILENAME"

Implementation in Jekyll

Responsive Image Includes

Jekyll includes make it easy to use responsive images throughout the site:

<!-- For brand images -->

{% include brand-image.html 
   brand="teatime" 
   image="storefront" 
   purpose="hero"
   alt="TeaTime storefront in Moscow" 
   class="featured-image" %}


<!-- For non-brand images -->

{% include site-image.html 
   category="home"
   image="banner" 
   purpose="hero"
   alt="Brandmine connecting BRICS consumers" 
   class="full-width" %}

Brand Image Include Implementation

The brand image include automatically generates all the necessary HTML for responsive images:

<img src="/assets/images/brands//---400w.jpg"
     srcset="/assets/images/brands//---400w.jpg 400w, /assets/images/brands//---800w.jpg 800w, /assets/images/brands//---1200w.jpg 1200w"
     sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
     alt=""
     
     loading="lazy">

Usage Examples

Image Processing Tools

Several tools are available for image processing and optimization:

Image Requirements by Context

Different contexts require specific image characteristics:

SEO Best Practices

For optimal SEO with images:

<!-- Example of SEO-optimized image -->
<img src="/assets/images/brands/teatime/teatime-product-premium-darjeeling-800w.jpg"
     alt="TeaTime Premium Darjeeling Tea - Organic loose leaf black tea from Darjeeling, India"
     width="800"
     height="600"
     loading="lazy">

Troubleshooting Common Issues

Image Processing Script Issues

Jekyll Include Issues

Implementation Guidelines

Best Practices for Image Implementation

1. Responsive images
   • Always use the responsive image includes
   • Provide appropriate sizes attribute for complex layouts
   • Test rendering on various device sizes
2. Image quality
   • Start with high-quality source images
   • Keep original images in the originals/ folder
   • Let the optimization process handle resizing and compression
3. Naming conventions
   • Follow the established purpose-based naming patterns
   • Use descriptive, keyword-rich filenames
   • Be consistent with naming across the site
4. Alt text
   • Provide meaningful alternative text for all images
   • Include relevant keywords naturally
   • Describe the image content and purpose
5. Performance optimization
   • Implement lazy loading for images below the fold
   • Avoid unnecessarily large images
   • Use appropriate image formats (JPEG for photos, PNG for logos)
6. Process automation
   • Use the provided scripts for image processing
   • Maintain the directory structure
   • Follow the workflow for adding new images