# Image Processing: WebP & AVIF Desteği

TYPO3 v13'te görsel işleme, modern format desteği (WebP, AVIF) ve optimizasyon ayarlarını kapsar.

---

## Desteklenen Formatlar

| Format | Açıklama | Boyut Tasarrufu |
|--------|----------|----------------|
| JPEG | Geleneksel sıkıştırılmış format | Referans |
| PNG | Kayıpsız, şeffaflık desteği | — |
| WebP | Google'ın modern formatı | ~25-35% daha küçük |
| AVIF | AV1 tabanlı yeni nesil format | ~50% daha küçük |
| SVG | Vektörel grafik | Ölçeklenebilir |

---

## Temel Yapılandırma

### config/system/additional.php

```php
<?php

// İşlemci seçimi
$GLOBALS['TYPO3_CONF_VARS']['GFX']['processor'] = 'ImageMagick';
$GLOBALS['TYPO3_CONF_VARS']['GFX']['processor_path'] = '/usr/bin/';

// Alternatif: GraphicsMagick
// $GLOBALS['TYPO3_CONF_VARS']['GFX']['processor'] = 'GraphicsMagick';
// $GLOBALS['TYPO3_CONF_VARS']['GFX']['processor_path'] = '/usr/bin/';

// Desteklenen dosya uzantıları
$GLOBALS['TYPO3_CONF_VARS']['GFX']['imagefile_ext'] = 'gif,jpg,jpeg,tif,tiff,bmp,pcx,tga,png,pdf,ai,svg,webp,avif';

// Kalite ayarları
$GLOBALS['TYPO3_CONF_VARS']['GFX']['jpg_quality'] = 85;

// Büyütmeyi engelle
$GLOBALS['TYPO3_CONF_VARS']['GFX']['processor_allowUpscaling'] = false;

// Şerit metadata (dosya boyutunu küçültür)
$GLOBALS['TYPO3_CONF_VARS']['GFX']['processor_stripColorProfileByDefault'] = true;
$GLOBALS['TYPO3_CONF_VARS']['GFX']['processor_stripColorProfileCommand'] = '-strip';
```

---

## WebP Dönüştürme

### .htaccess ile Otomatik WebP Sunma

```apache
<IfModule mod_rewrite.c>
    RewriteEngine On

    # WebP destekleniyorsa ve .webp dosyası varsa onu sun
    RewriteCond %{HTTP_ACCEPT} image/webp
    RewriteCond %{REQUEST_URI} \.(jpe?g|png)$
    RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
    RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=REQUEST_image]
</IfModule>

<IfModule mod_headers.c>
    Header append Vary Accept env=REQUEST_image
</IfModule>
```

### TypoScript ile WebP

```typoscript
# Resim çıktısını WebP olarak zorla
lib.contentElement.settings.media.popup.image.cropVariant = default
```

---

## Fluid'de Resim Kullanımı

### Temel Resim

```html
<!-- Basit resim -->
<f:image image="{file}" maxWidth="800" alt="{file.alternative}" />

<!-- Lazy loading ile -->
<f:image image="{file}" maxWidth="800"
         additionalAttributes="{loading: 'lazy', decoding: 'async'}" />

<!-- Responsive resim (picture element) -->
<picture>
    <source srcset="{f:uri.image(image: file, maxWidth: 1200, fileExtension: 'webp')}" type="image/webp">
    <source srcset="{f:uri.image(image: file, maxWidth: 1200)}" type="image/jpeg">
    <f:image image="{file}" maxWidth="1200" alt="{file.alternative}" />
</picture>
```

### Responsive Srcset

```html
<img srcset="{f:uri.image(image: file, maxWidth: 400)} 400w,
             {f:uri.image(image: file, maxWidth: 800)} 800w,
             {f:uri.image(image: file, maxWidth: 1200)} 1200w"
     sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
     src="{f:uri.image(image: file, maxWidth: 800)}"
     alt="{file.alternative}"
     loading="lazy" />
```

---

## DDEV'de ImageMagick / GraphicsMagick

```bash
# ImageMagick sürümünü kontrol et
ddev exec convert --version

# WebP desteğini kontrol et
ddev exec convert -list format | grep -i webp

# AVIF desteğini kontrol et
ddev exec convert -list format | grep -i avif
```

Eğer WebP/AVIF desteği yoksa `.ddev/config.yaml`:

```yaml
webimage_extra_packages:
  - libwebp-dev
  - libavif-dev
  - imagemagick
```

---

## Performans İpuçları

1. **Lazy loading kullanın** — `loading="lazy"` ekleyin
2. **Uygun boyutlar kullanın** — `maxWidth` ile sınırlayın
3. **WebP tercih edin** — Daha küçük dosya boyutu
4. **Srcset kullanın** — Cihaza uygun boyut sunun
5. **Büyütmeyi engelleyin** — `processor_allowUpscaling = false`

---

## Kaynaklar

- [TYPO3 Image Processing](https://docs.typo3.org/m/typo3/reference-coreapi/main/en-us/ApiOverview/Fal/)
- [Fluid Image ViewHelper](https://docs.typo3.org/other/typo3/view-helper-reference/main/en-us/)
