Opções de otimização para imagens e GIFs animados

Os formatos de elementos gráficos da Web podem ser bitmap (rasterizado) ou vetorial. Os formatos bitmap (GIF, JPEG e PNG) dependem da resolução, ou seja, as dimensões de uma imagem de bitmap e, possivelmente, a qualidade da imagem, serão alteradas em diferentes resoluções de monitor. Os formatos vetoriais (SVG e SWF) não dependem da resolução e podem ser ampliados ou reduzidos sem perdas na qualidade da imagem. Os formatos vetoriais podem também incluir dados rasterizados. 

Opções de otimização JPEG

JPEG é o formato padrão para compactação de imagens com tons contínuos, como fotografias. A otimização de uma imagem como um formato JPEG depende da compactação com perda, que descarta dados seletivamente.

Determina o nível de compactação. Quanto maior for a configuração de qualidade, mais detalhes o algoritmo de compactação preserva. No entanto, o uso de uma configuração de alta qualidade resulta em um tamanho de arquivo maior que o uso de uma configuração de baixa qualidade. Visualize a imagem otimizada em várias configurações de qualidade para determinar o melhor equilíbrio entre qualidade e tamanho do arquivo.

Cria um JPEG aprimorado com um tamanho de arquivo ligeiramente menor. O formato JPEG otimizado é recomendado para compactação máxima de arquivos, mas alguns navegadores mais antigos não são compatíveis com esse recurso.

Exibe a imagem progressivamente em um navegador da web. A imagem aparece como uma série de sobreposições, permitindo que os visualizadores vejam uma versão de baixa resolução da imagem antes que o download seja concluído. A opção “Progressivo” requer o uso do formato JPEG otimizado.

 JPEGs progressivos requerem mais memória RAM para serem visualizados e não são compatíveis com alguns navegadores.

Especifica a quantidade de desfoque a aplicar à imagem. Esta opção aplica um efeito idêntico ao filtro de desfoque gaussiano e permite que o arquivo seja mais compactado, resultando em um tamanho do arquivo menor. Recomenda-se uma configuração de 0,1 a 0,5.

Preserva os perfis de cores no arquivo otimizado. Alguns navegadores usam perfis de cores para correção de cores.

Especifica uma cor de preenchimento para pixels que eram transparentes na imagem original. Clique na amostra de cores foscas para selecionar uma cor no seletor de cores ou selecione uma opção no menu “Fosco”: cor do conta-gotas (para usar a cor na caixa de amostra do conta-gotas), cor do primeiro plano, cor do fundo, branco, preto ou outro (para usar o seletor de cores).

Os pixels que eram totalmente transparentes na imagem original são preenchidos com a cor selecionada, enquanto os pixels que eram parcialmente transparentes na imagem original são mesclados com a cor selecionada.

Opções de otimização GIF e PNG-8

GIF é o formato padrão para compactação de imagens com cores sólidas e detalhes nítidos, como arte com linhas, logotipos ou ilustrações com texto. Assim como o formato GIF, o formato PNG-8 compacta eficientemente áreas sólidas das cores, preservando detalhes nítidos.

Arquivos PNG-8 e GIF permitem cores de 8 bits, podendo exibir até 256 cores. O processo de determinar quais cores serão usadas é chamado de indexação; por isso, imagens nos formatos GIF e PNG-8 às vezes são chamadas de imagens com cores indexadas. Para converter uma imagem em cores indexadas, uma tabela de pesquisa de cores é criada para armazenar e indexar as cores na imagem. Se uma cor na imagem original não aparecer na tabela de pesquisa de cores, o aplicativo escolherá a cor mais próxima na tabela ou simulará a cor com uma combinação de cores disponíveis.

Além das opções a seguir, também é possível ajustar o número de cores na tabela de cores da imagem.

Reduz o tamanho do arquivo, descartando dados seletivamente. Uma configuração de “Com perda” mais alta resulta no descarte de mais dados. Geralmente, é possível aplicar um valor de “Com perda” de 5 a 10 e, às vezes, até 50, sem degradar a imagem. A opção “Com perda” pode reduzir o tamanho do arquivo em 5% a 40%.

 Não é possível usar a opção Perda com a opção Entrelaçado ou com os algoritmos de Ruído ou Pontilhamento padrão.

Especifica um método para gerar a tabela de pesquisa de cores e o número de cores desejado na tabela de pesquisa de cores. É possível selecionar um dos seguintes métodos de redução de cores:

