Re: [WSG] your best practise for CSS sprites for elements that have no height declared
On Nov 24, 2008, at 3:24 AM, Robert O'Rourke wrote: If I remember rightly if you are able to save the image with a transparent background it keeps the file size lower because a transparent pixel takes less space than a pixel with colour information. You can put a coloured outline around the sprites themselves to avoid jagged edges in IE. Thanks all for the tips. The htacces ones is especially useful :-) tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] your best practise for CSS sprites for elements that have no height declared
While I cannot help with the spacing issue I do strongly suggest using png rather than gif. File size is smaller especially when run through pngGauntlet. Mike Foskett -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of tee Sent: 25 November 2008 10:48 To: wsg@webstandardsgroup.org Subject: Re: [WSG] your best practise for CSS sprites for elements that have no height declared On Nov 24, 2008, at 3:24 AM, Robert O'Rourke wrote: If I remember rightly if you are able to save the image with a transparent background it keeps the file size lower because a transparent pixel takes less space than a pixel with colour information. You can put a coloured outline around the sprites themselves to avoid jagged edges in IE. Thanks all for the tips. The htacces ones is especially useful :-) tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** ---Warning This e-mail is from outside Tesco - check that it is genuine. Tesco may monitor and record all e-mails. Disclaimer This is a confidential email. Tesco may monitor and record all emails. The views expressed in this email are those of the sender and not Tesco. Tesco Stores Limited Company Number: 519500 Registered in England Registered Office: Tesco House, Delamare Road, Cheshunt, Hertfordshire EN8 9SL VAT Registration Number: GB 220 4302 31 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] your best practise for CSS sprites for elements that have no height declared
No, I may have to disagree. GIF files are (a majority of them, if not all, are) smaller. They have to be. Considering GIF only supports up to a maximum of 256 colors. (it is 8-bit). Try http://www.sitepoint.com/article/gif-jpg-png-whats-difference/ ---or--- http://en.wikipedia.org/wiki/Graphics_Interchange_Format You should never have to use a pngGauntlet-type compressor. On Tue, Nov 25, 2008 at 7:10 AM, Foskett, Mike [EMAIL PROTECTED]wrote: While I cannot help with the spacing issue I do strongly suggest using png rather than gif. File size is smaller especially when run through pngGauntlet. Mike Foskett -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of tee Sent: 25 November 2008 10:48 To: wsg@webstandardsgroup.org Subject: Re: [WSG] your best practise for CSS sprites for elements that have no height declared On Nov 24, 2008, at 3:24 AM, Robert O'Rourke wrote: If I remember rightly if you are able to save the image with a transparent background it keeps the file size lower because a transparent pixel takes less space than a pixel with colour information. You can put a coloured outline around the sprites themselves to avoid jagged edges in IE. Thanks all for the tips. The htacces ones is especially useful :-) tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** ---Warning This e-mail is from outside Tesco - check that it is genuine. Tesco may monitor and record all e-mails. Disclaimer This is a confidential email. Tesco may monitor and record all emails. The views expressed in this email are those of the sender and not Tesco. Tesco Stores Limited Company Number: 519500 Registered in England Registered Office: Tesco House, Delamare Road, Cheshunt, Hertfordshire EN8 9SL VAT Registration Number: GB 220 4302 31 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Brett P. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] your best practise for CSS sprites for elements that have no height declared
Brett, i'm not sure if the previous recommendation of PNG was for the 8-bit pngs with transparency, but that's what I'd argue. I often check between GIF and 8-bit PNG when i export, to see which looks the best at the smallest size, and PNG often wins. On Nov 25, 2008, at 8:15 AM, Brett Patterson wrote: No, I may have to disagree. GIF files are (a majority of them, if not all, are) smaller. They have to be. Considering GIF only supports up to a maximum of 256 colors. (it is 8-bit). Try http://www.sitepoint.com/article/gif-jpg-png-whats-difference/ ---or--- http://en.wikipedia.org/wiki/Graphics_Interchange_Format You should never have to use a pngGauntlet-type compressor. On Tue, Nov 25, 2008 at 7:10 AM, Foskett, Mike [EMAIL PROTECTED] wrote: While I cannot help with the spacing issue I do strongly suggest using png rather than gif. File size is smaller especially when run through pngGauntlet. Mike Foskett -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of tee Sent: 25 November 2008 10:48 To: wsg@webstandardsgroup.org Subject: Re: [WSG] your best practise for CSS sprites for elements that have no height declared On Nov 24, 2008, at 3:24 AM, Robert O'Rourke wrote: If I remember rightly if you are able to save the image with a transparent background it keeps the file size lower because a transparent pixel takes less space than a pixel with colour information. You can put a coloured outline around the sprites themselves to avoid jagged edges in IE. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] your best practise for CSS sprites for elements that have no height declared
Sorry Brett, you're wrong. The png format will handle three levels of bit-depth including 8-bit which is the same as the gif format. The references you state are somewhat outdated and don't consider the different methods of compression that a png will handle natively. I suggest you try a few comparisons out yourself. They don't always work out smaller but most often they do. Create an 8-bit png in Fireworks (recommended but not essential). Then run it through pngGauntlet and see for yourself. You're going to be surprised. Mike Foskett From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Brett Patterson Sent: 25 November 2008 13:16 To: wsg@webstandardsgroup.org Subject: Re: [WSG] your best practise for CSS sprites for elements that have no height declared No, I may have to disagree. GIF files are (a majority of them, if not all, are) smaller. They have to be. Considering GIF only supports up to a maximum of 256 colors. (it is 8-bit). Try http://www.sitepoint.com/article/gif-jpg-png-whats-difference/ ---or--- http://en.wikipedia.org/wiki/Graphics_Interchange_Format You should never have to use a pngGauntlet-type compressor. On Tue, Nov 25, 2008 at 7:10 AM, Foskett, Mike [EMAIL PROTECTED] wrote: While I cannot help with the spacing issue I do strongly suggest using png rather than gif. File size is smaller especially when run through pngGauntlet. Mike Foskett -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of tee Sent: 25 November 2008 10:48 To: wsg@webstandardsgroup.org Subject: Re: [WSG] your best practise for CSS sprites for elements that have no height declared On Nov 24, 2008, at 3:24 AM, Robert O'Rourke wrote: If I remember rightly if you are able to save the image with a transparent background it keeps the file size lower because a transparent pixel takes less space than a pixel with colour information. You can put a coloured outline around the sprites themselves to avoid jagged edges in IE. Thanks all for the tips. The htacces ones is especially useful :-) tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** ---Warning This e-mail is from outside Tesco - check that it is genuine. Tesco may monitor and record all e-mails. Disclaimer This is a confidential email. Tesco may monitor and record all emails. The views expressed in this email are those of the sender and not Tesco. Tesco Stores Limited Company Number: 519500 Registered in England Registered Office: Tesco House, Delamare Road, Cheshunt, Hertfordshire EN8 9SL VAT Registration Number: GB 220 4302 31 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Brett P. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] your best practise for CSS sprites for elements that have no height declared
On Tue, Nov 25, 2008 at 9:06 AM, Foskett, Mike [EMAIL PROTECTED] wrote: Sorry Brett, you're wrong. The png format will handle three levels of bit-depth including 8-bit which is the same as the gif format. The references you state are somewhat outdated and don't consider the different methods of compression that a png will handle natively. I suggest you try a few comparisons out yourself. They don't always work out smaller but most often they do. Seconded. You can make 8 bit PNGs with as little as 8 colors or as many as 256. Just try Save for Web Devices in Photoshop CS3. I don't even bother with GIFs anymore, the 8-bit PNGs come out smaller almost every time. -- -- Christian Montoya christianmontoya.net *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] your best practise for CSS sprites for elements that have no height declared
There is an issue where a PNG will not look exactly the same in IE vrs FF So if you try to match a background with the PNG you may have issues between the browsers having said that I love PNGs myself On Tue, Nov 25, 2008 at 9:06 AM, Foskett, Mike [EMAIL PROTECTED] wrote: Sorry Brett, you're wrong. The png format will handle three levels of bit-depth including 8-bit which is the same as the gif format. The references you state are somewhat outdated and don't consider the different methods of compression that a png will handle natively. I suggest you try a few comparisons out yourself. They don't always work out smaller but most often they do. Seconded. You can make 8 bit PNGs with as little as 8 colors or as many as 256. Just try Save for Web Devices in Photoshop CS3. I don't even bother with GIFs anymore, the 8-bit PNGs come out smaller almost every time. -- -- Christian Montoya christianmontoya.net *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** life is certain death is short ~furry lewis *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] your best practise for CSS sprites for elements that have no height declared
First of all, No I am not! Second I have tried out differences. Notice the difference in file sizes. Thirdly, I did not say that png did not support 8-bit, nowhere does it say that, it does however say that GIF only supports a maximum of 256 colors. Fourthly, Todd your argument is off subject, because neither MIke nor me ever mentioned it looking best, although I would have to agree, PNG most certainly does look best, depending on the image. And fifthly, Mike, sorry, but no, without using a PNGGauntlet or whatever, I am not. All I simply stated is that gif files have to be smaller, (probably should have said before) without using pnggauntlet. And I say without, because anyone else may not have, or know where to get it. Well...and sixthly, I use PNGs just as much you, but there are a lot of times when PNGs will not cut the job, and GIFs are, again, majority of the time smaller and better. On Tue, Nov 25, 2008 at 10:37 AM, Christian Montoya [EMAIL PROTECTED]wrote: On Tue, Nov 25, 2008 at 9:06 AM, Foskett, Mike [EMAIL PROTECTED] wrote: Sorry Brett, you're wrong. The png format will handle three levels of bit-depth including 8-bit which is the same as the gif format. The references you state are somewhat outdated and don't consider the different methods of compression that a png will handle natively. I suggest you try a few comparisons out yourself. They don't always work out smaller but most often they do. Seconded. You can make 8 bit PNGs with as little as 8 colors or as many as 256. Just try Save for Web Devices in Photoshop CS3. I don't even bother with GIFs anymore, the 8-bit PNGs come out smaller almost every time. -- -- Christian Montoya christianmontoya.net *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Brett P. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] your best practise for CSS sprites for elements that have no height declared
wouldn't best practise for CSS sprites include image quality? On Nov 25, 2008, at 11:23 AM, Brett Patterson wrote: First of all, No I am not! Second I have tried out differences. Notice the difference in file sizes. Thirdly, I did not say that png did not support 8-bit, nowhere does it say that, it does however say that GIF only supports a maximum of 256 colors. Fourthly, Todd your argument is off subject, because neither MIke nor me ever mentioned it looking best, although I would have to agree, PNG most certainly does look best, depending on the image. And fifthly, Mike, sorry, but no, without using a PNGGauntlet or whatever, I am not. All I simply stated is that gif files have to be smaller, (probably should have said before) without using pnggauntlet. And I say without, because anyone else may not have, or know where to get it. Well...and sixthly, I use PNGs just as much you, but there are a lot of times when PNGs will not cut the job, and GIFs are, again, majority of the time smaller and better. On Tue, Nov 25, 2008 at 10:37 AM, Christian Montoya [EMAIL PROTECTED] wrote: On Tue, Nov 25, 2008 at 9:06 AM, Foskett, Mike [EMAIL PROTECTED] wrote: Sorry Brett, you're wrong. The png format will handle three levels of bit-depth including 8- bit which is the same as the gif format. The references you state are somewhat outdated and don't consider the different methods of compression that a png will handle natively. I suggest you try a few comparisons out yourself. They don't always work out smaller but most often they do. Seconded. You can make 8 bit PNGs with as little as 8 colors or as many as 256. Just try Save for Web Devices in Photoshop CS3. I don't even bother with GIFs anymore, the 8-bit PNGs come out smaller almost every time. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] your best practise for CSS sprites for elements that have no height declared
On Tue, Nov 25, 2008 at 11:23 AM, Brett Patterson [EMAIL PROTECTED] wrote: First of all, No I am not! Second I have tried out differences. Notice the difference in file sizes. Thirdly, I did not say that png did not support 8-bit, nowhere does it say that, it does however say that GIF only supports a maximum of 256 colors. Fourthly, Todd your argument is off subject, because neither MIke nor me ever mentioned it looking best, although I would have to agree, PNG most certainly does look best, depending on the image. And fifthly, Mike, sorry, but no, without using a PNGGauntlet or whatever, I am not. All I simply stated is that gif files have to be smaller, (probably should have said before) without using pnggauntlet. And I say without, because anyone else may not have, or know where to get it. Well...and sixthly, I use PNGs just as much you, but there are a lot of times when PNGs will not cut the job, and GIFs are, again, majority of the time smaller and better. Brett, I am afraid that you might be using a bad image processing program that does not do a good job of optimizing PNGs. -- -- Christian Montoya christianmontoya.net *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] your best practise for CSS sprites for elements that have no height declared
Please, could I ask you to take this discussion off-list if you want to continue. It's really degenerated to an unresolvable cycle of I'm right, No, I'M right... When it just comes down to Use the best available solution for the problem at hand All compressed image file formats have strengths and weaknesses. Andrew On Nov 25, 2008, at 11:23 AM, Brett Patterson wrote: First of all, No I am not! Second I have tried out differences. Notice the difference in file sizes. Thirdly, I did not say that png did not support 8-bit, nowhere does it say that, it does however say that GIF only supports a maximum of 256 colors. Fourthly, Todd your argument is off subject, because neither MIke nor me ever mentioned it looking best, although I would have to agree, PNG most certainly does look best, depending on the image. And fifthly, Mike, sorry, but no, without using a PNGGauntlet or whatever, I am not. All I simply stated is that gif files have to be smaller, (probably should have said before) without using pnggauntlet. And I say without, because anyone else may not have, or know where to get it. Well...and sixthly, I use PNGs just as much you, but there are a lot of times when PNGs will not cut the job, and GIFs are, again, majority of the time smaller and better. On Tue, Nov 25, 2008 at 10:37 AM, Christian Montoya [EMAIL PROTECTED] wrote: On Tue, Nov 25, 2008 at 9:06 AM, Foskett, Mike [EMAIL PROTECTED] wrote: Sorry Brett, you're wrong. The png format will handle three levels of bit-depth including 8- bit which is the same as the gif format. The references you state are somewhat outdated and don't consider the different methods of compression that a png will handle natively. I suggest you try a few comparisons out yourself. They don't always work out smaller but most often they do. Seconded. You can make 8 bit PNGs with as little as 8 colors or as many as 256. Just try Save for Web Devices in Photoshop CS3. I don't even bother with GIFs anymore, the 8-bit PNGs come out smaller almost every time. -- -- Christian Montoya christianmontoya.net *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Brett P. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] your best practise for CSS sprites for elements that have no height declared
[EMAIL PROTECTED] wrote: There is an issue where a PNG will not look exactly the same in IE vrs FF So if you try to match a background with the PNG you may have issues between the browsers That's easily resolved by stripping the gamma correction data from the image using pngcrush. http://hsivonen.iki.fi/png-gamma/ -- David Dorward http://dorward.me.uk/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] your best practise for CSS sprites for elements that have no height declared
Hi, Im new here not sure whats going on but as far as web performance goes a handy little online tool is http://www.smushit.com/ ( It goes beyond Photoshop customisation) Heather _ De : [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] De la part de Andrew Maben Envoyé : mardi 25 novembre 2008 17:54 À : wsg@webstandardsgroup.org Objet : Re: [WSG] your best practise for CSS sprites for elements that have no height declared Please, could I ask you to take this discussion off-list if you want to continue. It's really degenerated to an unresolvable cycle of I'm right, No, I'M right... When it just comes down to Use the best available solution for the problem at hand All compressed image file formats have strengths and weaknesses. Andrew On Nov 25, 2008, at 11:23 AM, Brett Patterson wrote: First of all, No I am not! Second I have tried out differences. Notice the difference in file sizes. Thirdly, I did not say that png did not support 8-bit, nowhere does it say that, it does however say that GIF only supports a maximum of 256 colors. Fourthly, Todd your argument is off subject, because neither MIke nor me ever mentioned it looking best, although I would have to agree, PNG most certainly does look best, depending on the image. And fifthly, Mike, sorry, but no, without using a PNGGauntlet or whatever, I am not. All I simply stated is that gif files have to be smaller, (probably should have said before) without using pnggauntlet. And I say without, because anyone else may not have, or know where to get it. Well...and sixthly, I use PNGs just as much you, but there are a lot of times when PNGs will not cut the job, and GIFs are, again, majority of the time smaller and better. On Tue, Nov 25, 2008 at 10:37 AM, Christian Montoya [EMAIL PROTECTED] wrote: On Tue, Nov 25, 2008 at 9:06 AM, Foskett, Mike [EMAIL PROTECTED] wrote: Sorry Brett, you're wrong. The png format will handle three levels of bit-depth including 8-bit which is the same as the gif format. The references you state are somewhat outdated and don't consider the different methods of compression that a png will handle natively. I suggest you try a few comparisons out yourself. They don't always work out smaller but most often they do. Seconded. You can make 8 bit PNGs with as little as 8 colors or as many as 256. Just try Save for Web Devices in Photoshop CS3. I don't even bother with GIFs anymore, the 8-bit PNGs come out smaller almost every time. -- -- Christian Montoya christianmontoya.net *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Brett P. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] your best practise for CSS sprites for elements that have no height declared
Sorry Mike I do not have an example at the moment - just remember past headaches with it - apparently there is a solution http://hsivonen.iki.fi/png-gamma/ per a previous email on this thread - you can google the issue I'm sure Neal There is an issue where a PNG will not look exactly the same in IE vrs FF Never come across that, have you a reference or example? I have come across something similar with Safari and Photoshop images not blending. But it wasn't png related it was a gamma setting in Photoshop. Brett: PNGgauntlet is freeware: http://brh.numbera.com/software/pnggauntlet/ As is PNGcrush: http://pmt.sourceforge.net/pngcrush/ If you're not using a decent compressor then png's are 15% - 20% oversized. I'll have to agree to disagree with you on gif file-size being smaller. Mike Foskett http://websemantics.co.uk/ -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of [EMAIL PROTECTED] Sent: 25 November 2008 15:59 To: wsg@webstandardsgroup.org Subject: Re: [WSG] your best practise for CSS sprites for elements that have no height declared There is an issue where a PNG will not look exactly the same in IE vrs FF So if you try to match a background with the PNG you may have issues between the browsers having said that I love PNGs myself On Tue, Nov 25, 2008 at 9:06 AM, Foskett, Mike [EMAIL PROTECTED] wrote: Sorry Brett, you're wrong. The png format will handle three levels of bit-depth including 8-bit which is the same as the gif format. The references you state are somewhat outdated and don't consider the different methods of compression that a png will handle natively. I suggest you try a few comparisons out yourself. They don't always work out smaller but most often they do. Seconded. You can make 8 bit PNGs with as little as 8 colors or as many as 256. Just try Save for Web Devices in Photoshop CS3. I don't even bother with GIFs anymore, the 8-bit PNGs come out smaller almost every time. -- -- Christian Montoya christianmontoya.net *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** life is certain death is short ~furry lewis *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** ---Warning This e-mail is from outside Tesco - check that it is genuine. Tesco may monitor and record all e-mails. Disclaimer This is a confidential email. Tesco may monitor and record all emails. The views expressed in this email are those of the sender and not Tesco. Tesco Stores Limited Company Number: 519500 Registered in England Registered Office: Tesco House, Delamare Road, Cheshunt, Hertfordshire EN8 9SL VAT Registration Number: GB 220 4302 31 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** life is certain death is short ~furry lewis *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] your best practise for CSS sprites for elements that have no height declared
OK. So, lets agree that (Start here quoting you:::If you're not using a decent compressor then png's are 15% - 20% oversized.:::end quoting you here.) we are both right. I am simply stating as such without using a compressor (Start quoting you:::If you're not using a decent compressor then png's are 15% - 20% oversized.:::), there for gif file-size IS smaller. In which case I am right, especially here if you are required to use GIFs either way, for backwards compatibility. Note, the linked site talks about IE 5.5 and 6 --- http://homepage.ntlworld.com/bobosola/ To Andrew, one of the smartest things I have read to date. Agreed!!! On Tue, Nov 25, 2008 at 12:19 PM, Foskett, Mike [EMAIL PROTECTED]wrote: There is an issue where a PNG will not look exactly the same in IE vrs FF Never come across that, have you a reference or example? I have come across something similar with Safari and Photoshop images not blending. But it wasn't png related it was a gamma setting in Photoshop. Brett: PNGgauntlet is freeware: http://brh.numbera.com/software/pnggauntlet/ As is PNGcrush: http://pmt.sourceforge.net/pngcrush/ If you're not using a decent compressor then png's are 15% - 20% oversized. I'll have to agree to disagree with you on gif file-size being smaller. Mike Foskett http://websemantics.co.uk/ -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of [EMAIL PROTECTED] Sent: 25 November 2008 15:59 To: wsg@webstandardsgroup.org Subject: Re: [WSG] your best practise for CSS sprites for elements that have no height declared There is an issue where a PNG will not look exactly the same in IE vrs FF So if you try to match a background with the PNG you may have issues between the browsers having said that I love PNGs myself On Tue, Nov 25, 2008 at 9:06 AM, Foskett, Mike [EMAIL PROTECTED] wrote: Sorry Brett, you're wrong. The png format will handle three levels of bit-depth including 8-bit which is the same as the gif format. The references you state are somewhat outdated and don't consider the different methods of compression that a png will handle natively. I suggest you try a few comparisons out yourself. They don't always work out smaller but most often they do. Seconded. You can make 8 bit PNGs with as little as 8 colors or as many as 256. Just try Save for Web Devices in Photoshop CS3. I don't even bother with GIFs anymore, the 8-bit PNGs come out smaller almost every time. -- -- Christian Montoya christianmontoya.net *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** life is certain death is short ~furry lewis *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** ---Warning This e-mail is from outside Tesco - check that it is genuine. Tesco may monitor and record all e-mails. Disclaimer This is a confidential email. Tesco may monitor and record all emails. The views expressed in this email are those of the sender and not Tesco. Tesco Stores Limited Company Number: 519500 Registered in England Registered Office: Tesco House, Delamare Road, Cheshunt, Hertfordshire EN8 9SL VAT Registration Number: GB 220 4302 31 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Brett P. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] your best practise for CSS sprites for elements that have no height declared
Thanks Heather for the link. I have taken a quick glance at smushit.com, and it looks promising. Sent via BlackBerry from T-Mobile -Original Message- From: Heather [EMAIL PROTECTED] Date: Tue, 25 Nov 2008 18:15:17 To: wsg@webstandardsgroup.org Subject: RE: [WSG] your best practise for CSS sprites for elements that have no height declared Hi, I�m new here not sure what�s going on but as far as web performance goes a handy little online tool is http://www.smushit.com/ ( It goes beyond Photoshop customisation) Heather _ De : [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] De la part de Andrew Maben Envoy� : mardi 25 novembre 2008 17:54 � : wsg@webstandardsgroup.org Objet : Re: [WSG] your best practise for CSS sprites for elements that have no height declared Please, could I ask you to take this discussion off-list if you want to continue. It's really degenerated to an unresolvable cycle of I'm right, No, I'M right... When it just comes down to Use the best available solution for the problem at hand All compressed image file formats have strengths and weaknesses. Andrew On Nov 25, 2008, at 11:23 AM, Brett Patterson wrote: First of all, No I am not! Second I have tried out differences. Notice the difference in file sizes. Thirdly, I did not say that png did not support 8-bit, nowhere does it say that, it does however say that GIF only supports a maximum of 256 colors. Fourthly, Todd your argument is off subject, because neither MIke nor me ever mentioned it looking best, although I would have to agree, PNG most certainly does look best, depending on the image. And fifthly, Mike, sorry, but no, without using a PNGGauntlet or whatever, I am not. All I simply stated is that gif files have to be smaller, (probably should have said before) without using pnggauntlet. And I say without, because anyone else may not have, or know where to get it. Well...and sixthly, I use PNGs just as much you, but there are a lot of times when PNGs will not cut the job, and GIFs are, again, majority of the time smaller and better. On Tue, Nov 25, 2008 at 10:37 AM, Christian Montoya [EMAIL PROTECTED] wrote: On Tue, Nov 25, 2008 at 9:06 AM, Foskett, Mike [EMAIL PROTECTED] wrote: Sorry Brett, you're wrong. The png format will handle three levels of bit-depth including 8-bit which is the same as the gif format. The references you state are somewhat outdated and don't consider the different methods of compression that a png will handle natively. I suggest you try a few comparisons out yourself. They don't always work out smaller but most often they do. Seconded. You can make 8 bit PNGs with as little as 8 colors or as many as 256. Just try Save for Web Devices in Photoshop CS3. I don't even bother with GIFs anymore, the 8-bit PNGs come out smaller almost every time. -- -- Christian Montoya christianmontoya.net *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Brett P. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] your best practise for CSS sprites for elements that have no height declared
Return Receipt Your Re: [WSG] your best practise for CSS sprites for elements document: that have no height declared wasDennis Lapcewich/R6/USDAFS received by: at:11/25/2008 10:56:38 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] your best practise for CSS sprites for elements that have no height declared
Gif Vs PNG If using PNG 8 / GIF, with the same amount of colours. Say 256. Gif are often smaller than PNG in small sizes, less than 20px by 20px example. I'll have to find out at what point a PNG is lighter. I suspect it's around 500px. In all the other cases PNG images will be lighter. Although I haven't tested smshit and other tools, but they might remove information from the header to make it lighter then GIF in every case. The header in the PNG file is bigger than the header in GIF files, but uses less space to save the image information. That's why a PNG is heavier at really small size but will always be smaller at larger sizes. Although if you use the Save As then PNG in Photoshop instead of Save for web. Photoshop adds an overhead of about 35kb-40kb (not really 20%), not sure why, but probably color preset info, and a load of other stuff. Shitty converters probably do the same. Differences between FF and IE: Gamma differences... That's not a really a browser related problem (arguable). The gamma is adjusted to have the images look the same on both Mac and Windows. (1.8 vs 2.2 gamma) Some browsers don't adjust gamma and some others do. I usually don't save any colour information in the files, it's less trouble with differences in the image colours and the colours set in the style sheet. And I'm mostly working with print designers which doesn't help. To remove any colours info, I think http://smushit.com/ can be used. In photoshop, just uncheck Convert to sRGB. Although don't forget to colour proof whatever you do; Mac sRGB, Win sRGB an then Proof Colors. Cheers, Johan Johan Douma [EMAIL PROTECTED] 2008/11/26 Dennis Lapcewich [EMAIL PROTECTED] Return Receipt Your Re: [WSG] your best practise for CSS sprites for elements document: that have no height declared wasDennis Lapcewich/R6/USDAFS received by: at:11/25/2008 10:56:38 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] your best practise for CSS sprites for elements that have no height declared
tee wrote: I am trying to optimize a site, though the file sizes of the overall images aren't so much of a problem but the http requests. So I am attempting to put 10 icons in one gif file, the individual icon size is merely 600b and the dimension is 18px by 12px. I made a 18px by 150px to hold 10 icons vertically, that makes the size a mere 4kb, problem is, there is no width declared in the list element that the icon is declared as background image, so when I make the font size bigger, the 2nd icon in the vertically order see through; one more increasement, I can see the 3rd and half of the 4th icons. so I estimate I have to give a least 80px space in height to prevent this from happening, by doing so, the file size is double. I guess this is alright as it reduces 9 http requests, but for other big images, I estimate I might have to make the height over 1500px to solve the problem that occurs when font size increases. I guess this is a twofold question: 1) How do you do to prevent the above issue from happening, if possible?; 2) Does this method really justify the reduces of http requests? Thanks! tee If I remember rightly if you are able to save the image with a transparent background it keeps the file size lower because a transparent pixel takes less space than a pixel with colour information. You can put a coloured outline around the sprites themselves to avoid jagged edges in IE. -Rob *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] your best practise for CSS sprites for elements that have no height declared
Check out http://www.alistapart.com/articles/sprites and http://www.alistapart.com/articles/sprites2 I think this what your trying to achieve, or at least close to either one of those articles. I haven't played much with horizontal sprite images, but usually use vertical ones, and I haven't tried them using lists. Dennis, www.eyemaxstudios.net Robert O'Rourke wrote: tee wrote: I am trying to optimize a site, though the file sizes of the overall images aren't so much of a problem but the http requests. So I am attempting to put 10 icons in one gif file, the individual icon size is merely 600b and the dimension is 18px by 12px. I made a 18px by 150px to hold 10 icons vertically, that makes the size a mere 4kb, problem is, there is no width declared in the list element that the icon is declared as background image, so when I make the font size bigger, the 2nd icon in the vertically order see through; one more increasement, I can see the 3rd and half of the 4th icons. so I estimate I have to give a least 80px space in height to prevent this from happening, by doing so, the file size is double. I guess this is alright as it reduces 9 http requests, but for other big images, I estimate I might have to make the height over 1500px to solve the problem that occurs when font size increases. I guess this is a twofold question: 1) How do you do to prevent the above issue from happening, if possible?; 2) Does this method really justify the reduces of http requests? Thanks! tee If I remember rightly if you are able to save the image with a transparent background it keeps the file size lower because a transparent pixel takes less space than a pixel with colour information. You can put a coloured outline around the sprites themselves to avoid jagged edges in IE. -Rob *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] your best practise for CSS sprites for elements that have no height declared
If I remember rightly if you are able to save the image with a transparent background it keeps the file size lower because a transparent pixel takes less space than a pixel with colour information. It may be possible to get better compression on a file that contains lots of pixels of the same colour, but all pixels require the same basic storage, regardless of whether they are transparent or not! Mike Mike Brockington Web Development Specialist www.calcResult.com www.stephanieBlakey.me.uk www.edinburgh.gov.uk This message does not reflect the opinions of any entity other than the author alone. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] your best practise for CSS sprites for elements that have no height declared
Yes, and colors in a row or horizontal line, so to speak, compress better depending on the compression mechanism. Just say that jpeg files read/compress horizontal, and gif files read/compress vertical, not sure if that is exactly correct, just an example. But iii (if the size is 1 pixel wide for each i and 2 long for each dot and 6 long for each line, with 3 pixels spacing between each one) would be smaller as a gif file. While iii would be larger as a jpeg file due to the stops in the color changes. The less the compression mechanism has to stop storing a particular color (i.e. #000, or black), the smaller the file size will be. On Mon, Nov 24, 2008 at 10:01 AM, [EMAIL PROTECTED] wrote: If I remember rightly if you are able to save the image with a transparent background it keeps the file size lower because a transparent pixel takes less space than a pixel with colour information. It may be possible to get better compression on a file that contains lots of pixels of the same colour, but all pixels require the same basic storage, regardless of whether they are transparent or not! Mike Mike Brockington Web Development Specialist www.calcResult.com www.stephanieBlakey.me.uk www.edinburgh.gov.uk This message does not reflect the opinions of any entity other than the author alone. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Brett P. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] your best practise for CSS sprites for elements that have no height declared
I am trying to optimize a site, though the file sizes of the overall images aren't so much of a problem but the http requests. So I am attempting to put 10 icons in one gif file, the individual icon size is merely 600b and the dimension is 18px by 12px. I made a 18px by 150px to hold 10 icons vertically, that makes the size a mere 4kb, problem is, there is no width declared in the list element that the icon is declared as background image, so when I make the font size bigger, the 2nd icon in the vertically order see through; one more increasement, I can see the 3rd and half of the 4th icons. so I estimate I have to give a least 80px space in height to prevent this from happening, by doing so, the file size is double. I guess this is alright as it reduces 9 http requests, but for other big images, I estimate I might have to make the height over 1500px to solve the problem that occurs when font size increases. I guess this is a twofold question: 1) How do you do to prevent the above issue from happening, if possible?; 2) Does this method really justify the reduces of http requests? Thanks! tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] your best practise for CSS sprites for elements that have no height declared
I often have sprites that are 800px or even more, I usually use 100px in between the images. But I think there's a limit on earlier versions of Opera that dont take images bigger than 2000px (not sure at all might be more). So I generally use 2 or 3 sprites if they get big, I still save a lot of requests. Even with the spacing between the pictures, the file is often smaller, and decreases loading time a lot, especially where the ping is really high; where I live it's about 140ms. Another thing you can do is cache all the images, so that it doesn't create a new request when someboy visits the website again. Here's an example for a htaccess file. FilesMatch \.(jpg|jpeg|png|gif|swf)$ Header set Cache-Control max-age=120, public /FilesMatch 120 seconds is 2 weeks. So if images change the visitor might not see before another 2 weeks. If doing updates just change the file name then it will work. Cheers, Johan [EMAIL PROTECTED] 2008/11/24 tee [EMAIL PROTECTED] I am trying to optimize a site, though the file sizes of the overall images aren't so much of a problem but the http requests. So I am attempting to put 10 icons in one gif file, the individual icon size is merely 600b and the dimension is 18px by 12px. I made a 18px by 150px to hold 10 icons vertically, that makes the size a mere 4kb, problem is, there is no width declared in the list element that the icon is declared as background image, so when I make the font size bigger, the 2nd icon in the vertically order see through; one more increasement, I can see the 3rd and half of the 4th icons. so I estimate I have to give a least 80px space in height to prevent this from happening, by doing so, the file size is double. I guess this is alright as it reduces 9 http requests, but for other big images, I estimate I might have to make the height over 1500px to solve the problem that occurs when font size increases. I guess this is a twofold question: 1) How do you do to prevent the above issue from happening, if possible?; 2) Does this method really justify the reduces of http requests? Thanks! tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***