Imagens responsivas
Envie uma imagem original e receba a mesma imagem em cada largura que o seu layout precisa, com uma linha srcset pronta para colar, para que o celular nunca baixe a imagem principal em tamanho de desktop. Escolha suas larguras ou use as padrão. Você paga por uso, sem assinatura.
Esta tarefa não está disponível no momento, portanto não pode ser contratada. Nada é cobrado por ela.
Ver a APIO gerador de conjunto responsivo recebe uma imagem e devolve as várias larguras que um site moderno precisa — as versões que o navegador escolhe pelo srcset conforme o tamanho da tela. Em vez de redimensionar a mesma foto quatro ou cinco vezes, você faz uma chamada e recebe o conjunto completo.
Por que um tamanho só não serve mais
A mesma foto é exibida num monitor de 27 polegadas e num celular de entrada com 4G oscilando. Servir o arquivo grande para todo mundo desperdiça banda e deixa a página lenta justamente onde a maioria dos brasileiros navega: no celular. O atributo srcset resolve isso deixando o navegador escolher a versão certa para cada tela — mas alguém precisa gerar essas versões, e é exatamente esse trabalho repetitivo que esta capacidade elimina.
O que a chamada devolve
Você envia a imagem original e a lista de larguras que o seu layout usa — por exemplo, 320, 640, 960, 1280 e 1920 px. A resposta traz cada versão redimensionada, com a proporção preservada, pronta para você hospedar e referenciar no srcset. As larguras são decisão sua: um blog de texto pede menos variações que uma loja cheia de banner, e o conjunto acompanha o seu design, não um padrão imposto.
Casos de uso
Portal de notícias com dezenas de fotos por dia
Um portal regional de Curitiba publica fotos de reportagem o dia inteiro. No fluxo de publicação, cada foto do repórter vira um conjunto de cinco larguras, e a homepage carrega rápido até em rede móvel congestionada.
Loja WooCommerce mais leve no celular
A loja de Ana Paula Ferreira roda WooCommerce, e as fotos de produto vinham num tamanho só. Com o conjunto responsivo gerado no upload, a página de produto ficou leve no celular — onde a clientela dela realmente compra.
Pipeline de build de agência
A TecnoSul Soluções Digitais ME incluiu a geração no build dos sites que entrega: o cliente manda a imagem em alta, e o site publica o srcset completo sem ninguém tocar em editor.
Central de ajuda cheia de capturas de tela
Um time de produto em Belo Horizonte mantém a documentação com dezenas de prints. O conjunto responsivo serve as versões menores nas listas e a maior no zoom, sem duplicar trabalho de edição.
Perguntas frequentes
Quais larguras devo pedir?
Depende do seu layout. O comum é gerar de três a seis versões entre uns 320 px e a largura máxima do design — os breakpoints do seu CSS são o melhor guia. Na dúvida, comece com quatro larguras e ajuste observando o que o site realmente serve.
O conjunto sai em WebP?
As versões mantêm o formato da imagem enviada. Se você quer trocar o formato além do tamanho, existe uma capacidade dedicada de conversão — dá para encadear as duas no mesmo fluxo e sair com o srcset já em WebP.
Gerar imagens responsivas melhora minha posição no Google?
O que dá para afirmar com honestidade: páginas mais leves melhoram a experiência e as métricas de velocidade que o Google mede. Promessa de posição específica ninguém sério faz.
Como é cobrado um conjunto?
O preço está publicado e não muda conforme o mês — sem plano, sem franquia.
Vocês hospedam as versões geradas?
Não. O resultado volta para você baixar pela tarefa, e a hospedagem continua sendo sua — você segue dono do acervo e decide onde cada versão vai morar.
Preciso de conta ou plano para gerar os conjuntos?
Nenhum dos dois: a compra é direta, sem cadastro. Dúvida técnica de integração é respondida por gente de verdade, em espanhol ou inglês — escrevendo em português a conversa flui do mesmo jeito.
Ferramentas relacionadas
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
Um POST autenticado cria a tarefa; o resultado chega por webhook ou por um link assinado. Esta capacidade está disponível pela API, não como ferramenta web interativa.
Chame do seu código
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)Exemplo de requisição
{
"image": "https://ejemplo.com/imagen.jpg"
}Exemplo de resposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "image.responsive_set",
"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
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. |
Notas técnicas
Onde encaixar no seu fluxo
Os dois pontos naturais são o build do site — cada imagem nova do repositório gera seu conjunto na hora da publicação — e o upload do CMS, em que a foto que o editor sobe já sai multiplicada nas larguras certas. Como o processamento é assíncrono via task_id, dá para disparar dezenas de conjuntos de uma vez sem segurar o deploy nem o botão de salvar.
Preço por conjunto, na prática
Os limites por arquivo: 15 MB e 12 megapixels. A cobrança é US$ 0,002 por chamada mais US$ 0,005 por imagem gerada. Um conjunto de cinco larguras custa US$ 0,027 — menos de três centavos de dólar por foto original. Um site com 200 imagens fica em torno de US$ 5,40, pago uma vez, sem assinatura e sem cadastro para começar.