Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

.gif or .png which do you use?


lindsayanng

Recommended Posts

I'm just curious because the other night when i was working on my navigation buttons, i made then all as .gif files with no dissolution, ect and a transparent backgroupnd, but when i uploaded them onto my site and they were put over an orange bar, they looked AWFUL!! They had a while pixelated halo around them.. So i re-saved them to .png format and they look great.. Now, i have not used many .png files unless i use fireworks, but i generally like illustrator and they suggest .gif for a web optimized file type.. ANYWAYS, i was wondering if the download time or file size was much different with a .png vs. a .gif and what the ACTUAL difference are.

 

I am going to search the net for an answer, but i would like to hear what others have to say with their experience in using these two file types.

A great place for newbies to start

Road Map to oscommerce File Structure

DO NOT PM ME FOR HELP. My time is valuable, unless i ask you to PM me, please dont. You will get better help if you post publicly. I am not as good at this as you think anyways!

 

HOWEVER, you can visit my blog (go to my profile to see it) and post a question there, i will find time to get back and answer you

 

Proud Memeber of the CODE BREAKERS CLUB!!

Link to comment
Share on other sites

The advantage of .gif & .png is transparency & .png has better resolutions but bigger file sizes. If I want the higher resolution I`ll use jpg where possible as you get the resolution with lower sizes, but no transparency.

 

So I don`t think there's any perfect answer, just use what still looks good for the lowest size.

Sam

 

Remember, What you think I ment may not be what I thought I ment when I said it.

 

Contributions:

 

Auto Backup your Database, Easy way

 

Multi Images with Fancy Pop-ups, Easy way

 

Products in columns with multi buy etc etc

 

Disable any Category or Product, Easy way

 

Secure & Improve your account pages et al.

Link to comment
Share on other sites

gotcha.. the .gif was working just fine until i got it onto a dark background.. And then i needed the png. I found that png is not supported by all browsers, but they are more and more supported as time goes on.. I like the fact that you can play with the transparency a lot more than with a gof too.. I just wanted to make sure i wasnt going to overload anyone's browser with a load of huge files.. My cpu is really fast, so its hard for me to tell.

A great place for newbies to start

Road Map to oscommerce File Structure

DO NOT PM ME FOR HELP. My time is valuable, unless i ask you to PM me, please dont. You will get better help if you post publicly. I am not as good at this as you think anyways!

 

HOWEVER, you can visit my blog (go to my profile to see it) and post a question there, i will find time to get back and answer you

 

Proud Memeber of the CODE BREAKERS CLUB!!

Link to comment
Share on other sites

I found that png is not supported by all browsers, but they are more and more supported as time goes on

 

You're forgetting about IE, which is still the most widely used browser available today - and it doesn't support png transparency.

 

Vger

Link to comment
Share on other sites

I dont think that is ENTIRELY true. I have ONLY IE on my cpu at work and i opened my page in there today and my png files looked fine. I think much much older IE versions do not, but the newest ones definitely do..

A great place for newbies to start

Road Map to oscommerce File Structure

DO NOT PM ME FOR HELP. My time is valuable, unless i ask you to PM me, please dont. You will get better help if you post publicly. I am not as good at this as you think anyways!

 

HOWEVER, you can visit my blog (go to my profile to see it) and post a question there, i will find time to get back and answer you

 

Proud Memeber of the CODE BREAKERS CLUB!!

Link to comment
Share on other sites

Microsoft says it does but it wouldn't be the first time some thing of theres did not work

<H1 style="MARGIN: 12pt 0in 6pt">Improved Platform and Manageability</H1>Web developers have expressed frustration with peculiarities in the behavior of Internet Explorer 6, especially in the areas of standards support. Application developers also want to take advantage of new Web capabilities but have been required to develop everything from the ground up to do so. And network administrators are always looking for better ways to manage large numbers of browser users.

 

 

 

With Internet Explorer 7, the browser architecture has been re-engineered to address compatibility and support a variety of rich end-user experiences. In early betas Microsoft demonstrated improved support for CSS as well as transparent PNG support. The latest release goes even further; Internet Explorer 7 is even more standards-compliant and makes Web and application development even easier. Yet, with all this new functionality, Internet Explorer 7 can continue to be centrally managed via Group Policy. The final release will include a new version of the Internet Explorer Administration Kit to enable more deployment options.

 

