Imagen de fondo web grande: cómo dividirla en JPG y PNG

En un sitio web en el que estoy trabajando, el equipo de diseño quiere una imagen de fondo grande. Sin comprimir, tiene varios cientos de kilobytes (tanto en JPG como en PNG). La mayoría de las partes de la imagen de fondo están borrosas, pero algunas partes son muy nítidas.

Ahora estamos buscando la mejor manera de comprimir la imagen para que esas partes borrosas no ocupen demasiado espacio, mientras tratamos de mantener alejados los artefactos de compresión de las partes nítidas.

Mientras lo pensaba, pensé que sería bueno dividir la imagen en dos partes superpuestas:

  • La primera parte está muy borrosa, por lo que se puede comprimir reduciéndola o comprimiéndola como JPG.
  • La segunda parte es una imagen transparente encima de la primera parte. Es nítido, pero no tiene mucha información de color, ideal para una imagen PNG comprimida con un solo canal de color (o una pequeña cantidad de colores discretos).

La idea es combinar los poderes de compresión JPG con los de PNG.

¿Es una buena idea, en teoría?

En caso afirmativo, ¿hay algún programa o algoritmo que pueda dividir la imagen y comprimirla con los siguientes objetivos?

  • Mantenga la imagen resultante (superposición) lo más cerca posible del original (tal como aparece al ojo humano).
  • Mantenga el tamaño total de la imagen por debajo de un límite superior determinado.

Algunos pensamientos adicionales:

  • Lo más probable es que las partes borrosas de la imagen original sean totalmente transparentes en la segunda parte de la división de la imagen.
  • Si la primera parte de la imagen genera un fuerte artefacto en alguna posición de la imagen, tal vez sería posible corregirlo en la segunda parte.

Respuestas (2)

¿Es una buena idea, en teoría?

Seguro.

En caso afirmativo, ¿hay algún programa o algoritmo que pueda dividir la imagen y comprimirla con los siguientes objetivos?

No sé ahora que lo necesitas. Construiría la imagen en un programa que pueda manejar capas (como Photoshop). Oculte la capa superior y exporte como un JPG altamente comprimido. Oculte la capa inferior y exporte como PNG. Luego combine los dos en su HTML/CSS. Puede usar el posicionamiento absoluto o aprovechar el hecho de que los navegadores más nuevos pueden manejar múltiples imágenes de fondo .

Nota al margen de tal vez solo importancia histórica: Fireworks solía tener una opción para exportar un JPG 'comprimido selectivamente' . Le permitió seleccionar una región de un solo JPG y comprimirlo por separado del resto. Fue una característica interesante que no he visto implementada en ningún otro software de edición de imágenes.

Finalmente...

el equipo de diseño quiere una imagen de fondo grande

...recuerda que a veces el equipo de diseño simplemente se equivoca. Entiendo que esto es a menudo un problema político más que nada, pero si tiene la capacidad de retroceder, nunca está de más educar al equipo de diseño sobre cómo funciona la web y que las imágenes de fondo gigantescas no siempre son lo mejor para los intereses de la experiencia general.

¡Muchas gracias! Sin embargo, estoy buscando un software que pueda crear las dos capas automáticamente a partir de una imagen. Aún no tengo las dos capas. Quiero que el software detecte cómo dividir la imagen en dos capas para que mis objetivos se satisfagan/optimicen.
@cheeesus si la imagen ya es plana, no puedo imaginar un software que pueda automatizar eso. Tal vez exista, pero es probable que se necesite mucho ojo y ajustes manuales para separarlos adecuadamente. Es mejor que busque una versión de Fireworks y utilice la opción de compresión selectiva. Dicho esto, si los diseñadores insisten en esto, déjelos descubrir cómo obtener las dos capas para usted.

Los archivos DjVu se basan en la misma idea, tal vez tengan algunos convertidores que podría usar para separar su imagen en componentes "nítidos" y "suaves".

http://en.wikipedia.org/wiki/DjVu