Optimisation d’images

EmberKit fournit une optimisation d’images intégrée avec conversion automatique de format, tailles adaptatives et chargement différé.

Plugin d’images

Activez le plugin d’images dans votre config Vite :

import { defineConfig } from 'vite';
import { createImageVitePlugin } from '@emberkit/core';

export default defineConfig({
  plugins: [
    createImageVitePlugin({
      quality: 80,
      formats: ['webp', 'jpeg'],
      sizes: [320, 640, 1024, 1920],
      lazy: true,
      placeholder: 'blur',
    }),
  ],
});

Configuration

Options du plugin

OptionDéfautDescription
quality80Qualité d’image (1-100)
formats['webp', 'jpeg']Formats de sortie
sizes[320, 640, 1024, 1920]Points de rupture adaptatifs
lazytrueActiver le chargement différé
placeholder'blur'Type de placeholder

Chargement différé

Les images se chargent en différé par défaut :

function Gallery() {
  return (
    <img
      src="/images/photo.jpg"
      alt="A beautiful scene"
      loading="lazy"
      decoding="async"
    />
  );
}

Placeholders flous

Affichez un placeholder flou pendant le chargement :

// Le processeur d’images génère automatiquement des placeholders flous
<img
  src="/images/hero.jpg"
  alt="Hero image"
  style={{
    backgroundImage: 'url(data:image/jpeg;base64,...)',
    backgroundSize: 'cover',
  }}
/>

Images adaptatives

Générez plusieurs tailles pour différents viewports :

<picture>
  <source
    srcset="/images/photo-320.webp 320w, /images/photo-640.webp 640w, /images/photo-1024.webp 1024w"
    type="image/webp"
  />
  <source
    srcset="/images/photo-320.jpg 320w, /images/photo-640.jpg 640w, /images/photo-1024.jpg 1024w"
    type="image/jpeg"
  />
  <img src="/images/photo-640.jpg" alt="Photo" loading="lazy" />
</picture>

Fournisseurs personnalisés

Configurez des fournisseurs d’images externes :

createImageVitePlugin({
  provider: 'cloudinary',
  baseUrl: 'https://res.cloudinary.com/mycloud',
});

Étapes suivantes