<H2 style="MARGIN: 12pt 0in 3pt">Improved CSS Support</H2>CSS is a widely used standard for creating Web pages. Internet Explorer 7 prioritizes compliance to CSS standards by first implementing the features that developers have said are most important to them. As a result, in Internet Explorer 7, Microsoft has addressed some of the major inconsistencies that can cause Web developers problems producing rich, interactive Web pages. This includes fixing some positioning and layout issues related to the way Internet Explorer 6 handles <div> tags. (More information about these bugs can be found online at http://www.positioniseverything.net/explorer/peekaboo.html and http://www.positioniseverything.net/explorer/guillotine.html). Internet Explorer 7 will be shipped with improved CSS 2.1 support. Specific problems addressed by Internet Explorer 7 include the following:

 

· Ability to hover on all elements

 

· Fixed positioning

 

· CSS 2 selectors

 

· HTML 4.01 improvements

 

· Windowless Select Element

 

<H2 style="MARGIN: 12pt 0in 3pt">Transparent PNG Support</H2>Internet Explorer 7 also adds support for alpha-channel transparent PNGs. A PNG is a typographical file format that may include an indication of the exact degree of transparency a picture should have through a measurement called the alpha channel. With an alpha channel, designers can use special effects that were not previously supported. For instance, they can create Web page images that have shadows but do not obscure the background image behind them.

 

<H1 style="MARGIN: 12pt 0in 6pt">Improved Platform and Manageability</H1>Web developers have expressed frustration with peculiarities in the behavior of Internet Explorer 6, especially in the areas of standards support. Application developers also want to take advantage of new Web capabilities but have been required to develop everything from the ground up to do so. And network administrators are always looking for better ways to manage large numbers of browser users.

 

 

 

With Internet Explorer 7, the browser architecture has been re-engineered to address compatibility and support a variety of rich end-user experiences. In early betas Microsoft demonstrated improved support for CSS as well as transparent PNG support. The latest release goes even further; Internet Explorer 7 is even more standards-compliant and makes Web and application development even easier. Yet, with all this new functionality, Internet Explorer 7 can continue to be centrally managed via Group Policy. The final release will include a new version of the Internet Explorer Administration Kit to enable more deployment options.

 

<H2 style="MARGIN: 12pt 0in 3pt">Improved CSS Support</H2>CSS is a widely used standard for creating Web pages. Internet Explorer 7 prioritizes compliance to CSS standards by first implementing the features that developers have said are most important to them. As a result, in Internet Explorer 7, Microsoft has addressed some of the major inconsistencies that can cause Web developers problems producing rich, interactive Web pages. This includes fixing some positioning and layout issues related to the way Internet Explorer 6 handles <div> tags. (More information about these bugs can be found online at http://www.positioniseverything.net/explorer/peekaboo.html and http://www.positioniseverything.net/explorer/guillotine.html). Internet Explorer 7 will be shipped with improved CSS 2.1 support. Specific problems addressed by Internet Explorer 7 include the following:

 

· Ability to hover on all elements

 

· Fixed positioning

 

· CSS 2 selectors

 

· HTML 4.01 improvements

 

· Windowless Select Element

 

<H2 style="MARGIN: 12pt 0in 3pt"><A name=_Toc125520806>Transparent PNG Support</H2>Internet Explorer 7 also adds support for alpha-channel transparent PNGs. A PNG is a typographical file format that may include an indication of the exact degree of transparency a picture should have through a measurement called the alpha channel. With an alpha channel, designers can use special effects that were not previously supported. For instance, they can create Web page images that have shadows but do not obscure the background image behind them.

Link to comment
Share on other sites

  • 2 weeks later...
They had a while pixelated halo around them..

 

Try this trick next time you want to create a transparent GIF.

 

Use a background color in the image as close to or the same as the colored background the image will be displayed against.

 

When you are done creating the image, flatten (merge) all the layers.

 

Then make the background color transparent (play with the dither).

 

;)

- :: Jim :: -

- My Toolbox ~ Adobe Web Bundle, XAMPP & WinMerge | Install ~ osC v2.3.3.4 -

Link to comment
Share on other sites

neither, i use jpg because it allows for smoother compression.

for transparency though, gif all the way.

 

had nothing but problems with IE and .png

 

 

lindsayanng, if it is pixelated only around the edges you used the wrong color for matte.

not sure what graphics program you use, but on photoshop 7 there is a "matte" option under "Save for Web" that allows you to choose the main color of the background you'll be placing the image over. the default is white, so if your background is black and you don't choose a matte, your button will have pixely white edges around it. gotta select the black matte for it to look good.

Link to comment
Share on other sites

I wouldn't call JPEG compression "smoother" (in general)... it's "lossy" compression and therefore tends to end up with a lot of artifacts in the image. You'll see this in fringes or halos around abrupt changes in color, such as diagrams and text. For photographs, it's usually satisfactory. Just remember not to keep saving changes to a JPEG file, or you'll notice the image quality deteriorating over time.

 

Side note: I once knew a guy who was complaining about "bit rot" in his JPEG images. Every time he loaded his display program, the quality was poorer. It turns out that he was saving the image every time he exited the program!

 

Up through (and including) IE6, MS had very poor support for PNG. IE6 (the most common browser in the world*) really doesn't handle PNG transparency at all. If you want transparency around something, you'll need to use GIF until everything earlier than IE7 is dead and forgotten.

 

* which is like saying "the cockroach is the most common insect in the world"!

 

GIF files have only 100% "on" or "off" transparency -- no alpha channel. Image editing programs (Photoshop, GIMP) tend to do "anti-aliasing" by "tapering off" from one color to another, even on horizontal or vertical runs. Blindly removing the background color (making it the one transparent color) usually leaves a fringe of transitional colored pixels at the edge of the non-transparent image. You'll have to clean it up by hand (a tedious process). As mentioned before, choosing a background as close as possible to the final page background may make the effect less apparent. If your editor will let you use a color as close as possible to the edge of your button outline (or whatever), while still letting you select that color for conversion to transparency, that might work too (I haven't tried it). In that case, the transitional pixels may be close enough to the button border (outline) color to fool the eye.

