Cloudinary Image Tests

1. Original Image (auto-format)

Using f_auto to auto-convert HEIC to browser-supported format

Test Image

URL: f_auto (auto format conversion)

2. Resized to 800px width

Using w_800,f_auto,q_auto

Test Image - 800px

3. Thumbnail (300x300 crop)

Using w_300,h_300,c_fill,g_auto,f_auto,q_auto

Test Image - Thumbnail

g_auto = auto gravity (smart crop)

4. Responsive Image (srcset)

Multiple sizes for different screen widths

Test Image - Responsive

5. Common Transformations

Fill

c_fill (crop fill)

Fit

c_fit (fit inside)

Grayscale

e_grayscale

Circle

r_max (circle)

Animation Tests (scroll down)

Fade Up Animation

This box should fade in and slide up when it comes into view.

Fade Up with Stagger 1

This has a 100ms delay.

Fade In Animation

This box should fade in when it comes into view.

Scale In Animation

This box should scale up and fade in when it comes into view.