Skip to main content

Images & Media Fields

This guide covers bulk management of product images, alt text, media files, and visual content optimization to enhance your product presentation and improve SEO performance.

Product Image Management​

Primary Product Image​

The main image that represents your product.

Field Details:

  • Purpose: Primary visual representation
  • Display: Featured in search results, collections, and product cards
  • SEO Impact: Used in image search and social sharing
  • Requirements: High quality, clear product view

Image Optimization:

File Format: JPG for photos, PNG for graphics with transparency
Resolution: Minimum 800x800px, recommended 1200x1200px
File Size: Optimize for web (under 200KB when possible)
Aspect Ratio: Square (1:1) or consistent ratio across products

Additional Product Images​

Secondary images showing different angles, details, or contexts.

Best Practices:

  • Multiple angles (front, back, side, detail shots)
  • Lifestyle images showing product in use
  • Size/scale reference images
  • Color/variant specific images

Image Sequence Optimization:

Image 1: Main product shot (front view)
Image 2: Alternative angle or back view
Image 3: Detail shot or close-up
Image 4: Lifestyle or context image
Image 5+: Additional variants or features

Alt Text and Accessibility​

Image Alt Text​

Descriptive text for accessibility and SEO.

Field Details:

  • Purpose: Screen reader accessibility and image SEO
  • Length: 125 characters or less recommended
  • Content: Descriptive but concise
  • Keywords: Include relevant keywords naturally

Alt Text Templates:

Product Focus: title + " - " + color + " " + product_type
Descriptive: title + " showing " + visible_features
Context: title + " in " + setting + " environment"
Brand Focus: vendor + " " + title + " product image"
Variant Specific: title + " - " + option1 + " " + option2

Alt Text Best Practices:

  • Describe what you see, not what you think
  • Include product name and key visual elements
  • Mention color, style, or important features
  • Avoid "image of" or "picture of" prefixes
  • Be specific but concise

Image Titles​

HTML title attributes for additional context.

Title Attributes:

Hover Text: title + " - Click to view larger image"
Feature Focus: "View " + title + " " + feature + " details"
Action-Oriented: "Shop " + title + " in " + color
Gallery: title + " - Image " + sequence + " of " + total

Image File Management​

File Naming Conventions​

SEO-friendly and organized file names.

Naming Strategies:

Product-Based: SLUGIFY(vendor + "-" + title + "-" + color)
SKU-Based: sku + "-" + image_type + "-" + sequence
Descriptive: SLUGIFY(title + "-" + feature + "-" + angle)
Systematic: product_id + "-" + variant_id + "-" + position

File Name Examples:

apple-iphone-15-pro-black-front.jpg
nike-air-max-270-white-lifestyle.jpg
samsung-galaxy-watch-detail-screen.jpg

Image Organization​

Systematic approach to image management.

Folder Structure:

/products/
  /electronics/
    /smartphones/
      /apple-iphone-15/
  /clothing/
    /t-shirts/
      /premium-cotton-tee/

Version Control:

  • Original high-resolution files
  • Web-optimized versions
  • Thumbnail versions
  • Social media optimized versions

Bulk Image Operations​

Image URL Updates​

Update image URLs across multiple products.

Common Operations:

CDN Migration: REPLACE(image_url, "old-cdn.com", "new-cdn.com")
HTTPS Update: REPLACE(image_url, "http://", "https://")
Domain Change: REPLACE(image_url, "old-domain.com", "new-domain.com")
Path Update: REPLACE(image_url, "/old-path/", "/new-path/")

Alt Text Bulk Updates​

Standardize alt text across product images.

Bulk Alt Text Operations:

Generate Missing: IF alt_text IS EMPTY THEN alt_text = title + " product image"
Standardize Format: alt_text = title + " - " + primary_color + " " + product_type
Add Brand: alt_text = vendor + " " + existing_alt_text
Remove Generic: REPLACE(alt_text, "image of ", "")

Image Quality Audits​

Identify and fix image quality issues.

Quality Checks:

Missing Images: image_url IS EMPTY
Low Resolution: image_width < 800 OR image_height < 800
Large File Size: image_file_size > 500KB
Broken Links: HTTP_STATUS(image_url) != 200

Image SEO Optimization​

Image Search Optimization​

Optimize images for Google Image Search.

SEO Factors:

  • Descriptive file names with keywords
  • Relevant alt text with target keywords
  • Appropriate image context on page
  • Fast loading times
  • Mobile-friendly display

Image SEO Templates:

File Name: primary_keyword + "-" + secondary_keyword + "-" + product_id
Alt Text: primary_keyword + " " + title + " - " + key_feature
Caption: title + " featuring " + benefits + " - Shop now!"

Social Media Optimization​

Optimize images for social sharing.

