Reduza o tamanho do arquivo sem perder a qualidade

Gostaria de salvar arquivos no Photoshop, mas mantê-los o menor possível.

Uso Salvar para a Web (e Dispositivos) e salvo como JPEG. Aqui estão as configurações que eu usei:

Eu realmente não quero diminuir as configurações de qualidade porque uso texto e às vezes vejo artefatos se a configuração for muito baixa.

Isso produz tamanhos de arquivo de várias centenas de kilobytes, dependendo do tamanho da imagem. Embora esse não seja um grande problema, essas imagens são usadas na Web e, quanto menor, melhor. O que são técnicas sem reduzir a qualidade para reduzir o tamanho do arquivo?

Atualizar:

Para adicionar mais algumas informações aqui:

Muitas das imagens que uso e crio são enviadas por email. Isso limita o que posso fazer com a colocação de texto usando HTML e CSS sobre a imagem.

Também uso uma variedade de fontes. Alguns eu poderia usar para a Web usando CSS, @font-facemas você pode executar em tamanhos grandes de arquivo e, em alguns casos, não pode fazer upload da fonte para a Web legalmente. Eu poderia usar um serviço como o Typekit, mas novamente muitas fontes usadas não estão disponíveis no Typekit.

Aqui está um exemplo de imagem:

A escolha do melhor método de compactação depende do conteúdo da sua imagem. Se você está tentando salvar a imagem com muitas cores e transições suaves entre elas, sua escolha é JPEG. Caso contrário, se você tiver algum texto linear, texto e imagem com algumas cores, tente o PNG.

Esquema de compressão específico, parâmetros, redução de cor etc. dependem do caso específico. Existem algumas imagens que você pode salvar com segurança com o "slider" de compactação JPEG definido como 30 ou 40 sem tornar os artefatos aparentes. Alguns outros exigem configurações 80 ou mais. Seu olho deve ser o juiz.

Quando falamos sobre compactação JPEG, não hesite em tentar usar, por exemplo, a opção "Progressivo" ou definir "Desfoque" para um valor diferente de zero (o desfoque sutil pode mascarar artefatos graves de compactação).

No caso do PNG, você deve tentar reduzir o máximo possível de cores usadas (use o PNG-8 para isso). Quando alguma "suavização" é necessária, tente algoritmos de pontilhamento diferentes.

Aqui estão alguns exemplos:

Da esquerda para a direita, de cima para baixo, seus parâmetros são:

1. JPEG, Progressivo, Qualidade: 40, Desfoque: 0.18, Tamanho: 9.672 bytes
2. JPEG, Otimizado, Qualidade: 60, Desfoque: 0, Tamanho: 16 898 bytes
3. JPEG, Progressivo, Qualidade: 60, Desfoque: 0, Tamanho: 11 104 bytes
4. PNG-8, Pontilhamento: difuso, Cores: 256, Tamanho: 4 528 bytes

Compare-os visualmente e depois dê uma boa olhada em seus respectivos tamanhos de dados. O primeiro par é de cerca de 9,7 kB vs. 16,9 kB. O segundo é 11,1 kB vs. 4,5 kB. Tudo isso por (IMHO) diferença visual insignificante.

Aqui estão algumas opções:

• Use outro formato que não seja JPEG (PNG ou GIF); os resultados em termos de tamanho do arquivo e qualidade da imagem dependerão do conteúdo da sua imagem; cada um é melhor em certos tipos de conteúdo
• Reduza a imagem em termos de pixels - isso terá um efeito muito significativo e deve ser definitivamente considerado se você tiver controle sobre o layout geral
• Use elementos sem imagem sempre que possível, por exemplo, tente substituir o texto nas imagens pelo texto HTML; tente substituir blocos de cores por elementos HTML.

Expandindo os dois últimos pontos, você deve minimizar a extensão das imagens em seus layouts como um todo antes de gastar tempo na redução do tamanho do arquivo das imagens existentes.

Vou tentar responder a algumas perguntas sem resposta até agora:

Muitas das imagens que uso e crio são enviadas por email. Isso limita o que posso fazer com a colocação de texto usando HTML e CSS sobre a imagem.

Você pode enviar e-mails em html (da maneira como são feitos os boletins). Com html e CSS embutido (para compatibilidade). As imagens precisam estar em um servidor e você deve colocar o URL completo nas etiquetas stylings / img-tags. Aqui está uma lista do que funciona em diferentes clientes de email.

Também uso uma variedade de fontes. Alguns eu poderia usar para a web usando o @ font-face do CSS, mas você pode executar em tamanhos grandes de arquivo e, em alguns casos, não pode fazer upload da fonte para a web legalmente.

Experimente o google webfonts , de longe a melhor fonte da web. Tudo livre para usar. Outro seria Font Squirrel . (Ele também usa @ font-face).

Não há como você fazer isso. JPEG é formato com perdas. Sempre há uma troca entre qualidade e tamanho do arquivo.