[WSG] Data URI encoder
Hi all, May I ask the group to critique and comment on this image to data URI conversion tool? http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/ thanks Mike Foskett http://websemantics.co.uk/ 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: memberh...@webstandardsgroup.org ***
Re: [WSG] Data URI encoder
Unfortantly this technique doesn't work on IE6 and 7. Regards, Hugo Mendes http://www.hugomendes.com On Wed, Feb 10, 2010 at 11:21 AM, Foskett, Mike mike.fosk...@uk.tesco.com wrote: Hi all, May I ask the group to critique and comment on this image to data URI conversion tool? http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/ thanks Mike Foskett http://websemantics.co.uk/ 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: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Data URI encoder
On 10 Feb 2010, at 11:48, Hugo Mendes wrote:
http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/
Unfortantly this technique doesn't work on IE6 and 7.
… as it says on the page? Which suggests work arounds?
On the subject of the suggested workaround (conditional comments) - what about
other browsers which don't support data URIs?
How do browsers behave, in practice, given:
background-image: url('http://example.com');
background-image: url('data:...');
Do browsers which support the data scheme successfully override the regular
image before starting to download it?
Do browsers which don't support it still use the earlier declaration? Or do
they go I accept url() values, will override now?
--
David Dorward
http://dorward.me.uk
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] Data URI encoder
Hi Mike I had a play - wow - I seriously didn't realise that you could do this, (although now I think about it, its how Google sends data back to themselves in a 1px by 1 px image yes?) So while I think its a fun tool, I'm wondering what the applications actually would be. And are there tools that do the reverse? Cheers Chris On 10/02/2010 10:21 PM, Foskett, Mike wrote: Hi all, May I ask the group to critique and comment on this image to data URI conversion tool? http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/ thanks Mike Foskett http://websemantics.co.uk/ 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: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Data URI encoder
Looks interesting, Mike :) For those unfamiliar with Data URI's, it may also be worth taking a look at this in depth article: http://www.nczonline.net/blog/2009/10/27/data-uris-explained/ Also Using Data URIs in CSS: http://nimbupani.com/using-data-uris-in-css.html Thanks Russ Hi all, May I ask the group to critique and comment on this image to data URI conversion tool? http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/ thanks Mike Foskett http://websemantics.co.uk/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] Data URI encoder
Hi David,
A browser will fetch a style sheet but only fetches an image background it
contains upon use in the XHTML.
Consequently overwriting background-image: url('http://example.com');
With background-image: url('data:...'); will not fetch the image but use the
data version.
So to the question Do browsers which support the data scheme successfully
override the regular image before starting to download it? the answer is yes.
Unfortunately the answer to the second question Do browsers which don't
support it still use the earlier declaration? Or do they go I accept url()
values, will override now? is no, they will display garbage if the data URI
is presented.
But please note all modern browsers support the data URI scheme.
IEv8 was the last to employ this standard.
There is a link at the page bottom which suggests a method of auto detecting
whether data URIs are supported.
I've not fully investigated the possibilities as I'm happy that support, except
IEv7 and below, is ubiquitous.
My whole site utilises CSS sprites and data URI's served via gzip.
The performance increase is phenomenal.
Regards
Mike Foskett
-Original Message-
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On
Behalf Of David Dorward
Sent: 10 February 2010 11:59
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Data URI encoder
On 10 Feb 2010, at 11:48, Hugo Mendes wrote:
http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/
Unfortantly this technique doesn't work on IE6 and 7.
... as it says on the page? Which suggests work arounds?
On the subject of the suggested workaround (conditional comments) - what about
other browsers which don't support data URIs?
How do browsers behave, in practice, given:
background-image: url('http://example.com');
background-image: url('data:...');
Do browsers which support the data scheme successfully override the regular
image before starting to download it?
Do browsers which don't support it still use the earlier declaration? Or do
they go I accept url() values, will override now?
--
David Dorward
http://dorward.me.uk
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
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: memberh...@webstandardsgroup.org
***
RE: [WSG] Data URI encoder
Hi Chris, Thanks for taking a look at the tool. The main application is to reduce HTTP requests and thereby increase page delivery speed. Right clicking on a data URI image and using Save image as will save it in its original form. Regards Mike From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Chris Beer Sent: 10 February 2010 12:02 To: wsg@webstandardsgroup.org Subject: Re: [WSG] Data URI encoder Hi Mike I had a play - wow - I seriously didn't realise that you could do this, (although now I think about it, its how Google sends data back to themselves in a 1px by 1 px image yes?) So while I think its a fun tool, I'm wondering what the applications actually would be. And are there tools that do the reverse? Cheers Chris On 10/02/2010 10:21 PM, Foskett, Mike wrote: Hi all, May I ask the group to critique and comment on this image to data URI conversion tool? http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/ thanks Mike Foskett http://websemantics.co.uk/ 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: memberh...@webstandardsgroup.orgmailto:memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Data URI encoder
The main application is to reduce HTTP requests and thereby increase page delivery speed. Hi Mike, I see that the page you refer to links to a stylesheet with 4 images embedded in it, rather than the stylesheet linking to those 4 images, therefore, you have one http request rather than 5 and also, that stylesheet has an expires header set to 10 years from now. You say it's a lot faster, but I question the value of going to this trouble. I agree there is a performance gain, but if you link to the images from the stylesheet instead and also set an expires header on them then subsequent page loads become irrelevant so it's just the initial visit with an empty cache that is affected. Given that the download size is pretty much the same with either method, the only gain i can see is a marginal one from those initial extra 4 http requests. Is that really such a huge gain? -- Chris Knowles *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] Data URI encoder
Hi Chris, That's a little beyond topic scope but here goes. The image / CSS / data URI layout used on the page is a little complex I'll agree. It was optimised to provide the key images first and quickly, even in IEv6. Note the different sub-domains used. The CSS is served via a gzip and cache utility hence the far future expiry date. The design was written 2 years ago and page load optimisations followed in the three months after. It is significantly faster, I'd say to a factor of 7 or even eight times quicker. Unfortunately the tools used haven't records from that far back so I cannot back the statement up. As to whether it's worth the trouble? That's a different matter. Here it was used as a learning experience, so for me it definitely was. The techniques investigated, and the lessons learned, were in part applied by my current employer. Up to 2 million hits a day, it used to take 3.7 sec to download the homepage. Now it takes a healthy 0.6 seconds. References: http://websemantics.co.uk/projects/#tesco It's on sites like this where these techniques really make a difference. Albeit I've not as yet implemented data URIs there. I need a gzip enabled server first. Regards Mike Foskett. -Original Message- From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Chris Knowles Sent: 10 February 2010 12:59 To: wsg@webstandardsgroup.org Subject: Re: [WSG] Data URI encoder The main application is to reduce HTTP requests and thereby increase page delivery speed. Hi Mike, I see that the page you refer to links to a stylesheet with 4 images embedded in it, rather than the stylesheet linking to those 4 images, therefore, you have one http request rather than 5 and also, that stylesheet has an expires header set to 10 years from now. You say it's a lot faster, but I question the value of going to this trouble. I agree there is a performance gain, but if you link to the images from the stylesheet instead and also set an expires header on them then subsequent page loads become irrelevant so it's just the initial visit with an empty cache that is affected. Given that the download size is pretty much the same with either method, the only gain i can see is a marginal one from those initial extra 4 http requests. Is that really such a huge gain? -- Chris Knowles *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** 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: memberh...@webstandardsgroup.org ***
