ForHosting KIT · Images

Calculez les tailles d’images responsive par breakpoint

Une maquette responsive indique souvent la largeur d’affichage d’une image à plusieurs breakpoints CSS, tandis que la chaîne de production exige les dimensions réelles des fichiers à générer.

● BetaGratuit · dans votre navigateur

Lancer gratuitement Voir l’API

Utilisez-le depuis WebAPIE-mailTelegramApp bientôt

Ce calculateur multiplie chaque largeur affichée par une densité de pixels, puis renvoie les résultats triés et dédupliqués. Vous obtenez ainsi une correspondance explicite et reproductible entre la mise en page, l’écran et les ressources source.

Convertissez les règles de mise en page en pixels source

Reprenez les breakpoints définis dans la maquette ou la feuille de styles. Pour chacun, saisissez la largeur minimale du viewport à laquelle la règle s’applique et la largeur réelle d’affichage de l’image. Ces deux mesures sont exprimées en pixels CSS et peuvent être copiées directement depuis les spécifications. Le calculateur trie les lignes par breakpoint, quel que soit leur ordre de saisie. Il multiplie chaque largeur affichée par la densité choisie et arrondit le résultat à l’entier supérieur. Cet arrondi empêche une valeur fractionnaire de produire une ressource légèrement trop petite. La réponse conserve chaque association afin que vous puissiez la contrôler, tout en fournissant une liste distincte des largeurs source uniques. Cette dernière constitue le jeu pratique de variantes à générer, mettre en cache et intégrer dans votre chaîne d’images responsive.

Choisissez consciemment la densité de pixels

La valeur par défaut est 2, un bon point de départ pour conserver des images nettes sur les écrans haute densité courants. Une image affichée sur 480 pixels CSS demande donc une source de 960 pixels. Vous pouvez choisir une autre valeur entre 0.1 et 8 selon votre politique de diffusion. La valeur 1 réduit les dimensions pour une densité ordinaire, tandis que 3 prépare des ressources pour des écrans plus denses, au prix d’un stockage et d’un transfert supérieurs. Le même multiplicateur est appliqué partout afin de représenter une politique cohérente. Cet outil ne choisit pas le fichier téléchargé par chaque visiteur et n’estime ni compression ni poids. Il calcule uniquement les largeurs requises. Transmettez ensuite les valeurs à un optimiseur ou à un service de transformation, puis laissez le navigateur sélectionner la ressource grâce au balisage et aux règles média du composant.

Intégrez le résultat à votre chaîne responsive

La réponse contient le multiplicateur appliqué, une ligne triée pour chaque breakpoint et une liste numérique des largeurs source uniques. Les lignes permettent de comparer l’implémentation à la maquette, car chacune rapproche la largeur affichée et sa largeur calculée. La liste unique simplifie l’automatisation lorsque deux règles réclament le même fichier. Si deux conditions affichent une image sur 600 pixels CSS, une densité de 2 ne nécessite qu’une variante de 1200 pixels. Envoyez chaque largeur unique à votre étape de redimensionnement, conservez-y les proportions et utilisez les URL générées dans le composant. Le recadrage, le format, la qualité et la hauteur relèvent de cette étape ultérieure, car ils dépendent de l’image et de la direction artistique. Une liste vide ou des breakpoints en double sont refusés, puisqu’ils ne définissent pas une spécification sans ambiguïté.

Cas d’usage

Préparer les variantes lors du build

Transformez les spécifications du composant en largeurs uniques exactes à générer par un site statique.

Contrôler une livraison de maquette

Vérifiez que les ressources livrées contiennent assez de pixels pour la densité convenue à chaque état.

Configurer un CDN d’images

Produisez une liste stable pour les requêtes de redimensionnement, les préréglages ou le préchauffage du cache.

Questions fréquentes

Quel est le prix du calcul ?

Chaque calcul par API coûte $0.002.

Pourquoi arrondir les largeurs à l’entier supérieur ?

Une image ne peut pas avoir une largeur fractionnaire, et arrondir vers le bas risquerait de fournir trop peu de pixels.

Quelle est la densité par défaut ?

Le multiplicateur par défaut est 2 : un affichage de 500 pixels CSS exige une source de 1000 pixels.

Cet outil génère-t-il ou redimensionne-t-il les images ?

Non. Il calcule les largeurs à générer ; un processeur, un outil de build ou un CDN effectue le redimensionnement.

Pourquoi la réponse contient-elle sizes et source_widths ?

sizes conserve les correspondances à contrôler, tandis que source_widths retire les doublons pour optimiser la génération.

Que se passe-t-il si la liste des breakpoints est vide ?

La requête échoue avec une erreur d’entrée non valide, car au moins une règle de mise en page est nécessaire.

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-breakpoint-sizes

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-breakpoint-sizes \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"breakpoints":[{"breakpoint":0,"display_width":320},{"breakpoint":768,"display_width":720},{"breakpoint":1200,"display_width":1080}]}'

const res = await fetch("https://api.kit.forhosting.com/image/responsive-breakpoint-sizes", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "breakpoints": [
      {
        "breakpoint": 0,
        "display_width": 320
      },
      {
        "breakpoint": 768,
        "display_width": 720
      },
      {
        "breakpoint": 1200,
        "display_width": 1080
      }
    ]
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/image/responsive-breakpoint-sizes",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "breakpoints": [
        {
            "breakpoint": 0,
            "display_width": 320
        },
        {
            "breakpoint": 768,
            "display_width": 720
        },
        {
            "breakpoint": 1200,
            "display_width": 1080
        }
    ]
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/image/responsive-breakpoint-sizes", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"breakpoints":[{"breakpoint":0,"display_width":320},{"breakpoint":768,"display_width":720},{"breakpoint":1200,"display_width":1080}]}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"breakpoints":[{"breakpoint":0,"display_width":320},{"breakpoint":768,"display_width":720},{"breakpoint":1200,"display_width":1080}]}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/image/responsive-breakpoint-sizes", 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

{
  "breakpoints": [
    {
      "breakpoint": 0,
      "display_width": 320
    },
    {
      "breakpoint": 768,
      "display_width": 720
    },
    {
      "breakpoint": 1200,
      "display_width": 1080
    }
  ]
}

Exemple de réponse

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "image.responsive_breakpoint_sizes",
  "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

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 →