Exemplos comuns de tipos de imagem na web incluem GIF, JPG e PNG. Arquivos SVG. Esses diferentes formatos oferecem aos web designers várias opções para otimizar o apelo visual de um site.
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 e texto em cores planas, 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, gradientes e fotografias acabarão com faixas e pixelização quando salvos como um arquivo GIF.
Imagens JPG
Use imagens JPG para fotografias e outras imagens que tenham milhões de cores. Ele usa um algoritmo de compactação complexo que permite criar gráficos menores perdendo um pouco 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 cores sólidas e formas simples com bordas nítidas. Isso ocorre porque quando a imagem é compactada, o texto, a cor ou as linhas podem borrar, resultando em uma imagem que não é tão nítida quanto seria salva em outro formato.
Imagens PNG
O formato PNG foi desenvolvido para substituir 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, o que resulta em imagens menores do que o mesmo arquivo salvo como GIF. Os arquivos PNG oferecem transparência alfa, o que significa que você pode ter áreas de suas imagens que são totalmente transparentes ou até mesmo usar uma faixa de transparência alfa. Por exemplo, uma sombra projetada usa uma gama de efeitos de transparência e seria adequada para um PNG (ou você pode simplesmente acabar com o uso de sombras CSS). Imagens PNG, como GIFs, não são adequadas para fotografias. É possível contornar o problema de faixas que afeta as fotos salvas como arquivos GIF usando cores reais, mas isso pode resultar em imagens muito grandes. Imagens PNG também não são bem suportadas por telefones celulares mais antigos e telefones convencionais.
Imagens SVG
SVG significa Scalable Vector Graphic. Ao contrário dos formatos baseados em raster 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 ou aumento no tamanho do arquivo. Eles são criados para ilustrações como ícones e até logotipos.
Preparação de imagens para entrega na web
Independentemente do formato de imagem usado, certifique-se de 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 a alta qualidade e o menor tamanho de arquivo possível naquele nível de qualidade. Escolher o formato de imagem correto faz parte da batalha, mas também se certificar de que você preparou esses arquivos é a próxima etapa neste importante processo de entrega na web.