# Imagens para site e landing page: o que funciona em cada lugar Источник / Source: https://picwin.co/pt/blog/imagens-para-site-e-landing-page Язык / Language: pt Рубрика / Topic: Negócios Автор / Author: Redação da Picwin Опубликовано / Published: 2026-08-18T00:00:00.000Z Обновлено / Updated: 2026-09-03T11:17:26.468Z Слов / Words: 1465 · Чтение / Reading: 8 min Обложка / Cover: https://picwin.co/api/picwin/blog-images/e8f7205abe24540298514413aaf0f8dc848ea4bd956f7dc7dd6398c9213fdd09.webp Переводы / Translations: en: https://picwin.co/en/blog/images-for-website-and-landing-page, kk: https://picwin.co/kk/blog/sait-pen-lending-ushin-suretter, ru: https://picwin.co/blog/kartinki-dlya-sayta-i-lendinga, uz: https://picwin.co/uz/blog/sayt-va-lending-uchun-rasmlar Uma página tem vários espaços com exigências próprias: primeiro bloco, produto, prova, fundo e prévia do link. Veja o que usar em cada um e como não deixar a página pesada. --- **Em resumo** Uma página não tem uma imagem, mas cinco ou seis espaços com exigências diferentes. O primeiro bloco precisa de espaço para o título e baixo peso; o bloco do produto, de uma cena concreta; o de confiança, de pessoas; o fundo, de uma superfície calma; e a prévia do link, de uma imagem horizontal própria. Não se escolhe tudo do mesmo modo: cada espaço tem tamanho, proporção e custo de erro específicos. Uma landing page costuma nascer assim: encontra-se uma imagem impactante para o primeiro bloco, e o resto é preenchido com “algo parecido”. Um mês depois, parece uma colagem, carrega devagar e vira um retângulo cinza no mensageiro. Vamos separar os espaços da página e entender o que cada um pede. ![Esquema de uma página com seis espaços para imagens e a função de cada um](/api/picwin/blog-images/2327505afd94f12bc5426314b7e3c50a000d3313a52b3e92f3b148fa67b01de1.webp) Uma página típica tem seis espaços, cada um com exigências diferentes. ## Quais espaços de uma página precisam de imagem? Normalmente são seis, e não são intercambiáveis. - **Primeiro bloco.** A imagem mais cara da página: todos a veem, ela define o tom e quase sempre é o elemento mais pesado. - **Bloco do produto.** Mostra o objeto ou interface. Exige honestidade: o leitor compara a promessa com o que vê. - **Bloco de confiança.** Pessoas, equipe, processo e clientes. Funciona pelo reconhecimento, não pela beleza. - **Fundos e divisores.** Superfícies calmas entre blocos; sua função é não atrapalhar. - **Cards em listas.** Imagens pequenas que precisam ser entendidas no tamanho de uma moeda. - **Prévia do link.** O que aparece no mensageiro ou na rede social antes da própria página. ## Como deve ser a imagem do primeiro bloco? Calma nas bordas e leve no arquivo. O primeiro bloco costuma conter o maior elemento da página, usado para medir Largest Contentful Paint. O Google recomenda manter essa métrica em até 2,5 segundos no 75º percentil dos carregamentos ([web.dev](https://web.dev/articles/lcp)). Uma imagem pesada é a maneira mais comum de ultrapassar esse limite. Requisitos práticos: - **Espaço para o título.** Uma área uniforme, sem detalhes importantes, para texto e botão. - **Composição simples.** Um centro de sentido; uma cena complexa compete com o título e enfraquece ambos. - **Tolerância ao recorte.** No celular, resta o centro da imagem horizontal, e o protagonista deve continuar nele. - **Facilidade de compressão.** Gradientes suaves e poucos detalhes pesam muito menos que cenas carregadas com a mesma qualidade. Dica Se você gostou da imagem, mas ela não tem espaço, não a escureça imediatamente. Veja se o mesmo briefing ou categoria tem uma imagem vizinha, na mesma linguagem, mas com área vazia: uma série costuma trazer versões densas e espaçosas da cena. ## Imagem em largura total ou em uma coluna? As duas soluções funcionam; escolha conforme o mais importante no bloco: atmosfera ou explicação. ### Imagem em largura total Cria atmosfera e dá aparência mais sofisticada. Precisa de margem: no monitor largo aparece o centro; no celular, um centro ainda mais estreito. Tolera mal detalhes pequenos e texto dentro da cena. Pesa mais e quase sempre entra na medição da velocidade. ### Imagem em uma coluna Fica ao lado do texto e o explica. A proporção é estável, o recorte previsível e o peso menor. Aceita detalhes porque é vista de perto. Não cria o mesmo impacto, mas não atrapalha a leitura e pode ser substituída sem refazer o bloco. ## O que usar nos blocos de produto, serviço e confiança? Neles, a imagem responde “o que recebo?” e “em quem posso confiar?”. A abstração funciona pior que algo concreto. [MockupsMockups e cenas de produto mostram aplicativos, embalagens e materiais impressos como se já existissem. Ver os trabalhos](/pt/category/mockups)[NegóciosTrabalho, negociações e equipes atendem ao bloco “sobre nós” e às páginas de serviços. Ver os trabalhos](/pt/category/business)[InterioresAmbientes e espaços profissionais ajudam quando o serviço acontece offline, de estúdios a clínicas. Ver os trabalhos](/pt/category/interior) Para uma imobiliária, use a categoria de [imóveis](/pt/category/realty). Para divisores e fundos, [superfícies abstratas](/pt/category/abstract) não competem com o texto e aceitam ajuste de cor. Para listas de benefícios, é mais simples usar [ícones](/pt/category/icons) do que redesenhá-los. ## Como preparar o arquivo sem deixar a página pesada? O processo é o mesmo em qualquer espaço. - ### Recorte para o espaço Primeiro faça o recorte na proporção do bloco. Uma imagem recortada pelo navegador ainda é baixada inteira: você paga por pixels que ninguém verá. - ### Defina o tamanho real A largura deve corresponder à largura de exibição, com margem para telas de densidade dupla, e não ter “quatro mil pixels por garantia”. - ### Comprima e compare Salve em formato moderno e compare com o original no tamanho de exibição. Uma diferença invisível nesse tamanho representa economia pura. - ### Adie as imagens inferiores Tudo abaixo do primeiro bloco pode carregar sob demanda. A imagem inicial, ao contrário, não deve ter carregamento tardio: isso atrasaria a principal métrica da página. - ### Verifique no celular Abra a página em uma tela móvel e confira o que sobrou de cada imagem após o recorte e quanto tempo o primeiro bloco levou. ## O que aparece na prévia do link? Uma imagem separada, definida pela tag `og:image`. A Meta recomenda no mínimo 1200 × 630 pixels; o mínimo permitido é 200 × 200, o arquivo deve ter até 8 MB e a proporção deve ficar próxima de 1.91:1 para evitar recortes ([documentação da Meta para desenvolvedores](https://developers.facebook.com/docs/sharing/webmasters/images/)). Abaixo de 600 × 315, ela aparece como um quadrado pequeno ao lado do link — o “retângulo cinza” que estraga o compartilhamento. Nota A prévia não é o primeiro bloco reduzido. Ela tem outra proporção e outro tamanho de leitura: o que era fundo para um título grande vira uma mancha indistinta. É mais fácil escolher uma imagem horizontal separada da mesma série. ## O que escrever no alt? Descreva o que aparece, de modo curto e objetivo. Leitores de tela e robôs de busca leem o alt; o Google recomenda texto descritivo, não uma lista de palavras-chave, e informa que nomes de arquivo e legendas relevantes também ajudam ([Google Search Central](https://developers.google.com/search/docs/appearance/google-images)). Regra prática: descreva por telefone para alguém que tomará uma decisão. “Barista prepara café atrás do balcão” é melhor que “café, cafeteria, barista, expresso, comprar café”. Importante Um fundo decorativo sem significado deve ter alt vazio. Já uma imagem que substitui texto — tabela de planos, infográfico ou captura com números — precisa ser descrita; sem isso, parte da página desaparece para quem não a vê. ## Como montar um conjunto para a página, e não uma coleção de achados? Olhe a página inteira. As imagens devem combinar em temperatura de luz, ponto de vista e densidade de detalhes. Isso é mais fácil quando vêm do mesmo briefing ou categoria, pois a linguagem comum já está prevista. O artigo [como escolher uma imagem de IA para seu projeto](/pt/blog/como-escolher-uma-imagem-de-ia) explica como avaliar cada cena. Se a página virar posts, veja [imagens para redes sociais](/pt/blog/imagens-para-redes-sociais); se receber tráfego pago, leia [criativos para anúncios](/pt/blog/criativos-para-anuncios). Monte um conjunto para sua página Categorias, filtros e trabalhos de um mesmo briefing estão na mini app Picwin: é mais fácil montar uma série quando se veem as imagens vizinhas. [Abrir o catálogo](/pt/partners) **Pontos principais** - Uma página tem seis espaços de imagem com exigências diferentes. - A imagem inicial quase sempre determina a velocidade: não deve carregar tarde nem ser grande “por garantia”. - A proporção vem do espaço, não do original: recorte antes de enviar, não no navegador. - Escolha a prévia do link separadamente, conforme as exigências da plataforma. - O alt descreve o conteúdo; fundos decorativos ficam sem descrição. ### Quantas imagens uma landing page precisa? Tantas quantos forem os blocos que precisam mostrar algo, geralmente de quatro a oito. Uma imagem sem função é peso e ruído; um bloco sem imagem quando o leitor precisa ver o objeto perde a explicação. ### Posso usar a mesma imagem no primeiro bloco e na prévia? Sim, se ela resistir às duas proporções e continuar clara em tamanho pequeno. Em geral, duas imagens da mesma série funcionam melhor porque a prévia tem outra escala. ### Qual deve ser a largura da imagem inicial? A largura do espaço multiplicada pela densidade da tela, e não mais. Não há número universal: uma coluna de 720 pixels e uma imagem em largura total pedem respostas diferentes. ### O que fazer se a imagem for bonita, mas carregada? Use-a onde não haja texto sobreposto: produto, galeria ou divisor. O primeiro bloco precisa de uma área sem detalhes, seja em outra imagem, seja em uma versão mais calma da mesma narrativa. ### As imagens da página precisam de legenda? Quando trazem dados ou exigem explicação, sim: diagramas, comparações e interfaces. Uma ilustração decorativa não precisa; a legenda roubaria atenção do título. ### Como saber se as imagens deixam a página lenta? Meça quando o maior elemento aparece em uma conexão móvel e identifique-o. Se for a imagem inicial, comece por ela, não pelos scripts. ### Como substituir a foto se o produto ainda não existe? Use um mockup ou ilustração do processo. Mostrar um produto inexistente em uma cena fotorrealista é arriscado: uma promessa diferente da realidade custa mais que a ausência da imagem.