Resize an image before user downloads it?

So this will no doubt come as a stupid question from an ignorant person, but I was wondering if there is any easy way out there of resizing an image BEFORE a user downloads it?

I am pulling in images from a 3rd party database, which I have no control over. I'm also not allowed to cache anything from it under their T&C.

They give a few different sizes for each image. But I am ending up resizing half of th开发者_如何转开发em on my pages with CSS.

So I was wondering if maybe using php or javascript or something! (I really have no clue do I), I could resize these images before my users waste time downloading much bigger versions.

The only reason I ask really, is that I know the Manchester United website kind of does it (with the aid of a piece of Adobe stuff I think), so I thought that maybe there might be something out there that anyone could use?

http://www.manutd.com/en/News-And-Features/Football-News/2011/May/Sir-Alex-Blackburn-reaction.aspx

http://www.manutd.com/~/media/64B766EE4A37488AA65DC7B08E5ABC1B.ashx?h=179&la=ar-SA&w=480&rgn=0,78,1200,524 -> 18kb compared to 160kb -> http://www.manutd.com/~/media/64B766EE4A37488AA65DC7B08E5ABC1B.ashx

(obviously I don't want the cropping technique)

If the images are coming from a server you don't control, the short answer is NO. You can't resize an image until you've downloaded it. Without caching a resized version, you are at the mercy of the 3rd party server. Unless you use a server side proxy program, yet this is probably more trouble than it is worth.

Yet as I've pointed out in the comments, http://www.manutd.com will resize their images for you. In the link h=height, w=width and rgn=region (left,top,right,bottom)

http://www.manutd.com/~/media/64B766EE4A37488AA65DC7B08E5ABC1B.ashx?h=80&la=ar-SA&w=120&rgn=0,0,1200,800

You only need the h and the w. If your h and w don't match the aspect of the image it will crop rather than skew. look at both of these. The image is 1200x800 aspect ratio 3x2

w=240, h=160 3x2 (whole image)

http://www.manutd.com/~/media/64B766EE4A37488AA65DC7B08E5ABC1B.ashx?w=240&h=160

w=160, h=160 1x1 (cropped)

http://www.manutd.com/~/media/64B766EE4A37488AA65DC7B08E5ABC1B.ashx?w=160&h=160

After I've played with it more, you can get by with just the width(w), and I'm assuming this also applies to just the height. (EDIT: yes it does)

Whole image, 480px wide...

http://www.manutd.com/~/media/64B766EE4A37488AA65DC7B08E5ABC1B.ashx?w=480

MORE EDITING: Understand, any time you see a '?' in a url, you are requesting a page from a program, and the stuff after the '?' are parameters for the program, and '&' seperates the parameters. The server at manutd.com is using a program to resize their images, just like a proxy program would resize images for you. If you did resort to a proxy program, if it was a decent one, it would take a link like http://YourServer.host/proxyProgram.php?img=imageHost.org/imageName.jpg&w=240&h=160 given a link such as that there are all sorts of server side solutions to resize the image.

Yet without a cache there is the possibility that you will resize the same image many times, and just the thought of that turns me off.

I'm gonna quit editing now!

Have fun!

Skip

Try using ImageMagick for PHP. It allows you to resize and modify images server-side. There are some examples here

Just off the top of my head, here's a pretty ugly way to get it done:

Create a PHP page that takes all of your requests. So instead of doing this...

<img src="http://other.domain/img.jpg" />

Do this:

<img src="http://your.domain/images.php?name=img.jpg" />

Then have your PHP page grab the image from the 3rd party site, and recreate it at whatever size you need:

$newe = imagecreatetruecolor($width, $height);
$old = imagecreatefromjpeg($fullpath);
$oldSizes = getimagesize($fullpath);
imagecopyresampled($newe, $old, 0, 0, 0, 0, $width, $height, imagesx($old), imagesy($old));

header('Content-type: image/jpeg');
echo $newe;

Some stuff that might trip this up:

• If the T&C doesn't allow caching of images, they might not allow you to access their images with server-side code.
• You'll have to adjust some of the code if you're doing other image types (gif, png)

This has to be done on the server. The technique used depends on what you're using on your server. If it's .NET, there is built-in functionality to handle resizing.

@ Taze well server side, but he gets the images from another server and it seems you have not read it what he is doing and what he is allowed to do.

theoretically you could cache it (what you are not allowed to) on your own server, resize it with gdlib or imagemagick and give it to the user and then delete the copy from the server

but thats against the rules of the 3rd party