Jazajay
Active Member
Right I posted a site a few days ago for form usability feedback, anyway it's been a good year since I touched the code on this, so I said what half of this is bollo*ks TBH, I can do a lot better job.
So anyway I've recoded the entire site, fixing every bug I come across and giving it a final valuation check list like I should have done in the first place. To make things clear this site I maintain and built for a family member and touch up now and again when I have time so as it was free I didn't really put my heart and sole into it. Anyway as site performance will become a ranking factor as of 2010 I thought you know what lets use every advance technique I know and get this baby as good as I could.
So I looked to see if IE8 supported the object tag on images and it did, now being a geek and due to the fact I know how superior the object tag is over the img tag for displaying images, I got dead excited until I found out that IE8 will only load images through it up to a maximum of 36k which is crap TBF, Opera, Firefox and Saf all support it and they support massive files.
Now before I go any further lets explain why this is a far superior tag, it's because the browser wont download the image it will just get it and display it, now what's the difference?
The difference is huge, because it doesn't download the image it takes it out of the download list for a page, or removes a http header. Now browsers vary how they download the page, hence why some are faster than others but on average a browser will get 4 elements and download 4 simultaneously, so 1 css sheet is 1 element, 1 js sheet is 1 element, 1 img is 1 element etc... etc..., once one of the 4 spots becomes free it's gets another 1 from the server.
Anyway this is huge right my home page now downloads only 84k when before it was downloading close to 700k due to me pre-loading images, I mean it doesn't take a genius to see how quick it will now load.
But I thought IE8 only supports up to 36k until, and here's the flaw in IE8 which is great for us, I made a mistake. I saved an img in a jpg format by mistake and referenced it, Worked fine in FF, Saf and Opera then I went to refresh the page in IE8 and this 250k image showed up, now I was thinking hang on that's completely impossible according to all the documentation.
Anyway some playing around with it and I found if you save the same image sameish bytes as a png and then place it in the object tag IE8's 36k rule kicks in and it doesn't show but save it as a JPG and the 36k rule goes out of the window and it will, wack in a conditional comment for 6 and 7 to show images in the img tag instead of an object tag for them, and wack in a CSS rule in a IE only css sheet of object:display:none, otherwise you get this little box shape appearing in IE7 and IE6, and wella dead fast for IE8, FF, Saf and Opera and slow for IE7 and IE6 as they have to load all the images, and with IE6 only able to download 2 page elements at a time, IE7 I think 4 it is a lot slower for them, but dead quick for all the current versions.
I can't find this bug documented anyway so hay it's mine.
Anyhoo thought I would share it as it is huge TBH, if you are a geek that is.
You don't even need to base64 encode it as the Microsoft video I watched says you do, saving you hundreds of bytes on top of that again.
Anyhoo here's my code ~
<object data="img/your-any-size-image.jpg"></object>
<!--[if lte IE 7]><img src="img/your-any-size-image.jpg" alt="" /><![endif]-->
Simple right, and that is the beauty of it it is.:clap:
Now the object tag doesn't except the alt attribute but it does except the title attribute which will be picked up by all the screen readers you have to buy. I would say SEO wise if you want the alt text on a page then still use the img tag for that 1 img.
So something like ~
<img src="data:img/your-any-size-image.jpg" alt="Your alt text" />
<!--[if lte IE 7]><img src="img/about1.jpg" alt="" /><![endif]-->
Same effect but you use the img tag instead.
Jaz
So anyway I've recoded the entire site, fixing every bug I come across and giving it a final valuation check list like I should have done in the first place. To make things clear this site I maintain and built for a family member and touch up now and again when I have time so as it was free I didn't really put my heart and sole into it. Anyway as site performance will become a ranking factor as of 2010 I thought you know what lets use every advance technique I know and get this baby as good as I could.
So I looked to see if IE8 supported the object tag on images and it did, now being a geek and due to the fact I know how superior the object tag is over the img tag for displaying images, I got dead excited until I found out that IE8 will only load images through it up to a maximum of 36k which is crap TBF, Opera, Firefox and Saf all support it and they support massive files.
Now before I go any further lets explain why this is a far superior tag, it's because the browser wont download the image it will just get it and display it, now what's the difference?
The difference is huge, because it doesn't download the image it takes it out of the download list for a page, or removes a http header. Now browsers vary how they download the page, hence why some are faster than others but on average a browser will get 4 elements and download 4 simultaneously, so 1 css sheet is 1 element, 1 js sheet is 1 element, 1 img is 1 element etc... etc..., once one of the 4 spots becomes free it's gets another 1 from the server.
Anyway this is huge right my home page now downloads only 84k when before it was downloading close to 700k due to me pre-loading images, I mean it doesn't take a genius to see how quick it will now load.
But I thought IE8 only supports up to 36k until, and here's the flaw in IE8 which is great for us, I made a mistake. I saved an img in a jpg format by mistake and referenced it, Worked fine in FF, Saf and Opera then I went to refresh the page in IE8 and this 250k image showed up, now I was thinking hang on that's completely impossible according to all the documentation.
Anyway some playing around with it and I found if you save the same image sameish bytes as a png and then place it in the object tag IE8's 36k rule kicks in and it doesn't show but save it as a JPG and the 36k rule goes out of the window and it will, wack in a conditional comment for 6 and 7 to show images in the img tag instead of an object tag for them, and wack in a CSS rule in a IE only css sheet of object:display:none, otherwise you get this little box shape appearing in IE7 and IE6, and wella dead fast for IE8, FF, Saf and Opera and slow for IE7 and IE6 as they have to load all the images, and with IE6 only able to download 2 page elements at a time, IE7 I think 4 it is a lot slower for them, but dead quick for all the current versions.
I can't find this bug documented anyway so hay it's mine.
Anyhoo thought I would share it as it is huge TBH, if you are a geek that is.
You don't even need to base64 encode it as the Microsoft video I watched says you do, saving you hundreds of bytes on top of that again.
Anyhoo here's my code ~
<object data="img/your-any-size-image.jpg"></object>
<!--[if lte IE 7]><img src="img/your-any-size-image.jpg" alt="" /><![endif]-->
Simple right, and that is the beauty of it it is.:clap:
Now the object tag doesn't except the alt attribute but it does except the title attribute which will be picked up by all the screen readers you have to buy. I would say SEO wise if you want the alt text on a page then still use the img tag for that 1 img.
So something like ~
<img src="data:img/your-any-size-image.jpg" alt="Your alt text" />
<!--[if lte IE 7]><img src="img/about1.jpg" alt="" /><![endif]-->
Same effect but you use the img tag instead.
Jaz