Perceptivo: cria uma tabela personalizada de cores, dando prioridade a cores às quais o olho humano é mais sensível.

Seletivo: cria uma tabela de cores semelhante à tabela de cores Perceptual, mas que favorece áreas amplas de cores e a preservação de cores da Web. Esta tabela de cores geralmente produz imagens com a maior integridade de cores possível. “Seletivo” é a opção padrão.

Adaptável cria uma tabela de cores personalizada, obtendo amostras das cores do espectro predominante na imagem. Por exemplo, uma imagem com apenas as cores verde e azul produz uma tabela de cores feita principalmente de verdes e azuis. A maioria das imagens concentra cores em áreas específicas do espectro.

Restrito (Web): Usa a tabela de cores padrão de 216 cores, comum às paletas de 8 bits (256 cores) do Windows e do Mac OS. Esta opção garante que nenhum pontilhamento do navegador seja aplicado a cores quando a imagem for exibida em cores de 8 bits. (Esta paleta também é chamada de paleta segura para a web.) O uso da paleta da web pode criar arquivos maiores, sendo recomendado somente para quando evitar o pontilhamento no navegador for uma prioridade alta.

Personalizado: usa uma paleta de cores criada ou modificada pelo usuário. Quando se abre um arquivo GIF ou PNG-8 existente, ele tem uma paleta de cores personalizada.

 Para personalizar a tabela de busca de cores, use a paleta Tabela de cores da caixa de diálogo Salvar para a Web e dispositivos.

Preto-e-branco, Tons de cinza, Mac OS, Windows: usam uma paleta de cores definida.

Determina o método e a quantidade de pontilhamento do aplicativo. O pontilhamento refere-se ao método de simulação de cores não disponível no sistema de exibição de cores do seu computador. Uma porcentagem de pontilhamento mais alta cria a aparência de mais cores e detalhes em uma imagem, mas também pode aumentar o tamanho do arquivo. Para obter a compactação ideal, use a menor porcentagem de pontilhamento que forneça os detalhes das cores desejados. Imagens com cores principalmente sólidas podem funcionar bem sem pontilhamento. Imagens com cores em tons contínuos (principalmente gradientes de cores) podem exigir pontilhamento para evitar faixas de cores.

É possível selecionar um dos seguintes métodos de pontilhamento:

Difusão: aplica um padrão aleatório, geralmente menos perceptível do que o pontilhamento Padrão. Os efeitos do pontilhamento são difundidos entre os pixels adjacentes.

Padrão: utiliza um padrão de quadrados de meio-tom para simular todas as cores que não estejam na tabela de cores.

Ruído: aplica um padrão aleatório semelhante ao método de pontilhamento por Difusão, mas sem difundir o padrão pelos pixels adjacentes. O método de pontilhamento de Ruído não apresenta interrupções.

Determina como serão otimizados os pixels transparentes da imagem.

• Para transformar pixels totalmente transparentes em transparentes e mesclar pixels parcialmente transparentes com uma cor, selecione “Transparência” e escolha uma cor fosca.

• Para preencher pixels totalmente transparentes com uma cor e mesclar pixels parcialmente transparentes com a mesma cor, selecione uma cor fosca e desmarque “Transparência”.

• Para selecionar uma cor fosca, clique na amostra de cores foscas e selecione uma cor no seletor de cores. Alternativamente, selecione uma opção no menu “Fosco”: cor do conta-gotas (para usar a cor na caixa de amostra do conta-gotas), cor do primeiro plano, cor do fundo, branco, preto ou outro (para usar o seletor de cores).

 As opções Cor do primeiro plano e Cor do fundo estão disponíveis somente no Photoshop.

A. Imagem original B. Transparência selecionada com uma cor fosca C. Transparência selecionada sem fosco D. Transparência desmarcada com uma cor fosca

Quando a opção Transparência está selecionada, é possível escolher um método de pontilhamento de pixels parcialmente transparentes:

• A opção Sem pontilhamento de transparência não aplica pontilhamento a pixels parcialmente transparentes na imagem.

• Pontilhamento de transparência de difusão aplica um padrão aleatório, geralmente menos perceptível do que o pontilhamento padrão. Os efeitos do pontilhamento são difundidos entre os pixels adjacentes. Se você selecionar este algoritmo, especifique uma porcentagem de pontilhamento para controlar a intensidade do pontilhamento aplicado à imagem.

