# Images Folder

This folder contains all the images used in the StreamFlix OTT platform.

## Folder Structure

- `posters/` - Movie poster images (2:3 aspect ratio)
- `banners/` - Hero banner images (21:9 aspect ratio)
- `thumbnails/` - Thumbnail images (16:9 aspect ratio)
- `logos/` - Logo and branding images
- `icons/` - Custom icons and graphics

## Image Guidelines

### Movie Posters
- **Aspect Ratio**: 2:3 (width:height)
- **Recommended Size**: 400x600px minimum
- **Format**: JPG or WebP for better compression
- **Naming**: Use movie ID or slug (e.g., `dark-knight-poster.jpg`)

### Hero Banners
- **Aspect Ratio**: 21:9 (cinematic wide)
- **Recommended Size**: 1920x810px minimum
- **Format**: JPG or WebP
- **Naming**: Use movie ID with banner suffix (e.g., `dark-knight-banner.jpg`)

### Thumbnails
- **Aspect Ratio**: 16:9
- **Recommended Size**: 320x180px minimum
- **Format**: JPG or WebP
- **Naming**: Use movie ID with thumb suffix (e.g., `dark-knight-thumb.jpg`)

## Current Images

The project currently uses Unsplash placeholder images via URLs. To use local images:

1. Download or add your images to the appropriate subfolder
2. Update the image URLs in `assets/js/scripts.js` in the `sampleMovies` array
3. Replace Unsplash URLs with local paths like `assets/img/posters/movie-name.jpg`

## Optimization Tips

- Use WebP format for better compression when possible
- Implement lazy loading (already included in the project)
- Consider using responsive images with `srcset` for different screen sizes
- Compress images before adding to reduce file size

## Example Usage

```javascript
// In scripts.js - sampleMovies array
{
    id: 1,
    title: "The Dark Knight",
    poster: "assets/img/posters/dark-knight.jpg",
    backdrop: "assets/img/banners/dark-knight-banner.jpg",
    // ... other properties
}
```

## Integration with Backend

When integrating with a backend:
- Images should be served from a CDN for better performance
- Implement image upload and processing pipeline
- Use different image sizes for different screen resolutions
- Consider implementing progressive image loading