As capturas de ecrã mostram a aplicação em inglês. Os nomes e controlos predefinidos também estão disponíveis no idioma da sua aplicação.

O seu ponto de partida

Utilize Web responsiva em PixRinse e reveja estas definições em relação ao seu destino real.

Configurações para este fluxo de trabalho
Larguras320 / 640 / 1280 / 1920 px
SaídaWebP, qualidade 80
CorsRGB
Fontes pequenasVariantes maiores são ignoradas
Predefinição PixRinse Web responsiva mostrando vários tamanhos de saída WebP
Configurações utilizadas para este passo a passo. Selecione a captura de ecrã para a inspecionar em tamanho real.

Como fazer

  1. Comece com o recurso original

    Utilize uma fonte suficientemente ampla para a maior variante necessária. Cada derivada é gerada a partir do original em vez de ser redimensionada repetidamente.

  2. Selecione Web responsiva

    Reveja as quatro larguras e os nomes de ficheiro integrados. As variantes mais largas que a origem são ignoradas, por isso inspecione a contagem de saída planeada.

  3. Exportar o conjunto de imagens

    Reveja todas as saídas. Múltiplas saídas por fonte requerem Pro; o nível gratuito pode ainda ser utilizado para testar um fluxo de trabalho de tamanho único.

  4. Adicione as imagens à sua página

    Utilize descritores de largura em srcset e defina sizes para corresponder ao layout real. Inclua largura, altura e texto alternativo precisos no elemento da imagem.

EXEMPLO HTML · ADAPTE AO SEU LAYOUT
<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 é suficientemente grande para todas as quatro larguras predefinidas. Cada ficheiro é um WebP separado, gerado diretamente a partir dessa fonte.

Qualidade
80
Perfil de cores
sRGB
Saídas de uma fonte
4
Arquivos exportados reais
FicheiroFormatarPixelsBytes
vase-1280w.webpWebP1280 × 85335 214
vase-1920w.webpWebP1920 × 128064 108
vase-320w.webpWebP320 × 2134018
vase-640w.webpWebP640 × 42711 594
Uma fonte, quatro larguras de web úteis: resultados reais exportados
Resultados reais de exportação para os ficheiros de exemplo apresentados neste passo a passo.

Medido nos ficheiros de amostra mostrados. Os resultados dependem dos originais e das definições. A fotografia do vaso de cerâmica é uma amostra gerada por IA. As capturas de ecrã da aplicação e as medidas dos ficheiros exportados são reais.

Algumas perguntas comuns

O que acontece se a minha fonte tiver apenas 1000 px de largura?

O modelo ignora as variantes 1280 e 1920 px. Apenas faça referência a ficheiros que foram realmente gerados.

A aplicação gera HTML?

Este fluxo de trabalho produz imagens. Adicione srcset e sizes ao código do seu website ou sistema de conteúdos.

Coloque o fluxo de trabalho a funcionar.

Abra PixRinse, adicione algumas imagens e comece pelas definições acima.

Descarregar para MacGratuito: até 10 imagens por lote e uma saída por fonte. As múltiplas saídas deste workflow requerem Pro. Compare Grátis e Pro.