Easily Scale and Crop Images in WordPress

June 23, 2015

Easily Scale and Crop Images in WordPress
CONSUME CREATIVELY

This content is available in:

This content is available in:

TEXT

Subscribe to Our Podcast:

Have you ever found yourself uploading the same picture to your WordPress site over and over again in various sizes trying to find the one that fits perfectly with the other content on the page? It can be an extremely aggravating and time consuming process, wasting unnecessary energy.

If you’re a blogger like me, you know how important it is to use your time efficiently to produce quality content. The less time I spend getting an image to use up exactly how much space I want it to, the more time I have to research interesting topics, write about them in engaging ways, and share them with target audience members. To save time, I use the image scaler available directly within our WordPress site.

How to Scale an Image in WordPress

The first time you add a media file to your WordPress page, there’s a good chance it’s not going to be the size you need it to be to fit comfortably on the page. Of course, you could have used another editing tool to size the image to a specific pixel height and width before uploading it to your media library, but why add an extra step when you can do everything in one place?

Step 1: Upload Image to Library

Within your new post, click on the “Add Media” button near the top left corner of the page. Add Media on WordPressThe screen will automatically route to your media library showing the images you’ve previously uploaded. Click on the “Upload Files” button to add a new image.Upload Files in WordPress

Step 2: Edit the Image

Once you’ve dragged and dropped your photo into the designated area, or selected it from a file, take a look at the attachment details on the right side of the screen.Review Attachment Details

The arrow is pointing to the size of the image in pixels. Now, if I were to insert a 2255 x 1331 pixel image into this post, it would look huge on the editing screen.  Image at Full Size in Editor However, the image would be limited in size by the maximum width set for the screen when viewed on your website. In this case, the image of the turtle would display at 1075 pixels wide instead of 2255 as you can see from the image below. Turtle Pic at Full Size

So you might be thinking: if the image is still going to fit on the screen my visitors are going to see, why even bother messing with the image size? Image dimension size affects the load time for your website. If you have a bunch of huge image files on a single page, your site is going to slow down and visitors might even bounce off the page before it completely loads.

Long story short, you need to edit your images down to at least the width of your website’s content area. In most cases, an 800 pixel wide image should do the trick. Below is the image of the turtle edited down to that size, and the quality still looks great!Turtle picture at 800px wide

To shrink the size of your image in WordPress, click on “Edit Image” in the Attachment Details section on the right. Under “Scale Image” type in the new width you want to use in the little white box and click on the blue “Scale” button. WordPress automatically calculates an appropriate size for the height of the image based on the width you entered so you don’t end up with a funky image that looks like it was squashed together.Edit Image Dimensions in WordPressTurtle Pic at 300px wideIn some cases, you might not want an image to take up the full width of your content area. By scaling it down to more of a medium size (close to 300px) and aligning it to the right or left of your text, you can change up the look and pacing of your web page.

Step 3: Insert the Scaled Image into Post

Once your image is perfectly sized to the dimensions you need, save any changes you made, click the blue “Back” button, and finish up by clicking the “Insert into post” button.

How to Crop an Image in WordPress

Now that you know how to easily scale an image in WordPress, you may be interested in the cropping tool. Notice how the image of the turtle has a lot of background space showing the water and the ocean floor. Maybe we only really want the picture to show the turtle with a little bit of the background around it.

Step 1: Upload the Image to Library

Follow the same process described in Step 1 above.

Step 2: Edit the Image

After clicking on the “Edit Image” button in the Attachment Details section and rerouting to the editing screen, use your mouse to click on the image and box out the area of the picture you want displayed. On the right side of the screen under “Image Crop” you’ll see the dimensions of the area you selected. This can always be scaled down later.

Next, click on the crop icon all the way to the left above the image to view the picture in the cropped format. If you’re satisfied with how it looks, click the blue “Save” button. Crop Image in WordPress

Step 3: Insert the Cropped Image into Post

Now that your image is cropped to the perfect area, it’s just about ready to be inserted into your content. But before you click the “Back” and “Insert into post” buttons, remember to check the new dimensions of your image and scale it down to an appropriate size following the directions described above.

Side Note:

  • You can only scale an image to a smaller dimension in WordPress. You can’t make it larger. That being said, always crop the image before you scale it to ensure it’s exactly the size you want it to be.
  • For example, if we scaled the image down to 800px first and then cropped out the turtle, the largest width we’d be able to insert the turtle image at would be 486 pixels.
Image scaled before cropping.

Image of turtle scaled to 800px and then cropped down to 486px.

  • But, if we cropped the image first and then went back to scale it down, we could still insert the image of the cropped out turtle at 800px like this:
Image cropped before scaling.

Image of turtle cropped and scaled to 800px.

Knowing how these two image editing features in WordPress work is bound to save you some time and will help you avoid the hassle of uploading the same picture multiple times to your media library. Take advantage of this tool to keep your content visually balanced and engaging to your viewers.

Download our free WordPress Training Guide for more help with navigating your WordPress site.

Who Manifested This Madness?

Monica Maye Pitts

This fabulous human, that's who.

Monica Maye Pitts

Monica is the creative force and founder of MayeCreate. She has a Bachelor of Science in Agriculture with an emphasis in Economics, Education and Plant Science from the University of Missouri. Monica possesses a rare combination of design savvy and technological know-how. Her clients know this quite well. Her passion for making friends and helping businesses grow gives her the skills she needs to make sure that each client, or friend, gets the attention and service he or she deserves.

GET MORE AWESOME

If this trips your trigger you'll love our podcast. Get more episodes just like this on:

Easily Scale and Crop Images in WordPress
Email Alerts About New Episodes
Weekly Pride Maker Sign Up - Blog Sidebar
Industry

© MayeCreate Design 2024 | 573-447-1836 | info@mayecreate.com |108 E. Green Meadows Rd., Ste. 9 | Columbia, MO 65203 | Privacy Policy