2

I have a PHP webpage that takes a BLOB from a database and outputs it as an image. When the user uploaded this image I stored the filesize (e.g. 491099) into the database.

When the image is requested through my webpage I add a watermark, set the HTTP HEADERS and output the image through a imagejpeg($img). The problem now is that when my image is fully loaded (takes almost no time) my browser still seems "busy" (loading indicator rotating). When requesting this page through an asynchronous call this makes the loading time long as well, even though the image is actually loaded within no time.

When I simply remove the Content-length header, the image is loaded just like before but now the browser stops right when it's loaded so the process time is really fast.

So it seems like the browser thinks (due to my Content-length header) that it should still be loading something while it's actually not...

Removing the Content-length header is no option since this is required in many browsers I've read.

// set the header for the image
header("Content-length: " . $image->imageSize);    //would be 491099 in my example
header("Content-type: " . $image->imageType);
header('Content-Disposition: inline; filename=" '. $image->imageName . '"');

$watermark          = imagecreatefrompng('../images/watermark.png');
$watermark_width    = imagesx($watermark); 
$watermark_height   = imagesy($watermark);  
$dest_x             = ($image->imageWidth - $watermark_width) / 2;  
$dest_y             = $image->height - $watermark_height - 5;
$img = imagecreatefromstring($image->image);
imagecopymerge($img, $watermark, $dest_x, $dest_y, 0, 0, $watermark_width, $watermark_height, 55);

imagejpeg($img);

(Note that $image is an object of a custom image class that I created which holds all information regarding an image.)

Anyone has any idea why I am having this behaviour?

Thanks!

Charles
  • 50,943
  • 13
  • 104
  • 142
Jules
  • 7,148
  • 6
  • 26
  • 50
  • 4
    You are altering the contents of the image by adding a watermark (thereby very likely altering the size of the image data as well), yet you set the `Content-length`-header to the size of the original image. That sounds like asking for trouble. – Decent Dabbler Feb 17 '13 at 18:15
  • 1
    The *Content-Length* should denote the length of the content that is actually sent. If you don’t know that for sure, don’t send *Content-Length*. – Gumbo Feb 17 '13 at 18:16
  • @fireeyedboy I have been thinking about that too, but I assumed that adding a watermark of 11kB on top of an unchanged image shouldn't really change the filesize..? – Jules Feb 17 '13 at 18:18
  • 1
    My guess - when you're adding watermark you're using different compression value than original image (imagejpeg defaults to 75), so you're not sending as much as you're saying you are so it keeps waiting for remaining data. Re-compute after adding watermark. – Mahakala Feb 17 '13 at 18:58

2 Answers2

3

Try instead:

ob_start();
imagejpeg($img);

// this should be the real image size
$size = ob_get_length();

header("Content-length: " . $size); 

// send it
ob_flush();
nice ass
  • 16,471
  • 7
  • 50
  • 89
  • Ok thanks, and what will the impact be of this solution on my performance? I assume the process time will be a lot longer...? – Jules Feb 18 '13 at 09:30
  • No, that shouldn't happen. If it still does, the problem must be somewhere else – nice ass Feb 18 '13 at 11:27
  • I think it's strange PHP doesn't let you define the new content size in another way, but yeah... It does the trick. Thanks to @fireeyedboy for the comment on my question and explaining the issue. Accepting this answer because it's the only relevant one. :) – Jules Feb 21 '13 at 08:34
1

Adding a watermark on top of an unchanged image creates a new image, which will almost certainly have a different filesize, especially if it is a jpeg (lossy compression). As a matter of fact, some image programs and libraries will recompress a jpg even if you make no modifications, resulting in a different file contents (although probably not a visibly different image).

One Trick Pony's answer will get you the correct filesize of your new image with a minimal performance impact.

The other option would be to add the watermark before you save the blob to the DB, but then you lose the ability to render the original.

thelr
  • 1,134
  • 11
  • 30
  • Yeah but that's not an option since I need the original image at some point. But thanks! :) – Jules Feb 21 '13 at 08:32