How to Resize & Edit Your Images in WordPress

Read More

shirleyansley_bio
Hey There

I’m Shirley. Your brand is a hidden treasure and my job is to help you get seen, heard, and paid what you’re worth.

How to Resize and Edit Your Images in WordPress — 10 mins

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

  1. When it’s resized, you images will load faster
  2. 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.

Right Click and select Inspect

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.

How to find the width size

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.

Scaling your images in WordPress

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
Cropping and rotation options in WordPress

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.

Get on the Designer List

Want the inside scoop on everything you'll need to show up confidently online? Join the Designer List and get updates on latest projects, inspirations, and all the tips you can handle.

Leave a Reply

Your email address will not be published. Required fields are marked *

Share on facebook
Share on google
Share on twitter
Share on linkedin