Optimización de imágenes

EmberKit ofrece optimización de imágenes integrada con conversión automática de formato, tamaños responsivos y carga diferida.

Plugin de imágenes

Activa el plugin de imágenes en tu configuración de 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',
    }),
  ],
});

Configuración

Opciones del plugin

OpciónPor defectoDescripción
quality80Calidad de imagen (1-100)
formats['webp', 'jpeg']Formatos de salida
sizes[320, 640, 1024, 1920]Puntos de corte responsivos
lazytrueActivar carga diferida
placeholder'blur'Tipo de marcador de posición

Carga diferida

Las imágenes se cargan de forma diferida por defecto:

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

Marcadores de posición con desenfoque

Muestra un marcador desenfocado mientras carga la imagen:

// El procesador de imágenes genera marcadores de desenfoque automáticamente
<img
  src="/images/hero.jpg"
  alt="Hero image"
  style={{
    backgroundImage: 'url(data:image/jpeg;base64,...)',
    backgroundSize: 'cover',
  }}
/>

Imágenes responsivas

Genera varios tamaños para distintos 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>

Proveedores personalizados

Configura proveedores de imágenes externos:

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

Siguientes pasos