R2 Image Components Test

Environment: Production

✅ In production, using optimized images from R2 (name-400.webp, name-800.webp, name-1200.webp, etc.)

R2Image Component

Small (width=400)

Profile test - small

images/profile-800.webp

Large (width=1200)

Profile test - large

images/profile-1600.webp

With AVIF format preference

Profile test - AVIF

images/profile-800.avif

R2Picture Component

Multi-format with srcset

Profile test - Picture element

Generates <picture> with:

- AVIF sources: profile-800.avif, profile-1600.avif

- WebP sources: profile-800.webp, profile-1600.webp

- Fallback: profile-800.webp

Responsive Behavior

Responsive 1

width=600

Responsive 2

width=900

Responsive 3

width=1400

Production URLs Generated

Base URL: https://cdn.josemianton.com

Mobile WebP: /images/profile-400.webp

Tablet WebP: /images/profile-800.webp

Desktop WebP: /images/profile-1200.webp

Mobile AVIF: /images/profile-400.avif

Tablet AVIF: /images/profile-800.avif

Desktop AVIF: /images/profile-1200.avif