Otimização JPEG para a Web - Ultimate Guide

A compactação de imagem é encontrada em todos os formatos de mídia nativos. No entanto, a diferença entre GIF, PNG e JPEG é como as informações são compactadas e exibidas na tela. Há tantas dicas para compor grandes mídias de imagens publicadas na web, e ainda muitos designers ainda não entendem alguns dos fundamentos.

Neste guia, gostaria de compartilhar algumas ideias para a compactação JPEG adequada. Você deseja otimizar suas imagens para diminuir os tempos de carregamento da página da Web e, ao mesmo tempo, manter um nível decente de qualidade. É tudo sobre encontrar o equilíbrio entre os tamanhos dos arquivos e a representação na tela. Não há solução perfeita para os designers seguirem. É preciso alguma prática inicial, mas depois de entender a compactação JPEG, fica muito mais fácil desenvolver sites no futuro.

Evite sempre salvar em 100%

Você quase nunca deve salvar suas imagens JPEG com qualidade de 100%. Isso vai não produzir o máximo possível “otimizado” imagem. Ele realmente calcula através de uma fórmula de limite de otimização que aumenta seus tamanhos de arquivo de forma exorbitante. Mesmo em comparação com 90% ou 95% de qualidade, você verá uma queda significativa no tamanho do arquivo.

Na maioria das vezes, você será recomendado para salvar imagens com qualidade muito inferior a 90%. Se você abrir a caixa de diálogo Salvar para a Web no Photoshop, perceberá que eles oferecem valores predefinidos que você pode escolher. Eu adicionei os possíveis valores JPEG abaixo - observe as convenções de nomenclatura inerentes.

Baixo - 10%
Médio - 30%
Alto - 60%
Muito alto - 80%
Máximo - 100%

Mesmo no Adobe Photoshop, a qualidade de imagem de 60% é considerada 'alta'. Muitos desenvolvedores da Web atestarão entre 50% e 70% é um intervalo seguro para se manter.

Quão baixa é muito baixa?

Os valores que você escolhe para otimização são completamente dependentes do projeto em questão. Você terá que considerar quais tipos de gráficos produzirão os maiores tamanhos de arquivo - esses são os que realmente precisam de compressão.

Eu diria que abaixo de 30% você está cortando qualidade de imagem fundamental. Outros designers vão jurar 50% como “limite” para diminuir o valor ideal. Mas o melhor conselho aqui é apenas experimentar diferentes configurações e ver o que parece melhor! Você não pode errar com alguns estudos de teste otimizando imagens JPEG para a web.

Opções de Compressão

Devemos primeiro esclarecer os dois termos "compressão" e "qualidade", que são inversos um do outro. Isso significa que, se você salvar um JPEG com 40% de compactação, obterá 60% de qualidade (em comparação com um máximo de 100% de qualidade sem compactação).

Estas são as opções mais básicas para utilizar - e devem ser suficientes ao salvar para a web. Usuários gerais não entram em personalizações muito mais profundas. A subamostragem envolve assuntos mais complicados nos quais você converte imagens RGB em YCbCr (Luminance, Chroma Blue, Chroma Red).

(Fonte da imagem: Kara Monroe)

o luminância ou a configuração de brilho é sempre mantida no valor mais alto possível na compactação JPEG. Com esse valor de brilho em um canal separado, é mais fácil otimizar os valores de cores individuais de vermelho e azul. Isso também é conhecido como subamostragem de croma. Designers interessados em sujar as mãos vão adorar ler um pouco mais sobre esse algoritmo de compressão. Confira este ótimo post no blog sobre amostragem de croma especificamente focada em imagens JPEG.

(Fonte da imagem: Derek Hatfield)

Como uma observação interessante, o Adobe Photoshop nem sempre utiliza subamostragem para compactação. Todas as imagens salvas através do “Salvar para a Web” A caixa de diálogo usará somente subamostragem de croma abaixo de um valor de qualidade de 50%.

Mídia da Web diferente

A web também está cheia de diferentes tipos de mídia de imagem. Você pode ter fotografias, ícones, botões, distintivos e muitos outros gráficos. Mas é notável que comparar a qualidade entre um botão e uma fotografia não faz sentido.

Ao usar fotografias ou imagens detalhadas, considere a vinculação a um arquivo JPEG separado, menos compactado. Em seguida, você pode configurar miniaturas em seu site com uma taxa de compactação mais alta e tamanhos de arquivo muito menores. A única desvantagem é que você precisará fornecer dois conjuntos de imagens para uma galeria de mídia. Tome nota dos muitos gráficos diferentes que você costurou em um site e considere técnicas de otimização para cada um individualmente.

