Easily Scale and Crop Images in WordPress
June 23, 2015
CONSUME CREATIVELY
This content is available in:
This content is available in:
TEXT
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. The 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.
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.
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. 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.
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!
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.In 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.
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.
- 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:
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?
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.