### Convert Image Formats and Optimize with Craft Imager X

Source: https://context7.com/spacecatninja/craft-imager-x/llms.txt

This snippet demonstrates converting images to modern formats like WebP and AVIF, with options for quality control and fallback mechanisms for browsers that do not support these formats. It also shows how to use the picture element for serving multiple image formats.

```twig
{# Convert to WebP with quality control #}
{% set webpImage = craft.imager.transformImage(asset, {
    width: 1200,
    format: 'webp',
    webpQuality: 85
})

{# Check format support and provide fallback #}
{% if craft.imager.serverSupportsWebp() %}
    {% set modernImage = craft.imager.transformImage(asset, { width: 1200, format: 'webp' }) %}
{% else %}
    {% set modernImage = craft.imager.transformImage(asset, { width: 1200, format: 'jpg', jpegQuality: 85 }) %}
{% endif %}

{# AVIF format for maximum compression #}
{% if craft.imager.serverSupportsAvif() %}
    {% set avifImage = craft.imager.transformImage(asset, {
        width: 1200,
        format: 'avif'
    })
{% endif %}

{# Picture element with multiple formats #}
<picture>
    {% if craft.imager.serverSupportsAvif() %}
        {% set avif = craft.imager.transformImage(asset, { width: 1200, format: 'avif' }) %}
        <source srcset="{{ avif.url }}" type="image/avif">
    {% endif %}
    {% if craft.imager.serverSupportsWebp() %}
        {% set webp = craft.imager.transformImage(asset, { width: 1200, format: 'webp' }) %}
        <source srcset="{{ webp.url }}" type="image/webp">
    {% endif %}
    {% set jpg = craft.imager.transformImage(asset, { width: 1200, format: 'jpg' }) %}
    <img src="{{ jpg.url }}" alt="">
</picture>

```

--------------------------------

### PHP Image Transformation with ImagerX

Source: https://context7.com/spacecatninja/craft-imager-x/llms.txt

Demonstrates how to perform various image transformations directly from PHP using the ImagerX plugin. This includes single and multiple transforms, generating srcset, color analysis, placeholder generation, and cache management.

```php
<?php
use spacecatninja\imagerx\ImagerX;
use craft\elements\Asset;

// Transform image from PHP
$asset = Asset::find()->id(123)->one();
$transformedImage = ImagerX::$plugin->imagerx->transformImage($asset, [
    'width' => 800,
    'height' => 600,
    'mode' => 'crop',
    'position' => 'center-center',
    'format' => 'webp'
]);

// Get URL and dimensions
$url = $transformedImage->getUrl();
$width = $transformedImage->getWidth();
$height = $transformedImage->getHeight();

// Multiple transforms
$transforms = [
    ['width' => 400],
    ['width' => 800],
    ['width' => 1200]
];
$images = ImagerX::$plugin->imagerx->transformImage($asset, $transforms);

// Generate srcset string
$srcset = ImagerX::$plugin->imagerx->srcset($images, 'w');

// Get dominant color
$dominantColor = ImagerX::$plugin->color->getDominantColor($asset, 10, 'hex');

// Get color palette
$palette = ImagerX::$plugin->color->getColorPalette($asset, 8, 10, 'hex');

// Color analysis
$brightness = ImagerX::$plugin->color->getBrightness('#3a7bd5');
$contrastRatio = ImagerX::$plugin->color->getContrastRatio('#3a7bd5', '#ffffff');
$isBright = ImagerX::$plugin->color->isBright('#3a7bd5');

// Generate placeholder
$placeholder = ImagerX::$plugin->placeholder->placeholder([
    'type' => 'svg',
    'width' => 800,
    'height' => 600,
    'color' => '#f0f0f0'
]);

// Check animated GIF
$isAnimated = ImagerX::$plugin->imagerx->isAnimated($asset);

// Remove transforms for specific asset
ImagerX::$plugin->imagerx->removeTransformsForAsset($asset);

// Clear all transform caches
ImagerX::$plugin->imagerx->deleteImageTransformCaches();

```

--------------------------------

### GraphQL Image Transformations with ImagerX Directives

Source: https://context7.com/spacecatninja/craft-imager-x/llms.txt