Link to comment
Share on other sites

thats guys. i will have to mess with the matte a little more on my .gif files. I guess since i only have firefox and IE7, i dont notice the little errors on everything. it would def not be difficult to re save them as gif files instead of png.

 

Basically right now the ONLY png i have is the account info nav. bar when you sign in to your account. I'm sure i can change it.

 

I make ALL of my stuff in Adobe Illustrator, so i have a LOT of control with everything, i'm just not really good at messing with the transparency and stuff. Choosing a color that is CLOSE ot the background is also pretty easy since i know which color number/code i am using, and in illustrator, I can choose colors by their code.

 

I will get messing with them and see where i end up. THANKS SO MUCH FOR ALL TEH INFO.

 

I really with IE will just catch up so everyone will be on teh same page ..

A great place for newbies to start

Road Map to oscommerce File Structure

DO NOT PM ME FOR HELP. My time is valuable, unless i ask you to PM me, please dont. You will get better help if you post publicly. I am not as good at this as you think anyways!

 

HOWEVER, you can visit my blog (go to my profile to see it) and post a question there, i will find time to get back and answer you

 

Proud Memeber of the CODE BREAKERS CLUB!!

Link to comment
Share on other sites

thats guys. i will have to mess with the matte a little more on my .gif files. I guess since i only have firefox and IE7, i dont notice the little errors on everything. it would def not be difficult to re save them as gif files instead of png.

 

Basically right now the ONLY png i have is the account info nav. bar when you sign in to your account. I'm sure i can change it.

 

I make ALL of my stuff in Adobe Illustrator, so i have a LOT of control with everything, i'm just not really good at messing with the transparency and stuff. Choosing a color that is CLOSE ot the background is also pretty easy since i know which color number/code i am using, and in illustrator, I can choose colors by their code.

 

I will get messing with them and see where i end up. THANKS SO MUCH FOR ALL TEH INFO.

 

I really with IE will just catch up so everyone will be on teh same page ..

Just a note....you are saving everything you create as a psd as a 'in case' right? Whenever I haven't, I've ended up tearing my hair out if I needed to make a change. *laughing*

Link to comment
Share on other sites

oh yea.. i save everything as a .ai so i can go in the change..

 

I usually save them all the same just because i will take a buy now button and turn it into the write review button so that they are all the same size.

 

It is DEFINITELY easier to always have a .ai template floating around.. otherwise you end up starting from scratch.

A great place for newbies to start

Road Map to oscommerce File Structure

DO NOT PM ME FOR HELP. My time is valuable, unless i ask you to PM me, please dont. You will get better help if you post publicly. I am not as good at this as you think anyways!

 

HOWEVER, you can visit my blog (go to my profile to see it) and post a question there, i will find time to get back and answer you

 

Proud Memeber of the CODE BREAKERS CLUB!!

Link to comment
Share on other sites

Hi Lyndsay

 

I've just come across this trhead and thought I'd drop in my $0.02...

 

GIF and PNG are pretty much same meat, different gravy.

 

