Immagini responsive per il sito
Un set responsive è la stessa immagine esportata in più larghezze — per esempio 480, 768, 1200 e 1600 pixel — da servire con l'attributo srcset. Il browser sceglie da solo la versione adatta allo schermo: telefono, tablet o desktop scaricano solo quella che serve, e la pagina diventa più veloce.
Esegui online
Esegui questo sui nostri server con il tuo account. Gli strumenti gratuiti girano nel tuo browser; questo viene addebitato sul tuo saldo KIT al prezzo indicato sopra.
Perché una foto sola non basta
Se metti un'immagine da 1600 pixel e la mostri anche sui telefoni, quei telefoni scaricano comunque tutti i pixel che non useranno: pagina lenta, dati sprecati, Core Web Vitals peggiori. Con un set responsive generi in un colpo le larghezze utili e le dichiari in srcset; ci pensa il browser a prendere la giusta in base a schermo e densità di pixel. È lo standard con cui lavorano i temi seri e i CMS moderni, senza plugin misteriosi da installare.
Che misure ti servono
Non esiste un set unico: dipende dai punti in cui l'immagine appare. Per una foto a tutta larghezza servono tagli più grandi; per una miniatura di lista bastano larghezze piccole. Lo strumento parte dall'originale e ne ricava le versioni che scegli, mantenendo le proporzioni e la nitidezza. Ti conviene coprire i casi tipici — telefono, tablet, desktop e schermi retina — senza esagerare: troppe varianti gonfiano il lavoro senza vantaggi reali per chi naviga.
Il markup pronto all'uso
Insieme ai file ottieni la stringa srcset con le larghezze in “w”, così la incolli nel tag e l'attributo sizes fa il resto. Puoi anche uscire direttamente in WebP o AVIF per pesare ancora meno. Chi ha un sito su misura chiama lo strumento via API e rigenera il set a ogni pubblicazione; chi lavora a mano lo usa da questa pagina quando prepara un articolo o una scheda.
Casi d'uso
Blog che deve superare i Core Web Vitals
Le foto degli articoli pesano e Google segnala la lentezza da mobile. Generi il set responsive per ogni immagine di copertina e la pagina inizia a caricare la versione giusta per ogni telefono.
E-commerce con molte schede
Le foto prodotto vanno bene sul desktop ma affaticano il telefono. Un set per ciascuna, dichiarato in srcset, e la navigazione da mobile diventa fluida senza toccare il resto del tema.
Landing di Studio Commercialista Bianchi
Poche immagini ma pesanti nell'header. Le trasformi in un set responsive in WebP e la home si apre subito anche in 4G, dando un'impressione professionale.
Domande frequenti
Che cos'è esattamente srcset e mi serve davvero?
srcset è l'elenco delle varianti di un'immagine con la loro larghezza; il browser sceglie da solo quale scaricare in base allo schermo. Ti serve se ti interessano velocità e Core Web Vitals: eviti di far scaricare ai telefoni immagini pensate per il desktop.
Quante larghezze conviene generare?
In genere bastano quattro o cinque tagli — telefono, tablet, desktop e retina. Coprire più casi non aiuta e appesantisce solo il lavoro; scegli le misure in base a dove l'immagine appare nel layout.
Ottengo anche il codice da incollare?
Sì, ti diamo la stringa srcset pronta con le larghezze in “w”, così la metti nel tag img e aggiungi il tuo attributo sizes.
Posso uscire in WebP o AVIF?
Sì. Puoi generare il set direttamente in formati moderni, così ogni variante pesa meno a parità di qualità.
Quanto costa e c'è un canone?
Si paga a consumo: $0.005 per immagine generata, più $0.002 a richiesta. Nessun abbonamento e nessuna registrazione; paghi solo i set che crei.
I file caricati vengono conservati?
No. L'originale viene elaborato per ricavarne le varianti e poi cancellato; non lo teniamo sui nostri server.
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-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)Esempio di richiesta
{
"image": "https://ejemplo.com/imagen.jpg"
}Esempio di risposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "image.responsive_set",
"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. |