Simple Image Resizing for the web
Take me straight to the tutorial!
THE PROBLEM:
As you’d expect, here at Kyan, we work with vast quantities of images on a daily basis. It can therefore be quite easy to take for granted the knowledge we have acquired as a result.
Consider this with the continually falling prices and the ever growing specification lists of digital cameras and we find ourselves with a small/large problem; clients with giant photos, both in terms of dimensions and file size, that they find difficult to upload to the web. It’s not unheard of to download an image straight from a digital camera that exceeds 10mb.
The fact is that there are still a large proportion of people who simply aren’t as well practised as we professionals are, when it comes to manipulating images so they are web ready. A problem that quickly falls into our hands as developers.
At the end of the day, it is very easy to build functionality into a website that allows it’s users to upload images. As developers though, the responsibility falls with us to consider the cost to the client of file storage and the server resources required to process the uploaded images. As a result we place relatively low maximum file size and dimension limits on file uploads, in order to maintain site usability and to keep server costs down.
However, the reality is that uneducated users are unaware of such restraints and will often attempt to upload images downloaded off their digital camera to a website with these limits. It is not unheard of for these pictures to be in excess of 10mb in size; far too big for uploading to the web.
The fact is though, that our original 10mb image can very quickly be re sampled into a more web friendly format that is most likely less than 0.5mb in size. A size that should result in a happy user when it comes to uploading to the web.
Let me just confirm, this is NOT a dark art and it doesn’t require any vast amounts of technical know-how.
THE SOLUTION:
Fortunately, the lovely people over at Adobe have provided a free online version of their hugely popular piece of software, Photoshop. This is a streamlined version of what is a professional tool and this makes it ideal for everyday internet users to get to grips with.
HOW-TO:
So, you’ve just taken a few snaps on your camera and you want to upload them to your fancy website. Make sure you have downloaded the images to your computer and you know where they are within your documents. Then…
1. Visit the online Photoshop editor: http://www.photoshop.com/tools?wf=editor
2. Click on the “Upload photo” button. A warning message will appear indicating that only JPEG files can be edited with this tool. Most digital cameras these days will provide your photos in this format so it is safe to continue by pressing the “Upload” button on this pop-up.
3. Locate the photo on your computer and press “Open”. This will upload your original photo to the Photoshop tool ready for editing. If your photo is particularly large or your internet connection is a bit slow then be patient at this point, it may take a few seconds.
Once your file has been uploaded, you will be presented with your original photo and a list of available tools.
4. Select the “Resize” tool from the left hand side.
5. You will be presented with a list of options towards the bottom of your screen. Select the “Website” option.
6. Press the “Done” button in the bottom right corner.
7. A pop-up will then appear with a few options of how big you would like your image to be when you save it. In most cases leaving this set to “Maximum Size” will be absolutely fine for usage on the web.
8. Press the “Save” button, find a location on your computer where you would like to save your new image, type a suitable name and then press “Save” again.
9. You’re all done. You can now locate your new image and upload it to most websites without any hassle.
10. This was so quick and easy I added a 10th step just for the hell of it.
If anyone has any problems with any of the stages described above then please do let us know. Leave your comment below and we will try and help you out as soon as we can.
Tags: tutorial, resize, image, photos, uploading, filesize, photoshop, web
Tweet