Image Testing Page

This page tests various image loading methods using both public and optimized images.

Test 1: Optimized Image from src/assets

Using <OptimizedImage /> component with image from src/assets/images:

Sacred Adornment Hero

Original Path: src/assets/images/sacred-adornment-hero.jpg

Width: 515px

Height: 543px

Test 2: OptimizedImage with Public Image

Using <OptimizedImage /> component with image from public/images:

Sacred Adornment Hero - Public

Path: /images/sacred-adornment-hero.jpg

Note: Width and height must be provided manually for public images

Test 3: Image Component with src/assets

Using Astro's <Image /> component with image from src/assets/images:

Sacred Adornment Hero - Astro Image

Original Path: src/assets/images/sacred-adornment-hero.jpg

Used src: /_astro/sacred-adornment-hero.DXwmKNGM.jpg

Test 4: Regular img tag with Public Image

Using standard <img> tag with image from public/images:

Sacred Adornment Hero - Public img tag

Path: /images/sacred-adornment-hero.jpg

Test 5: Regular img tag with src/assets

Using standard <img> tag with src from imported image:

Sacred Adornment Hero - Direct src

Original Path: src/assets/images/sacred-adornment-hero.jpg

Used src: /_astro/sacred-adornment-hero.DXwmKNGM.jpg

Test 6: OptimizedImage with Picture Mode

Using <OptimizedImage usePicture=true /> for responsive formats:

Sacred Adornment Hero - Picture

Original Path: src/assets/images/sacred-adornment-hero.jpg

Features: Responsive with multiple formats (webp, jpeg)

Recommended Approach

For this project, the recommended approach is to use the <OptimizedImage /> component as it handles both local and remote images appropriately.

When using images from src/assets:

import OptimizedImage from '../components/ui/OptimizedImage.astro'; import myImage from '../assets/images/my-image.jpg'; <OptimizedImage src={myImage} alt="Description" width={500} height={300} loading="eager" />

When using images from public:

import OptimizedImage from '../components/ui/OptimizedImage.astro'; <OptimizedImage src="/images/my-image.jpg" alt="Description" width={500} height={300} />

Debug Information

This section provides additional debug information about the environment:


        Image import information:
        {
  "src": "/_astro/sacred-adornment-hero.DXwmKNGM.jpg",
  "width": 515,
  "height": 543,
  "format": "jpg",
  "orientation": 1
}
        
        Astro Image Service: