Compressão e otimização de arquivos JPEG para a World Wide Web

Sou designer gráfico e trabalho com várias imagens e formatos de imagem todos os dias. Uma das coisas que faço envolve trabalhar com arquivos de imagem grandes e editá-los. Um dos formatos de arquivo mais usados ​​é o JPEG. Agora, quero aprender mais sobre como otimizar e compactar JPEG especialmente para a web. Você pode me ajudar com isso?

~ Designer Gráfico Anônimo

Parte I: IntroduçãoParte II: Pare de economizar cem por cento (100%)Parte III: Opções de compactaçãoParte IV: Uma variedade de tipos de mídia para a WebParte V: Ferramenta para compactar imagens JPEGParte VI: Conclusão

Parte I: Introdução

A compressão de imagens é um conceito muito popular hoje em dia. É usado em quase todos os aspectos da vida, pois as imagens têm sido um papel vital nos negócios, no trabalho e até mesmo em nossas vidas pessoais. A compactação de imagem pode ser feita em diferentes formatos de arquivo, como GIF, JPEG e PNG.

A diferença entre esses formatos de arquivo de imagem está em como a compactação é feita e exibida na tela. Existem muitos guias que ensinam como publicar ótimas mídias na Internet. No entanto, muitos designers ainda não compreendem os fundamentos quando se trata de imagens e mídias em geral.

Neste artigo, informaremos e daremos ideias sobre como implementar corretamente a compactação de arquivos JPEG. Você deve otimizar e compactar suas imagens para acelerar os tempos de carregamento de suas páginas da Web, mantendo um certo nível de qualidade para suas imagens.

O truque aqui é encontrar o equilíbrio entre o tamanho do arquivo e sua representação na tela. Não existe uma solução real que seja perfeita. É preciso um pouco de prática para se acostumar. Mas uma vez que você sabe mais sobre compressão de arquivos JPEG, o desenvolvimento de sites será mais fácil a longo prazo.

Parte II: Pare de economizar cem por cento (100%)

Evite salvar suas imagens JPEG usando uma qualidade de cem por cento (100%). Obviamente, isso não resultará em uma imagem otimizada. Quanto maior a qualidade da imagem, maior será o tamanho do arquivo.

Verifique algo. Se você tentar salvar a imagem com qualidade de 90% a 95%, notará que o tamanho do arquivo será reduzido significativamente. Há momentos em que você precisa salvar suas imagens com uma qualidade inferior a 90%.

Se você usa o Photoshop, está com sorte. Se você tentar verificar a caixa de diálogo “Salvar para a Web”, poderá ver que o Photoshop realmente permite que você selecione vários valores predefinidos diferentes. Os valores possíveis para JPEG podem ser vistos abaixo:

* A qualidade máxima está em 100%.

* A qualidade muito alta está em 80%.

* Alta qualidade é de 60%.

* Qualidade média está em 30%.

* Finalmente, a Baixa Qualidade está em 10%.

O Adobe Photoshop ainda considera 60% como uma imagem de alta qualidade. Para desenvolvedores da web, é melhor manter aproximadamente 50% em direção a 70%. Este é um intervalo seguro que você pode garantir ao desenvolver seus sites.

Então, qual é o valor real em que você pode afirmar que a qualidade de uma imagem é realmente baixa? Bem, o valor que você realmente usa para otimização depende do projeto ou imagem real em que está trabalhando.

Você deve levar em consideração os diferentes tipos de gráficos que resultarão nos maiores tamanhos de arquivo. Essas imagens precisarão da maior compactação possível. Sugerimos que qualquer coisa abaixo de 30% resultaria em uma imagem de baixa qualidade. Outros designers e desenvolvedores só definiriam seu limite para 50% porque eles realmente não querem comprometer a qualidade.

Mas qual é o melhor conselho? Bem, você realmente tem que tentar as melhores configurações para você. Experimente alguns níveis de otimização ou compactação e verifique quais parecem melhores em termos de qualidade e em relação ao tamanho do arquivo. Você ficará surpreso ao descobrir que alguns ajustes aqui e ali podem ajudá-lo a otimizar seus arquivos JPEG para sua taxa de compactação máxima sem a necessidade de comprometer sua aparência.

Parte III: Opções de compactação

Primeiro, gostaríamos que você soubesse mais sobre qualidade e compressão. Esses dois termos são, na verdade, inversamente correlacionados entre si. Isso significa que, se você salvar uma imagem JPEG específica com uma taxa de compactação de 30%, obterá um resultado de 70% de qualidade. Se uma imagem não estiver compactada, ela terá 100% de qualidade.

Na verdade, essas são opções que você pode usar e que são uma das mais básicas. E, na verdade, deve ser mais do que suficiente quando você economiza para a World Wide Web. A maioria dos usuários não se aprofunda muito em uma variedade de personalizações. A subamostragem leva as pessoas a problemas muito mais complicados onde, por exemplo, você está no processo de conversão de imagens RGB para YCbCr (Chroma Red, Chroma Blue e Luminance).

