Websitey help please- GIF or PNG for rollover images?

Chat Forum

[closed]

Websitey help please- GIF or PNG for rollover images?

49 posts & 9 voices | Started 3 years ago by RudeBoy | Latest reply from trailbreak-martin

Tags:

No tags yet.

Pages: 12 Next »

RudeBoy - Blocked

Right. I need to make some buttons with rollover images. I was going to use JPEGs, but this makes the file size too big, and does not in any way always work smoothly.

So, should I use GIF or PNGs, for the image files? I have two conflicting onions, with two codey bods I do stuff with. I can't be bothered with their arguments, as neither are really coming up with any conclusive reasons why one or the other.

Enter the infinite wisdom of STW! Any thoughts? Any reason why I should use one, over the other?

With some of the buttons, there will be a little thumbnail, which when rolledover, will reveal a larger version of the pic in another window. Use the same type image file for those too?

Any advice appreciated as always.

Posted 3 years ago #
coffeeking - Member

I prefer PNGs because they support full colour (24 bit) rather than the gif which is limited to 256 colours, unless the image can be simplified to very few colours. PNG will generally maintain nice shading, whereas gifs can look shocking.

Posted 3 years ago #
simonfbarnes - Member

whatever you're using to create the JPGS may be limited if the files are too big - I usually only bother with gif or png if I need animation or transparency

Internet Exploder used to be poor with png but more recent versions should be fine

Posted 3 years ago #
Bez - Member

PNG is a better format - more flexible in terms of both technical ability and licensing.

GIF is better supported by older browsers.

JPEG is relatively inappropriate for most things you'd be mousing-over (ie button glyphs, text etc). For photos it's entirely appropriate (and GIF/PNG are entirely inappropriate).

Which you choose should be dictated primarily by (a) whether you're talking about photos (JPEG) or crisp graphical glyphs (GIF/PNG) and if the latter then (b) whether you need to support old browsers (GIF) or just new ones (PNG).

There is no great shame in using GIF if you don't have a burning need for the features that PNG gives you. There is, however, great shame in using JPEG where GIF/PNG is appropriate or vice versa.

Posted 3 years ago #
RudeBoy - Blocked

Been doing a bit of reading up; seems that GIF makes for smaller files, but PNG is the one for the future, and better for photos etc. GIF maybe better with older browsers, but PNG the new standard.

So a small button image could be a GIF, but a larger image a PNG? Or best not to mix file types?

[Edit] just read Bez' post. Now even more confuddled. So I shoon't use PNG for larger images then? Are PNG files bigger than JPEGs?

I've mainly used JPEGs for most image things, up until now.

Posted 3 years ago #
bluebird - Member

Is your audience likely to be using older browsers (IE6 or earlier) and not have the ability to update? If not then I'd recommend pngs for all your images.

png supports transparency which is very useful for buttons and irregular shaped images. If it's a squared up image then jpg is fine.

Posted 3 years ago #
simonfbarnes - Member

There is, however, great shame in using JPEG where GIF/PNG is appropriate or vice versa.

I don't see any shame, it's a trivial matter. Here is a small icon in JPG and GIF:
gif jpg
Similar appearance, similar file size.

Posted 3 years ago #
GrahamS - Member

PNG every time.

A properly compressed PNG is (almost) always smaller than GIF.
And the "older browser" argument is pretty bogus too - PNG has been supported in browsers since IE4 (circa 1997). The only "issue" with older version of IE was with support for alpha-channel transparency, which GIF doesn't have anyway.

JPG should only really be used for photos. It is pretty much never the best choice for buttons and other graphics.

Posted 3 years ago #
GrahamS - Member

Similar appearance, similar file size

Except the JPG one is all blurry and a different colour.

Posted 3 years ago #
simonfbarnes - Member

Except the JPG one is all blurry and a different colour.

yes, it's aliased - which has also caused the colour shift, but depending on usage that may be better. I'm just saying it's a trivial technical matter.