Social Media Specs:

Facebook: 1200x630px (1.91:1 ratio)
Instagram: 1080x1080px (1:1 ratio)
Twitter: 1200x675px (16:9 ratio)
Pinterest: 1000x1500px (2:3 ratio)

Open Graph Tags:

og:image = primary_image_url
og:image:alt = seo_optimized_alt_text
og:image:width = image_width
og:image:height = image_height

Media File Management​

Video Content​

Product videos and multimedia content.

Video Types:

  • Product demonstrations
  • 360-degree product views
  • Unboxing videos
  • How-to and tutorial content
  • Customer testimonial videos

Video Optimization:

Format: MP4 for web compatibility
Resolution: 1080p minimum, 4K for premium products
Length: 30-90 seconds for product demos
Thumbnail: High-quality still frame
Captions: Include for accessibility

3D Models and AR Content​

Advanced visual content for enhanced shopping experience.

3D Model Requirements:

  • GLB or USDZ format for web/mobile
  • Optimized polygon count for performance
  • Realistic textures and materials
  • Proper lighting and shadows

AR Implementation:

Model URL: 3d_model_url
AR Enabled: ar_enabled = true
Viewer Type: "model-viewer" or "ar-quick-look"
Scale: realistic_scale_factor

Image Variants and Options​

Variant-Specific Images​

Images for different product variants.

Variant Image Strategy:

Color Variants: Separate images for each color option
Size Variants: Scale reference images when relevant
Style Variants: Different images for style variations
Material Variants: Show texture and material differences

Variant Image Mapping:

IF variant_option1 = "Red" THEN primary_image = red_product_image
IF variant_option1 = "Blue" THEN primary_image = blue_product_image
IF variant_option2 = "Large" THEN detail_image = large_size_detail

Option-Based Image Switching​

Dynamic image updates based on selected options.

Image Switching Logic:

Color Selection: Update all images to match selected color
Style Selection: Show style-specific images
Size Selection: Update scale reference images
Material Selection: Show material-specific detail shots

Performance Optimization​

Image Loading Performance​

Optimize image loading for better user experience.

Performance Techniques:

  • Lazy loading for images below the fold
  • Progressive JPEG for faster perceived loading
  • WebP format for modern browsers
  • Responsive images for different screen sizes

Image Optimization:

Compression: Optimize file size without quality loss
Format Selection: WebP > JPEG > PNG based on content
Responsive Images: Multiple sizes for different devices
CDN Delivery: Use content delivery network for faster loading

Mobile Optimization​

Ensure images work well on mobile devices.

Mobile Considerations:

  • Touch-friendly image galleries
  • Pinch-to-zoom functionality
  • Fast loading on slower connections
  • Appropriate sizing for small screens

Image Analytics and Testing​

Image Performance Metrics​

Track how images impact business metrics.

Key Metrics:

  • Image load times
  • Conversion rates by image quality
  • Engagement with image galleries
  • Mobile vs desktop image performance

A/B Testing for Images​

Test different image strategies.

Testing Elements:

  • Primary image selection
  • Number of images per product
  • Image order and sequence
  • Alt text variations for SEO

Image Rights and Licensing​

Ensure proper rights for all product images.

Legal Requirements:

  • Own copyright or proper licensing
  • Model releases for people in images
  • Property releases for recognizable locations
  • Trademark compliance for branded items

Accessibility Compliance​

Meet accessibility standards for images.

WCAG Guidelines:

  • Meaningful alt text for all images
  • Sufficient color contrast in images
  • Text alternatives for informational images
  • Keyboard navigation for image galleries

Automation and Workflows​

Automated Image Processing​

Set up automated workflows for image management.

Automation Examples:

Auto-Resize: Automatically resize uploaded images to standard dimensions
Format Conversion: Convert PNG to JPEG for photos automatically
Compression: Automatically compress images for web optimization
Alt Text Generation: Generate basic alt text from product data

Image Quality Control​

Automated quality checks for uploaded images.

Quality Validation:

Resolution Check: Minimum 800x800px required
File Size Limit: Maximum 2MB per image
Format Validation: Only JPG, PNG, WebP allowed
Aspect Ratio: Maintain consistent ratios

Best Practices Summary​

Image Strategy​

  • Invest in high-quality product photography
  • Maintain consistent style and lighting across products
  • Show products from multiple angles and contexts
  • Include lifestyle images to show products in use

SEO and Accessibility​

  • Use descriptive, keyword-rich file names
  • Write meaningful alt text for all images
  • Optimize image file sizes for fast loading
  • Implement structured data for images

Technical Excellence​

  • Use appropriate image formats for content type
  • Implement responsive images for all devices
  • Set up proper CDN for fast global delivery
  • Monitor image performance and loading times

Next Steps​