PixRinseAs capturas de tela mostram o aplicativo em inglês. Nomes e controles predefinidos também estão disponíveis no idioma do seu aplicativo.
Seu ponto de partida
Use Web responsiva em PixRinse e revise essas configurações em relação ao seu destino real.
| Larguras | 320 / 640 / 1280 / 1920 px |
|---|---|
| Saída | WebP, qualidade 80 |
| Cor | sRGB |
| Fontes pequenas | Variantes maiores são ignoradas |
Como fazer
Comece com o recurso original
Use uma fonte ampla o suficiente para a maior variante necessária. Cada derivada é gerada a partir do original em vez de ser redimensionada repetidamente.
Selecione Web responsiva
Revise as quatro larguras e nomes de arquivo integrados. Variantes mais largas que a origem são ignoradas, portanto, inspecione a contagem de saída planejada.
Exportar o conjunto de imagens
Revise todas as saídas. Múltiplas saídas por fonte requerem Pro; o nível gratuito ainda pode ser usado para testar um fluxo de trabalho de tamanho único.
Adicione as imagens à sua página
Use descritores de largura em srcset e defina sizes para corresponder ao layout real. Inclua largura, altura e texto alternativo precisos no elemento da imagem.
<img
src="vase-1280w.webp"
srcset="vase-320w.webp 320w,
vase-640w.webp 640w,
vase-1280w.webp 1280w,
vase-1920w.webp 1920w"
sizes="(max-width: 720px) 100vw, 960px"
width="1280" height="853"
alt="A terracotta vase with an olive branch"
>OS ARQUIVOS DESTE PASSO AO
O que este exemplo produziu
Uma fonte de largura 3072 px é grande o suficiente para todas as quatro larguras predefinidas. Cada arquivo é um WebP separado, gerado diretamente dessa fonte.
- Qualidade
- 80
- Perfil de cores
- sRGB
- Saídas de uma fonte
- 4
| Arquivo | Formatar | Pixels | Bytes |
|---|---|---|---|
| vase-1280w.webp | WebP | 1280 × 853 | 35.214 |
| vase-1920w.webp | WebP | 1920 × 1280 | 64.108 |
| vase-320w.webp | WebP | 320 × 213 | 4.018 |
| vase-640w.webp | WebP | 640 × 427 | 11.594 |
Medido nos arquivos de amostra mostrados. Os resultados dependem dos originais e das configurações. A fotografia do vaso de cerâmica é uma amostra gerada por IA. As capturas de tela do aplicativo e as medidas dos arquivos exportados são reais.
Algumas perguntas comuns
O que acontece se minha fonte tiver apenas 1000 px de largura?
O modelo ignora as variantes 1280 e 1920 px. Apenas faça referência a arquivos que foram realmente gerados.
O aplicativo gera HTML?
Este fluxo de trabalho produz imagens. Adicione srcset e sizes ao código do seu site ou sistema de conteúdo.
Coloque o fluxo de trabalho para funcionar.
Abra PixRinse, adicione algumas imagens e comece com as configurações acima.
Baixar para MacGratuito: até 10 imagens por lote e uma saída por fonte. As múltiplas saídas deste fluxo de trabalho requerem Pro. Compare Grátis e Pro.