So you may have recently updated your website to a super sleek design and now wondering “How the heck do I get my images to look good with this new design?” Or maybe you have all these great images taken from a recent photo shoot but whenever you upload them to your website, they’re HUGE! Turns out there are a lot of people just like you who can’t seem to figure out exactly how to resize and edit your images once they’ve been added to your media library. Not a problem! Today we’re going to be talking about how to do just that within WordPress.
In this post we’re going to be talking about:
- The advantages of resizing or editing your images
- Finding the ideal size for your images
- How to resize your images
- How to crop your images
- How to rotate your images
- How to flip your images horizontally and vertically
The advantages of resizing or editing your images
So we know the main reason you want to resize your images has a lot to do with the way you want them to look on the website. But there are other advantages to knowing how to adjust your images in WordPress. The advantages of resizing your images are
- When it’s resized, you images will load faster
- You’ll be saving server space therefore allowing you to use that space for something else
Just keep in mind that large images are usually wonderful when they need to be printed for physical documents, but they’re not really necessary for your website. In fact they bulk up your website, and load slower, which can and will affect the overall user experience.
Finding the best size for your image
Usually if your template, or customized website doesn’t come with instructions for the best sizes for your image, there’s a work around that will help you figure this out. Using Google chrome you want to right click on a space in your website where content would lie, select “Inspect” and this will open up the code on the right. Don’t worry about having to learn any code, we’re just looking for one thing, and that is the width of the content area.
When you hover your cursor over the content area it will highlight and you should see a tool tip at the top. The first number is the width (which is the number that we’re looking for) we’ll want to use this number to size the width of our images.
Resizing Your Images
- Go to your media library
- Click on an image
- Here you will have the option to edit the image. Click Edit Image
- Under “Scale” you will now have the ability to resize the image using your guided width.
- Enter the width
- Hit scale
Now you’ll have a resized image. Note that if you’re working with the image in real time you may need to refresh that particular page to enable a new resize image.
How to Crop Images
When you’re in edit mode for any image you also have the option to crop the images. This is useful for instance if you have a horizontal image that you may want to make square or a vertical image that you want to make more horizontal.
- Go to media library
- Click and image
- Hit edit
- Start the cropping process by clicking directly on the image and dragging outward. You’ll see a dotted canvas appear with square boxes that will allow you to manipulate the box. Anything greyed out will be deleted, and anything inside the boxed area will stay.
- When you’re all set, click the crop button right above the image
- Click Save right below the image
How to Rotate the Images
Rotating your images may be a great idea if you want the image to look different to match your themed design.
- Go to media library
- Click on an image
- Hit Edit
- Right above the image you’ll have “Rotate Left & Rotate Right” options. You’ll also have flip horizontal and vertical.
- When you’re all set, click save
How to Restore Your Changed Images
If you ever make a mistake or simply want to return the image back to its original dimensions and size there’s a way to do that too. While you’re in the editor below the area that says “Sale Image” you will see a button that will say “Restore Image.” Simply click this and you will be back to your original.
Summary
That’s it! You just learned the importance of scaling your large images in WordPress. By finding out the minimum width size needed for our pages or blog posts, you can now source something that is no smaller than that size.