PNG has been supported in browsers since IE4 (circa 1997). The only "issue" with older version of IE was with support for alpha-channel transparency

is that all? I had to add a frig called "img { behavior: url("/pngbehavior.htc"); }
" to get them to render properly...

Posted 3 years ago #
RudeBoy - Blocked

Ok so: I've been playing around in PS, and it seems that a PNG-8 file is the smallest in size. There is no discernible difference in image quality, as the buttons are only small.

As for browser compatibility; one codey bod is saying 'always ensure compatibility with older browsers', whilst the other is claiming that anyone seriously interested in the site (creative/arty types) will have more up to date spec on their machines anyway. Both good arguments.

Posted 3 years ago #
simonfbarnes - Member

if you care about file size then SVG might be the way to go...

Posted 3 years ago #
GrahamS - Member

yes, it's aliased - which has also caused the colour shift, but depending on usage that may be better. I'm just saying it's a trivial technical matter.

Well I can't think of any situation where an off-colour blurry button is preferred over a nice clear one, but YMMV.

Incidentally, here is the same graphic as a 266 byte PNG: - it would probably go even smaller, but I don't have OptiPNG or pngcrush handy on this PC.

is that all? I had to add a frig called "img { behavior: url("/pngbehavior.htc"); } " to get them to render properly...

As I said, that is only required if you need alpha-channel transparency, which neither JPG nor GIF support (and you wouldn't need for this image).

Posted 3 years ago #
RudeBoy - Blocked

Looks like I'll go with PNGs, for the buttons/rollovers, and JPEGs for the larger images. The button/rollover images are photos, but are so small, that it does not in any way matter what they are, to be honest.

JPEG better for bigger pics, because smaller file size than PNG, or so Photoshop reckons...

Posted 3 years ago #
Bez - Member

yes, it's aliased - which has also caused the colour shift

No. You misunderstand aliasing. The PNG one is aliased. The JPEG is just the same image with compression artifacts.

Your example only shows a minor difference because it's a tiny image and the compression is probably moderate. The differences in the underlying formats and image concepts are not trivial, they are important.

It's the misunderstanding of what's going on that should cause the shame

just read Bez' post. Now even more confuddled. So I shoon't use PNG for larger images then? Are PNG files bigger than JPEGs?

I didn't mention image size. It's not really an important aspect. The important matter is the content of the image. JPEG is designed to compress images with fairly high-frequency tonal and chromatic variation, like photos, without too much in the way of noticeable artifacting (when compressed, it is a 'lossy' format - what you get out isn't what you put in). PNGs and GIFs are designed to be able to handle sharp edges whilst still compressing - they use lossless compression, ie what you get out is what you put in - but they're relatively inefficient at encoding less 'sanitised' stuff like photos.

Posted 3 years ago #
GrahamS - Member

if you care about file size then SVG might be the way to go...

Not if you're genuinely worried about browser support.

Posted 3 years ago #
GrahamS - Member

RudeBoy: take the files that Photoshop produces and stick em through: http://tools.dynamicdrive.com/imageoptimizer/index.php

Or better, download OptiPNG and use that. Historically Photoshop hasn't been very good at optimising PNG files (which is one of the reasons that people don't realise just how good they are).

Posted 3 years ago #
tomdebruin - ex-web monkey

'always ensure compatibility with older browsers'
- graceful degradation is the key. Don't cut the user of a lesser browser out all together, just give them a slightly lesser experience. And don't expect a site to look (and perform) the same in every browser.

You wouldn't have a shop and say everyone with brown hair is not allowed in.

http://boagworld.com/design/a-demonstration-of-graded-browser-support explores the idea nicely.

Posted 3 years ago #
Bez - Member

As for browser compatibility; one codey bod is saying 'always ensure compatibility with older browsers', whilst the other is claiming that anyone seriously interested in the site (creative/arty types) will have more up to date spec on their machines anyway. Both good arguments.

Depends where they're browsing from. There's a hell of a lot of corporate specs which use IE6. At the same time, there's a rapidly growing momentum from the web community to drop support for that browser.

That one's the only real question mark. Anything older than that is dead meat and anything newer is a going concern. Either way, as Graham says, unless you're using alpha channels it doesn't affect your image format decisions, just how much effort you put into making your CSS and JS work with IE6.

Posted 3 years ago #
Bez - Member

You wouldn't have a shop and say everyone with brown hair is not allowed in.

Yes, but then hair colour's not a simple choice, whereas a browser is. The world moves on.

Posted 3 years ago #
GaryLake - Member

If's purely graphical a proper 'saved for web' gif will be smallest in file size and crisp. PNG if I need the alpha transparency or a gif's 256 palette won't do (you'll be surprised what a photoshop optimized palette can cope with mind).

