Admin Panel

Media Optimization Settings

Control how images, videos, and uploads are optimized for speed.

Current Performance Status

Optimization

Active

Image Format

WebP

Lazy Loading

ON

Size Limit

20MB

Image Optimization

Active

Compress all uploaded images using canvas API before saving

Load images only when they scroll near the viewport

High QualityRecommended

Best visual quality, ~20% size reduction

BalancedDefault

Great quality, ~45% size reduction

Maximum SpeedFastest

Smaller files, ~65% size reduction

WebP Conversion Active: All uploaded JPG, PNG images are automatically converted to WebP format during upload — reducing file size by up to 65% with no visible quality loss.

Video Optimization

Videos use preload="none" on category cards and only autoplay when muted

Videos are uploaded via the backend function and served directly. Category card videos use preload="none" to avoid bandwidth waste on mobile. All autoplay is muted for browser compatibility.

Upload Settings

Leave blank to use default storage

Automatically flag media not linked to any tour or setting

Active Performance Features

✅ WebP conversion on all image uploads
✅ Client-side canvas compression before upload
✅ Lazy loading for all below-fold images
✅ Progressive blur-up image loading
✅ Skeleton loaders while data loads
✅ Hero image preloading (LCP optimized)
✅ DNS prefetch for image CDNs
✅ Reviews & galleries defer until scrolled near
✅ Video preload=none on category cards
✅ React Query caching (10min stale time)
✅ Aspect ratio containers (prevents CLS)
✅ Preconnect to Supabase & Unsplash CDN

Core Web Vitals Guide

LCP
Target: < 2.5s

Largest Contentful Paint

Hero image is preloaded with fetchPriority='high'. Use compressed WebP images.

FID / INP
Target: < 200ms

Interaction Responsiveness

Deferred JS loading, React Query avoids unnecessary re-renders.

CLS
Target: < 0.1

Cumulative Layout Shift

All product card images use explicit aspect-ratio containers.