Editing Your Website
Resizing an Image
Resize an Image in Microsoft Windows
Imagery is an important element of any website because it sets the tone for the page. Resize an Image in Mac OS below.
There is a wide range of applications you can use to resize a photo in Windows. To resize an image, first determine the current dimensions or size of the image. One easy way to see the size of an image is to hover over the file. Most images captured are not optimal for web use. A good height for this image is about 200 pixels which is about 10% of the original height. It isn’t necessary to size the image here but if taken from a digital camera, you will need to shrink it considerably to avoid affecting the page load time.
The easiest way to resize an image in Microsoft Windows is to right click on the photo and select ‘Edit’. This will most commonly open the picture in Microsoft Paint.
If the ‘Edit’ link opens Microsoft Picture Manager on your computer then locate the ‘Resize Image’ link in the right column.
Once in paint, click ‘Image’ from the navigation and select ‘Stretch and Skew’. Change both the horizontal and vertical values to the desired percent and click ‘OK’. We are shrinking the image to 10% of the original size in this example. If your first attempt at sizing the image is not correct, click ‘Edit’ and ‘Undo’ to try again with a different percent.
Tip: Resizing an image more than once will degrade the image quality.
Finally, save your image as a separate file by adding the word “sized” to the original file name. This prevents the original from being altered and aids in locating the correct file when you are ready to upload. Next, go to your Assets page and upload the resized image.
Tip: Saving all the files you upload to your website in a folder called Website Images will help keep you organized.
Resize an Image in Apple's Mac OS
Using Apple’s Preview (5.x+)
- Open the image you wish to resize in Preview
- Choose Tools > Adjust Size.
- Enter new values for width and height, or choose a common size from the “Fit into” pop-up menu.
- To resize the image by a percentage, choose “percent” from the pop-up menu next to the Width and Height fields, and enter the percentage in those fields.
- To ensure that the image keeps its original proportions, select “Scale proportionally.” If you change either the width or height, the other value changes to maintain the proportions. If you choose a size from the “Fit into” pop-up menu, the image’s width or height may be smaller than the chosen size to maintain the proportions.
- If you are resaving the image strictly for reducing the file’s size (optimizing page load times), enter a smaller value in the Resolution Field of the Adjust Size window.
- To make the image’s dimensions smaller without losing any detail, deselect “Resample image” before changing the width or height.
To resize multiple images at the same time, display the images in the same window, select them in that window’s sidebar, and then choose Tools > Adjust Size.
- Select File > Save As… to save where desired for implementation into the Assets Manager. From here, you can insert an image into your website.