Há vários formatos de imagem que podem ser usados em páginas da web. Alguns exemplos comuns são GIF, JPG e PNG. Arquivos SVG também são comumente usados em sites hoje, dando aos web designers mais uma opção para imagens online.
Imagens GIF
Use arquivos GIF para imagens com um número pequeno e fixo de cores. Os arquivos GIF são sempre reduzidos a não mais do que 256 cores exclusivas. O algoritmo de compactação para arquivos GIF é menos complexo do que para arquivos JPG, mas quando usado em imagens de cores planas e texto, produz tamanhos de arquivo muito pequenos.
O formato GIF não é adequado para imagens fotográficas ou imagens com cores gradientes. Como o formato GIF tem um número limitado de cores, os gradientes e as fotografias terminarão com faixas e pixels quando salvos como um arquivo GIF.
Em suma, você usaria GIFs apenas para imagens simples com apenas algumas cores, mas também poderia usar PNGs para isso (mais sobre isso em breve).
Imagens JPG
Use imagens JPG para fotografias e outras imagens com milhões de cores. Ele usa um algoritmo de compactação complexo que permite criar gráficos menores perdendo parte da qualidade da imagem. Isso é chamado de compactação "com perdas" porque algumas das informações da imagem são perdidas quando a imagem é compactada.
O formato JPG não é adequado para imagens com texto, grandes blocos de cor sólida e formas simples com bordas nítidas. Isso ocorre porque, quando a imagem é compactada, o texto, a cor ou as linhas podem ficar borradas, resultando em uma imagem que não é tão nítida quanto seria salva em outro formato.
As imagens JPG são melhor usadas para fotografias e imagens com muitas cores naturais.
Imagens PNG
O formato PNG foi desenvolvido como um substituto para o formato GIF, quando parecia que as imagens GIF estariam sujeitas a uma taxa de royalties. Os gráficos PNG têm uma taxa de compactação melhor do que as imagens GIF, que resultam em imagens menores do que o mesmo arquivo salvo como um GIF. Os arquivos PNG oferecem transparência alfa, o que significa que você pode ter áreas de suas imagens totalmente transparentes ou até usar um intervalo de transparência alfa. Por exemplo, um sombreamento usa um intervalo de efeitos de transparência e seria adequado para um PNG (ou você pode acabar usando as sombras de CSS).
Imagens PNG, como GIFs, não são adequadas para fotografias. É possível contornar o problema de bandas que afeta fotografias salvas como arquivos GIF usando cores verdadeiras, mas isso pode resultar em imagens muito grandes. As imagens PNG também não são bem suportadas por celulares mais antigos e telefones com recursos.
Usamos PNG para qualquer arquivo que exija transparência. Nós também usamos o PNG-8 para qualquer arquivo que seja adequado como um GIF, usando este formato PNG.
Imagens SVG
SVG significa Scalable Vector Graphic. Ao contrário dos formatos baseados em varredura encontrados em JPG, GIF e PNG, esses arquivos usam vetores para criar arquivos muito pequenos que podem ser renderizados em qualquer tamanho, sem perda de qualidade do aumento no tamanho do arquivo. Eles são criados para ilustrações como ícones e até logotipos.
Preparando Imagens para Entrega na Web
Independentemente de qual formato de imagem você usa, e seu website certamente usa vários formatos diferentes em todas as suas páginas, você precisa garantir que todas as imagens desse site estejam preparadas para entrega na web. Imagens muito grandes podem fazer com que um site seja executado lentamente e afetar o desempenho geral. Para combater isso, essas imagens devem ser otimizadas para encontrar o equilíbrio entre alta qualidade e o menor tamanho de arquivo possível nesse nível de qualidade.
Escolher o formato certo de imagens faz parte da batalha, mas também ter certeza de que você preparou esses arquivos é a próxima etapa deste importante processo de entrega na web.
Artigo original de Jennifer Kyrnin. Editado por Jeremy Girard.
