Calcoli le dimensioni responsive per ogni breakpoint
I layout responsive indicano spesso la larghezza di un’immagine a vari breakpoint CSS, mentre la pipeline richiede le dimensioni reali in pixel dei file da generare.
Esegui gratis nel browser
Questo calcolatore converte ogni larghezza visualizzata nella larghezza sorgente necessaria tramite un moltiplicatore di densità, quindi restituisce un elenco ordinato senza duplicati. Lei può così rendere esplicito e ripetibile il rapporto tra CSS, densità dello schermo e risorse di origine.
Converta le regole di layout in pixel sorgente
Parta dai breakpoint già definiti nel progetto o nel foglio di stile. Per ciascuno inserisca la larghezza minima del viewport alla quale si applica la regola e la larghezza effettiva con cui viene mostrata l’immagine. Entrambi i valori sono espressi in pixel CSS e possono essere copiati direttamente dalle specifiche. Il calcolatore ordina le righe per breakpoint, anche se Lei le fornisce in un ordine diverso. Ogni larghezza visualizzata viene moltiplicata per la densità scelta e il risultato viene arrotondato per eccesso a un pixel intero. Questo impedisce che un prodotto frazionario generi una risorsa appena più piccola del necessario. La risposta conserva ogni associazione per la revisione e presenta anche un elenco separato di larghezze sorgente uniche. Quest’ultimo è il set pratico di varianti da generare, memorizzare nella cache e usare nella pipeline responsive.
Scelga consapevolmente la densità dei pixel
Il moltiplicatore predefinito è 2, un riferimento utile per immagini nitide sui comuni schermi ad alta densità. Un’immagine visualizzata a 480 pixel CSS richiede quindi una sorgente larga 960 pixel. Lei può scegliere un valore diverso tra 0.1 e 8 quando la politica di distribuzione ha altri obiettivi. Il valore 1 riduce le dimensioni per schermi a densità ordinaria, mentre 3 prepara file per pannelli più densi con maggiori costi di archiviazione e trasferimento. Lo stesso moltiplicatore si applica a tutti i breakpoint, così la politica rimane coerente. Lo strumento non decide quale file scaricherà ogni visitatore e non stima compressione o peso: calcola soltanto le larghezze. Passi l’elenco a un ottimizzatore o servizio di trasformazione e lasci che il browser scelga la risorsa mediante il markup e le regole media del componente.
Inserisca il risultato nella pipeline responsive
La risposta contiene il moltiplicatore applicato, una riga ordinata per ciascun breakpoint e un elenco numerico delle larghezze sorgente uniche. Le righe aiutano Lei a confrontare l’implementazione con il progetto, mostrando insieme larghezza visualizzata e calcolata. L’elenco unico semplifica l’automazione quando due regole richiedono lo stesso file. Se due condizioni mostrano l’immagine a 600 pixel CSS, con densità 2 basta una variante da 1200 pixel. Invii ogni larghezza unica alla fase di ridimensionamento, mantenga lì le proporzioni e usi nel componente gli URL generati. Ritaglio, formato, qualità e altezza appartengono alla fase successiva, poiché dipendono dall’immagine e dalla direzione artistica. Gli elenchi vuoti e i breakpoint duplicati vengono rifiutati perché non costituiscono una specifica responsive univoca.
Casi d'uso
Preparare varianti durante il build
Converta le specifiche del componente nelle larghezze uniche esatte che un sito statico deve generare.
Verificare una consegna di design
Controlli che le risorse fornite abbiano pixel sufficienti per la densità concordata in ogni stato.
Configurare un CDN di immagini
Produca un elenco stabile di larghezze per richieste di ridimensionamento, preset o riscaldamento della cache.
Domande frequenti
Quanto costa il calcolo?
Ogni calcolo tramite API costa $0.002.
Perché le larghezze vengono arrotondate per eccesso?
Un’immagine non può avere larghezza frazionaria; arrotondare per difetto potrebbe fornire meno pixel della densità richiesta.
Qual è la densità predefinita?
Il moltiplicatore predefinito è 2: una larghezza visibile di 500 pixel CSS richiede una sorgente da 1000 pixel.
Lo strumento genera o ridimensiona immagini?
No. Calcola le larghezze da generare; il ridimensionamento spetta a un processore, uno strumento di build o un CDN.
Perché l’output include sizes e source_widths?
sizes conserva le associazioni da verificare, mentre source_widths elimina i duplicati per una generazione efficiente.
Che cosa accade se l’elenco dei breakpoint è vuoto?
La richiesta restituisce un errore di input non valido perché è necessaria almeno una regola di layout.
Per sviluppatori — accesso via API
Tutto quello che vedi in questa pagina è disponibile anche via API. Questa sezione è per i team che vogliono integrarlo nei propri sistemi; chi non ne ha bisogno può semplicemente usare lo strumento qui sopra.
Endpoint
Autenticazione con Bearer token: un POST mette in coda l'attività e il risultato arriva via webhook o link firmato.
Chiamala dal tuo 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)Esempio di richiesta
{
"breakpoints": [
{
"breakpoint": 0,
"display_width": 320
},
{
"breakpoint": 768,
"display_width": 720
},
{
"breakpoint": 1200,
"display_width": 1080
}
]
}Esempio di risposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "image.responsive_breakpoint_sizes",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}L'API è asincrona: ricevi subito un task_id e puoi fare polling fino a 1 richiesta al secondo.
Prezzi
Prezzo pubblicato, senza token né crediti. Se l'attività fallisce, non paghi.
Limiti
max_mb | 15 |
max_megapixels | 12 |
Errori
| HTTP | Codice | Significato |
|---|---|---|
401 | unauthorized | Chiave API mancante o non valida: controlla l'header Authorization. |
402 | insufficient_balance | Credito esaurito: ricarica per continuare a eseguire attività. |
404 | unknown_type | Tipo di attività sconosciuto: controlla il campo type della richiesta. |
429 | rate_limited | Troppe richieste in poco tempo: rallenta e riprova tra qualche secondo. |