Having images the correct size is important to your Inspire Website. Images that are too small will appear pixelated. Images that are too big will make your site run slowly. If you are trying to have a group of images appear on your site uniformly, they will all need to be the same size. In order to do this, you may need to resize the images.
Working in WordPress
If you are trying to match an image size that already is in your Inspire site, you will want to know the size of the image. Then you can resize your other images to match that size.
To find an image size in WordPress:
1. Go to “Media” in the backend dashboard
2. Within the Media Menu, click on the Media Library and find the image you want the dimensions for in the Media Library.
3. Select the specific image you are interested in. In the upper right of the image appears a list of information about it. The dimensions is the last item listed, this is the size in pixels.
Once you have the size of the image you are looking to match, you will want to resize your other images to that size.
Adjusting your Image in Photoshop
If you are looking to edit your image, one way to do that is through Photoshop. If you have access to this program, below are instructions on how to resize your image. If you don't have access to Photoshop, you can skip to the next section on how to Adjust your Image without Photoshop. Photoshop is a useful program because it does the best job compressing an image for your site.
First, open your image with Photoshop.
The next step depends on how specific your image size needs are. If you are only needing to compress a photo to a general, smaller size follow steps A-C. If you have specific dimensions that do not follow the current aspect ratio of the image continue to Steps 1-5.
A. Select Image>Image Size in the toolbar
B. A box will appear asking you for the width x height (this is best if set to pixels so you can view in comparison to WordPress media)
C. Type in a pixel size according to a general ideal size
1. Make sure your image is a layer, first by checking the right hand tab labeled “Layers”
- If there is not a tab section labeled “Layers” hit F7 on your keyboard
- You will then see a panel with a thumbnail of your image─if it says “Background” double click the panel and click ‘OK’ to make it a layer
2. Select Image => Canvas Size in the toolbar
3. Set to pixels and enter the width and height of desired size
4. Adjust the image to the frame by selecting Edit => Free Transformation.
5. Hit Enter and save as a JPEG!
Adjusting your Image without Photoshop
You can edit the size of your images within Wordpress as well. At the bottom of your image is an Edit Image button.
When you edit the image, you can rotate the image, if necessary, and also resize the image. To edit the image you can determine new dimensions of the image (in pixels). If you type in one dimension of the image, Wordpress will automatically calculate the other dimension. This ensures that your image does not become skewed or cropped.
If you want to crop your image, this option is also available in the same place as above.
1. Click within your image and drag your mouse around the area you would like to keep--anything in the darker area outside of the crop box will be cut out
- If you have a specific size you would like to crop your image to, type that size in 'Selection' under 'Image Crop'
2. Once you have an area selected, click on the crop icon at the upper left above the image and save!
If you are on a PC, you can also resize the image using Paint. Save the image to your computer and follow the steps below:
1. Right click image and select Edit
2. Find the Resize button in the toolbar
3. Decide if you want to use percentage (ex. if the image needs to be 50% smaller) or pixels (when you need a specific size for the image)
- When main aspect ratio is selected, the current dimensions will stay parallel to what you change it to
4. Hit OK and save as a JPG!