Javascript & Gzip Help

[pulkit]

Hi,

I recently made a new site :

http://wbots.be

The problem i am facing is of GZipping the images.

The site loads fast but still images are not getting gzipped.

I got the way how to GZip the Page but it does not zip the images.

Also in my page i have a link to Make WBots Your Homepage.

But i want that when someone has set a site as Homepage the link not to be shown.

Any help will be appreciated to solve the problems i face.

Is the design making it a bit heavy.

[Chozo4]

It has a nice clean look to it. Doesn't look very heavy at all actually.

---

For Gzipping the images, I think I can help there. Looks like you are linking directly to the images which means there would be zero gzip with the images. because they don't get passed through your script. Only the html is getting GZipped.

Now with images, they are already compressed so I don't see why you would want to send a gzipped image. Especially considering if there is not size gain, you'd in effect make the image 10 bytes larger due to the gzip header.

If you still wish to persue, you can try linking each image to a php file and then outputting it that way. I'm assumming your using php so...

I just wrote this up and tested it. Hopefully it will work for you. The way it's written limits the image to being in the same folder as the php script below. The limits are that way because it does a quick check for validity to prevent it being abused as a proxy instead by stripping out the path and getting the end of it only.

<?php
if(!$_GET['img']) exit;
$img=explode('/',str_replace('\\','/',$_GET['img']));
header("Content-Encoding: gzip");
function gztrim ($d) {return gzencode($d,9);}
ob_start('gztrim');
readfile(end($img));
exit;
?>

Save it to a php file such as 'gzimg.php' and load images through it using

<img src=gzimg.php?img=test.jpg>

Also, perusing over your source , you can cut size a small bit if you recycle some of your function calls within your javascript.

for example, the call

function yahoo(){
ivalue=document.getElementById("main_input").value
document.getElementById("main_input").focus();
window.location='http://search.yahoo.com/search?p='+ivalue
}

could be passed through and called in this way

function srcheng(loc)
{
  document.getElementById("main_input").focus();
  window.location=loc+document.getElementById("main_input").value;
}
//Reuse this call for the other function calls that are for each search engine
srcheng('http://search.yahoo.com/search?p=');

you could further increase browser compatibility and use the 'name' attribute instead of the 'id' attribute andf then call the name instead of using 'getElementById'.

so this would work in IE4+ instead of ie5+ for example

function srcheng(loc)
{
  main_input.focus();
  window.location=loc+main_input.value;
}
//Reuse this call for the other function calls that are for each search engine
srcheng('http://search.yahoo.com/search?p=');

You mileage may vary. Take my advice with a grain of salt as you're bound to get a spot of sleep deprivation in the code (AKA: bug) due to it being quickly written and not retested for any flaws.

Edited February 2, 2006 by Chozo4

[pulkit]

Thanks a lot dude .

I will take your advice and not go with the image part.

However i will use the javascript methods u gave me.

[Chozo4]

Welcome! Just double test it first before making it your main loading page to ensure it's working correctly.

Edited February 2, 2006 by Chozo4