Tips to Resize Photos for the Web
Photos often need to be resized before you can upload them. The longest side of a photo should contain 800 pixels at the most. The longest side of a small passport photo should contain no more than 300 pixels. Larger photos can slow down loading the page.
You can check if your photo needs to be resized in Windows itself. Open the folder which contains the photo. Select the photo (by left-clicking the name of the photo) and its size appears in the grey status bar below. Neither the width nor height of the photo may exceed 800 pixels. When you do not see the grey status bar you have to click on the status bar in the View menu at the top of the folder.
What is a good size?
The best size of an image will depend on how you plan on using it. A&S Computing Drupal 7 sites are 960 pixels wide, so that is the widest image you would need in a Department, Program, or Center website. If you are floating an image in the text of a page with the text wrapping to the right or left, generally you want the image to be 200 - 300 pixels wide.
Image files types for the web
Most images on the web still fall into one of three types:
JPG (or JPEG) = use for photos and images with a lot of different colors
but no transparency.
PNG = use for images with transparent backgrounds. Not rendered correctly
in some older browsers like IE 6.
GIF = not recommended. png is better. Never use for photos since the
max number of colors is 256.
Note: JPG and JPEG are the same image type. At one point some companies
decided on three letter file extensions while others used four.
Resizing versus Cropping
When saving images for any purpose, you will hear two major terms for changing the size of an image: resizing and cropping. Resizing changes the size of an image while keeping the same height to width ratio. If you started with a rectangular image and you resize it to make it smaller, you will still have a rectangle with the same ratio, not a square.
If you need an image to be an exact set of dimensions, you will probably need to crop it. Cropping removes portions of the image and can change the width to height ratio.
You will generally use both of these methods if you need a series of images that are all exactly the same size (e.g. images in a slideshow, profile photos of faculty).
Note: you should very rarely make an existing image larger. An image only contains so much information, and if you enlarge an existing image, it will often look fuzzy or pixelated.
Different Options for Resizing Photos
1. Fast solution using Outlook: e-mail photos to your own mail address. You can use Outlook to resize your photo without using a utility. Using Windows, right-click on one (or more) photos. Choose sent to and next mail recipient. Outlook will ask if you want to resize your photos. When you click ok, an email opens with the photos as attachments. These photos have the right size for publishing on your webpage. You do not have to actually send the email, just select the pictures and drag them to a (new) folder (or use right-click and save as).
2. Desktop resizing. Download this photo resize program to your Desktop. Also place the photos you want to resize on your Desktop, or open the folder containing your photos. Select your photos and drag them to the photo resize program icon on your Desktop. Your photos are resized automatically and are saved as the original filename plus -800. For example: a photo which is named piet.jpg is renamed to piet-800.jpg after resizing and the longest side of the photo is 800 pixels wide.
3. Online picture resizer. When you cannot install a program on your computer, surf to Pic Resize and select the photo you want to resize using Choose file. Optionally you can crop your photo. Choose the custom size option below the Resize your photo heading. Resize the longest side of your photo to 800 and follow the rest of the steps to complete the resizing.
Related Topics:
More Useful Tips: