La textura de fondo GIF no se combina bien con la textura de fondo de la página

En mi sitio de cartera en http://samnorris.co.nz tengo una imagen .gif animada: el astronauta con el encabezado debajo: "Protegiendo la galaxia un píxel a la vez"...

No estoy seguro de si solo somos yo y mi monitor o no, y es muy, muy sutil, pero puedo notar que la textura de fondo no se combina muy bien con la textura de fondo en la página (que usa la misma textura) y en algunas resoluciones, y especialmente mientras me desplazo, puedo ver un 'halo' visible en forma de cuadrado alrededor de la imagen, como si la textura en el gif fuera un poco más clara que en la página o algo así.

He probado varias configuraciones de exportación de Photoshop, incluidas Perceptual, Adaptive y Selective y calidad: bilineal, bicúbica, etc. pero nada de lo que he intentado hasta ahora parece resolverlo.

Por cierto, antes estaba usando una textura de fondo diferente que no parecía sufrir el problema, así que tal vez el problema radica en la (¿complejidad?) de la textura en sí. ¿O hay alguna manera de asegurarme de que la textura de fondo en el .gif se combine perfectamente con el fondo de las páginas?

Aquí está la imagen real en sí:

ingrese la descripción de la imagen aquí

y la textura de fondo utilizada en la página, si ayuda en algo:

ingrese la descripción de la imagen aquí

Solo parece ser un problema con el GIF y ninguno de los otros JPEG o PNG en la misma página/sección que usan la misma textura de fondo.

Todo lo que sé hasta ahora es que su sitio se carga para siempre, al menos en un iPad. No tuve paciencia para esperar a que se cargara el sitio.
Ok, ahora que he podido verificarlo en una computadora adecuada... (todavía no es una página de carga súper rápida, pero como 2 veces más rápida que en ipad). Hacer coincidir la textura es demasiado problema en lo que a mí respecta personalmente. Probablemente primero intentaría cómo funcionaría esto en formato gif sin el fondo. Si eso no se ve bien, simplemente usaría un png sin el fondo... y si realmente quisiera esa animación, que parece estar solo en el casco, colocaría el gif del casco encima del png. como una imagen separada.
Tal vez no con este, pero en algunos casos también consideraría animar archivos png con javascript.
Es una pena escuchar sobre la velocidad de carga en iPad, aunque quizás debería haber mencionado que el sitio aún no está completo y aún necesita más optimización, etc. Aunque al decir que no debería estar terriblemente desoptimizado, no es una gran noticia, no obstante... Veré qué puedo hacer para optimizarlo aún más. Gracias por la otra información también.

Respuestas (2)

El halo "cuadrado" es simplemente la muestra de trama del archivo .GIF. La transparencia de los archivos .GIF es binaria por diseño. Por lo tanto, si está buscando un canal alfa fluido, intente en su lugar el formato .PNG de 24 bits. Sin animación, pero esa es la compensación.

Alternativamente, intente incorporar el estilo de transparencia binaria de .GIF en el estilo de su gráfico. Photoshop tiene opciones divertidas para traducir el desvanecimiento alfa (también conocido como transparencia) en diferentes "tipos de difusión" durante Guardar para Web.

En realidad, hay algunas configuraciones que aún no he probado, solo estaba buscando si alguien sabía algo específico, y Diffusion es un ajuste preestablecido que aún no he probado, así que lo intentaré (aunque aumenta la tamaño de archivo bastante)
.GIF es una codificación basada en patrones, por lo que se enfada con la difusión de ruido. Pruebe la "difusión de patrones" para obtener algo que, en mi opinión, sea vintage/sexy de 8 bits y práctico porque se comprime bien.

Otra forma: crea 3 imágenes y úsala como si fuera una postproducción de video

  • primero - png estático,
  • segundo - gif con solo área animada
  • tercero - png con máscara de área animada

Descripción de máscaras - http://www.html5rocks.com/en/tutorials/masking/adobe/

Suena terriblemente lento, jaja (principalmente la parte de CSS armarlo realmente) pero lo tendré en cuenta como último recurso. Gracias.
La textura de fondo GIF no se combina bien con la textura de fondo de la página
RespuestasAquíPolítica de privacidad1y, 0v