Use of GIF images

[alienlinux]

I'm still not convinced that GIF is any use other than for animation though, it's use in the past i can understand, but other than the fact that PNG does not support animation and MNG hasn't really taken off (probably because gif is free now?), the only thing that still has me going the way of PNG is this.

extract from wiki - http://en.wikipedia.org/wiki/GIF#Uni...nt_enforcement
See 'Alternatives' section
PNG offers better compression and more features than GIF.
The format has replaced GIF in many instances where true-color imaging, alpha transparency and a lossless data format are required.
and this:
identical 8-bit (or lower) image data rendered in PNG and GIF formats should yield similar sizes.

is there really a need to use both GIF and PNG when we can simply adopt MNG!?

It seems to me that the way to go, for reasons discussed above, is with PNG, even if GIF is legal now, just because GIF is now free, all that does is give us a sigh of relief over the images we allready have.

I think that the only thing which needs to be addressed now is MNG.
Is MNG better than GIF89a's animation feature and why hasn't there been widespread adoption of it?

[MattEvans]

PNG transparency doesn't work well for me in a webpage context on Microsoft Internet Explorer <= 6; PNG background transparent images have a grey background instead (notably; my connection does funny compression things to all images; but it only seems to negatively affect IE). If that issue was fixed; I would certainly use PNG instead; it's a superior format. However; I still need to make pages work correctly and look correct in MY Internet Explorer 6; so I bite the bullet, turn dithering to max, and stick with websafe-pallete GIF for now.

On the web these days; formats are only widely adopted by site developers if they are adopted by ALL relevant browser developers, and correctly...

[alienlinux]

thats coz IE <6 doesn't support it, and it is solved in newer IE

[MattEvans]

Indeed; but until it isn't; IE Version 6 is a big target platform, and I can't tell any client to upgrade their browser and expect to keep them. I wish I could! I'd get the whole world on Opera if I had the chance.

I'm sure this 'problem' will fix itself soon enough; but I imagine there'll still be die hard browsers (in context of users) and designers who stick with GIF until IE6 is long dead and buried.

I tend to follow this policy:

- PNG for background images; or images with no transparency that shouldn't be lossy compressed.
- GIF for anything that should have a transparent background; ( unless I know that it's only going to be on one color background and where that one color background is a part of a PNG; in which case, I'd use PNG with a fake background ), and in the rare case where I'd use an animation.
- JPG for anything else.

[alienlinux]

i had assumed people would stay up to date in case any security issues had been resolved. but then i realised this is microsoft we're talking about. and security and microsoft don't exactly make sense in the same sentence do they, well not without an army of resource hogging applications standing guard at least hehe

funny how the biggest browser out there is about the only one who havn't remedied this yet. crazy

what do you think about these MNG's? do you know if any IE's can support it? i don't think i've even seen an MNG yet.

[Fungus1487]

i cant say ive seen an MNG but if you wish to achieve animation why not just use flash ? i know it requires users to have aplugin, but nowadays id like to bet a good 90% of users have flash installed.

[MattEvans]

i don't have flash (on my favorite browser, out of choice), besides, using flash to replace simple animated gifs is mega-overkill, and flash doesn't work well atall with CSS (each 'movie' has to be hard-coded into individual pages)..

SVG looks promising if it's taken up by all relevant parties... it's not only pretty, static, scalable vector images; it can be manipulated with client-side script, it could feasibly be controlled on a very fine basis using a CSS -type technology; and it's an open, W3C, standard, unlike flash.

[roryt]

Flash will never be the answer to replace gifs in the animated sense. It is just moving further and further away from it.

PNGs on the other hand are really good but IE6 is still a huge part of the web user population.

Gif is gonna be here to stay for the next year or 2. Probably until IE8 ;) .

[Fungus1487]

im not saying it is right. but flash has become easier and easier to implement with each subsequent release adding more features and in the world of web2.0 pages higher bandwidth and resources, the overkill of flash or possibly other similiar animation techniques will outway the negative affects.

[MattEvans]

It's not so much 'bandwidth overkill', Flash is good in terms of filesize; often smaller than bitmaps ( including gifs ) and even movie formats; considering images in Flash are usually vectors and fills, and SWFs are highly compressed.

The only real problem is forced separation from the rest of the ( HTML ) page... By design; SWFs aren't images, and have to be embedded as objects directly into HTM or viewed standalone; thus they can't replace image formats in all contexts ( i.e. CSS ). That 'issue' will likely never be resolved; because it isn't what SWF sets out to be.