A configuração de brilho é chamada de luminância. Durante a compactação de imagens JPEG, a luminância é sempre definida dentro do valor possivelmente mais alto. O valor de brilho é colocado em um canal separado. E por causa disso, os valores individuais de cor (por exemplo, azul e vermelho) tornam-se mais fáceis de otimizar. Isso é conhecido como o processo de subamostragem de croma. Designers que são muito meticulosos adorariam saber mais sobre esse tipo de algoritmo de compactação.

No entanto, você pode não saber disso, mas o Adobe Photoshop geralmente não usa subamostragem como método de compactação. Se você usar o Adobe Photoshop e optar por Salvar para a Web, as imagens salvas usando esse recurso utilizarão a subamostragem de croma que está abaixo de um valor de qualidade de 50%.

Parte IV: Uma variedade de tipos de mídia para a Web

A World Wide Web é muito diversificada. Ele é preenchido com uma variedade de mídia de imagem. Por exemplo, você tem os ícones, emblemas, botões, fotografias e outros tipos de arquivos gráficos. Mas você pode querer considerar isso: Comparar a qualidade de dois tipos diferentes de gráficos (por exemplo, um botão versus uma imagem de produto) na verdade não é tão significativo.

Você pode tentar vincular a um arquivo JPEG separado que seja menos compactado ao utilizar imagens ou fotografias detalhadas. Depois disso, a configuração de miniaturas com uma taxa de compactação relativamente maior e tamanho de arquivo muito reduzido pode ser feita em seu site.

Qual é a desvantagem disso? Bem, será necessário que você forneça dois conjuntos diferentes dessas imagens para sua galeria de mídia. Você deve levar em consideração todos os arquivos gráficos que você colocou em seu site. Depois disso, você deve determinar quais técnicas de compactação ou otimização devem ser implementadas para cada arquivo.

É melhor implementar um sistema organizado de arquivos que permita pesquisar facilmente os arquivos. Há um webmaster que opta por hospedar suas imagens fora de seus hosts da web, como no Picasa ou no Flickr.

Mesmo se for esse o caso, ainda pode ser melhor você utilizar uma ferramenta de compactação para minimizar o tamanho das imagens. No entanto, a maneira como você realmente exibe essas imagens compactadas em seu site ainda varia. Isso é verdade hoje em dia devido ao crescente uso de dispositivos móveis que ajudam as pessoas a acessar a Internet de qualquer lugar do mundo.

Parte V: Ferramenta para compactar imagens JPEG

A ferramenta de compressão de imagens que recomendamos para você compactar imagens é Compressor de fotos online gratuito do FoneDog. A referida ferramenta tem as seguintes vantagens:

* Permite compactar arquivos de imagem (por exemplo, JPEG ou PNG) o que resultará em uma redução de tamanho sem perder muito da qualidade da imagem.

* Ele permite que você economize mais espaço no seu dispositivo. Assim, você pode usar este espaço para outras fotos, vídeos e documentos importantes.

* Isso resulta na imagem usando menos largura de banda, especialmente se você quiser usá-la dentro de um site. Assim, você pode economizar muita largura de banda e acomodar mais usuários, especialmente se o pacote de hospedagem na web que você aproveitou tiver uma quantidade limitada de transferência de dados disponível.

* Isso resulta em tempos de carregamento mais rápidos nos dispositivos e para provedores de serviços de hospedagem na web. Os usuários do seu site não ficarão entediados com os tempos de carregamento lentos. Como suas imagens ocupam menos espaço, elas serão carregadas mais rapidamente e proporcionarão uma melhor experiência ao usuário.

Veja como usar o Compressor de Fotos Online Gratuito do FoneDog passo a passo:

Passo 01 - Vá para a página do Photo Compressor no site do FoneDog aqui.

Passo 02 - Carregue sua imagem ou imagens. Você pode fazer upload de no máximo 20 imagens com cerca de 5 MB por imagem no tamanho máximo.

Passo 03 - Após a compactação das fotos, baixe o arquivo da imagem compactada dentro da referida plataforma.

Parte VI: Conclusão

A compactação de imagens JPEG pode ser complicada. Isso ocorre porque você precisa equilibrar a qualidade com a substância. Embora as pessoas tenham conexão rápida com a Internet hoje em dia, a redução do tamanho das imagens ainda é necessária. Isso ocorre porque as pessoas estão se tornando cada vez mais impacientes.

Existem muitas ferramentas de compactação ou otimização JPEG por aí. Uma ferramenta que você pode usar é Compressor de fotos online gratuito do FoneDog. A referida ferramenta pode ajudá-lo a reduzir o tamanho de suas imagens sem comprometer muito de sua qualidade.