ForHosting KIT · Images

Sprite CSS

Cet outil réunit plusieurs petites images — icônes, pictogrammes, boutons — dans une seule feuille, le sprite, et fournit la position de chacune. Le navigateur télécharge un fichier au lieu de vingt, ce qui allège une page. Vous récupérez l’image assemblée et les coordonnées à reporter dans votre CSS.

● Betapar 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.

Ce qu’est un sprite, et à quoi il sert

Un sprite rassemble de nombreuses petites images dans une seule. Plutôt que de réclamer chaque icône séparément, la page charge un fichier unique, puis le CSS n’affiche que la portion voulue à chaque emplacement. Sur une interface riche en pictogrammes, cela réduit d’autant le nombre de requêtes réseau et simplifie la mise en cache. La technique reste utile là où l’on sert de vraies images matricielles plutôt que des icônes vectorielles.

Ce que vous récupérez

Deux choses : la feuille de sprites assemblée et la liste des coordonnées — position et dimensions de chaque image dans le montage. Ces repères se reportent dans votre feuille de style pour cadrer l’affichage sur la bonne icône. L’outil se charge du placement et du calcul des positions, le travail fastidieux quand on assemble un sprite à la main dans un éditeur d’images.

Quand le préférer, quand l’éviter

Le sprite garde son intérêt pour un jeu d’images matricielles servies ensemble. Pour de simples icônes monochromes, un format vectoriel ou une police d’icônes reste souvent plus souple. Pensez aussi à l’entretien : ajouter une image oblige à régénérer la feuille et à mettre à jour les coordonnées. C’est un compromis entre le nombre de requêtes économisées et la charge de maintenance que vous acceptez.

Fonction en version bêta

Cette fonction est proposée en bêta : elle produit déjà des sprites exploitables, mais son comportement est encore en cours d’ajustement au fil des retours. Vérifiez le montage et les coordonnées obtenues avant de les intégrer à un projet en production, comme vous le feriez pour tout outil que vous découvrez sur une chaîne de build.

Cas d’usage

Icônes d’une interface

Un développeur regroupe les pictogrammes d’une application web dans une seule feuille pour limiter les requêtes au chargement.

Jeu de boutons d’un site

Studio Lumen SAS assemble les états d’un même bouton — normal, survol, actif — dans un sprite unique pour un menu de navigation.

Optimisation d’une page existante

Avant une mise en ligne, une équipe réunit une dizaine de petites images éparses en un sprite et reporte les coordonnées dans son CSS.

Bibliothèque de pictogrammes

Un intégrateur prépare une feuille commune pour réutiliser le même jeu d’icônes sur plusieurs pages sans les recharger à chaque fois.

Questions fréquentes

Les coordonnées de chaque image sont-elles fournies ?

Oui. Vous recevez la feuille assemblée et la position exacte — décalage et dimensions — de chaque image dans le montage, à reporter dans votre feuille de style.

Un sprite est-il encore utile face aux icônes vectorielles ?

Pour de vraies images matricielles servies ensemble, oui : il réduit le nombre de requêtes. Pour des icônes monochromes, un format vectoriel ou une police d’icônes est souvent plus adapté.

Cette fonction est en bêta, est-elle fiable ?

Elle produit des sprites exploitables, mais reste en cours d’ajustement. Contrôlez le montage et les coordonnées avant de les intégrer à un projet en production.

Quel est le tarif d’un assemblage ?

Le tarif est de $0.002 par requête et $0.005 par image traitée, en dollars US. Vous payez à l’usage, sans abonnement.

Mes images sont-elles conservées après l’assemblage ?

Non. Les fichiers sont transmis de façon chiffrée, assemblés le temps de produire le sprite, puis supprimés de nos serveurs.

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/sprite

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/sprite \
  -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/sprite", {
  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/sprite",
    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/sprite", 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/sprite", 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.sprite",
  "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 →