The tag in HTML can always be replaced with some block level element with a background image; meaning that site GUIs that make heavy use of images can be smaller and neater in markup, and under CSS control. This isn't possible with SWF objects. They have to be on each every page and each one has a reasonably sized lump of <?delegate> markup. That's a structural drawback in my eyes that can't be fixed; however fast data is sent.

[roryt]

In my opinion the web needs an image format that can be animated to an extent because it is as MattEvans said easier to implement and I what i was trying to say before was that Flash is just going to get more and more complex which is just going to make the file sizes bigger and bigger.

I think we just need a simple frame by frame animated image format for now... personally I think gif does the job pretty well. And as i said before PNG is no replacement.

[alienlinux]

agreed, flash is proprietary anyway so cannot really be an option. i'd like to hear more about mng as nobody has covered this yet. i feel that there would maybe be advantages/disadvantages to using them and having the animations seperate from images like png/mng rather than bundled into one.

Also if I may add another idea to the soup, I read recently that you can use png or other image formats in CSS to create animated css and i would love to hear more about this too.

Thanks for all the responses so far :D

[roryt]

Do you mean like rollover animation? I suppose you could use gifs on hover which could create an animted effect. Other than that i am not sure... but very interested. Maybe you could link us to the article?

[Fungus1487]

im certain that animating an image in css would require some scripting and as far as im aware css contains no scripting?

[roryt]

yeh... well You could make it look like its animated but it wouldn't be css doing anything more than just swapping one image with another

[alienlinux]

thats exactly what it was roryt. i'll paste what code i have to demonstate but it doesn't work. then i'll google and see if i can find the original page

<body>
<a href="images/banner/layer12.png"><b>anim logo</b></a>
      <table width="75%" border="1" align="center">
        <tr> 
          <td><div align="center"><b>Frame&nbsp;1</b></div></td>
          <td><div align="center"><b>Frame&nbsp;2</b></div></td>
          <td><div align="center"><b>Frame&nbsp;3</b></div></td>
          <td><div align="center"><b>Frame&nbsp;4</b></div></td>
          <td><div align="center"><b>Frame&nbsp;5 </b></div></td>
          <td><div align="center"><b>Frame&nbsp;6 </b></div></td>
          <td><div align="center"><b>Frame&nbsp;7 </b></div></td>
          <td><div align="center"><b>Frame&nbsp;8 </b></div></td>
        </tr>
        <tr> 
          <td><img src="images/banner/layer1.png" width="640" height="58" alt=""/></td>
          <td><img src="images/banner/layer2.png" width="640" height="58" alt=""/></td>
          <td><img src="images/banner/layer3.png" width="640" height="58" alt=""/></td>
          <td><img src="images/banner/layer4.png" width="640" height="58" alt=""/></td>
          <td><img src="images/banner/layer5.png" width="640" height="58" alt=""/></td>
          <td><img src="images/banner/layer6.png" width="640" height="58" alt=""/></td>
          <td><img src="images/banner/layer7.png" width="640" height="93" alt=""/></td>
          <td><img src="images/banner/layer8.png" width="640" height="95" alt=""/></td>
          <td><img src="images/banner/layer9.png" width="640" height="95" alt=""/></td>
          <td><img src="images/banner/layer10.png" width="640" height="58" alt=""/></td>
          <td><img src="images/banner/layer11.png" width="640" height="58" alt=""/></td>
        </tr>
      </table>
</body>

no idea really what i am doing here, my css is pretty basic hehe

[roryt]

Good luck with the googling because that code doesn't show anything really.

[alienlinux]

can't find the original page now but basically this but it wasn't a mouseover event, it ran all the time

http://www.cssplay.co.uk/menu/superanimation.html

[Fungus1487]

im pretty impressed that works but lets be serious who on gods green earth would use that technique ?

[alienlinux]

lol i dunno, again i expect it has its advantages/disadvantages. i noticed its use while groping google more in the sense of on-hover animation of link images. which were really cool.
http://www.webreference.com/programming/css_animation/index.html
this is the original one i believe :) as you can see it runs without doing anything.
after much googling it seems that a lot of people actually like the flip book idea and think its funny.
anyway that just leaves MNG because while animated CSS is cute and fun, it's no fun to make. anyone ever made an MNG? i'm gonna rip out gimp and rtfm and see if i can come up with something.