[This post contains video, click to play]
I want to start off the conversation about adding media to your WordPress 4.7 website by showing how to insert images into your pages. But before we get to that I’m going to briefly talk about WordPress media settings.
What Happens When You Upload an Image to WordPress
WordPress automatically takes an image that you upload and makes a number of copies of it. As long as the image is large enough, it will take that image and reduce it down to the large size and then it will take it and reduce it down to the medium size and then it will create a thumbnail size.
Best Practice: Size Images According to Your Theme
Some themes have other image sizes that may be specified as well. Here you can specify these three. What’s important to know is that you’re going to end up with a much nicer looking site if you set your image sizes to the appropriate size for the theme. The problem, of course, is that it’s not automatically obvious what image size is the right size.
What I have taken to telling people lately is that all the images that they upload, unless it’s an icon or something that’s always going to stay small, should be larger versions than what they expect they’re going to use. That way they can let WordPress create the perfect size for their circumstances.
Recommended Image Sizes
My recommendation for large size and medium size is that the large size should be the size of the width of the content area and the medium size should be half of that and then the thumbnail size should be whatever is appropriate for the theme. It doesn’t have to be square, it can be any dimension. What they do with the thumbnail is scale it down so that one side, either height or width, fits into that dimension and then crops the other dimensions off of the other two sides.
Right now this site is using the 2017 theme. So let’s look and see if it tells us what size to use. Not here so let’s look at the dashboard at home. Look at screen options and turn welcome back on and that’s not telling us either. I don’t see it anywhere telling us what size of image to use for post so let’s just go to look.
Theme Example
This theme takes a great big image and plasters it across. In that case I think what you want is an image that is at least 1920 pixels wide and I would say a 1080 pixels tall. It is cropping it down I think. Well, actually it may very well be showing us 2080. I guess it is showing us the full amount of that image. It starts off with the big full image and then its regular content is 524 pixels wide. So that’s what we would set our large size to and then we just cut that in half for the medium size.
Let’s go back to settings and media and set our large size 525. The height doesn’t really matter. Then our medium sized will be 260 and my max height I think was 1024. Really, you’re not going to have an image that big but there’s no use in cropping it down. The thumbnail in this case is this big massive image but it’s usually your featured image. Let’s see what happens.
This theme is automatically inserting a smaller version of that image into this version of the post. We don’t even have to do that ourselves and so they aren’t really using a thumbnail sized image in this.
Let’s look at categories for a second. Yes, that’s what they’re doing. They are using a great big rectangular image here so they’re taking my 1920 image and reducing it down to fit this size. The theme is actually changing the size of the image based on the size of the window here.
So WordPress is automatically creating smaller images for different mobile configurations. So I’m going to take this size here and I’m going to make it 150 x 1024 for the thumbnail and that will allow me to have a nice very small image without cropping it in a case where I might want to use the thumbnail size.
Let’s save those changes and I have all of those available to me. Now if I upload an image that was not only 400 pixels wide, it would only create these two image sizes right because all of my images really are 1920 x 1080. Actually, these images aren’t. This image is 1170 x 984 but it still qualifies as big. My real blog images, they are 1920 x 1280. So it takes this great big image and is going to make them into smaller versions.
Insert an Image into a Page
Now that you’ve had a review of the media settings let’s actually insert images into some pages. Let’s go to pages, all pages and just look at this example here. View this page. This is a page that is not using the featured image so if we want an image to shows up in here then I’m going to do that.
Is it the same width? It is, perfect. Let’s say that I want to put an image right above this paragraph. I put my cursor there, click add media and I can select a file here. When I do that I’ll select the file first. Let’s pick a piece of fruit.. Actually how big is that? That might be too big. Yeah, 2500 pixels, that’s too big.
Options Available When Adding Images
We’ll take our beautician and insert her. She’s 698 by 864. There are a number of options when you insert an image.
- Alt Text
- Alignment
- Linking
- Size
When inserting there is the option to add alt text which is a useful thing for SEO. I can choose an alignment. I can choose whether or not it links to anything and I can choose a size. I’m going to choose the large size here, alignment is none and I’m going to insert it into the post right there. If I update the page and view it there she is sitting inside the space.
Adding Different Image Sizes and Alignments
Now let’s say that I want to add an image that doesn’t take up that much room and have it here next to the text. I can put my cursor directly beside the text that I want to insert image and click add media. First, how big is this picture really? 432 x 480, okay that’s good. So we’re going to take this picture of my chihuahua and this time we’re going to align it to the left, we’re not going to link it to anything and we’re going to use the medium size.
Hit insert into the page. You can see that while she’s taking up the whole space the dog is only taking up half and the text sits beside him. Sometimes people will add images back and forth on opposite sides of the page. So let’s come down a bit and place the cursor next to this text. Hit add media and let’s take that picture. We’re going to align to the right and use the medium version again. Insert that into the post.
If we want the image to line up with the top of the paragraph then take it right to there. Drag it to this point actually and it flows the right. Let’s update the page and take a look. So you can see how you can choose different sizes and placements of your images.
Let’s just add a thumbnail to this as well. So add media and we’ll take this little picture and we’ll take the thumbnail version of it. Insert it into the post. Whoops, this is floating to the right. But when I click on it I get these edit choices. I can align it to left. I can align it to the center which breaks all the text. I can align it to the right so that you’ve got this title sitting right here beside it. And that’s how you insert pictures into a WordPress page.
Featured Image
The featured image is a special image that is used by the theme. In fact, as we can see in this case the theme is not using this featured image. There is no picture showing up here in the featured image. The only time the picture shows up is if we’re on a post. Let’s view the post. Why did I get a cinnamon latte? This is a cinnamon latte but it’s showing a sandwich. Well, didn’t see that happening but we can set the featured image by clicking on it and then coming down and finding the right image. Here’s the right image.
So we’ve set the featured image and when we view it you’ve got that big image sitting there. So that’s where the featured image gets used. In this case, the featured image gets used at the top of blog posts and also shows up on archive pages in a smaller version.