Tópicos de WDD

Otimização de Imagem

Visão Geral

Uma das preocupações do design e desenvolvimento web front-end é o desempenho do site. Um elemento comum que afeta isso é o tempo de carregamento da imagem. É aí que a otimização da imagem se torna um fator, porque as imagens representam a maior parte dos bytes baixados do servidor web. A arte da otimização é o processo de tentar encontrar o equilíbrio entre as necessidades de qualidade do design e o tamanho do arquivo.

Preparação

Muitas vezes, as fotos originais com as quais trabalhamos são muito grandes e precisam ser reduzidas ao maior tamanho realmente necessário na página, considerando o design e o layout. É possível usar software para cortar, reduzir e otimizar as imagens.

Estas são as etapas básicas inclusas na maioria dos pacotes de edição de fotos:

1. Corte a imagem original para o conteúdo crítico, tendo em mente os princípios de design, como a regra dos terços, e o propósito do site ou da seção.

   A regra dos terços afirma que uma imagem é mais agradável e impactante quando seus elementos principais são posicionados ao longo de linhas imaginárias que dividem a imagem em três partes, tanto horizontal quanto verticalmente. Essa técnica ajuda a criar equilíbrio e interesse na composição, evitando colocar o assunto principal diretamente no centro do enquadramento.

2. Redimensione a imagem para o tamanho máximo que você realmente precisa no design do seu site. Essa imagem será salva em formatos menores, possivelmente com design ligeiramente diferente para combinar com o design e o layout em visualizações menores, ou seja, smartphones e tablets.
3. Ajuste a qualidade da imagem para um nível aceitável. A imagem final deve manter um equilíbrio entre qualidade e tamanho do arquivo, reduzindo assim seu tamanho.

Técnicas adicionais de tratamento de imagens incluem:

• Redimensionar imagens durante o processo de construção usando script
• Criar vários tamanhos de imagem e usar srcset para permitir que o navegador ou o agente do usuário decida qual imagem carregar
• Usar uma imagem CDN (Content Delivery Network)

Medição de Desempenho/Tamanho da Página

A quantidade de recursos usados na página pode ser analisada usando a aba Network (Rede) nas DevTools do navegador.

O quantidade total dos recursos usados na página é frequentemente chamada de peso da página (page weight). Quanto menor o peso da página, mais rápido ela será carregada. A aba Network também mostra quanto tempo cada recurso leva para ser carregado.

A aba Network (Rede) mostra o tamanho de cada recurso, o tempo (time) que levou para ser carregado e outras informações úteis. O tamanho (size) total de todos os recursos é exibido na parte inferior da aba. Esse é o peso da página (page weight).

Ferramentas de Edição de Imagem

A lista de softwares a seguir não é completa, mas tem algumas boas opções de ferramentas que ajudarão você a manipular imagens, incluindo o processo de otimização de imagens. Você pode escolher usar qualquer ferramenta que desejar.

• Adobe Photoshop: Adobe Photoshop é o software mais popular quando se trata de ser nomeado em descrições de cargos de web designer front-end com base em qualificações ou experiência desejada. É um padrão da indústria. Este curso não exige nem ensina Photoshop, embora ele certamente seja uma das habilidades mais importantes para desenvolvedores e designers web front-end. A ferramenta possui um processo de otimização integrado conhecido como Salvar para web. Você pode especificar algumas restrições por meio de uma configuração que deve ajudar a encontrar o equilíbrio mencionado acima.
• GIMP ou GNU Image Manipulation Program (conteúdo em inglês) é um software de edição de imagens, criação de imagens e edição de fotos que é distribuído gratuitamente e tem muito suporte online. Pode estar um passo atrás do Photoshop, mas dá suporte a boa parte do trabalho necessário no design gráfico.
• TinyJPG/TinyPNG (conteúdo em inglês) é um aplicativo online gratuito que reduz imagens JPEG por meio de codificação.
• PIXLR x é um editor de fotos baseado na web que permite cortar, redimensionar e aprimorar suas fotos gratuitamente.