RE: [WSG] Data URI encoder

2010-02-10 Thread Foskett, Mike
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
***

Re: [WSG] Data URI encoder

2010-02-10 Thread Chris Knowles




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

2010-02-10 Thread Foskett, Mike
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.org<mailto: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

2010-02-10 Thread Foskett, Mike
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

2010-02-10 Thread Russ Weakley

Looks interesting, Mike  :)

For those unfamiliar with Data URI's, it may also be worth taking a  
look at this in depth article:



Also "Using Data URIs in CSS":


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

2010-02-10 Thread Chris Beer

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

2010-02-10 Thread David Dorward
 
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

2010-02-10 Thread Hugo Mendes
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
 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
***