Show external images - best/fastest way?

[Guldstrand]

I'm working on developing a Webcam portal for Scandinavia, and would need some help.

 

There are about 300 webcams portal, (we have been given permission to display them).

Given that several webcam operators/owners do not want everyone to be able to see the direct link to their cameras, I had to "hide" the links using a php-file.

 

I collect and read all external images via a php file, and this makes the images load very slowly.

Is there an ultimate way to speed this up?

 

Below are parts of the code that I use to view the images.

 

$bild = "link-to-external-image";

header ("Content-type: image/jpeg");

$string = "mydomain.com";
$font = 4;
$width = imagefontwidth($font) * strlen($string) ;
$height = imagefontheight($font) ;
$im = imagecreatefromjpeg($bild);
$x = imagesx($im) - $width -5;
$y = imagesy($im) - $height -5;
$backgroundColor = imagecolorallocate ($im, 255, 255, 255);
$textColor = imagecolorallocate ($im, 255, 255, 255);
imagestring ($im, $font, $x, $y,  $string, $textColor);
imagejpeg($im);

[Psycho]

Is it absolutely necessary to add the domain as text into the image? Could you just show the domain as text above/below the image? Then you don't need to process the image, just read it and spit back out to the user.

 

In any event, I would add some code to time each step in that script and find where the most time is being used. Then see what you can do with that specific code: modify it, change to a different process, etc.

[Guldstrand]

Thanks for your reply.

 

Would it reduce the load considerably, if i remove the text from the image?

Any ideas on how i can "time-check" the code?

[Psycho]

Would it reduce the load considerably, if i remove the text from the image?

 

Yes.

 

Any ideas on how i can "time-check" the code?

 

I already have. I first rewrote the code into a function and then, for testing purposes, added a line between each step to capture the microseconds

function createImageWithText($image_path, $text, $font)
{
    $time['Step 1'] = microtime();
    $width  = imagefontwidth($font) * strlen($text);
    $time['Step 2'] = microtime();
    $height = imagefontheight($font);
    $time['Step 3'] = microtime();
    $image = imagecreatefromjpeg($image);
    $time['Step 4'] = microtime();
    $x = imagesx($image) - $width -5;
    $time['Step 5'] = microtime();
    $y = imagesy($image) - $height -5;
    $time['Step 6'] = microtime();
    $backgroundColor = imagecolorallocate ($image, 255, 255, 255);\
    $time['Step 7'] = microtime();
    $textColor = imagecolorallocate ($image, 255, 255, 255);
    $time['Step 8'] = microtime();
    imagestring ($image, $font, $x, $y,  $text, $textColor);
    $time['Step 9'] = microtime();
    //header ("Content-type: image/jpeg");
    //imagejpeg($im);
}

 

Then I calculated the difference in milliseconds between each step. And here are the results from particular run:

Step 1 - Step 2 : 0.00003500
Step 2 - Step 3 : 0.00001500
Step 3 - Step 4 : 0.05962100
Step 4 - Step 5 : 0.00003500
Step 5 - Step 6 : 0.00000800
Step 6 - Step 7 : 0.00001200
Step 7 - Step 8 : 0.00000700
Step 8 - Step 9 : 0.00002200

 

As you can see, the time to go from step 3 to step 4 took longer than all the other steps combined. The action performed on that step was

$image = imagecreatefromjpeg($image_path);

 

That was with a kinda big pic (800 x 600 I think). But, it would probably still be the bottleneck with smaller images. Also, I was doing this with a local image. If you are reading the files remotely you are going to have added overhead with that. But, that is what is solving your problem of not providing the images directly.

 

Edit: I reran my tests with a remote image (from facebook) and the results were not changed much. but, you might want to test the time to read the images from the site you are working with.

[Guldstrand]

Interesting. I really appreciate all your help.

What is the most "optimal" way to only read(?) the image directly to the browser, without the text?

[Psycho]

Interesting. I really appreciate all your help.

What is the most "optimal" way to only read(?) the image directly to the browser, without the text?

 

I don't know - I'm not going to try and figure out all the possibilities and try and benchmark them. But, the simplest thing I can think of would be this

function displayImage($imageURL)
{
    header ("Content-type: image/jpeg");
    echo readfile($imageURL);
}

$imageURL = 'http://waternationlogbook.files.wordpress.com/2012/06/ocean-2-13887.jpg';
displayImage($imageURL);

[Guldstrand]

I've allready change it so i view the images with readfile() instead, but the images still loads a while. 

Is there any other things i can do to "speed up" things?

[Psycho]

I've allready change it so i view the images with readfile() instead, but the images still loads a while. 

Is there any other things i can do to "speed up" things?

 

My results were pretty instantaneous. So, my only assumption would be that it's a connection issue. Remember, your server first has to request the file from the external server. Then your server sends the file to the user. So, every image displayed to the user has to go through two separate http requests. So, there could be a delay on either transmission or both that is causing a problem. Try adding some timing tests to see how long the file is taking to be read. That will at least tell you if the problem is on that end.

 

Also, for testing purposes, take out the whole process altogether and just create an image tag with a direct link to the image and see what that performance looks like. If that also loads slow then the problem is due to the responsiveness of that external site and there's not much you could do. Since these images are generated via webcams I'm assuming they need to be current and caching them would be out of the question.