Como converter um fundo desfocado .png em um .jpg compactado sem introduzir artefatos?


15

Atualmente, estou lidando com um problema de qualidade de imagem na imagem de plano de fundo do meu site.

Tenho uma grande imagem de fundo desfocada que gostaria de usar, mas gostaria que fosse o menor tamanho possível para o site.

Para obtê-lo com a mais alta qualidade (png), são cerca de 200kb.

Posso reduzi-lo para cerca de 100kb como JPG, mas a qualidade é reduzida, o que é esperado, mas há linhas horríveis em torno do linear que o fazem parecer terrível.

Existe uma maneira especial de converter este png em jpg, mas evite que a imagem tenha esses defeitos?

Aqui estão as imagens:

PNG:

insira a descrição da imagem aqui

Qualidade JPG (100%):

insira a descrição da imagem aqui


Quais são as dimensões desta imagem?
MrWhite

200kb é muito grande hoje em dia?
SaturnsEye

Parece que a ferramenta que usei originalmente para compactar a imagem não estava sem perdas, mas com perdas (tinypng.com). Esta foi a razão pela qual o png era terrível quando compactado. Enfim, todas as suas respostas ajudaram. Obrigado!
Aki

11
@SaturnsEye Sim, para uma imagem não essencial é absolutamente. Basta pensar nos visitantes móveis. Para imagens essenciais, é claro, tudo bem.
Kjeld Schmidt 22/10

11
Para celular, você não consideraria usar .SVG? como eles são minúsculos
SaturnsEye

Respostas:


13

JPEG não é uma compactação sem perdas

A compactação JPEG é considerada uma compactação com perdas, mesmo quando definida como 100% de qualidade, você perde alguma qualidade. É por isso que, para gráficos simples, como interfaces de interface do usuário e planos de fundo, geralmente é melhor usar um formato sem perdas, como PNG.

200kb não é tão grande em 2014/2015

Embora seja ideal diminuir o tamanho do plano de fundo o máximo possível, é importante observar que 200kb não é tão grande para a maioria das conexões de banda larga. Você pode veicular uma versão diferente para celulares e tablets usando consultas de mídia css .

Como tornar um arquivo png ainda menor

O Photoshop e outros pacotes de tinta usam compactação PNG padrão; é provável que você possa reduzir esses 200kb para menos usando o PngOptimizer ou o Smush It do Serviço Online do Yahoo . Reduzir ainda mais o tamanho do arquivo não diminui a qualidade, pois é um formato sem perdas ... ele otimiza o código reduzindo-o ainda mais, compara-o com um arquivo ZIP ou RAR, esses arquivos de compactação, mas não reduzem a qualidade do conteúdo.

Considerando usar um gradiente de faixa

Outra solução possível seria usar um gradiente PNG fino de 1px de largura e, em seguida, a altura da página, duplicá-lo e utilizá- background-repeatlo. Você pode até considerar o uso de CSS para gerar o Gradient para você, mas é claro que está limitado por não ser capaz de usar sombras e outros ajustes.


Este PNG é criado com o Fireworks e contém uma pequena quantidade de "cruft". pngcrushe programas similares certamente podem diminuir o arquivo.
precisa saber é o seguinte

3
Sim, 200kB são grandes se o seu laptop estiver em uma conexão sem fio, especialmente fora do Japão, República da Coréia e Europa Ocidental. É prática comum nos mercados de última milha de celular e satélite cobrar o cliente pouco a pouco.
precisa saber é o seguinte

15

Provavelmente isso não responde à sua pergunta. Algumas alternativas possíveis ...

Você já considerou o CSS:

background: linear-gradient(45deg, #3d667c, #1d283e);

Ou talvez você possa usar a técnica SVG base64 ( ferramenta geradora aqui ):

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none"><linearGradient id="g932" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="100%" y2="100%"><stop stop-color="#3D667C" offset="0"/><stop stop-color="#1D283E" offset="1"/></linearGradient><rect x="0" y="0" width="1" height="1" fill="url(#g932)" /></svg>

background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc5MzIiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzNENjY3QyIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzFEMjgzRSIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzkzMikiIC8+Cjwvc3ZnPg==);

Você já tentou usar um PNG ainda menor e permitir que o algoritmo de escalonamento nativo do navegador o amplie? Isso pode diminuir o tamanho do arquivo e eliminar artefatos JPG.


8

Eu sugiro que você verifique o Kraken.io , eles têm um otimizador de imagem. As imagens no seu tópico diminuem em 45%, sem serem visíveis aos olhos!

Você também pode usar o CSS, o colorzilla tem uma boa ferramenta para criar o CSS certo para todos os navegadores.

Se você se sentir confortável com uma imagem de gradiente, solte a cor, deixe-a em preto e branco e, em seguida, dê ao div / body / elemento o fundo da seguinte maneira:

background: blue url('images/gradient.png')

1

Alguns editores de imagem, como o GIMP, permitem aplicar suavização e controlar a compactação ao salvar um jpeg.

Suavização: definir a opção de suavização para um valor diferente de zero suavizará a imagem levemente. Isso reduz artefatos difusos da compactação e ajuda na compactação. Uma configuração de 0,10-0,15 remove uma boa parte dos artefatos sem manchar as bordas.

http://en.wikibooks.org/wiki/GIMP/Saving_as_JPEG

Você também pode reduzir artefatos controlando a subamostragem

Embora a subamostragem padrão seja geralmente adequada para a maioria das imagens, fornecendo uma boa proporção entre a qualidade da imagem e o tamanho do arquivo, há algumas situações nas quais o uso de nenhuma subamostragem (4: 4: 4) proporciona um aumento notável na qualidade da imagem, mesmo se você use uma taxa de compactação mais alta para manter o tamanho do arquivo. Os casos mais notáveis ​​são quando a imagem contém algumas partes com detalhes finos, como texto sobre um fundo uniforme e imagens que contêm cores quase planas.

http://www.ampsoft.net/webdesign-l/jpeg-compression.html


0

Tente adicionar ruído para minimizar as faixas:

Photoshop:

  1. Crie uma nova camada.
  2. Vá para: Image > Fill... >e use estes valores:

insira a descrição da imagem aqui

  1. Altere o modo de mesclagem da camada para Overlay
  2. Ir para: Filter > Noise > Add Noise... >. Esses valores funcionaram bem para mim:

insira a descrição da imagem aqui

  1. Ajuste a opacidade da camada ao seu gosto. 22% foi bom e o JPG resultante é:

insira a descrição da imagem aqui

Portanto, não há faixas desagradáveis, tamanho menor, mas à custa do ruído. Os arquivos também são consideravelmente mais pesados ​​se comparados à versão não barulhenta (cerca de 100kb), mas metade do PNG original. Na verdade, estou um pouco surpreso que seu PNG seja tão grande.

Mais uma sugestão:

Se você não deseja adicionar ruído, tente garantir que esteja trabalhando em qualquer lugar no espaço de cores sRGB, que oferece a gama mais rica para telas de monitor (menos faixas).


Consigo ver algumas alterações de cor na minha imagem ... Acho que isso é algo sobre perfis de cores, pois esse método não deve afetar a cor da obra de arte.
ellockie
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.