1000 Outils

Générateur de srcset responsive

Les images responsives permettent de servir la taille exacte d'image adaptée à l'écran de chaque visiteur, évitant de charger une image 2000px sur un mobile qui n'affiche que 400px. Notre générateur crée le code HTML complet : attribut srcset, attribut sizes, balise <picture> avec fallback AVIF/WebP/JPEG, et le composant Next.js Image. Avec les commandes Sharp pour générer automatiquement toutes les tailles.

px
px
px
px
px
px

Indique au navigateur la taille d'affichage de l'image selon le viewport.

HTML — balise <img> avec srcset

<img
  src="mon-image-1024.webp"
  srcset="mon-image-320.webp 320w,
       mon-image-640.webp 640w,
       mon-image-768.webp 768w,
       mon-image-1024.webp 1024w,
       mon-image-1280.webp 1280w,
       mon-image-1920.webp 1920w"
  sizes="(max-width: 640px) 100vw, (max-width: 1024px) 75vw, 1200px"
  alt="Description de l'image"
  loading="lazy"
  width="1920"
  height="auto"
>

HTML — <picture> avec fallback AVIF/WebP/JPEG

<picture>
  <source
    type="image/avif"
    srcset="mon-image-320.avif 320w,
    mon-image-640.avif 640w,
    mon-image-768.avif 768w,
    mon-image-1024.avif 1024w,
    mon-image-1280.avif 1280w,
    mon-image-1920.avif 1920w"
    sizes="(max-width: 640px) 100vw, (max-width: 1024px) 75vw, 1200px"
  >
  <source
    type="image/webp"
    srcset="mon-image-320.webp 320w,
    mon-image-640.webp 640w,
    mon-image-768.webp 768w,
    mon-image-1024.webp 1024w,
    mon-image-1280.webp 1280w,
    mon-image-1920.webp 1920w"
    sizes="(max-width: 640px) 100vw, (max-width: 1024px) 75vw, 1200px"
  >
  <img
    src="mon-image-1024.jpg"
    srcset="mon-image-320.jpg 320w,
    mon-image-640.jpg 640w,
    mon-image-768.jpg 768w,
    mon-image-1024.jpg 1024w,
    mon-image-1280.jpg 1280w,
    mon-image-1920.jpg 1920w"
    sizes="(max-width: 640px) 100vw, (max-width: 1024px) 75vw, 1200px"
    alt="Description de l'image"
    loading="lazy"
  >
</picture>

Next.js — composant Image

import Image from 'next/image';

<Image
  src="/mon-image.webp"
  alt="Description de l'image"
  width={1920}
  height={1080}
  sizes="(max-width: 640px) 100vw, (max-width: 1024px) 75vw, 1200px"
/>

Script de génération Sharp (Node.js)

// Générer les tailles avec Sharp (Node.js)
const sharp = require('sharp');

const widths = [320, 640, 768, 1024, 1280, 1920];

for (const width of widths) {
  await sharp('mon-image-original.jpg')
    .resize(width)
    .webp({ quality: 80 })
    .toFile(`mon-image-${width}.webp`);
}

Comment fonctionnent les images responsives avec srcset

L'attribut srcset liste les différentes versions d'une image avec leur largeur. L'attribut sizes indique au navigateur la taille d'affichage prévue selon le viewport. Le navigateur choisit automatiquement la version la plus adaptée en tenant compte de la taille de l'écran, de la densité de pixels (DPR) et de la connexion. Sur un écran Retina (DPR=2), le navigateur chargera une image deux fois plus grande que la taille d'affichage CSS.

Balise <picture> pour les formats modernes

La balise <picture> permet de servir différents formats selon le support du navigateur, avec un ordre de priorité. Placez AVIF en premier (meilleure compression), WebP en second (support large), et JPEG/PNG en dernier (fallback universel). Les navigateurs ne supportant pas AVIF afficheront automatiquement WebP, et ceux ne supportant pas WebP afficheront JPEG. C'est la solution la plus robuste pour servir des images modernes tout en maintenant une compatibilité totale.

Optimiser les Core Web Vitals avec les images responsives

Les images responsives améliorent directement le LCP (Largest Contentful Paint) en chargeant une image de taille adaptée. Elles améliorent aussi le CLS (Cumulative Layout Shift) si les attributs width et height sont définis. Pour le LCP, ajoutez fetchpriority="high" et évitez loading="lazy" sur l'image principale (hero). Pour les autres images, loading="lazy" évite de charger des images jamais vues.

Questions fréquentes

Outils similaires

🎨

Redimensionner une image

Redimensionnez vos images aux dimensions exactes souhaitées, gratuitement et sans inscription.

🎨

Compresser une image

Compressez vos images pour réduire leur poids sans sacrifier la qualité visuelle.

🎨

Convertir PNG en JPG

Convertissez vos images PNG en JPG instantanément avec le niveau de qualité de votre choix.

🎨

Générateur de palette de couleurs

Générez des palettes de couleurs harmonieuses pour vos projets de design et de développement web.

🎨

Convertir HEX en RGB

Convertissez vos codes couleur HEX en RGB (et inversement) avec prévisualisation instantanée.

🎨

Créer un favicon

Créez un favicon pour votre site web à partir d'une image ou en partant de zéro.