# 📐 Best Image Sizes Report — Nest Theme (Botble CMS)

All recommended sizes are based on the registered image sizes in [functions.php](file:///h:/Work/AlDabboos/botble/platform/themes/nest/functions/functions.php#L240-L242), CSS display dimensions in [style.css](file:///h:/Work/AlDabboos/botble/platform/themes/nest/public/css/style.css), and template usage across the theme.

---

## Registered Image Sizes (via `RvMedia::addSize`)

| Size Name | Width | Height | Used For |
|---|---|---|---|
| `medium` | 800px | 800px | Blog posts, store logos |
| `product-thumb` | 400px | 400px | Product thumbnails (cards, cart, wishlist, search) |

---

## 🖼️ Complete Image Size Guide

### 1. Site Logo
| Property | Value |
|---|---|
| **Recommended Size** | **300 × 110 px** (2× for Retina) |
| **Display Size** | 150 × 55 px |
| **Format** | PNG (transparent background) or SVG |
| **Notes** | Logo height is registered at 55px. CSS constrains width to 100–160px max depending on viewport. Upload at 2× for crisp display on HiDPI screens. |

> [!TIP]
> SVG format is ideal for logos — it scales perfectly at any resolution without increasing file size.

---

### 2. Hero Slider Images
| Property | Value |
|---|---|
| **Desktop** | **1920 × 538 px** |
| **Tablet** | **1024 × 400 px** |
| **Mobile** | **768 × 320 px** |
| **Format** | JPG or WebP (quality 80–85%) |
| **Max File Size** | < 200 KB per image |

> [!IMPORTANT]
> The slider supports **3 separate image uploads** per slide: Desktop, Tablet, and Mobile. Use all three for optimal performance across devices. Background-size is `cover`, so images may be cropped from the edges.

---

### 3. Product Thumbnails
| Property | Value |
|---|---|
| **Recommended Upload** | **800 × 800 px** (square) |
| **System Resize** | 400 × 400 px (`product-thumb`) |
| **Display Container** | Max 320px height |
| **Format** | JPG or WebP, white background |
| **Notes** | Always use **1:1 square** aspect ratio. The hover image (second product image) uses the same size. |

> [!TIP]
> Upload at 800×800 so the system generates a crisp 400×400 thumbnail. Consistency across all products is key.

---

### 4. Ad Banners

| Style | Recommended Size | Aspect Ratio | Notes |
|---|---|---|---|
| **Default (3-column)** | **600 × 350 px** | ~12:7 | Used in `col-lg-4` grid |
| **Style 2 (flash sale)** | **1200 × 520 px** | ~2.3:1 | Full-width background, `background-size: cover` |
| **Style 3 (big banner)** | **1200 × 538 px** | ~2.2:1 | Full-width background |
| **Style 4** | **600 × 400 px** | 3:2 | Medium banner with text overlay |
| **Style 5 (4-column)** | **400 × 300 px** | 4:3 | Small banners in `col-lg-3` |
| **Style 6 (2-column)** | **800 × 400 px** | 2:1 | Medium banners in `col-md-6` |

> [!NOTE]
> Banner images use `border-radius: 10–15px`, so avoid placing critical content in the corners (keep a ~20px safe margin).

---

### 5. Blog Post Images
| Property | Value |
|---|---|
| **Recommended Upload** | **800 × 800 px** |
| **System Resize** | 800 × 800 px (`medium`) |
| **Featured Post (wide)** | **1200 × 628 px** (for social sharing) |
| **Format** | JPG or WebP |

---

### 6. Product Category Icons
| Property | Value |
|---|---|
| **Recommended Size** | **60 × 60 px** (or 120 × 120 px for Retina) |
| **Display Size** | 30 × 30 px (in dropdown/sidebar) |
| **Format** | PNG (transparent) or SVG |

---

### 7. Brand Logos
| Property | Value |
|---|---|
| **Recommended Size** | **400 × 200 px** |
| **Display Max** | 200px wide |
| **Format** | PNG (transparent background) or SVG |
| **Notes** | Displayed with grayscale filter, full color on hover. Keep logos on transparent background. |

---

### 8. Site Features Icons (USP Icons)
| Property | Value |
|---|---|
| **Recommended Size** | **120 × 120 px** (2× for Retina) |
| **Display Size** | Max 60 × 60 px |
| **Format** | PNG (transparent) or SVG |

---

### 9. Store / Vendor Logo
| Property | Value |
|---|---|
| **Recommended Size** | **800 × 800 px** (square) |
| **System Resize** | 800 × 800 px (`medium`) |
| **Format** | JPG, PNG, or WebP |

---

### 10. Newsletter Section
| Property | Value |
|---|---|
| **Background Image** | **1400 × 350 px** |
| **Foreground Image** | **500 × 400 px** (positioned bottom-right, max 40% width) |
| **Format** | PNG (foreground, with transparency) / JPG (background) |

---

### 11. Flash Sale Popup Image
| Property | Value |
|---|---|
| **Recommended Size** | **600 × 420 px** |
| **Min Height** | 420px |
| **Format** | JPG or PNG |
| **Notes** | Used as `background-size: contain`, positioned right. |

---

### 12. Big Banner / Hero Section
| Property | Value |
|---|---|
| **Cover Image** | **1920 × 600 px** |
| **Format** | JPG or WebP |
| **Notes** | Full-width background image with text overlay |

---

### 13. Preloader Image
| Property | Value |
|---|---|
| **Recommended Size** | **150 × 150 px** |
| **Format** | GIF (animated) or PNG |

---

### 14. Favicon
| Property | Value |
|---|---|
| **Recommended Size** | **32 × 32 px** (primary) + **180 × 180 px** (Apple Touch) |
| **Format** | ICO (recommended), PNG, or SVG |

---

### 15. Coming Soon Social Media Icons
| Property | Value |
|---|---|
| **Recommended Size** | **48 × 48 px** |
| **Format** | PNG or SVG |

---

### 16. Install App Widget Images
| Property | Value |
|---|---|
| **App Store / Google Play Badges** | **300 × 90 px** |
| **Payment Gateway Image** | **400 × 50 px** |
| **Format** | PNG (transparent) |

---

## 📋 Quick Reference Summary

| Image Type | Recommended Upload Size | Aspect Ratio | Format |
|---|---|---|---|
| Site Logo | 300 × 110 px | ~3:1 | PNG/SVG |
| Hero Slider (Desktop) | 1920 × 538 px | ~3.6:1 | JPG/WebP |
| Hero Slider (Tablet) | 1024 × 400 px | ~2.5:1 | JPG/WebP |
| Hero Slider (Mobile) | 768 × 320 px | ~2.4:1 | JPG/WebP |
| Product Thumbnail | 800 × 800 px | 1:1 | JPG/WebP |
| Ad Banner (Default) | 600 × 350 px | ~12:7 | JPG/WebP |
| Ad Banner (Full-width) | 1200 × 538 px | ~2.2:1 | JPG/WebP |
| Blog Post | 800 × 800 px | 1:1 | JPG/WebP |
| Category Icon | 120 × 120 px | 1:1 | PNG/SVG |
| Brand Logo | 400 × 200 px | 2:1 | PNG/SVG |
| Site Feature Icon | 120 × 120 px | 1:1 | PNG/SVG |
| Store Logo | 800 × 800 px | 1:1 | JPG/PNG |
| Newsletter BG | 1400 × 350 px | 4:1 | JPG/WebP |
| Newsletter Image | 500 × 400 px | 5:4 | PNG |
| Flash Sale Popup | 600 × 420 px | ~1.4:1 | JPG/PNG |
| Big Banner/Hero BG | 1920 × 600 px | ~3.2:1 | JPG/WebP |
| Preloader | 150 × 150 px | 1:1 | GIF/PNG |
| Favicon | 32 × 32 px | 1:1 | ICO/PNG |

> [!TIP]
> **Performance Best Practices:**
> - Use **WebP** format for photographs (30–50% smaller than JPG)
> - Use **SVG** for logos and icons whenever possible
> - Compress all images before upload (target < 200KB for banners, < 100KB for thumbnails)
> - Always provide Retina (2×) versions for icons and logos