Cropping an Image for the Web This guide covers how to use the Paint software included with Microsoft Windows to crop images for use on a web page. Opening Microsoft Paint (In Windows Accessories) On your Windows desktop, click on Start. Select All Programs. Click on Accessories. Select Paint. Microsoft Paint opens. TIP: Image Editing Software Microsoft Paint is an easy-to-use image editing program that is included with Windows and does not need to be purchased separately. You may prefer to edit images with software like Adobe Photoshop or Photoshop Elements. The MU Division of Information Technology (DOIT.Missouri.edu) offers Photoshop classes. Opening an Image File in Paint Click on the Paint tab.
Select open. This will open a new window where you can browse and select your image file. When you hover your mouse over the desired file, a popup will display information about the image, including its file size and dimensions. This file is 4,256 pixels wide by 2,832 pixels high. The file size is 9.44 MB (9,677 KB) -- too large for a web page. To prepare an image for use on a web page, it can be resized, or as shown in this guide, both cropped and resized. Select the file you wish to work with and click Open. Cropping the Image The file opens in the Paint workspace. The thumbnail shown here in this guide illustrates that the photo is so large only the upper left corner of the photo can be seen in the Paint workspace when the file is first opened. Cropping Images for the Web Page 2
Before it is cropped, the image can be resized so the area to be cropped is visible in the workspace. Click on Resize. The Resize and Skew box pops up. It will display that the current file size is 100% horizontal and 100% vertical. The image can be resized by entering a percentage or by entering a pixel size. Check Pixels to resize by pixel size. With Pixels checked, you will now see the width and height of the image in pixels. This image is 4,256 pixels wide by 2,832 pixels high. For this example, we will resize the image to be 700 pixels wide. This will allow the entire image to be seen on the Paint workspace. IMPORTANT! Maintain aspect ratio must be checked. This will make sure the height of the image is adjusted to be proportional to the new width entered. Paint automatically calculates a proportional new height of 465 for this new width of 700 and enters it in the corresponding box. Click OK to resize the image. Cropping Images for the Web Page 3
Now the image is ready to be cropped. Click select and a menu will drop down. Click Rectangular selection. The cursor image will change to look like a crosshair. Drag the crosshair down and across over the area to be included in the cropped image. The dimensions of the photo and the area selected to crop will be displayed under the photo at the bottom of the workspace. In this step, the main focus is on selecting the desired image. After cropping, the new image can be further resized to smaller or larger dimensions. A selection area will be marked by dotted lines. The selection can be changed by dragging on the small rectangles at the corners and mid-line. Cropping Images for the Web Page 4
Click Crop. The new cropped image is displayed in the workspace. The width and height of the cropped image are shown at the bottom of the Paint window. A 425-pixel-wide image would fit on a My MU Health web page as a relatively large image. If this size is OK for its intended use, the image can now be saved and uploaded to the appropriate SiteMaker Graphics folder. The cropped image could also be made a smaller size so there would be more room for other content next to it on a web page. To resize, follow the steps shown on page 3 above, then save the new size image. See page 8 for an example of two sizes of this image placed on a web page. Saving the Image for the Web To save the cropped image, click the Paint tab. Save as JPEG picture is selected because the image in this example is a photo. Cropping Images for the Web Page 5
Image file types for the web are JPG (JPEG) and GIF. Use JPG for photos and better quality drawings. Use GIF for most drawings or if a transparent background is needed. PNG files may also be used on the web, especially if you need higher resolution/quality or a transparent background, but they usually have larger file sizes. Navigate to the folder where you wish to save the image. Enter a file name. The file name should indicate what the picture shows. It is helpful to include the pixel size for future reference and to help distinguish the image from others in the folder. The example image is named HealthScreen_425x268 because it is 425 by 268 pixels. Make sure the correct file type is checked JPEG in this example. Click Save. Previewing an Image in the Internet Explorer Browser After you upload your image file to your folder in the SiteMaker Graphics library, you will be able to preview it in the image Preview pane. If you would like to see how it will look on a web page before you upload it, you can preview it in a web browser. Here s how: Open Internet Explorer. Click on the File tab. Select Open Cropping Images for the Web Page 6
In the pop up Open box, click Browse. You may see the message No items match your search if the selected file type is HTML Files. Click the arrow for the dropdown menu of file types and select the image file type you are searching for: JPEG, GIF or PNG. You can also select All Files to see all file types. Select the desired image. Note that in this example the file size is 102 KB This image was also later resized to 200 x 126 pixels with a file size of 59 KB see that image preview below. Click Open. Cropping Images for the Web Page 7
Click OK. The image will open in the browser window and you can see how it would look on a web page. And this is a preview of the image resized smaller after being cropped. See below for how the two images look on a My MU Health web page. Appearances will vary based on individual computer monitors and screen resolutions. An image that is 425 pixels wide by 268 pixels high placed on a web page and aligned left. An image that is 200 pixels wide by 126 pixels high placed on a web page and aligned left. Cropping Images for the Web Page 8
Feedback and ideas for improving this guide or the Toolbox website are welcome. Please email: Christina.Steele@Cerner.com or use the feedback form at https://www.mymuhealth.org/toolbox Note: Do not contact for support and training. See contacts below. IMPORTANT! TO REQUEST WEB SUPPORT, TRAINING AND NEW SITES: Contact the Help Desk at phone 884-4357 or email Help Desk, Hospital (UMHS) HelpDeskH@missouri.edu and ask to have the request directed to Information Delivery (Information Management) Cropping Images for the Web Page 9