# Responsive Images & Client Hints Comprehensive guide to creating responsive images with Cloudinary, including `dpr_auto`, `w_auto`, and Client Hints configuration. ## Overview Cloudinary provides several approaches for responsive images: 1. **Client Hints** (`dpr_auto`, `w_auto`) - Automatic adaptation (Chromium-only) 2. **Explicit DPR values** (`dpr_2.0`) - Universal browser support 3. **JavaScript solutions** - Dynamic responsive images 4. **Responsive breakpoints** (`w_auto:breakpoints`) - Multiple image sizes ## Device Pixel Ratio (DPR) ### Understanding DPR DPR represents the ratio between physical pixels and CSS pixels on a device: - **1x displays**: Standard screens (DPR = 1.0) - **2x displays**: Retina/HiDPI screens (DPR = 2.0) - **3x displays**: High-end mobile devices (DPR = 3.0) **Why it matters:** A 400px wide image needs to be 800px actual size on 2x displays to look sharp. ### `dpr_auto` Parameter **Syntax:** ``` c_scale,w_400/dpr_auto/f_auto/q_auto ``` **What it does:** Automatically multiplies dimensions by the device's DPR - On 1x display: Delivers 400px image - On 2x display: Delivers 800px image - On 3x display: Delivers 1200px image ### Browser Compatibility **✅ Works on Chromium-based browsers:** - Google Chrome - Microsoft Edge - Opera - Samsung Internet - Brave **❌ Does NOT work on:** - Firefox - Safari (macOS and iOS) - Other non-Chromium browsers **Fallback behavior:** When Client Hints unavailable, treats request as `dpr_1.0` ### Named Transformation Limitation `dpr_auto` does NOT work inside named transformations (similar to `f_auto` and `w_auto`). **Why:** Client Hints information isn't available when named transformation is processed. The CDN needs to "see" `dpr_auto` directly in the URL to adapt it. **❌ Don't do this:** ``` # Named transformation "product_thumb" contains: c_fill,w_300,h_300/dpr_auto/f_auto t_product_thumb ``` **✅ Do this instead:** ``` # Named transformation "product_thumb" contains: c_fill,w_300,h_300 t_product_thumb/dpr_auto/f_auto/q_auto ``` ## Enabling Client Hints Client Hints must be enabled for `dpr_auto` and `w_auto` to work. ### HTML Configuration Add these `` tags to your HTML `` **before** any ``, `