How to resize Images

In order to maintain your page load speed, provide a good user experience, and correctly build widgets, you'll need to resize images.

Jump to the tool you prefer using for resizing images by clicking one of the links below:

Adobe Express Template

1. Open Adobe Photoshop.

2. Click New file.

3. Enter your dimensions in the appropriate fields.

Here, we're using the dimensions for a thumbnail image, 360 pixels wide by 240 pixels tall.

4. Select Create.

5. Under File > Select Place Embedded.

6. Locate the file you want to use on your computer and select it. Then click Place.

7. Use the corner boxes to change the size of your image to fit your project square.

NOTE: Hold the Shift key while resizing to preserve proportions and lock the image’s aspect ratio.

Once the image fills your workspace, push the Enter key.

8. Your image is now the size of your project square.

9. To save your image, go to File > Export > Save for Web (Legacy).

10. Verify the image format is either .JPG or .PNG under Preset.

11. Click Save.

12. Update the name of the image file in the pop-up window.

13. Click Save.

Make sure you have saved your image in a place where you can easily access it, like a specific folder or on your desktop.

14. Once the image has been resized, optimize it using ImageOptim, if you are on an Apple machine, or another program.