Jpegs are for photos.

Posted 3 years ago #
GaryLake - Member

Just re-read the comments about re optimizing pngs with that online tool - jesus, another step I'd need to add to an otherwise bloated process :'(

Posted 3 years ago #
tomdebruin - ex-web monkey

Yes, but then hair colour's not a simple choice, whereas a browser is. The world moves on.

To you maybe. But there are many people out there who don't even understand what a web browser is. The internet to them is the 'E' on their desktop. They don't download updates because they've been told to 'always say no' and IE7 has only just become a critical update.

So, it depends who your market is, but I believe that a website should not look like something is obviously broken in any browser.

Posted 3 years ago #
tomdebruin - ex-web monkey

...that last comment will probably come back to haunt me

Posted 3 years ago #
Bez - Member

To you maybe. But there are many people out there who don't even understand what a web browser is. The internet to them is the 'E' on their desktop.

Absolutely.

And these are the people who keep the browser usage figures the way they are because stuff still works for them, because people make stuff to support the browser figures, because people keep using old browsers, because stuff still works for them, because...

When things start breaking, they'll upgrade.

All that's needed is a clear "Hey, you're using a browser that's 8 years old - our site and many others will work better if you upgrade it. Here's a link to a newer version" slapped at the top of every page on the site.

The sooner we can stop the pain of writing CSS/JS for IE6 the better. Sadly I have my hands tied because of client constraints, but for the Internet as a whole I can't see an argument for not trying to coax the people you refer to into either being a little more aware of their browser or actually upgrading it.

I mean, they all understood to go and buy a CD player when some albums started not to be available on 45s, so it's not an impossible task to get them to behave the same with browsers.

Posted 3 years ago #
GrahamS - Member

a proper 'saved for web' gif will be smallest in file size and crisp

Nope. PNG will be smaller 99% of the time.

Just re-read the comments about re optimizing pngs with that online tool - jesus, another step I'd need to add to an otherwise bloated process

Not really. A decent editor will make a pretty good job of optimising PNGs. (Not sure if the latest Photoshop has improved this yet, but I know there are plug-ins for it).

Or you can just go with sub-optimal and then optimise them en masse with OptiPNG once you finalise your site design. Not very hard and could pay for itself in bandwidth savings.

Posted 3 years ago #
tomdebruin - ex-web monkey

All that's needed is a clear "Hey, you're using a browser that's 8 years old - our site and many others will work better if you upgrade it. Here's a link to a newer version" slapped at the top of every page on the site.

Good points. I agree in theory, and I would like to see that implemented. But if I rely on income from my site it is not my place to start advertising the fact that a user needs to upgrade their browser so they can support me. A few may do it, but those less confident computer users will go somewhere else.

I believe it's primarily Microsoft's responsibility to force IE6 out of the equation. The IE7 critical update is a very small step and requires so much more behind it.

Out of interest, do you place an 'upgrade your browser' message on client websites?

Posted 3 years ago #
Bez - Member

Out of interest, do you place an 'upgrade your browser' message on client websites?

I do internally-deployed webapps, not websites, so no - a 'please ask your multinational corporation to change its IT policy so I can have an easy life, kthxbai' message would probably be frowned upon

Posted 3 years ago #
GaryLake - Member

Graham, for the record, a completely randomly selected graphic from a current design, PS CS4 PNG was twice the size of the gifs.

So I guess the answer is no, it's not any better in Photoshop out of the box...

Not sure about bandwidth paying for itself though - we do pretty big sites but bandwidth is so cheap and so readily available that the only clients we have with bandwidth concerns are those serving masses of audio and video. At which point, worrying about saving kbs here and there on gifs and pngs is not worth worrying about.

(Screaming at clients for blowing through their bandwidth in a day by autoplaying a 9mb movie on the home page is another matter, no really!! lol)

Posted 3 years ago #
GrahamS - Member

graceful degradation is the key. Don't cut the user of a lesser browser out all together, just give them a slightly lesser experience. And don't expect a site to look (and perform) the same in every browser.

Like this Tom?

STW in MSIE4.01:

pic from http://browsershots.org/

Fair play though, it looked okay in IE5 which is quite an impressive feat.

Posted 3 years ago #
RudeBoy - Blocked

Has this turned into an argument? Excellent! Without me even instigating it for once!

Thanks for all yer input. interesting, some of it, but other stuff goes over my head. I just do the pretty pictures, others make them work!

Now tested in IE6, Safari and Firefox on Windoze, and Safari and FF on Mac. Working fine. Only annoying thing, is that FF likes to leave a little dotted line box round an image you've just clicked on. Dunno why. Mind, the rollovers aren't linked yet, so maybe that's why.

I'm assuming other browsers, like Opera and Google Chrome will be up to date re file types?

As for file size; the entire site will only be a few megs really, most images are only a few hundred k max. If there are some people still on dial up, **** 'em. Luddites1 (found out t'other day, a mate still has dial up, and is paying nearly as much as a BB package! Nutter)

