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);

Weedpacket

Two points:

Currently you process every image to overlay the domain name every time the page is displayed. Instead, retrieve all the images, process them to overlay the text, and save them; then, when serving the page, link to the processed versions.
Instead of altering the images, use CSS to overlay the text on the image.

Guldstrand

Thanks for your reply.
I have removed the text completely, and output the images directly with readFile() instead.
What else can be done to "speed up" the processing of external images?

bradgrafelman

Guldstrand;11012753 wrote:
What else can be done to "speed up" the processing of external images?

Do less processing. However, given that what you've just explained suggests that you aren't doing any actual "processing" at all... that might be a tad difficult.

Ashley_Sheridan

You could break the page up into several smaller ones. Even doing no processing on the images, it takes a browser time to load in 300 different images, along with all the other assets your page is using. Maybe think of paginating the content, or grouping the webcams into categories.

Guldstrand

Ashley Sheridan;11012789 wrote:
You could break the page up into several smaller ones. Even doing no processing on the images, it takes a browser time to load in 300 different images, along with all the other assets your page is using. Maybe think of paginating the content, or grouping the webcams into categories.

I only show 10 cameras on the same page, (at the most).
But even then, the images loads a while. 🙁

Ashley_Sheridan

Where are the images ultimately being loaded from? Is it from your local server, or is it from a local PHP script that is pulling in the images from a remote server on another site?

Guldstrand

Ashley Sheridan;11012793 wrote:
Where are the images ultimately being loaded from? Is it from your local server, or is it from a local PHP script that is pulling in the images from a remote server on another site?

All images is from external sites and i view them with a local php-file.

Ashley_Sheridan

Why not avoid the middle man and use those external images?

Or, when you output the images with your local script, send along expiration headers that make sense so that a browser can cache them locally and not have to get the image anew every time it requests a different page.

johanafm

Ashley Sheridan;11012797 wrote:
Why not avoid the middle man and use those external images?

I believe that's what he talked about here

Guldstrand;11012737 wrote:
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.

Another thing you can do is create a script which runs on chrontab to update the images every 1-15 minutes or something like that. If the images are taken as snapshots from the cam, you might want to do it every 1-2 minutes, otherwise, 15-30 minutes might be enough.

Then you can serve the images from your server with direct access to the images through your web server. The web server should automatically set appropriate cache headers. To force the browser to update the image when needed, just add a querystring parameter with the image file's filemtime() (modified time, i.e. last time it was written to).

This will mean you only fetch each image once per N minutes, instead of every time a user requests the page.

printf('<img src="%s?t=%s">',
	$filename,
	filemtime($filename)
);