Reducing Image kb in html to improve site speed

[speedshopping]

We run a site where we take merchant feeds and display on our pages. Included in these feeds are images that are hotlinked to the merchants image.

The problem we have is that these images are very large in size (500kb +) and we are only displaying a thumbnail of the image on our site which is resized using CSS.

We acknowledge that we could download the images and host them internally (and resize), but assuming that this is not possible, is there any way we can manipulate the image in the HTML which reduces the KB size and therefore improves the load speed?

Has anyone else had this problem?

Cheers,
Wesiwyg

[tedster]

As far as I know, you cannot do this in the html, but you can do it on the server - if you are on Apache, that is. The mod_pagespeed add-on module will allow you to send only the amount of pixel information that is required for the resolution being used.

[topr8]

... but the OP is hotlinking the images from somebody else's server therefore using the mod_pagespeed add-on module or doing anything else on your own server is not going to help.

[tedster]

I'd have to look at the specs again - you may be right on that. If so, he needs to keep a local copy on his server and change the path in the html. But he wouldn't need to resize or compress so the process would be simplified.

There is an alternative - yell at the company that provides the merchant feed. They are shooting themselves in the foot with 500kb images!

[rango]

At the risk of promoting a service -- do a search for "sencha.io src".

I'm not sure if there are similar others, but you can use this to cleverly deliver smaller images simply by changing the way you link to them. It's free at the moment, no idea how long that's going to last though.

[lucy24]

If it helps, let the merchants sit down and personally watch how long it takes a page with multiple 500K hotlinked images to load up. Do they want to risk users wandering away in boredom before they ever see the ad?

There was a thread about mod_pagespeed and hotlinking just a few weeks ago, next door in Apache:

[webmasterworld.com...]

The issue there was that the mod prevents anti-hotlinking routines from working. So Option B would be to get all your merchants to install it, and then hotlink to their newly resized images :)

[speedshopping]

thanks for the tips everyone, I am currently testing a few things out and hopefully we can get the large image indexed without actually loading it into the browser - will post my findings :)

[enigma1]

we are only displaying a thumbnail of the image on our site which is resized using CSS.

I think it's where your problem is. You should be generating the thumbs and store them server-side and you can control connections and use aggressive HMTL cache with compression to serve pages. I wouldn't recommend mod_pagespeed as it doesn't know the specifics and it's slower.

If you need to server the original image when the user clicks a magnify button you can have a link to the merchant's resource.

[speedshopping]

Hi enigma, if all else fails we will probably go down the localised image route that we can resize, upload and control, but for now, we are testing a few things out, thanks for your advice!