ForHosting KIT · Imagens

Imagens responsivas

O 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.

● Estávelpor 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.

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.

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

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. Os limites por arquivo: 15 MB e 12 megapixels.

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?

Por imagem gerada: cinco larguras são cinco imagens, US$ 0,025, mais US$ 0,002 da chamada. 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.

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/responsive-set

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/responsive-set \
  -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/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[&#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/responsive-set", 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/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

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 →