Illustrates how to query and transform images using GraphQL with ImagerX directives. This includes applying transformations with `@imagerTransform`, generating responsive image sets with `@imagerSrcset`, and retrieving image metadata like dominant colors.

```graphql
# GraphQL query with imagerTransform directive
query {
  entries {
    ... on Article {
      title
      heroImage {
        url @imagerTransform(width: 1200, height: 800, mode: "crop", format: "webp")
      }
    }
  }
}

# imagerSrcset directive for responsive images
query {
  entry(id: 123) {
    ... on Article {
      heroImage {
        srcset @imagerSrcset(sizes: [400, 800, 1200, 1600])
      }
    }
  }
}

# Transform with named transform from config
query {
  assets {
    url @imagerTransform(handle: "thumbnail")
  }
}

# Get base64 encoded image data
query {
  entry(id: 123) {
    ... on Article {
      thumbnail {
        url @imagerTransform(width: 50, height: 50, return: "base64")
      }
    }
  }
}

# Get dominant color through GraphQL
query {
  entry(id: 123) {
    ... on Article {
      heroImage {
        url @imagerTransform(width: 1200, return: "dominantColor")
      }
    }
  }
}

```

--------------------------------

### Configure Imgix Transformer and AWS S3 Storage for Craft Imager X

Source: https://context7.com/spacecatninja/craft-imager-x/llms.txt

This PHP configuration sets up Imager X to use Imgix for image transformations and AWS S3 for storing the transformed images. It includes settings for Imgix domains, API keys, AWS credentials, bucket configuration, and various image optimization parameters.

```php
<?php
// config/imager-x.php

return [
    // Use Imgix as transformer
    'transformer' => 'imgix',

    // Imgix configuration
    'imgixProfile' => 'default',
    'imgixConfig' => [
        'default' => [
            'domains' => ['your-domain.imgix.net'],
            'useHttps' => true,
            'signKey' => getenv('IMGIX_SIGN_KEY'),
        ]
    ],

    // AWS S3 storage for transformed images
    'storages' => ['aws'],
    'storageConfig' => [
        'aws' => [
            'accessKey' => getenv('AWS_ACCESS_KEY'),
            'secretAccessKey' => getenv('AWS_SECRET_KEY'),
            'region' => 'us-east-1',
            'bucket' => 'my-images-bucket',
            'folder' => 'transforms',
            'requestHeaders' => ['Cache-Control' => 'max-age=31536000']
        ]
    ],

    // Image optimization
    'optimizers' => ['jpegoptim', 'optipng', 'gifsicle'],
    'optimizeType' => 'task',

    // Quality settings
    'jpegQuality' => 85,
    'webpQuality' => 85,
    'pngCompressionLevel' => 9,

    // Advanced options
    'cacheDuration' => 31536000,
    'cacheDurationRemoteFiles' => 1209600,
    'interlace' => 'line',
    'allowUpscale' => false
];

```

--------------------------------

### Color Analysis with Craft Imager X

Source: https://context7.com/spacecatninja/craft-imager-x/llms.txt

Extracts dominant colors and color palettes from images for design systems and theming. Includes utility functions for color format conversion and brightness analysis, plus WCAG contrast ratio calculation.

```twig
{# Get dominant color as hex string #}
{% set dominantColor = craft.imager.getDominantColor(asset) %}
<div style="background-color: {{ dominantColor }}">
{# Output: #3a7bd5 #}

{# Get dominant color as RGB array #}
{% set rgbColor = craft.imager.getDominantColor(asset, 10, 'rgb') %}
{# Returns: [58, 123, 213] #}

{# Get dominant color from specific area of image #}
{% set areaColor = craft.imager.getDominantColor(asset, 10, 'hex', { x: 0, y: 0, w: 100, h: 100 }) %}

{# Get color palette with 8 colors #}
{% set palette = craft.imager.getColorPalette(asset, 8) %}
{% for color in palette %}
    <span style="background: {{ color }}; display: inline-block; width: 50px; height: 50px;"></span>
{% endfor %}
{# Returns array: ['#3a7bd5', '#e84393', '#fdcb6e', '#6c5ce7', ...] #}

{# Color utility functions #}
{% set rgb = craft.imager.hex2rgb('#3a7bd5') %}
{# Returns: [58, 123, 213] #}

{% set hex = craft.imager.rgb2hex([58, 123, 213]) %}
{# Returns: '#3a7bd5' #}

{# Color brightness analysis #}
{% set brightness = craft.imager.getBrightness('#3a7bd5') %}
{# Returns: 118.5 (scale 0-255) #}

{% if craft.imager.isBright(dominantColor) %}
    <p style="color: black;">Use dark text on bright background</p>
{% else %}
    <p style="color: white;">Use light text on dark background</p>
{% endif %}

{# WCAG contrast ratio for accessibility #}
{% set contrastRatio = craft.imager.getContrastRatio('#3a7bd5', '#ffffff') %}
{# Returns: 4.52 (scale 1-21, WCAG AA requires 4.5:1 for normal text) #}
```

