Trechos do capítulo "Imagens: geração, formato e peso"
Curso Frontends com Vibecoding
alexandrecaramaschi.com/educacao/frontends-com-vibecoding#imagens-formato-peso
Seis trechos, na ordem do capítulo: primeiro a marcação que serve a imagem no
formato e no tamanho certos, depois o pedido de conjunto de ilustrações e os
quatro arquivos que geram ativo visual sem ninguém produzir arte.
Leia antes o LEIA-ME.txt desta pasta.
================================================================================
### O que faz: oferece a mesma foto em três formatos e várias larguras, e reserva o espaço dela
### Onde entra: a imagem de destaque de qualquer página servida sem o componente do Next
### Cuidado: abaixo da dobra, troque fetchpriority por loading lazy e decoding async
================================================================================
### O que faz: gera um conjunto de ilustrações com estilo coerente entre si, a partir de uma instrução base reutilizável
### Onde entra: seções de uma landing que precisam de arte própria
### Cuidado: confirme a licença de uso comercial e quem detém os direitos ANTES de gerar, não depois da campanha no ar
Preciso de um conjunto de 4 ilustrações para as seções da landing page de
[produto], com estilo COERENTE entre si:
- traço/linha limpo, paleta com a cor de destaque #[hex] e tons neutros;
- proporção 4:3, fundo transparente ou claro;
- temas: [seção 1], [seção 2], [seção 3], [seção 4].
Gere um prompt-base reutilizável que eu possa variar só no tema, mantendo o
mesmo estilo. Antes de gerar, confirme a licença de uso comercial do modelo e
quem detém os direitos da imagem resultante. Entregue as imagens em alta e
liste o passo de otimização (converter para AVIF/WebP e gerar o tamanho certo).
================================================================================
### O que faz: forma decorativa de fundo gerada por código, que herda a cor do tema
### Onde entra: componente React reutilizável, em qualquer seção que peça um fundo orgânico
### Cuidado: mesmo decorativa, a forma precisa de rótulo acessível; a cor vem do texto que a envolve, nunca escrita à mão
// Blob decorativo gerado por código: leve, nítido e adaptável ao tema.
// role="img" + para acessibilidade; cor via currentColor (herda do texto).
export function BlobFundo({ className }: { className?: string }) {
return (
<svg
role="img"
viewBox="0 0 200 200"
className={className}
xmlns="http://www.w3.org/2000/svg"
>
<title>Forma decorativa de fundo
);
}
================================================================================
### O que faz: gera a capa de compartilhamento de cada artigo a partir do título, em tempo de execução
### Onde entra: rota da página de artigo, arquivo dedicado à imagem de compartilhamento
### Cuidado: o custo por peça cai a zero depois que o gerador está de pé, e é ele que evita a mesma arte repetida em tudo
// app/artigos/[slug]/opengraph-image.tsx: capa social gerada por página.
import { ImageResponse } from "next/og";
export const size = { width: 1200, height: 630 };
export const contentType = "image/png";
export default async function Og({ params }: { params: { slug: string } }) {
const titulo = await tituloDoArtigo(params.slug); // sua função de dados
return new ImageResponse(
(
Brasil GEO{titulo}alexandrecaramaschi.com
),
{ ...size },
);
}
================================================================================
### O que faz: redimensiona, converte e gera a versão minúscula e borrada de uma imagem
### Onde entra: script chamado antes do build, uma vez por arquivo, nunca no navegador de quem visita
### Cuidado: sem o cuidado de não ampliar, um avatar de 80 pixels vira um borrão de 800
import sharp from "sharp";
// Gera uma versão de 800px de largura em AVIF, com qualidade equilibrada.
await sharp("entrada.jpg")
.resize({ width: 800, withoutEnlargement: true })
.avif({ quality: 55 })
.toFile("saida-800.avif");
// Gera o placeholder minúsculo e borrado (LQIP) para o blur enquanto carrega.
const lqip = await sharp("entrada.jpg").resize(16).webp({ quality: 20 }).toBuffer();
const lqipDataUrl = `data:image/webp;base64,${lqip.toString("base64")}`;
================================================================================
### O que faz: exibe a imagem já preparada, com espaço reservado e versão borrada enquanto carrega
### Onde entra: qualquer imagem da página, com prioridade apenas na principal do topo
### Cuidado: marcar todas as imagens como prioritárias equivale a não marcar nenhuma
import Image from "next/image";
