Reduza o tamanho do arquivo sem perder a qualidade

11

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:

Definições

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:

Imagem de exemplo

L84
fonte
1
Existem várias respostas para isso - um exemplo do tipo de imagem que você está falando ajudaria.
e100
1
@ e100 - atualizo a pergunta para fornecer uma imagem de exemplo e adicionar mais informações.
L84 24/07/12
Pergunta semelhante: graphicdesign.stackexchange.com/q/3429/10419 #
Kornel ''
Se você estiver controlando o lado do site, consulte as opções de código / compilação. Sou o designer de uma equipe profissional da Web e fornecemos vídeo em tela cheia para desktop / telefone celular sem grandes problemas. As imagens, a menos que estritamente necessário, são vetor SVG e carregadas como fonte. Reduz drasticamente a contagem de KB da página. Os banners de heróis com largura de 2000 pixels são JPG a 85% e os caras pré-carregam em segundo plano. O dispositivo do usuário final é detectado e entregue versões relativas do arquivo (ou seja, versão menor para celular). Quando o usuário passa pela página inicial, o carregamento da tela é instantâneo. E pretendemos por 2 segundos no máximo a página inicial.
Applefanboy 17/01

Respostas:

15

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:

JPEG, Progressivo, Qualidade: 40, Desfoque: 0.18 JPEG, Otimizado, Qualidade: 60, Desfoque: 0 JPEG, Progressivo, Qualidade: 60, Desfoque: 0 PNG-8, pontilhamento: difuso, 256 cores

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.

thebodzio
fonte
Minha maior preocupação com a opção progressiva é o suporte a clientes de email. Eu adicionei mais informações à minha pergunta para explicar isso.
L84 24/07/12
1
Tanto quanto posso dizer, “progressivo” faz parte do padrão JPEG e não é algo exótico; portanto, o suporte deve ser quase 100%. Mas é "eu acho" e não "eu sei" :).
24712 thebodzio
Concordo e acredito que você está certo, fiz essa pergunta no Webmaster SE e, na pior das hipóteses, as imagens serão exibidas, mas não até que estejam totalmente carregadas.
L84 25/07/12
1
É exatamente assim que "progressivo" deve funcionar: ele deve mostrar versões cada vez mais detalhadas da imagem consecutivamente, à medida que mais dados se tornam disponíveis.
25712 thebodzio
Desculpe, o que eu quis dizer foi que nada aparece até que a imagem seja carregada versus o carregamento de digitalização por digitalização.
L84 25/07/12
10

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.

e100
fonte
2

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).

Jannik Ruf
fonte
Obrigado pelos links. Naveguei em alguns sites da Campaign Monitors, mas não vi a página CSS. Informação muito útil lá.
L84
-1

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

querer252
fonte
Quaisquer outras recomendações que não sejam o JPEG. Como é PNG?
L84 24/07/12
1
PNG é sem perdas, mas também bastante grande. Onde você usa esta imagem? Se for para a web, é sempre melhor codificar o texto.
Jannik Ruf
JPEG e GIF são boas opções para exibição na Web (PNG raramente é usado). Mas isso depende um monte sobre o que você quer fazer: fundo, slideshow imagem, miniatura ou ícone etc ...
wanting252
Se for apenas Texto sem efeitos (ou seja, apenas texto branco sobre fundo preto), o GIF é bom e tem tamanho muito pequeno.
Jannik Ruf
4
Esta não é realmente uma resposta muito boa. Existem várias maneiras de reduzir o tamanho do arquivo; é incorreto dizer que o PNG raramente é usado na web.
e100