Need help on php avatar script?

Question

I made a simple PHP script to display a users avatar image they uploaded but I was wondering how can I improve the script below.

Is there something I can do to improve the load time on the users avatar images that are very big if so how can i add it to my code thanks.

Here is the code below.

<?php

list($width, $height) = getimagesize("images/pic.jpg");

if ($width >= 180){
 $width = 180;
 echo '<img src="images/pic.jpg" width="' .$width. '" />';
} else {
 echo '<img src="images/pic.jpg" width="' .$width. '" height="' .height. '" />';
}

?>

Answer 1

The best way to decrease load time would be to resize the image files in your code. What you're doing above is delivering the full sized image to the client and using HTML to instruct the browser to resize the image.

UPDATE: You can create thumbnails using phpthumb. Make sure you have GD installed as it is a dependency.

Answer 2

I would require a certain size avatar from the user instead this will keep load times consistent as well as allow you to maintain your same style from your CSS and not have your design varying.

Hope this helps, David

Answer 3

I would resize & transtype the uploaded avatar file to a 180x... or ...x180 PNG picture with GD beforehand.

Answer 4

Since it looks like you are restricting your users to 180px image width anyway, I would resize the picture on upload. Then you can keep the "thumbnail" version for your quick display and only show the "full" version if someone visits a user profile.

Since you are controlling the upload, you can even make the thumbnail square so that all avatars perfectly match in dimensions. To do that, you could just crop the full size to a square.

In either case, I would definitely not simply rely on the browser to resize the image for you. In your example, you are still sending the full image to the browser.

Answer 5

You should consider scaling the image to a max width of 180 pixels on upload and then serve this cached image instead of requesting the size on every serve.

EDIT: The examples from the PHP docs (imagecopyresized()) should give you an idea. You could then simply save the resized image as the username / user ID and serve <img src="images/resized/' . USER-ID-OR-NAME-GOES-HERE . '.jpg" alt="Avatar for USERNAME" />, knowing that the image exists (given that the user is valid).

Answer 6

I suggest that you create a thumbnail version of uploaded images and save the original image in a separate location. Display the thumbnail where appropriate and provide a link to the original, large image if necessary. Here is a PHP script that will help you create thumbnail versions of uploaded images:

Resize Images Using PHP and GD Library