Skip to main content
March 10, 2011

Resizing User Uploaded Images

In this post, Bee shows you two ways to resize images…

Bee Thao | Web & DigitalA website that displays user uploaded photos often has to deal with different image sizes. For instance, you might have a ‘newly uploaded pictures’ section that shows thumbnails and when a thumbnail is clicked, displays the full-size photo. You might also have a ‘regular’ gallery page that shows medium size photos as well. In total, there could possibly three files of the same photo, in varying sizes.

So how do you control image sizes that your users upload so that it doesn’t disrupt your website design?

I’m going to briefly show you two different methods that you can use to make sure user-uploaded images conform to your layout.

Script-based
If you are using PHP and looking for a simple class to do this, check out this script by Simon Jarvis at http://www.white-hat-web-design.co.uk/articles/php-image-resizing.php. It is a neat little class that allows you to save images by width or height or both. You can also resize an image by percentage as well. This class can be integrated into your form or used to generate thumbnails on the fly.
The example below will load a file named picture.jpg, resize it to 250 pixels wide and 400 pixels high, and resave it as picture2.jpg.

load(‘picture.jpg’);
$image->resize(250,400);
$image->save(‘picture2.jpg’);

An advantage to this method is that your image is automatically resized to the correct specification so there is no distortion or loss of image quality. It is also easy to implement, even if you aren’t a programmer but follow directions well.
Optionally, instead of saving the picture, you can simply output the new resized picture straight to the browser using this snippet:

load(‘picture.jpg’);
$image->resizeToWidth(150);
$image->output();

CSS-based
If you’d rather resize your images without the use of a script, you can use simple CSS styling instead of altering the width and height of your image tags. Using CSS is easy and does not require you to upload additional files.

.resize { width: 200px; height : auto;}

This CSS class, when applied to an image makes the image 200px wide and resizes the height to make sure that it maintains the correct ratio.
Conversely, this class allows you to resize the height to a specific size but allows the width to adjust accordingly.

.resize { width: auto;height : 300px;}

One of the drawbacks to the CSS method is that the browser is downloading the full size image before it is being resized. This may cause a delay in rendering the image due to the file size and may cause the image to look blurred around the edges. I would make sure that the images aren’t too big before using the CSS method to minimize download time.

Which method you choose will depend on your particular need. If you are expecting a lot of users uploading photos of various sizes, it may be a wiser choice to use a script to resize the images before saving them to the server. If you do the majority of the image upload, and can control the size but only need resizing in certain areas of your site, the CSS method will work great. Also, if you already have many images on the server, the CSS method will be the fastest way for you to get them to fit your Web layout.

I hope that these two methods will guide you in the right direction for your image resizes needs. If you have any questions or know of a better method, please share them in the comments section.