ForHosting KIT · Imagens

Gerador de sprite CSS

Capacidade de API que combina vários ícones ou imagens pequenas em uma única folha de sprite, pronta para servir no site com uma requisição só. Voltada para desenvolvedores que querem reduzir o número de downloads da página ou empacotar assets de interface de forma organizada.

● Betapor imagemUS$ 0,002

Executar — US$ 0,002 + US$ 0,005/imagem Ver a API

Use pelo WebAPIE-mailApp em breveTelegram em breve

Rode online

Rode nos nossos servidores com a sua conta. As ferramentas grátis rodam no seu navegador; esta aqui é descontada do seu saldo do KIT pelo preço acima.

Menos requisições, página mais leve

Cada ícone servido como arquivo separado é uma requisição a mais que o navegador do visitante precisa fazer. Em páginas com dezenas de ícones — menus, bandeiras, selos de pagamento — isso soma latência, principalmente em conexão móvel. O sprite resolve empacotando tudo em uma imagem única: o navegador baixa um arquivo e o CSS exibe cada pedaço na posição certa. É uma técnica veterana que continua útil em e-mail HTML, sistemas legados e sites que precisam funcionar bem em rede lenta.

Envio em lote, resultado único

Você manda o conjunto de imagens em uma chamada e recebe a folha combinada. O processamento é assíncrono: a API responde com um task_id e você busca o resultado quando estiver pronto. Cada imagem de entrada pode ter até 15 MB, e o custo é por imagem processada — então um sprite de 40 ícones custa exatamente 40 unidades, US$ 0,20, mais a chamada de US$ 0,002. Preço publicado, sem plano nem franquia.

Vale a pena na era do HTTP/2?

Resposta honesta: depende. Com HTTP/2 e HTTP/3, o custo de múltiplas requisições caiu bastante, e para sites modernos servidos por CDN o ganho do sprite é menor do que era. Ele continua fazendo diferença em e-mail marketing (onde cada imagem externa pesa), em WebViews de apps, em painéis internos servidos de infraestrutura simples e em jogos ou mapas de tiles. Se o seu caso é um site novo em CDN moderna, avalie antes se o sprite resolve um problema real.

Status beta: o que isso significa aqui

Esta capacidade está em beta: funciona e cobra o preço publicado, mas detalhes do resultado — como o algoritmo de empacotamento — ainda podem mudar. Se o seu fluxo depende de posições fixas dos ícones dentro da folha, trate o sprite gerado como artefato versionado no seu repositório em vez de gerar de novo a cada build. Encontrou comportamento estranho? Escreva para a gente: retorno de quem usa em produção é o que tira uma ferramenta do beta.

Casos de uso

Ícones da loja virtual em um arquivo

O desenvolvedor da TecnoSul Soluções Digitais mantém uma loja com 30 ícones de categorias e selos. No build do site, um script envia a pasta de ícones para a API e salva a folha de sprite gerada junto com o CSS de posições.

E-mail marketing que carrega rápido

Uma agência de Curitiba monta newsletters com selos de benefícios repetidos em todos os envios. Com os selos em um sprite único hospedado, cada e-mail aberto faz um download só, em vez de oito.

Painel interno em rede corporativa lenta

Um sistema de chão de fábrica em Betim roda em rede local restrita. Empacotar os ícones da interface em uma folha única reduziu o tempo de carga das telas nos terminais antigos.

Perguntas frequentes

O que é exatamente um sprite CSS?

É uma imagem única que contém vários ícones lado a lado. No site, o CSS usa background-position para mostrar só o pedaço correspondente a cada ícone. O navegador baixa um arquivo em vez de dezenas.

Quantos ícones posso combinar em uma folha?

O limite prático é o tamanho dos arquivos de entrada (até 15 MB e 12 megapixels cada) e o bom senso: folhas gigantes anulam a vantagem. Dezenas de ícones pequenos é o cenário ideal.

Como fica o custo para um projeto típico?

US$ 0,002 pela chamada mais US$ 0,005 por imagem incluída. Um sprite com 50 ícones sai por US$ 0,252. Como sprite se gera poucas vezes — normalmente a cada mudança de design — o custo mensal tende a zero.

Sprite ainda faz sentido com HTTP/2?

Nem sempre, e preferimos dizer isso com clareza: em sites modernos atrás de CDN o ganho é pequeno. Os casos fortes hoje são e-mail HTML, WebViews, painéis internos e infraestrutura simples sem multiplexação.

Por que está marcado como beta?

Porque o formato do resultado ainda pode evoluir — por exemplo, o empacotamento dos ícones dentro da folha. A cobrança e o funcionamento já são os definitivos; a recomendação é versionar o sprite gerado no seu projeto.

Os ícones que eu enviar ficam com vocês?

São processados para montar a folha e nada mais. Não entram em galeria pública nem são repassados. Empresas que precisam formalizar isso para a LGPD podem pedir os detalhes por e-mail.

Para desenvolvedores — acesso via API

Tudo nesta página está disponível via API. Esta seção é para equipes que querem integrar a ferramenta aos próprios sistemas; quem não precisa disso pode simplesmente usar a ferramenta acima.

Endpoint

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

Autenticação por token Bearer. Um único POST coloca a tarefa na fila; o resultado chega por webhook ou link assinado.

Chame do seu código

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)

Exemplo de requisição

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

Exemplo de resposta

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "image.sprite",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

A API é assíncrona: cada chamada devolve um task_id na hora. Se preferir polling, consulte o status a até 1 requisição por segundo.

Preço

por chamadaUS$ 0,002

por imagemUS$ 0,005

Preço publicado, sem tokens nem créditos escondidos. Tarefa que falha não é cobrada.

Limites

`max_mb`	15
`max_megapixels`	12

Erros

HTTP	Código	O que significa
`401`	`unauthorized`	Token ausente ou inválido. Confira o header Authorization.
`402`	`insufficient_balance`	Saldo insuficiente para esta tarefa. Faça uma recarga e tente de novo.
`404`	`unknown_type`	Esse tipo de tarefa não existe. Confira o campo type no catálogo.
`429`	`rate_limited`	Muitas requisições em pouco tempo. Espere um instante e tente de novo.

Ver a documentação completa do KIT →