So I was asked recently to demonstrate the basics of working with images in WordPress,
particularly when you're dealing with images that are of a high resolution. So if you look
at my desktop here, I have three images. I will just display them quickly - this one,
this one, and this one. Now, what they have in common is they're all the same size...
if I hover over them right here, you'll see that they are 3200 by 2400, that's a fairly
large size, and I can demonstrate that by opening one of them in Paint. So in Paint
what you see is a portion of the sky, in this particular shot, and the reason is that the
file is actually, the photo is actually quite large. So there's a lot of detail here, and
I have to scroll around to see it all. Now obviously this isn't practical, and that's
the same reason that Windows will show you a smaller version of the file, like this,
it will scale it to your screen size, so that it's consumable, and like, easy for the user,
rather than impractical, like Paint.
So, now that we've established the size of these images, we're going to talk about uploading
it to the WordPress platform, and how to use the tools in the WordPress platform to actually
modify those images. Now, there's also another option - you can modify the files before you
upload them, but that's not for this video. I'll cover that in another video. For this
video, we're talking about using the tools that WordPress gives you. Let's upload the
first image right here.
Now that it's finished uploading, I'll just confirm with you that on the right-hand side,
we see a resolution of 3200 by 2400... that's a large resolution. If I wanted to incorporate
that into my page or blog post, what I would do is I would want to insert it... but certainly
not at the full size, because as we saw, that's very impractical. So on the right-hand side
here, we have Attachment Display Settings and we have size options. So clearly full
size is impractical, forget about that.
Instead what I think we're going to do just for demonstration's sake is I'll choose Medium.
So I'm going to choose medium right here, that's 300 by 225, and I will insert into
the page. So what do you see? The image gets inserted.
Now, what WordPress is doing internally is interesting. I'll go back to Add Media to
demonstrate what I mean. Put simply, WordPress is keeping your image in its original form,
so 3200 by 2400, it's still visible in the Media Library, and what it is doing is internally
it created another copy of the file, of the photo, that is smaller, and the reason it
does this is so when people are actually viewing your blog post, it doesn't have to force them
to download the entire file, that would be very inefficient. So instead, it's got a smaller
version of the file that downloads really quickly, that gives you the exact size that
you want. So that's one way to use WordPress to make your images more practical when they're
injected into your post, or your content, anywhere.
Now, as a next step, let's go back into Edit Page, and I'll demonstrate how you can resize
a photo using WordPress' built-in tool. So what I'll do is I'll just drop the image here,
which triggers an Add Media action, and once I have access to the image in the media library,
I will direct your attention to the Edit Image option, on the right-hand side. So if I click
Edit Image, you'll see that on the left you have the image, you have some controls up
top, which we're not going to use right now. And you have some options on the right-hand
side.
Now what we want is to resize this image to a more practical size. So on the right-hand
side, you have the original dimensions noted, and then you can change it to something else.
So let's say I decided that 3200 was too much, and I wanted to make it less large, I could
something like 1200 as the new width of the image, and then click Scale. What this will
do is essentially resize the image while maintaining the proportions. Okay? That's important, maintaining
the proportions, because otherwise the image could warp and look completely wrong. So what
we have here is a new dimension has been set, of 1200 by 900, right? So and then I can click
Back right here, and what you'll notice is you will have a new size listed in the media
library of 1200 by 900. Now, you can still apply Attachment Display Settings in the bottom
here and select different sizes, and it will still continue modifying, keeping the original
and creating a separate sized version of the image to use in your post.
Another interesting thing I wanted to mention is if you click Edit Image again, you always
have the option to restore the original image - just zoom in right here so you can see it,
on the right-hand side, it says "Discard any changes and restore the original image. Previously
edited copies of the image will not be deleted." So if you click Restore Image and then you
go back, you will notice that the size on the right-hand side is back to what it was
before.
Now, for image number 3, I'm going to choose to crop it instead. I'm going to X this off,
and I'm going to drag image number 3 into my post, which will trigger again an Add Media
action. So now that it has uploaded successfully, I'm going to decide that I want to edit it
once more and my intention this time is something very unique - I'm going to decide to crop
everything but this globe in the center, that's my focal point, I just care about this, nothing
else matters, right? So that's the task we'll be working on.
WordPress makes this relatively easy. I just have to drag my mouse anywhere over the image
on the right hand side to the exact positioning that I want, let's say this, and then what
I'll do is I'll click the icon up here that corresponds to the action that I want to do.
In this case, this icon is the crop icon, so I will click it... and there you go, it
cropped it. Now, notice that the scale is still normal here, still the regular scale,
but when I click save... and then I look on the details on the right, the image is no
longer as large as it was before. Instead, it's 995 by 768 - that is, the cropped size.
So now, if this size is actually reasonable enough, I could inject it outright as an original
full size, right here, in the bottom-right side, or I can just continue and just change
the size in the attachment display settings to something smaller, to make it more practical
for my post. The interesting thing about this is that WordPress always keeps the original
of the file, as we showed earlier, but it also allows you to keep the edited version
around, the most recent one, and to also change the attachment display settings and have like,
a copy of the image created on-the-fly that you're going to use for a particular purpose,
like a thumbnail, or a medium-sized version for example. Right? So this is a medium sized
version of the image.