My PS has enough tweakery for my liking, without needing to involve other tools. It's done the job, anyway.

Posted 3 years ago #
GrahamS - Member

GaryLake: fair enough, I guess actual byte file size isn't as important as it once was. I was more thinking more amateurish sites where bandwidth budget may be more limited or users want a good response time despite crap servers.

Posted 3 years ago #
simonfbarnes - Member

No. You misunderstand aliasing. The PNG one is aliased. The JPEG is just the same image with compression artifacts.

I'm interested in what you think the distinction is, as I think the terms to be equivalent ie aliasing causes artifacts

Posted 3 years ago #
trailbreak-martin - Member

No. You misunderstand aliasing. The PNG one is aliased. The JPEG is just the same image with compression artifacts.

I'm interested in what you think the distinction is, as I think the terms to be equivalent ie aliasing causes artifacts

Aliasing is the problem presented in trying to display non square, angled or shaped edges in a 'dot matrix' or pixel grid medium; you get a jagged effect on your edge. Anti aliasing is an optical trick to soften this effect, by grading the dots or pixels along this edge to 'soften' the aliasing and create a cleaner and more natural looking line.

Artefacting is the unwanted but unavoidable by-product of trading quality against file size in a lossy file format. It tends to present as a loss of consistency in areas of flat colour and a loss of clarity around 'edges' or sharp colour transitions.

On the small sample graphic you posted, the effects of the two would be coincidentally similar, but in general they each have quite different causes and effects.

Posted 3 years ago #
simonfbarnes - Member

I was thinking of aliasing in terms of undersampling error

Posted 3 years ago #

RSS feed for this topic

Pages: 12 Next »

Topic Closed

This topic has been closed to new replies.

Singletrack Mountain Bike Magazine

Chat Forum

Websitey help please- GIF or PNG for rollover images?

Topic Closed

Don't miss…

Singletrack

Website & Forums

Exits