0

On my portfolio site at http://samnorris.co.nz I have an animated .gif image - the astronaut with the heading underneath: "Protecting the galaxy one pixel at a time"...

I'm not sure if it's just me and my monitor or not, and it is only very, very subtle but I can notice the background texture is not blending very well to the background texture on the page (which uses the same texture) and at some resolutions, and especially while scrolling I can see a visible square-like 'halo' around the image, as if the texture on the gif is slightly lighter than on the page or something.

I have tried various Photoshop export settings including Perceptual, Adaptive and Selective and quality: bilinear, bicubic ect. but nothing I have tried so far seems to solve it.

Incidentally, I was using a different background texture before which didn't seem to suffer from the problem, so maybe the problem just lies with the (complexity of?) the texture itself? or is there some way I can make sure the background texture in the .gif blends perfectly to the pages' background?

Here is the actual image itself:

enter image description here

and the background texture used on the page, if it helps at all:

enter image description here

It only seems to be a problem with the GIF and none of the other JPEG's or PNG's on the same page/section which use the same background texture either.

|improve this question
  • All I know so far is that your site loads forever, at least on an ipad. I didn't have patience to wait for the site to load. – Joonas May 21 '14 at 5:38
  • Ok, now that I've been able to check it out on a proper computer... (still not super fast loading page, but like 2 times faster than on ipad). Matching texture is way too much trouble as far as I'm personally concerned. I would probably first try how this would work out in gif format without the background. If that doesn't look good, I'd just use a png without the background... and if I rreaaally wanted that animation, which seems to be on the helmet only, I'd place the helmet gif on top of the png as a separate img. – Joonas May 21 '14 at 6:56
  • Maybe not with this one, but in some instances I'd also consider animating png files with javascript. – Joonas May 21 '14 at 6:56
  • That's a shame to hear about the loading speed on ipad, although perhaps I should have mentioned that the site is not yet complete and still needs further optimization ect. Although in saying that it shouldn't be terribly unoptimized, so not great news nonetheless.... I'll see what I can do to optimize it further. Thanks for the other information too. – user2958431 May 21 '14 at 12:13
0

The "square-like" halo is simply the .GIF file's raster showing. The transparency of .GIF files is binary by design. Therefore, if you're looking for a smooth alpha channel try 24-bit .PNG format instead. No animation, but that's the trade-off.

Alternately, try incorporating the .GIF's binary transparency style into the style of your graphic. Photoshop has fun options for translating fading alpha (a.k.a. transparency) into different "diffusion types" during Save for Web.

|improve this answer
  • There are a few settings I have not tried yet actually, I was just looking to see if anyone knew of anything specific - and Diffusion is one preset I have not yet tried, so I'll give that a go (although it bumps up the filesize quite a bit) – user2958431 May 21 '14 at 12:09
  • .GIF is pattern-based encoding so it gets pissed off by noise diffusion. Try "pattern diffusion" for something that is IMO both vintage/8bit-sexy and practical because it compresses well. – Charney Kaye May 22 '14 at 15:26
0

Another way: create 3 images and use it like it's video postproduction

  • first - static png,
  • second - gif with only animated area
  • third - png with mask of animated area

Description of masks - http://www.html5rocks.com/en/tutorials/masking/adobe/

|improve this answer
  • Sounds awfully time consuming, haha (mostly the CSS part putting it together really) but I'll keep that in mind as a last resort. Thanks. – user2958431 May 21 '14 at 12:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.