ForHosting KIT · Images

Images responsives

Envoyez une image source et recevez la même image dans chaque largeur dont votre mise en page a besoin, avec une ligne srcset prête à coller, pour qu'un téléphone ne télécharge jamais le visuel principal au format ordinateur. Choisissez vos largeurs. Vous payez à l'usage, sans abonnement.

Bientôt disponiblepar requête + par image$0.002

Cette tâche n'est pas disponible pour le moment et ne peut donc pas être achetée. Rien n'est facturé.

Voir l’API

Utilisez-le depuis Web API uniquementAPIE-mailTelegramApp bientôt

Un jeu d’images responsives, c’est plusieurs déclinaisons d’un même visuel à des largeurs différentes, destinées à l’attribut srcset du HTML. Le navigateur choisit alors la taille adaptée à chaque écran. L’outil produit ces variantes d’un coup, du petit format mobile à la pleine largeur, à partir d’une seule image source.

Pourquoi une seule image ne suffit plus

Servir la même photo de 2000 pixels à un téléphone et à un grand écran gaspille de la bande passante et ralentit la page. Le principe responsive consiste à préparer plusieurs largeurs et à laisser le navigateur télécharger celle qui convient. Résultat : un mobile reçoit un petit fichier, un écran large reçoit la version nette, et la page reste rapide dans les deux cas.

Des largeurs pensées pour srcset

L’outil génère un ensemble de tailles échelonnées — typiquement de 320 à 1920 pixels de large — que vous déclarez dans l’attribut srcset avec leurs valeurs de largeur. Chaque variante garde les proportions de l’original. Vous n’avez plus qu’à coller le balisage : le navigateur, aidé de l’attribut sizes, sélectionne la bonne image selon la place réelle qu’elle occupe dans la mise en page.

Le poids, nerf de la vitesse

Les images pèsent le plus lourd dans une page moyenne. En livrant à chaque appareil une taille juste suffisante, vous réduisez le volume téléchargé sans sacrifier la netteté. Cela profite directement aux indicateurs de performance — le temps d’affichage du plus grand élément visible, notamment — et donc à l’expérience comme au référencement.

Cas d’usage

Un site vitrine rapide sur mobile

Studio Lumen SAS refond le site d’un client. Chaque photo d’accueil est déclinée en cinq largeurs et servie par srcset : le rendu reste net sur grand écran tout en épargnant les données des visiteurs sur téléphone.

Un blog qui charge vite

Camille Moreau publie des articles illustrés. Plutôt qu’une image unique et lourde, chaque visuel arrive en plusieurs tailles, ce qui améliore le temps d’affichage mesuré et la lecture sur connexion mobile.

Une fiche produit performante

Atelier Garnier SARL veut des pages produit qui passent bien les tests de vitesse. Le jeu responsive fournit à chaque appareil la largeur adéquate, sans forcer le mobile à télécharger la version pour écran large.

Questions fréquentes

Qu’est-ce que je récupère exactement ?

Plusieurs fichiers de la même image à des largeurs échelonnées, prêts à être déclarés dans l’attribut srcset. À vous de coller le balisage correspondant dans vos pages ; le navigateur se charge ensuite de choisir la bonne taille.

Dois-je aussi renseigner l’attribut sizes ?

C’est recommandé. srcset dit au navigateur quelles largeurs existent ; sizes lui indique la place que l’image occupera dans la mise en page. Les deux ensemble permettent de télécharger la variante la plus juste.

En quel format sortent les variantes ?

Vous choisissez le format de sortie. Le JPG reste universel ; le WebP allège encore les fichiers pour un rendu équivalent. Chaque largeur du jeu est produite dans le format demandé.

Est-ce que cela aide vraiment la vitesse du site ?

Oui, parce que les images pèsent souvent le plus lourd d’une page. En servant une taille adaptée à chaque écran, vous réduisez le volume téléchargé, ce qui améliore le temps d’affichage et l’expérience mobile.

Combien coûte la génération d’un jeu ?

Un jeu de cinq largeurs revient au prix de cinq images. Pas d’abonnement : vous payez à la génération.

Puis-je automatiser cela pour tout un site ?

Il n’y a ni compte à créer, l’achat se fait directement.

Outils associés

Pour les développeurs — accès API

Tout sur cette page est disponible par programmation. Cette section s'adresse aux équipes qui veulent l'intégrer à leurs systèmes ; les autres peuvent simplement utiliser l'outil ci-dessus.

Endpoint

POSThttps://api.kit.forhosting.com/image/responsive-set

Un POST authentifié crée la tâche ; le résultat arrive par webhook ou par un lien signé. Cette capacité est disponible par API, pas comme outil web interactif.

Appeler depuis votre stack

curl -X POST https://api.kit.forhosting.com/image/responsive-set \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"image":"https://ejemplo.com/imagen.jpg"}'

const res = await fetch("https://api.kit.forhosting.com/image/responsive-set", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "image": "https://ejemplo.com/imagen.jpg"
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/image/responsive-set",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "image": "https://ejemplo.com/imagen.jpg"
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/image/responsive-set", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"image":"https://ejemplo.com/imagen.jpg"}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"image":"https://ejemplo.com/imagen.jpg"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/image/responsive-set", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

Exemple de requête

{
  "image": "https://ejemplo.com/imagen.jpg"
}

Exemple de réponse

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "image.responsive_set",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

L’API est asynchrone : chaque appel renvoie un task_id immédiatement, puis vous interrogez l’état à raison d’une requête par seconde.

Tarifs

par requête$0.002

par image$0.005

Le prix est publié, sans tokens ni crédits. Une tâche qui échoue n’est pas facturée.

Limites

`max_mb`	15
`max_megapixels`	12

Erreurs

HTTP	Code	Signification
`401`	`unauthorized`	Clé API absente ou invalide : vérifiez l’en-tête Authorization.
`402`	`insufficient_balance`	Solde insuffisant : rechargez votre compte pour lancer cette tâche.
`404`	`unknown_type`	Type de tâche inconnu : vérifiez le champ type de votre requête.
`429`	`rate_limited`	Trop de requêtes : ralentissez la cadence, puis réessayez.

Notes techniques

S’intègre à votre chaîne de publication

Vous conservez la maîtrise des largeurs générées et du format de sortie, sans repasser manuellement sur chaque visuel du site. Le jeu de variantes s’obtient via l’API, ce qui permet de l’intégrer à un processus de mise en ligne : à chaque nouvelle image ajoutée, les déclinaisons se produisent automatiquement.

Consulter la documentation complète du KIT →