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

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:

Qualidade JPG (100%):

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.

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.

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

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

Tente adicionar ruído para minimizar as faixas:

Photoshop:

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

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

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

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