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


15

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:

ingrese la descripción de la imagen aquí

Calidad JPG (100%):

ingrese la descripción de la imagen aquí


¿Cuáles son las dimensiones de esta imagen?
MrWhite

¿200kb es demasiado grande en estos días?
SaturnsEye

Parece que la herramienta que utilicé originalmente para comprimir la imagen no era sin pérdida, pero sí con pérdida (tinypng.com). Esta fue la razón por la cual el png era terrible cuando se comprimía. De todos modos todas sus respuestas ayudaron. ¡Gracias!
Aki

1
@SaturnsEye Sí, para una imagen no esencial es absolutamente. Solo piense en los visitantes móviles. Para imágenes esenciales, por supuesto, está bien.
Kjeld Schmidt

1
¿Para dispositivos móviles no considerarías usar .SVG? como son pequeños
SaturnsEye

Respuestas:


13

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.


Este PNG se crea con Fireworks y contiene una pequeña cantidad de "cruft". pngcrushy programas similares ciertamente pueden hacer que el archivo sea más pequeño.
usr2564301

3
Sí, 200kB es grande si su computadora portátil está en una conexión inalámbrica, especialmente fuera de Japón, República de Corea y Europa occidental. Es una práctica común en los mercados celulares y satelitales de última milla facturar al cliente poco a poco.
Damian Yerrick

15

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.


8

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

1

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


0

Intente agregar ruido para minimizar las bandas:

Photoshop:

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

ingrese la descripción de la imagen aquí

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

ingrese la descripción de la imagen aquí

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

ingrese la descripción de la imagen aquí

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


Puedo ver algunos cambios de color en mi imagen ... Supongo que eso es algo sobre los perfiles de color, ya que este método no debería afectar el color de la obra de arte.
ellockie
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.