ForHosting KIT · Images

Images responsives

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.

● Stablepar requête + par image$0.002

Lancer — $0.002 + $0.005/image Voir l’API

Utilisez-le depuis WebAPIE-mailApp bientôtTelegram bientôt

Exécuter en ligne

Exécutez cette tâche sur nos serveurs, avec votre compte. Les outils gratuits tournent dans votre navigateur ; celui-ci est facturé sur votre solde KIT au prix affiché ci-dessus.

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.

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

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. Vous conservez la maîtrise des largeurs générées et du format de sortie, sans repasser manuellement sur chaque visuel du site.

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 ?

Le tarif est affiché : $0.002 par requête et $0.005 par variante produite. 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 ?

Oui. En passant par l’API, vous branchez la génération sur votre chaîne de publication: chaque nouvelle image déclenche ses déclinaisons, sans reprise manuelle. Il n’y a ni compte à créer, l’achat se fait directement.

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

Authentification par jeton Bearer : un seul POST met la tâche en file d’attente, et le résultat vous parvient par webhook ou lien signé.

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 &#39;{"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[&#39;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" => &#39;{"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.

Consulter la documentation complète du KIT →