Image Optimization

Using local assets: WebP, Srcset, and fallback formats.

1. Resolution Switching

The browser automatically selects the best file (Small, Medium, or Large) depending on screen width and pixel density (DPR). Aspect ratio 3/2 prevents layout shifts.

Srcset demonstration
WebPAuto Selection
Srcset demonstration
WebPAuto Selection
Srcset demonstration
WebPAuto Selection

2. Picture Tag (Format Fallback)

The <picture> tag provides explicit format selection. If the browser cannot display WebP, the fallback JPG will be loaded. You can also define different images for mobile devices.

Landscape Fallback

WebP with JPG fallback

3. Visual Effects

Using original.jpg for higher-quality visual overlay effects.

Cyberpunk Style

Neon Filter

Gaming Setup

Focus