if you would take a look at the login page cereal and see what happens www.rovespier.com

Ok, the above code seems fine to me.

Regarding your link, I see some PNG blob data injected directly in the source of the HTML page, so there's must be something else going on, which is probably related by the include of this script:


If the above is this:

then you don't need it and you can remove it safely, that's just an example. And a part that, in the source, I can see the blocks generated by your script:

<a class="show-all-audio" href="#show-all-audio748" style="cursor:pointer" id="show_all_audio">
<img src="http://www.rovespier.com/uploads/thumbs/142271296722.gif" class="small_icon" original-title="hjhhj">

So, this part seems to work fine to me. Just a note: if this is a display page, then you should not resize the images each time, it's a resource intensive task, you should resize them during the upload progress and then simply link them.


ok @cereal its fixed but the images are blur. its a transperancy thing? Yes i thought about doing that in the upload process but the thing is that a picture may shown in three different cases. For example a user may upload its profile photo. in his profile page the dimensions are 400X400. in the main page are 150X150 and there is a thumbnail too 50X50. is there a solution to this?


and i am figuring that if i create three different folders (400X400, 150X150, THUMB) that will take space in the server right?


its fixed but the images are blur. its a transperancy thing?

Hmm, it depends which kind of image format you are using, PNG supports the alpha channel (i.e. transparency), JPEG no.

Also it depends on the original quality of the image, the amount of manipulations done, for example from jpeg to jpeg there is a constant loss of information, then the colorspace and the filter applied to the resize can help a lot, as also the unsharp method. With Imagemagick you can control colorspace, filters and the sharpness.

In practice you have to do some tests to create the best setup for the kind of images you're going to resize. For more information about filters, colorspace and sharpness read:

Not directly related to PHP:

and i am figuring that if i create three different folders (400X400, 150X150, THUMB) that will take space in the server right?

Yes, it can take space when you start to handle thousands of files, but it's worth to pre-process them because:

  1. image resizing is one of the most intensive tasks for web servers, if you have many users at the same time then the server can start to swap;
  2. your method implies to save the original uploaded file, which can reach the limit: for example 2MB. The three (400x400, 150x150, 50x50) resized images, instead, will total around 300/400KB, or even less. Once resized you can delete the original file.

Also by setting the quality to a low level you can save a lot of space, if an image is good you can use 65%, I tend to use 85%/95% for big sizes, 65%/75% for thumbnails. If space is an issue for you, you can consider to use an external CDN.

Security Note: if using Imagick remember to add $im->stripImage() after $im->readImage($file), otherwise, if the image has the same sizes of the expected resizing sizes, for example 50x50, then Imagick will not do anything to the uploaded image. Which can be a problem if the uploader inserts code into the image comment block.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.