• Pontilhamento de transparência padrão aplica um padrão de quadrados de meio-tom a pixels parcialmente transparentes.

• O pontilhamento por transparência de ruído aplica um padrão aleatório semelhante ao método de pontilhamento por difusão, mas sem difundir o padrão para os pixels adjacentes. O algoritmo de ruído não apresenta interrupções.

Exibe uma versão de baixa resolução da imagem em um navegador enquanto o arquivo de imagem completo é baixado. O entrelaçamento pode fazer com que o tempo de download pareça mais curto e garantir aos visualizadores que o download esteja em andamento. Porém, o entrelaçamento também aumenta o tamanho do arquivo.

Especifica um nível de tolerância para deslocar cores para os equivalentes de paletas da web mais próximos (e impede que as cores fiquem pontilhadas em um navegador). Um valor mais alto desloca mais as cores.

Otimização da transparência em imagens GIF e PNG

A transparência permite a criação de imagens não retangulares para a Web. A transparência do plano de fundo preserva pixels transparentes na imagem.

Isso permite que o plano de fundo da página da Web seja mostrado entre as áreas transparentes da imagem. A aparência fosca do plano de fundo simula a transparência preenchendo ou misturando pixels transparentes com uma cor fosca, que pode corresponder ao plano de fundo da página da Web. O fosco de fundo funciona melhor se o fundo da página da web for uma cor sólida e você souber qual é essa cor.

Use as opções de “Transparência” e “Fosco” na caixa de diálogo “Salvar para a web e dispositivos” para especificar como os pixels transparentes em imagens GIF e PNG são otimizados.

• (GIF e PNG-8) Para transformar pixels totalmente transparentes em transparentes e mesclar pixels parcialmente transparentes com uma cor, selecione “Transparência” e escolha uma cor fosca.
• Para preencher pixels totalmente transparentes com uma cor e mesclar pixels parcialmente transparentes com a mesma cor, selecione uma cor fosca e desmarque “Transparência”.
• (GIF e PNG-8) Para tornar todos os pixels com transparência superior a 50% totalmente transparentes e todos os pixels com transparência de 50% ou menos totalmente opacos, selecione “Transparência” e escolha “Nenhum” no menu “Fosco”.
• (PNG-24) Para salvar uma imagem com transparência em vários níveis (até 256 níveis), selecione “Transparência”. A opção “Fosco” está desabilitada, pois a transparência em vários níveis permite que uma imagem seja mesclada com qualquer cor de fundo.

 Em navegadores que não oferecem suporte à transparência PNG-24, os pixels transparentes podem ser visualizados em contraste com uma cor padrão de fundo, como o cinza.

Para selecionar uma cor fosca, clique na amostra de cores foscas e selecione uma cor no seletor de cores. Alternativamente, selecione uma opção no menu “Fosco”: cor do conta-gotas (para usar a cor na caixa de amostra do conta-gotas), cor do primeiro plano, cor do fundo, branco, preto ou outro (para usar o seletor de cores).

 As opções Cor do primeiro plano e Cor do fundo estão disponíveis somente no Photoshop.

Visualização da tabela de cores de uma fatia otimizada

A tabela de cores de uma fatia aparece no painel Tabela de cores da caixa de diálogo Salvar para a Web e dispositivos.

Selecione uma fatia otimizada em formato GIF ou PNG-8. A tabela de cores da fatia selecionada é exibida na tabela de cores Salvar para a Web e dispositivos.

Se uma imagem tiver várias fatias, as cores na tabela de cores poderão variar entre as fatias (você poderá vincular as fatias primeiro para evitar que isso ocorra). Se você selecionar várias fatias que usam tabelas de cores diferentes, a tabela de cores ficará vazia, e a barra de status exibirá a mensagem: “Misto”.

Personalização da tabela de cores para imagens GIF e PNG-8

Use a paleta Tabela de cores na caixa de diálogo Salvar para a Web e dispositivos para personalizar as cores em imagens GIF e PNG-8 otimizadas. A redução do número de cores geralmente preserva a qualidade da imagem e reduz o tamanho do arquivo da imagem.

É possível adicionar e excluir cores na tabela de cores, deslocar as cores selecionadas para cores seguras para a web e bloquear as cores selecionadas para evitar que sejam retiradas da paleta.

Ordenar uma tabela de cores

