Skip to: Main Content Search Main Navigation Audience Navigation

Guide to Resize an Image

Did you accidentally upload an image that was a bit too big and looks kind of like this when you view its preview?

 

Big Image

 

Uploading images that are this large is not the best of ideas because it can cause slow down of your page as your 10MB image is downloaded by your visitors each time they view that particular page. The image may appear to be smaller based upon how you use the image, but this is only your page distorting the image into a smaller size.

 

You can easily resize your image within CommonSpot if you are a Subsite Administrator. Login to your Subsite Administration page by visiting the top level of your site and adding admin.cfm to the end (http://author.oit.ohio.edu/yoursite/admin.cfm). From there, you will see a grey box in the middle of your screen titled "Subsite Statistics". Click on the number next to "Images".

 

image-count

 

On the next screen, you will want to find the guilty image. If you are not sure of the image name, clicking on the "Image Filename" link will show you a quick preview. If you still can't find the image, check to make sure you are looking in the correct subsite and that the "Include Child Subsites" checkbox is marked at the top of the window and then click the "Filter" button.

 

Once your image has been spotted, click on the white-paper-with-a-pencil-and-green-arrow icon next to it.

 

edit-image

 

This will open the image editing tool area. From here you can add blur effects, flip, rotate and crop your image. From this tutorial we are only worried about resizing so click on the resize icon (seen in red below). A good standard size of an image is going to depend on where it is going to go. You manage page should have directions of how big or small you should make an image for your Promo Images or Title Image, but if you still aren't sure then take your best guess. The largest area on your website is between 500 - 700 pixels wide. A good measuring point is the main image at http://www.ohio.edu/ is 640 pixels wide by 360 pixels tall. So we are going to set our penguins to 512px wide. Make sure to keep the "Keep Aspect Ratio" check box marked (seen in green below) so it will automatically set the width and keep the same dimensional ratio. Basically keeping your image from stretching or smushing.

edit-image-menu

Click on "Apply". Now, your image may not look like it did much of anything, but trust me it has been resized. Go ahead and click save. This will open up yet another dialog asking how you want to save the new resized image. I would recommend "Update existing image." because this will have your new resized image show up in the place of wherever the image does now. Or, if you want to make a thumbnail or another copy of the original then you may select "Save as a new image". 

 

save-new-image

 

And there we go! Our big 759KB image has been reduced to 30KB. Much better!

 

new-image-size