¿Cómo convierto un fondo borroso .png en uno comprimido .jpg sin introducir artefactos?

Actualmente estoy lidiando con un problema de calidad de imagen para la imagen de fondo de mi sitio web.

Tengo una gran imagen de fondo borrosa que me gustaría usar, pero me gustaría que tuviera el tamaño más pequeño posible para el sitio web.

Para tenerlo en su más alta calidad (png), se trata de 200kb.

Puedo reducirlo a aproximadamente 100 kb como JPG, pero la calidad se reduce, lo que se espera, pero hay líneas de aspecto horrible alrededor del lineal que lo hace ver terrible.

¿Hay alguna forma especial de convertir este png en un jpg pero evitar que la imagen tenga estos defectos?

Aquí están las imágenes:

PNG:

Calidad JPG (100%):

JPEG no es una compresión sin pérdidas

La compresión JPEG se considera una compresión con pérdida, incluso cuando se establece en un 100% de calidad , pierde algo de calidad. Es por eso que para gráficos simples como las interfaces de usuario y los fondos generalmente es mejor usar un formato sin pérdidas como PNG.

200kb no es tan grande en 2014/2015

Si bien sería una idea disminuir el tamaño del fondo tanto como sea posible, es importante tener en cuenta que 200 kb no es tan grande para la mayoría de las conexiones de banda ancha. Puede servir una versión diferente para móviles y tabletas utilizando consultas de medios css .

Hacer un archivo png aún más pequeño

Photoshop y otros paquetes de pintura usan compresión PNG estándar, es probable que pueda reducir esos 200 kb a menos usando PngOptimizer o el servicio en línea de Yahoo Smush It . Reducir el tamaño del archivo aún más no reducirá la calidad, ya que es un formato sin pérdidas ... básicamente optimiza el código reduciéndolo aún más, compárelo con un archivo ZIP o RAR, estos archivos comprimidos pero no reducen la calidad del contenido.

Considerando usar un gradiente de rayas

Otra posible solución podría ser que use un gradiente PNG delgado que tenga 1px de ancho y luego la altura de la página, luego duplique esto usando background-repeat, incluso podría considerar usar CSS para generar el Gradiente para usted, pero por supuesto está limitado por no ser capaz de usar sombras y otros ajustes.

Esto probablemente no responde a tu pregunta. Algunas posibles alternativas ...

¿Has considerado CSS en su lugar?

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

O tal vez podría usar la técnica SVG base64 ( herramienta de generador aquí ):

<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==);

¿Has intentado usar un PNG aún más pequeño y permitir que el algoritmo de escalamiento nativo del navegador lo amplíe? Esto podría reducir el tamaño del archivo y eliminar los artefactos JPG.

Le sugiero que eche un vistazo a Kraken.io , tienen un optimizador de imagen. ¡Las imágenes en su tema disminuyen en un 45% de tamaño, sin ser visibles a la vista!

También puede usar css, colorzilla tiene una buena herramienta para crear el css correcto para todos los navegadores.

Si se siente más cómodo con una imagen de degradado, suelte el color, hágalo en blanco y negro, y luego déle al div / cuerpo / elemento el fondo de la siguiente manera:

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

Algunos editores de imágenes, como GIMP, le permiten aplicar suavizado y controlar la compresión al guardar un archivo JPEG.

Suavizado: configurar la opción de suavizado en un valor distinto de cero suavizará ligeramente la imagen. Esto reduce los artefactos difusos de la compresión y ayuda con la compresión. Una configuración de 0.10-0.15 elimina una buena parte de los artefactos sin manchar los bordes.

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

También puede reducir los artefactos controlando el submuestreo

Si bien el submuestreo estándar suele ser adecuado para la mayoría de las imágenes, proporcionando una buena relación entre la calidad de la imagen y el tamaño del archivo, hay algunas situaciones en las que el no usar submuestreo (4: 4: 4) proporciona un aumento notable en la calidad de la imagen, incluso si usted use una relación de compresión más alta para mantener el tamaño del archivo. Los casos más notables son cuando la imagen contiene algunas partes con detalles finos, como texto sobre un fondo uniforme e imágenes que contienen colores casi planos.

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

Intente agregar ruido para minimizar las bandas:

Photoshop:

1. Crea una nueva capa.
2. Vaya a: Image > Fill... >y use estos valores:

3. Cambia el modo de fusión de la capa a Superposición
4. Ir a: Filter > Noise > Add Noise... >. Estos valores me funcionaron bien:

5. Ajuste la opacidad de la capa a su gusto. El 22% estuvo bien y el JPG resultante es:

Así que no hay bandas desagradables, de menor tamaño pero a expensas del ruido. Los archivos son considerablemente más pesados ​​en comparación con la versión no ruidosa (alrededor de 100 kb), pero la mitad del PNG original. En realidad estoy un poco sorprendido de que tu PNG fuera tan grande.

Una sugerencia más:

Si no desea agregar ruido, intente asegurarse de que está trabajando en todas partes en el espacio de color sRGB, que proporciona la gama más rica para pantallas de monitor (menos bandas).