Escolha uma ordem de classificação no menu “Paleta da tabela de cores”:

• A opção Não classificar restaura a ordem de classificação original.
• “Ordenar por matiz” ordena pela localização da cor no disco de cores padrão (expresso como um grau de 0 a 360). Cores neutras recebem um matiz de 0 e estão localizadas com os vermelhos.
• A opção Classificar por luminância classifica pela luminosidade ou brilho de uma cor.
• “Ordenar por popularidade” ordena pela frequência de ocorrência das cores na imagem.

Adicionar uma nova cor à tabela de cores

Você pode adicionar cores que ficaram de fora na criação da tabela de cores. A adição de uma cor a uma tabela dinâmica alterna a cor da paleta para a mais próxima da nova cor. Adicionar uma cor a uma tabela fixa ou personalizada adiciona uma cor adicional à paleta.

Selecionar cores na tabela de cores

Uma borda branca aparece ao redor das cores selecionadas na tabela de cores.

• Para selecionar uma cor, clique na cor na Tabela de cores.
• Para selecionar várias cores na tabela de cores, pressione Shift e clique em outra cor. Todas as cores nas linhas entre a primeira e a segunda cores selecionadas são selecionadas. Para selecionar um grupo de cores não adjacentes, pressione Ctrl (Windows) ou Command (Mac OS) e clique em cada cor que deseja selecionar. O menu da paleta Tabela de cores também oferece comandos para selecionar cores.
• Para selecionar uma cor na imagem de visualização, clique na visualização com a ferramenta Conta-gotas, em Salvar para a Web e dispositivos. Pressione Shift e clique para selecionar cores adicionais.
• Para cancelar a seleção de todas as cores, escolha Cancelar seleção de todas as cores no menu da paleta Tabela de cores.

Deslocar uma cor

É possível alterar uma cor selecionada na tabela de cores para qualquer outro valor de cor RGB. Quando a imagem otimizada é gerada novamente, a cor selecionada mudará para a nova cor sempre que aparecer na imagem.

Deslocamento de cores para o equivalente mais próximo da paleta da Web

Para proteger as cores contra pontilhamento em um navegador, você pode deslocar as cores para os seus equivalentes mais próximos na paleta da web. Isso garante que as cores não fiquem pontilhadas quando exibidas em navegadores de sistemas operacionais Windows ou Macintosh capazes de exibir apenas 256 cores.

Mapeamento de cores para a transparência

É possível adicionar transparência a uma imagem otimizada, mapeando-se as cores existentes para a transparência.

Bloqueio ou desbloqueio de uma cor

As cores selecionadas na tabela podem ser bloqueadas para evitar que sejam retiradas quando o número de cores for reduzido e que fiquem pontilhadas no aplicativo.

 Bloquear cores não evita que elas fiquem pontilhadas em um navegador.

Excluir cores selecionadas

Você pode excluir as cores selecionadas na tabela de cores para diminuir o tamanho do arquivo da imagem. Ao excluir uma cor, as áreas da imagem otimizada incluídas anteriormente com essa cor são renderizadas com a cor mais próxima restante na paleta.

Quando uma cor é excluída, a tabela de cores muda automaticamente para uma paleta personalizada. Isso ocorre porque as paletas adaptável, perceptual e seletiva adicionam automaticamente a cor excluída de volta à paleta ao otimizar a imagem novamente; a paleta personalizada não é alterada quando a imagem é otimizada novamente.

Salvar uma tabela de cores

Você pode salvar tabelas de cores de imagens otimizadas para usar com outras imagens e carregar tabelas de cores criadas em outros aplicativos. Após carregar uma nova tabela de cores em uma imagem, as cores da imagem otimizada serão alteradas para refletir as cores da nova tabela de cores.

Carregar uma tabela de cores

Opções de otimização de PNG-24

O PNG-24 é adequado para compactar imagens com tons contínuos, mas gera arquivos muito maiores que o formato JPEG. A vantagem de usar o PNG-24 é que ele pode preservar até 256 níveis de transparência em uma imagem.

Determine como serão otimizados os pixels transparentes da imagem.

Exibe uma versão de baixa resolução da imagem em um navegador enquanto o arquivo de imagem completo é baixado. O entrelaçamento pode fazer com que o tempo de download pareça mais curto e garantir aos visualizadores que o download esteja em andamento. Porém, o entrelaçamento também aumenta o tamanho do arquivo.