--------------------------------

### Generate Various Placeholder Images with Craft Imager X

Source: https://context7.com/spacecatninja/craft-imager-x/llms.txt

This snippet demonstrates how to generate different types of placeholder images using the craft.imager.placeholder function. Supported types include SVG, transparent 1x1 pixels, GIF, silhouettes, and blurhash. These are useful for progressive image loading strategies.

```twig
{# Basic SVG placeholder #}
{% set placeholder = craft.imager.placeholder({
    type: 'svg',
    width: 800,
    height: 600,
    color: '#f0f0f0'
}) %}
<img src="{{ placeholder }}" class="lazy-load" data-src="{{ actualImage.url }}">
{# Output: data:image/svg+xml;charset=utf-8,<svg xmlns='...' width='800' height='600' style='background:#f0f0f0'/> #}

{# Transparent 1x1 pixel placeholder #}
{% set pixel = craft.imager.base64Pixel() %}
<img src="{{ pixel }}" data-src="{{ image.url }}">

{# GIF placeholder with custom dimensions #}
{% set gifPlaceholder = craft.imager.placeholder({
    type: 'gif',
    width: 16,
    height: 9,
    color: 'transparent'
}) %}

{# Silhouette placeholder from source image #}
{% set silhouette = craft.imager.placeholder({
    type: 'silhouette',
    source: asset,
    size: 1,
    color: '#ffffff',
    fgColor: '#e0e0e0',
    silhouetteType: 'fill'
}) %}
<img src="{{ silhouette }}" class="placeholder">

{# Blurhash placeholder for smooth loading #}
{% set blurhash = craft.imager.placeholder({
    type: 'blurhash',
    hash: 'LKO2?U%2Tw=w]~RBVZRi};RPxuwH',
    width: 32,
    height: 32,
    format: 'png'
}) %}
<div style="background-image: url({{ blurhash }}); background-size: cover;">
    <img src="{{ actualImage.url }}" loading="lazy">
</div>
```

--------------------------------

### Generate Srcset Strings with Craft Imager X

Source: https://context7.com/spacecatninja/craft-imager-x/llms.txt

Creates responsive srcset strings from arrays of transformed images for responsive web design. Supports width, height, or combined width and height descriptors.

```twig
{# Basic srcset with width descriptors #}
{% set transforms = [
    { width: 320 },
    { width: 640 },
    { width: 1024 }
] %}
{% set images = craft.imager.transformImage(asset, transforms) %}
<img srcset="{{ craft.imager.srcset(images) }}" sizes="(max-width: 600px) 100vw, 50vw">
{# Output: /path/image_320.jpg 320w, /path/image_640.jpg 640w, /path/image_1024.jpg 1024w #}

{# Srcset with height descriptors #}
<img srcset="{{ craft.imager.srcset(images, 'h') }}">
{# Output: /path/image_320.jpg 320h, /path/image_640.jpg 640h, /path/image_1024.jpg 1024h #}

{# Srcset with width and height descriptors #}
<img srcset="{{ craft.imager.srcset(images, 'w+h') }}">
{# Output: /path/image.jpg 320w 240h, /path/image.jpg 640w 480h #
```

--------------------------------

### Named Transforms Configuration in ImagerX

Source: https://context7.com/spacecatninja/craft-imager-x/llms.txt

Shows how to define reusable image transformation configurations in `config/imager-x-transforms.php`. These named transforms can be applied consistently across different parts of a project, including PHP and Twig templates.

