Working with High Resolution Images in WordPress

By December 2, 2018 June 26th, 2020 Tutorials

Transcript

“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.”