PNG provides more colour and alpha transparency support (which is why gradient shadows look better), but, as you say are not *normally* supported by all browsers (there are workarounds to get IE5/6 to use PNG with transparency - PM me for details).

 

GIF compress further, and so are smaller in size. However, there are several "flavours" of GIFs determined by your save state in FireWorks/PhotoShop etc.

You can use an EXACT palette and alpha transparency on many GIF images, and they will display the same as an equivilient PNG.

However, the default save tends to be for a 256 colour or web adpative palette - which make your GIFs less quality.

 

My advice would be to use GIFs for smaller icons/images or graphics with a small amount of colours on your site, JPEG for photos and PNGs for anything else - especially high quality images.

See my site (http://www.datamouse.biz) for an example. The images in the header are PNGs, and have been chosen because I needed high impact graphics.

 

Hope this helps

Link to comment
Share on other sites

thanks datamouse, i was kinda hoping you would chime in because your graphics always look SOO good. I LOVE the POP of them.

 

Anyways, your header images are great!! are you at all concerned that SOME people might not be able to view them? Have you ever had anyone comment on broken images on your site? Right now, it SEEMS like the use of .og with the IE5/6 fix would be the best way to go for images that NEED to have a tranparent background that will be placed on top of a dark table background.

 

MOST of my buttons on my site are .gif because like you said, they are a little smaller, taking up less space.. BUT the images i have for the account manager buttons (which ONLY show if you create an account and login) are currently on top of the bright orange table background. I played with the .gif options like said above, but i just could NOT get it to look ok.

 

thanks for the suggestions and thoughts on the topic.

 

BTW, you can view my site, i am looking for deign feedback on the feedback forum.. more than happy to hear your suggestiosn!!

www.furryfamilysupplies.com

A great place for newbies to start

Road Map to oscommerce File Structure

DO NOT PM ME FOR HELP. My time is valuable, unless i ask you to PM me, please dont. You will get better help if you post publicly. I am not as good at this as you think anyways!

 

HOWEVER, you can visit my blog (go to my profile to see it) and post a question there, i will find time to get back and answer you

 

Proud Memeber of the CODE BREAKERS CLUB!!

Link to comment
Share on other sites

People should be able to see my images - even though they're PNG format.

 

Basically, IE5 and IE6 browsers don't support PNG transparency - they replace it with a strange blue/grey colour.

However, there is a workaround, which is really easy. This uses a very simple piece of javascript that makes the images' transparency work in these browsers.

 

It still means that some older browsers and users without JavaScript enabled cannot see them properly.

However, you can't please everyone all the time. My sites cater for 90%+ of visitors - that should be enough/

 

The same arguement is applied to window resolution. Most users are at 1024 and above. I could still build at 800x600 size - but would be making my main users waste screen real estate. You have to weigh up which is more important - the minority with disabled javascript, small resolution and old browsers, or the majority...

 

BTW: The instructions for that PNG fix are here: http://www.oscommerce.com/forums/index.php?s=&...t&p=1270026

Link to comment
Share on other sites

oh yea, i remember seeing that.. thanks, i bookmarked that thread so when i got back to working with it, it would be there for me to use.. its a REALLY simple fix too!

 

your right about catering to the majority.. And MOST people who shop online have some kind of tech savy background, which means it is VERY likely the peopel shopping online already have slightly newer computers.. People with those old monsters probably dont purchase online as much, although i do know a FEW people who have the old ones AND spend lots of time online - if i were them, i would have pulled my hair out!!

 

anyways.. thanks again.. I love looking at your site for some inspiration too.. REALLY nice!

A great place for newbies to start

Road Map to oscommerce File Structure

DO NOT PM ME FOR HELP. My time is valuable, unless i ask you to PM me, please dont. You will get better help if you post publicly. I am not as good at this as you think anyways!

 

HOWEVER, you can visit my blog (go to my profile to see it) and post a question there, i will find time to get back and answer you

 

Proud Memeber of the CODE BREAKERS CLUB!!

Link to comment
Share on other sites

I love looking at your site for some inspiration too.. REALLY nice!

Thanks. Much appreciated.

I need to get more products up on there (had a database migration problem, followed by a phishing attack, so lost a load of products from the catalog).

 

I'm having a look at your site now and will comment on your latest feedback thread

Link to comment
Share on other sites

I use gif for page layout assets, png for when I need alpha transparency, and jpgs for photos such as those in a photo gallery. That's a good formula for small page sizes and maximum compatibility.

Please use the forums for support! I am happy to help you here, but I am unable to offer free technical support over instant messenger or e-mail.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...