```php
<?php
// config/imager-x-transforms.php

return [
    'thumbnail' => [
        'transforms' => [
            ['width' => 200, 'height' => 200, 'mode' => 'crop', 'position' => 'center-center']
        ],
        'defaults' => [
            'format' => 'webp',
            'jpegQuality' => 85
        ]
    ],

    'hero' => [
        'transforms' => [
            ['width' => 1920, 'height' => 1080],
            ['width' => 1280, 'height' => 720],
            ['width' => 640, 'height' => 360]
        ],
        'defaults' => [
            'mode' => 'crop',
            'position' => 'center-center',
            'format' => 'webp'
        ],
        'configOverrides' => [
            'jpegQuality' => 90
        ]
    ],

    'responsive' => [
        'transforms' => [
            ['width' => 320],
            ['width' => 640],
            ['width' => 1024],
            ['width' => 1920]
        ]
    ]
];

```

```twig
{# Use named transforms in templates #}
{% set thumbnail = craft.imager.transformImage(asset, 'thumbnail') %}
{% set heroImages = craft.imager.transformImage(asset, 'hero') %}
{% set responsiveImages = craft.imager.transformImage(asset, 'responsive') %}

<img src="{{ thumbnail.url }}" alt="">
<img srcset="{{ craft.imager.srcset(responsiveImages) }}" sizes="100vw">

```

--------------------------------

### Transform Images using Craft Imager X

Source: https://context7.com/spacecatninja/craft-imager-x/llms.txt

Core image transformation functionality that resizes, crops, and manipulates images based on configuration arrays. It supports various modes, formats, qualities, and effects, and can utilize named transforms from configuration.

```twig
{# Basic image transform in Twig template #}
{% set transformedImage = craft.imager.transformImage(asset, { width: 800, height: 600 }) %}
<img src="{{ transformedImage.url }}" width="{{ transformedImage.width }}" height="{{ transformedImage.height }}">

{# Multiple transforms for responsive images #}
{% set transforms = [
    { width: 400 },
    { width: 800 },
    { width: 1200 },
    { width: 1600 }
] %}
{% set transformedImages = craft.imager.transformImage(asset, transforms) %}
<img src="{{ transformedImages[0].url }}"
     srcset="{{ craft.imager.srcset(transformedImages) }}"
     sizes="100vw">

{# Advanced transform with mode, format, and quality #}
{% set transform = {
    width: 1200,
    height: 800,
    mode: 'crop',
    position: 'center-center',
    format: 'webp',
    jpegQuality: 85,
    effects: {
        sharpen: true,
        modulate: [100, 110, 100]
    }
} %}
{% set optimizedImage = craft.imager.transformImage(asset, transform) %}

{# Named transforms from config file #}
{% set thumbnail = craft.imager.transformImage(asset, 'thumbnail') %}

{# Transform with defaults and config overrides #}
{% set transformDefaults = { jpegQuality: 90, format: 'webp' } %}
{% set configOverrides = { transformer: 'imgix' } %}
{% set image = craft.imager.transformImage(asset, { width: 500 }, transformDefaults, configOverrides) %}
```

--------------------------------

### Apply Image Effects with Craft Imager X Transform

Source: https://context7.com/spacecatninja/craft-imager-x/llms.txt

This snippet shows how to apply various visual effects to images using the craft.imager.transformImage function. Effects include sharpening, grayscale conversion, colorization, contrast adjustment, brightness modification, unsharp masking, Gaussian blur, and sepia toning.

```twig
{# Sharpen effect #}
{% set sharpened = craft.imager.transformImage(asset, {
    width: 1200,
    effects: {
        sharpen: true
    }
})

{# Grayscale effect #}
{% set grayscale = craft.imager.transformImage(asset, {
    width: 800,
    effects: {
        grayscale: true
    }
})

{# Multiple effects combined #}
{% set styled = craft.imager.transformImage(asset, {
    width: 1000,
    effects: {
        colorize: ['#ff6347', 0.3],
        contrast: 1.2,
        brightness: 1.1,
        unsharpmask: [0.5, 1, 0]
    }
})

{# Blur effect for background images #}
{% set blurred = craft.imager.transformImage(asset, {
    width: 1920,
    effects: {
        gaussianblur: 10
    }
})

{# Sepia tone effect #}
{% set sepia = craft.imager.transformImage(asset, {
    width: 800,
    effects: {
        sepia: 80
    }
})
}

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.