需要有关PHP头像脚本的帮助

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?

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

我会事先用GD将上传的头像文件调整大小并转换为180x ...或... x180 PNG图片。

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