Crop and Resize Images For Your WordPress Website

Support » Content Management » WordPress » Crop and Resize Images For Your WordPress Website

Have an image you need sized and cropped down for a custom section of your website (such as a slideshow, team member image, etc.)? You’re in luck! We’ve outlined a few solutions which will aid you in saving your image to meet your needs.

Before getting started, please ensure your original image file meets the following requirements:

  • My image size is larger than the recommended size needed (for example you have a 3000 x 2000 image that needs to be 200 x 250 pixels)
  • My file is a JPG, GIF or PNG

Now that we have the basics covered, you’ll now be able to edit your image using one of the following solutions:

1.) Using Photo Editing Software

If you have experience with photo editing software (such as Photoshop), you can size down and crop your image as needed before uploading to WordPress. This will eliminate any automatic center cropping of WordPress and give you the ability to make your cropping selections.

2.) Use The WordPress Image Editor

Yes, you can edit your image directly within your content management system! To crop and resize your image, please use the following steps:

  1. Log into your content management system
  2. Navigate to the page or post you need to upload your image to
  3. Remove any old image and upload your full size image to the needed section
  4. Once the image has uploaded to the media library, please select the ‘Edit image’ link in the right hand column under ‘Attachment Details’
  5. Depending on your original image and size needed, you’ll want to first start by resizing the larger size requirement of either the image width or height. For example if you need your image to be sized and cropped down to 200 (width) x 250 pixels (height), you’ll want to start by resizing the height. You can set this height by updating the image size under ‘Scale Image’. Please set your image height (the 2nd number box) to your recommend image size height (for example 250 pixels) and select the scale button. This will automatically resize your image to the needed height.
  6. Next, you’ll want to set your recommend crop width of 200 pixels. To do this, click and drag over your image until you see a selection box. Once you have an active crop selection, you’ll now see a selection dimension box on the right hand side under ‘Image Crop’. Please set this selection to 200 x 250 pixels. You’ll now have the correct size which you can further customize by click/dragging the selection over your image to place where you’d like the image to be cropped. Once you’re satisfied with the selection, click on the first icon (the crop icon) above the image to apply the crop.
  7. Once the crop has been applied, please ensure to select the ‘Save’ button underneath the image.
  8. Once you’ve saved the image, you’ll now return to your media library where you’ll need to select your updated image (which you’ll now notice the correct dimensions in the right hand column under your attachment details) and select the ‘Set featured image’ button
  9. Apply any other updates to your page/post and ensure to click the ‘Publish’ or ‘Update’ button your page. Once you’ve saved the page, you’ll be able to view your updates in real time!