Mantenha um mestre e faça uma cópia de entrega da web
Salve a imagem original com sua descrição da imagem e registro de aprovação. Crie arquivos de entrega separados para a área da imagem real da página. Isso permite que você mude o quadro da imagem ou compressão mais tarde sem editar repetidamente o único arquivo fonte.
Atualmente, o THE RENDER OFFICE devolve imagens PNG em dimensões quadradas, paisagens ou retratos. Uma grande fonte pode ser útil para a conclusão, mas um pequeno cartão de categoria pode precisar de menos pixels. A configuração de qualidade da criação de imagem não é um substituto para a preparação de uma exportação web apropriada.
Match entregue pixels para o layout
Verifique o tamanho exibido da imagem através dos layouts reais e densidades de dispositivo que você suporta. Prepare as variantes de imagem apropriadas onde o site possa servê-las responsivamente. A redução da largura do CSS só não reduz os bytes do arquivo que está sendo baixado.
O MDN documenta como os candidatos à fonte de imagem e as informações de tamanho ajudam os navegadores a escolher um recurso adequado. O layout declarado deve corresponder à página real; informações de tamanho incorretos podem fazer com que o navegador selecione um candidato menos adequado.
Compare a compressão no tamanho de visualização final
Exportar formatos apropriados suportados pelo fluxo de trabalho de publicação, em seguida, comparar o tamanho do arquivo e a aparência. Verifique gradientes, textura fina, bordas e quaisquer detalhes precisos do produto após a compressão. Mantenha a transparência apenas quando o layout realmente precisa dela.
Escolha o arquivo mais pequeno adequado que mantém a qualidade necessária para a colocação. Não há um objetivo de tamanho de arquivo universal que demonstre que uma imagem é otimizada. Um pequeno cartão decorativo e uma imagem detalhada do produto têm empregos diferentes e devem ser revisados de acordo.
| Campo | Registro | Pergunta de revisão |
|---|---|---|
| Localização | Página atual e área de imagem | O quadro de imagem serve a este layout? |
| Fonte e Exportação | Mestrado em nome e variante de entrega | A exportação pode ser reproduzida? |
| Dimensões e bytes | Tamanho de pixel e tamanho de arquivo | O recurso fornecido é adequado? |
| Revisão visual | Qualidade aceita no tamanho pretendido | A compressão removeu informações importantes? |
Reserve espaço de layout e carga por importância
Fornece informações intrínsecas de largura e altura para que o navegador possa reservar a relação de aspecto da imagem antes de chegar. MDN explica como isso reduz o movimento de layout. Confirmar que o quadro final da imagem e comportamento CSS concordam com o espaço reservado.
Use o carregamento suave para imagens adequadas que não são necessárias para a visualização inicial. Não aplicá-lo indiscriminadamente à imagem principal que um visitante deve ver imediatamente. Verifique o comportamento da página real em vez de tratar um atributo de carregamento como uma fixação de desempenho universal.
Dê a imagem um contexto útil de pesquisa e leitor
Colocar a imagem ao lado do texto relevante e escolher um nome de arquivo curto e descritivo. Escreva texto alt para o propósito da imagem nessa página, evitando listas de palavras-chave. O Google descreve os nomes de arquivo como uma pista clara e usa o contexto da página circundante para entender o assunto; um nome de arquivo só não estabelece relevância ou classificação.
Verifique as solicitações de imagem reais, layout, acessibilidade e desempenho da página publicada com ferramentas apropriadas. Recordar as condições e os resultados antes de comparar versões. A entrega mais rápida pode melhorar a experiência, mas as receitas ainda dependem da oferta, do público e do caminho de conversão completo.
Planeje a fonte antes da exportação.
Use o guia de fluxo de trabalho da campanha para decidir qual imagem você precisa, como será revisado e como o ativo acabado será entregue.
Siga o fluxo de trabalho da imagem da campanha