ForHosting KIT · Immagini e foto

Sprite CSS di immagini

Uno sprite è un'unica immagine che raccoglie tante icone piccole; il sito ne carica una sola invece di venti, e mostra il pezzo giusto con il CSS. Questo strumento monta le tue immagini in uno sprite e ti restituisce anche le coordinate da incollare nel foglio di stile.

● Betaper richiesta + per immagine$0.002

Esegui — $0.002 + $0.005/immagine Vedi l'API

Usalo da WebAPIEmailApp prestoTelegram presto

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é usare uno sprite

Ogni immagine che una pagina carica è una richiesta al server. Venti icone sono venti richieste, e su una connessione mobile si sentono. Uno sprite le unisce in un file solo: una richiesta, tutto caricato. È una tecnica classica dell'ottimizzazione web, ancora utile per set di icone e piccoli elementi ripetuti dell'interfaccia. Carichi le immagini, lo strumento le impacchetta e ti dà il file finale.

Le coordinate già pronte

Il bello di uno sprite è anche la parte noiosa: sapere in quale punto sta ogni icona. Il KIT calcola le posizioni e ti consegna le regole CSS con background-position per ogni elemento, così non devi misurare i pixel a mano. Copi, incolli nel tuo foglio di stile e le icone appaiono al posto giusto.

Come disporre le immagini

Puoi scegliere la disposizione — in griglia, in fila orizzontale o verticale — e la spaziatura tra un elemento e l'altro per evitare che si sovrappongano quando vengono scalati. Meglio partire da icone della stessa dimensione: lo sprite risulta più pulito e le coordinate più regolari.

Casi d'uso

Set di icone di un sito

Uno sviluppatore di Torino ha venti icone SVG esportate in PNG per l'interfaccia: le unisce in uno sprite e passa da venti richieste HTTP a una sola.

Bandiere e loghi

Un e-commerce con selettore di lingua carica le bandierine come sprite unico, così cambiano istantaneamente senza attese a ogni hover.

Elementi ripetuti dell'interfaccia

Pulsanti, frecce e stelline di valutazione di Tecnoedil Verona S.n.c. finiscono in un solo file, riducendo il peso complessivo della pagina.

Domande frequenti

Cosa ricevo esattamente?

L'immagine sprite unica più le regole CSS con le coordinate di ogni elemento. Incolli il CSS nel tuo progetto e le icone si posizionano da sole.

È già pronto per l'uso in produzione?

Lo strumento è in beta: funziona ed è utilizzabile, ma lo stiamo ancora rifinendo. Se noti qualcosa che non torna, scrivici e correggiamo.

Meglio uno sprite o le immagini separate?

Per tante icone piccole e ripetute lo sprite riduce le richieste e velocizza il caricamento. Per poche immagini grandi conviene tenerle separate.

Quanto costa?

Si paga a consumo: $0.005 a immagine elaborata, più $0.002 di base a richiesta. Prezzo pubblicato, nessun abbonamento.

Le mie immagini restano vostre?

No. Vengono elaborate per costruire lo sprite e poi eliminate; non le conserviamo.

Posso usare icone di misure diverse?

Sì, ma il risultato è più ordinato se partono dalla stessa dimensione. Puoi impostare la spaziatura per tenerle separate nello sprite.

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

POSThttps://api.kit.forhosting.com/image/sprite

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

Esempio di richiesta

{
  "image": "https://ejemplo.com/imagen.jpg"
}

Esempio di risposta

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

per richiesta$0.002

per immagine$0.005

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.

Leggi la documentazione completa del KIT →