GIF-Hintergrundtextur fügt sich nicht gut in die Hintergrundtextur der Seite ein

Auf meiner Portfolioseite unter http://samnorris.co.nz habe ich ein animiertes .gif-Bild – den Astronauten mit der Überschrift darunter: „Protecting the galaxy one pixel at a time“ …

Ich bin mir nicht sicher, ob es nur an mir und meinem Monitor liegt oder nicht, und es ist nur sehr, sehr subtil, aber ich kann feststellen, dass die Hintergrundtextur nicht sehr gut mit der Hintergrundtextur auf der Seite verschmilzt (die dieselbe Textur verwendet) und Bei einigen Auflösungen und insbesondere beim Scrollen kann ich einen sichtbaren quadratischen "Halo" um das Bild herum sehen, als ob die Textur auf dem GIF etwas heller wäre als auf der Seite oder so.

Ich habe verschiedene Photoshop-Exporteinstellungen ausprobiert, darunter Perzeptiv, Adaptiv und Selektiv sowie Qualität: bilinear, bikubisch usw. aber nichts, was ich bisher versucht habe, scheint es zu lösen.

Übrigens habe ich zuvor eine andere Hintergrundtextur verwendet, die nicht unter dem Problem zu leiden schien, also liegt das Problem vielleicht nur an der (Komplexität?) der Textur selbst? oder kann ich irgendwie sicherstellen, dass die Hintergrundtextur in der .gif-Datei perfekt zum Hintergrund der Seiten passt?

Hier ist das eigentliche Bild selbst:

Geben Sie hier die Bildbeschreibung ein

und die auf der Seite verwendete Hintergrundtextur, falls es überhaupt hilft:

Geben Sie hier die Bildbeschreibung ein

Es scheint nur ein Problem mit dem GIF und keinem der anderen JPEGs oder PNGs auf derselben Seite / demselben Abschnitt zu geben, die auch dieselbe Hintergrundtextur verwenden.

Alles, was ich bisher weiß, ist, dass Ihre Website für immer lädt, zumindest auf einem iPad. Ich hatte keine Geduld zu warten, bis die Seite geladen war.
Ok, jetzt, wo ich es auf einem richtigen Computer ausprobieren konnte ... (immer noch keine superschnelle Ladeseite, aber etwa 2-mal schneller als auf dem iPad). Das Anpassen der Textur ist viel zu viel Mühe, soweit es mich persönlich betrifft. Ich würde wahrscheinlich zuerst versuchen, wie das im gif-Format ohne den Hintergrund funktionieren würde. Wenn das nicht gut aussieht, würde ich einfach ein PNG ohne Hintergrund verwenden ... und wenn ich wirklich diese Animation haben wollte, die nur auf dem Helm zu sein scheint, würde ich das Helm-Gif auf das PNG legen als separates Bild.
Vielleicht nicht mit diesem, aber in einigen Fällen würde ich auch erwägen, PNG-Dateien mit Javascript zu animieren.
Schade um die Ladegeschwindigkeit auf dem iPad, obwohl ich vielleicht hätte erwähnen sollen, dass die Seite noch nicht fertig ist und noch weiter optimiert werden muss ect. Obwohl ich sage, dass es nicht schrecklich unoptimiert sein sollte, also trotzdem keine großartigen Neuigkeiten ... Ich werde sehen, was ich tun kann, um es weiter zu optimieren. Danke auch für die anderen Infos.

Antworten (2)

Der "quadratische" Halo ist einfach die Rasterdarstellung der .GIF-Datei. Die Transparenz von .GIF-Dateien ist binär ausgelegt. Wenn Sie also nach einem reibungslosen Alphakanal suchen, versuchen Sie es stattdessen mit dem 24-Bit-PNG-Format. Keine Animation, aber das ist der Kompromiss.

Versuchen Sie alternativ, den binären Transparenzstil der .GIF-Datei in den Stil Ihrer Grafik zu integrieren. Photoshop bietet unterhaltsame Optionen zum Übersetzen von verblassendem Alpha (auch bekannt als Transparenz) in verschiedene „Diffusionstypen“ während des Speicherns für das Web.

Es gibt ein paar Einstellungen, die ich noch nicht ausprobiert habe. Ich habe nur nachgesehen, ob jemand etwas Bestimmtes weiß - und Diffusion ist eine Voreinstellung, die ich noch nicht ausprobiert habe, also werde ich es versuchen (obwohl es die Dateigröße ziemlich groß)
.GIF ist eine musterbasierte Codierung, sodass es durch die Rauschdiffusion angepisst wird. Versuchen Sie "Musterdiffusion" für etwas, das meiner Meinung nach sowohl vintage/8bit-sexy als auch praktisch ist, weil es gut komprimiert.

Eine andere Möglichkeit: Erstellen Sie 3 Bilder und verwenden Sie sie wie eine Video-Postproduktion

  • zuerst - statisches png,
  • Zweitens - GIF mit nur animiertem Bereich
  • drittes - png mit Maske des animierten Bereichs

Beschreibung der Masken - http://www.html5rocks.com/en/tutorials/masking/adobe/

Klingt schrecklich zeitaufwändig, haha ​​(hauptsächlich der CSS-Teil, der es zusammensetzt), aber ich werde das als letzten Ausweg im Hinterkopf behalten. Danke.
GIF-Hintergrundtextur fügt sich nicht gut in die Hintergrundtextur der Seite ein
AntwortenHierDatenschutz-Bestimmungen1y, 0v