Skip to content

IMAGE_GUIDE.md

Latest commit

 

History

History
111 lines (84 loc) · 3.47 KB

IMAGE_GUIDE.md

File metadata and controls

111 lines (84 loc) · 3.47 KB

Image Integration Guide

This guide explains how to add your images to the T!KAS artist website.

Image Locations

Place your images in the assets/highlights/ folder:

Required Images

  1. Hero Image (hero.jpg or hero.webp)

    • Main hero section image
    • Recommended size: 1200x800px or larger
    • Will be displayed prominently on the homepage

  2. Album Covers (cover1.jpg, cover2.jpg, cover3.jpg)

    • Music release covers
    • Recommended size: 1000x1000px (square)
    • Supports WebP format for better performance

  3. Gallery Images (highlight1.jpg, highlight2.jpg, highlight3.jpg)

    • Visual artwork images
    • Recommended size: 1200x1600px or larger
    • Will be displayed in the gallery with lightbox functionality

Image Formats Supported

  • JPEG (.jpg) - Standard format, widely supported
  • WebP (.webp) - Modern format with better compression (recommended)
  • PNG (.png) - For images with transparency

The website automatically uses WebP when available, falling back to JPEG.

Adding Images

  1. Prepare your images:

    • Optimize images for web (compress if needed)
    • Use descriptive filenames
    • Ensure good quality (at least 72 DPI for web)

  2. Add to highlights folder:

    assets/
└── highlights/
    ├── hero.jpg (or hero.webp)
    ├── cover1.jpg
    ├── cover2.jpg
    ├── cover3.jpg
    ├── highlight1.jpg
    ├── highlight2.jpg
    └── highlight3.jpg

  3. Optional: Add WebP versions:

    • Create WebP versions for better performance
    • Name them: hero.webp, cover1.webp, etc.
    • The website will automatically use WebP when available

Image Optimization Tips

  • Hero image: Keep file size under 500KB for fast loading
  • Album covers: Square format works best, keep under 300KB each
  • Gallery images: Can be larger, but optimize to under 1MB each
  • Use tools like:
    • Squoosh - Online image optimizer
    • ImageOptim - Desktop app
    • Photoshop/Photoshop Express - Export for web

Fallback Images

If images are missing, the website will:

  • Use SVG placeholder illustrations
  • Display gracefully without breaking the layout
  • Show alt text for accessibility

Adding More Gallery Images

To add more gallery items, edit index.html and duplicate a gallery item:

<button class="gallery-item" data-src="assets/highlights/highlight4.jpg" 
        data-fallback="assets/placeholder4.svg" 
        aria-label="View artwork: Your Title">
  <picture>
    <source srcset="assets/highlights/highlight4.webp" type="image/webp" />
    <img src="assets/highlights/highlight4.jpg" 
         alt="Your artwork description" 
         loading="lazy" 
         onerror="this.onerror=null;this.src='assets/placeholder4.svg'"/>
  </picture>
</button>

Performance Features

  • Lazy Loading: Images load as you scroll (better performance)
  • Responsive Images: Automatically adapts to screen size
  • WebP Support: Modern browsers get optimized WebP format
  • Error Handling: Graceful fallbacks if images fail to load

Testing

After adding images:

  1. Refresh your browser (hard refresh: Ctrl+F5)
  2. Check the browser console for any errors
  3. Test on mobile devices
  4. Verify images load correctly

Need help? Check the main README.md for more information.