Planejando um modelo gráfico

Você quer ter um sistema de arquivos organizado que seja fácil o suficiente para vasculhar. Alguns webmasters optam por hospedar suas fotos em outros lugares da Web, como o Flickr ou o Picasa. No entanto, você ainda desejará usar alguma ferramenta de compactação para reduzir os tamanhos das imagens, mas a maneira como você as exibe em seu site pode variar. Isto é especialmente verdade com o aumento popular de dispositivos móveis com acesso à Internet.

Eu encontrei um artigo interessante discutindo a codificação JavaScript JPEG que aconteceria no seu código frontend. Não há muito benefício para galerias de imagens de alta qualidade, mas pode reduzir o tempo de carregamento dos visitantes de dispositivos móveis. Também seria uma técnica útil ao hotlinking de imagens ou reciclar miniaturas dinamicamente.

Outra ferramenta sofisticada para conferir é o Yahoo! Smush.it. É um aplicativo da web baseado em navegador no qual você pode fazer o upload de uma imagem e o Smush.it removerá todos os bytes extras desnecessários para otimizar o tamanho do arquivo. É 100% sem perdas, o que significa que a qualidade da imagem não será degradada. E, ainda melhor, você pode fazer upload em lote de imagens de URLs diretos, se as tiver hospedado em seu site ou em um servidor de terceiros.

Ferramentas Adicionais

Há uma abundância de software para tentar no que diz respeito à manipulação de imagens. Quaisquer bytes extras que você pode reduzir o tamanho de cada arquivo são cruciais. Não há muitos softwares por aí, mas as opções disponíveis são incríveis.

IrfanView

Este software gratuito para Windows permite visualizar e otimizar qualquer conjunto de imagens grandes. Eu gosto especialmente deste software porque ele suporta conversão em lote de imagens em vários diretórios. Você pode aplicar as mesmas funções em centenas de imagens JPEG automaticamente.

O que é ainda melhor é o suporte a plugins de desenvolvedores de terceiros. Um exemplo é o RIOT (Radical Image Optimization Tool). Este plugin funciona para outros editores gráficos de código aberto semelhantes, como o GIMP. Ele oferece uma visualização de imagem dupla, onde você pode ajustar manualmente os parâmetros de compactação para cada uma das suas imagens.

O suporte de software é maravilhoso e os recursos do RIOT são muito fáceis de usar. Junto com a compactação de imagem, você também tem acesso à remoção de metadados adicionais, como o EXIF e o Adobe XMP. Esses bits extras de dados só podem ser adicionados ao seu tamanho total de arquivos e raramente são necessários.

ImageOptim para Mac

Se você estiver executando o OS X e precisar de um aplicativo de compactação poderoso, não procure mais. O ImageOptim é uma ferramenta poderosa para comprimir imagens para a web - às vezes até melhor que o Photoshop.

Todo o aplicativo suporta a funcionalidade de arrastar e soltar, facilitando a otimização de grandes conjuntos de imagens. Você também pode executar comandos diretamente do Terminal e configurar scripts de shell. Confira a página de códigos do Google para mais informações e suporte técnico.

Houve alguns pequenos problemas com a última versão 1.3.3 estável na renderização de imagens JPEG pixeladas no Opera. Tente verificar todas as suas imagens otimizadas nos quatro principais navegadores - Chrome, Safari, Firefox e Opera (e talvez o IE). Se alguma coisa parece distorcida, você pode tentar baixar o ImageOptim 1.3.0 que converte um pouco mais limpo.

Recursos Úteis

JPEG 101: Um guia de cursos intensivos sobre JPEG
Configurações de compactação corretas para salvar imagens JPG no WordPress
Técnicas Inteligentes de Otimização de JPEG
Como-para otimizar imagens JPEG para sites
Tudo que você precisa saber sobre compactação de imagem

Conclusão

A compactação JPEG é complicada, pois você precisa encontrar o equilíbrio adequado entre qualidade e substância. Mesmo com o aumento das velocidades de conexão à Internet, ainda é necessário reduzir o tamanho das páginas da web. Novos frameworks como jQuery e Typekit podem ter centenas de kilobytes adicionais, mesmo em um design bem otimizado.

Ainda tenho que recomendar o Adobe Photoshop como meu principal software de edição de imagens. Existem outros exemplos possivelmente melhores para o processo de otimização JPEG. Mas os web designers podem sobreviver com soluções de código aberto ainda menos conhecidas. Se você tiver truques ou ideias semelhantes sobre compactação JPEG, compartilhe conosco na área de pós-discussão abaixo.