VinylCrate - Image Assets

VinylCrate - Image Assets

This directory contains image assets for the VinylCrate marketing website.

Current Status

  • App Icon: ✅ Updated with VinylCrate icon from iOS app
  • Screenshots: ⚠️ Placeholder images from template (need replacement)

Required Images

App Icon

  • File: app-icon.png
  • Status: ✅ Ready to use (copied from VinylCrate iOS app)
  • Size: 1024x1024 pixels

Screenshots (iPhone)

You’ll need 4 high-quality iPhone screenshots showing key features:

File Description Status
screenshot1.png Collection view with albums ⚠️ Placeholder
screenshot2.png Album detail view ⚠️ Placeholder
screenshot3.png Barcode scanning ⚠️ Placeholder
screenshot4.png Insights/analytics ⚠️ Placeholder

Screenshot Guidelines

  1. Collection View
    • Grid of vinyl records with album artwork
    • Shows variety of albums
    • Featured/recently added section visible
  2. Album Detail
    • Beautiful album artwork prominent
    • Track listing visible
    • Pressing details shown
  3. Barcode Scanner
    • Camera viewfinder visible
    • Scanning animation or result
    • Clean, focused interface
  4. Insights View
    • Collection value chart
    • Statistics cards
    • Top valuable records

Screenshot Best Practices

  • Device Time: Set to 9:41 AM (Apple’s standard)
  • Battery: 100% with no charging indicator
  • Signal: Full bars, WiFi on
  • Color Mode: Light mode for primary shots
  • Format: PNG for maximum quality
  • Dimensions: 1290x2796px (iPhone 15 Pro Max)

How to Export Screenshots

  1. Run VinylCrate in iOS Simulator (iPhone 15 Pro Max)
  2. Navigate to the desired screen
  3. Press Cmd+S to save screenshot
  4. Rename and copy to this directory

Existing Assets

✅ App Store Badge

  • File: app-store-badge.svg
  • Status: ✅ Ready (will be used when app launches)
  • Description: Official Apple “Download on the App Store” badge

Image Optimization

After adding your screenshots:

  1. Optimize file sizes using:
    • ImageOptim (macOS)
    • TinyPNG (web)
    • sips (macOS built-in)
  2. Target file sizes:
    • App icon: < 500KB
    • Screenshots: < 300KB each
    • Total images: < 2MB
  3. Optimization command: 
    # Resize for web display
sips -Z 640 screenshot1.png --out screenshot1_optimized.png

Usage in Website

Images are referenced in Jekyll templates as:

<img src="/assets/images/filename.png" alt="Alt text">

Favicon

The app icon (app-icon.png) is automatically used as the site favicon.

Next Steps

  1. ✅ App icon added
  2. ⬜ Export VinylCrate screenshots from iOS Simulator
  3. ⬜ Replace placeholder screenshots
  4. ⬜ Optimize images for web
  5. ⬜ Test locally and deploy