Viewing 40 posts - 1 through 40 (of 50 total)
  • Websitey help please- GIF or PNG for rollover images?
  • RudeBoy
    Free Member

    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.

    coffeeking
    Free 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.

    simonfbarnes
    Free 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

    Fresh Goods Friday 696: The Middling Edition

    Fresh Goods Friday 696: The Middlin...
    Latest Singletrack Videos
    Bez
    Full 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.

    RudeBoy
    Free Member

    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.

    bluebird
    Free 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.

    simonfbarnes
    Free 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.

    GrahamS
    Full 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.

    GrahamS
    Full Member

    Similar appearance, similar file size

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

    simonfbarnes
    Free 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…

    RudeBoy
    Free Member

    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.

    simonfbarnes
    Free Member

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

    GrahamS
    Full 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).

    RudeBoy
    Free Member

    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…

    Bez
    Full 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.

    GrahamS
    Full Member

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

    Not if you’re genuinely worried about browser support.

    GrahamS
    Full 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).

    tomdebruin
    Free Member

    ‘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.

    Bez
    Full 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.

    Bez
    Full 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.

    GaryLake
    Free 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.

    GaryLake
    Free 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 :'(

    tomdebruin
    Free Member

    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.

    tomdebruin
    Free Member

    …that last comment will probably come back to haunt me 🙂

    Bez
    Full 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.

    GrahamS
    Full 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.

    tomdebruin
    Free Member

    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?

    Bez
    Full 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 🙂

    GaryLake
    Free 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)

    GrahamS
    Full 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.

    RudeBoy
    Free Member

    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.

    GrahamS
    Full 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.

    simonfbarnes
    Free 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

    trailbreak-martin
    Free 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.

    simonfbarnes
    Free Member

    I was thinking of aliasing in terms of undersampling error

    trailbreak-martin
    Free Member

    You mean in terms of applying a limited colour palette (say 32 instead of 256)?

    Decreasing your colour palette basically just gives your graphics tool less to work with in anti aliasing your image, by denying it the scope to include those transitional colours. That’s a different thing to compression artefacting though, which will tend to ‘muddy’ your image, rather than hardening and sharpening it.

    Bez
    Full Member

    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.

    The dotted box indicates focus. It’s very important for many users, such as those who can’t use a mouse. Don’t be tempted to get rid of it.

    Hello Martin, long time no see 🙂

    GrahamS
    Full Member

    Actually I think that simon is right, albeit that it’s not usually referred to as aliasing in this context.

    I think the blurring is an artefact caused because the frequency of the sampling used by the JPG compression is lower than the frequency of the original image.

    In other words if the JPG compression squares were small enough (i.e. high frequency enough) then the blurring would disappear – but the file size would increase.

    RudeBoy
    Free Member

    The dotted box indicates focus. It’s very important for many users, such as those who can’t use a mouse. Don’t be tempted to get rid of it.

    Oh right, I see. Like if you’re using a touch-screen or something? Or navigating using arrow keys? I woon’t know how to get rid of it anyway, tbh.

    Rollovers are working beautifully. Had a bit of mild panic, as I’d forgotten the address of the site, so coon’t access it, but all calmed down now. Just got to work out why one of the pages won’t align to centre, only in IE Windoze…

    GrahamS
    Full Member

    RudeBoy: you can get rid of the focus box by doing something like:

    a.rudeboyimagelink {
    outline: none;
    }

    in your CSS.

Viewing 40 posts - 1 through 40 (of 50 total)

The topic ‘Websitey help please- GIF or PNG for rollover images?’ is closed to new replies.

New deal added to Members Discounts