WordPress makes it easy to embed photos and images into pages and blog posts, but an image that is the wrong size can be distracting and keep readers from focusing on your content. An important element of content entry is properly setting WordPress image sizes and making sure these support strong usability.
There are a few built-in sizes for images in WordPress posts, but you might find that sometimes (most of the time?) they aren’t quite right for your needs. They’re slightly too large or too small and you’d rather have better control than the preset values.
Not to worry! Like most things in WordPress, a little extra tweaking can go a long way. Let’s walk through some options for updating default images sizes.
The method of mage entry makes a difference
There are two main ways to add images to a WordPress blog post, and the method you use to add them to your content does make a difference. Adding a picture as a Featured Image is easy, but it gives you almost no control over your image size (to change a Featured Image’s display size requires editing the page template or overriding with CSS). If you insert a picture directly into the post via the Add Media button, you will have greater control over the image’s dimensions from within the post itself.
Pro tip: Some theme templates use the Featured Image as the content to generate a slider or a certain article section of the home page. If you aren’t seeing images added via the body of a post where you expected them to appear, chances are you need to add a Featured Image to that post instead.
Options for setting WordPress image sizes
When you insert an image via the Add Media button, you’re initially given the choice of only four options: Thumbnail, Medium, Large, or Full-Size (the actual dimensions of these options depends on other factors, such as the size of your original file and the dimensions specified in your WordPress dashboard settings). What you won’t see is any way to specify different dimensions. So where do you customize WordPress image sizes?
The easiest way to get a size not listed here is to go ahead and insert the image into the post and edit the settings after insertion. Once you’re back in the post content screen, click on the image and go to the edit panel (the pencil icon). Change your size drop-down to “Custom Size” and voila! You now have the control.
Another cool feature here is that when you change one dimension (width or height), the other will automatically update to ensure you keep the same perspective/ratio.
This is great if you just need to change the size of the image, but what if you want even more control? Depending on the “flavor” of the current site you’re designing, you might want to add rounded corners, shadows, borders, padding, etc. to your photos. In that case, it’s CSS to the rescue!
Under the Advanced Options of the same image edit dialog, you can set a custom class for your image. Simply specify an “Image CSS Class” name in the box (anything you want) and create a class in your stylesheet with the desired settings.
Why specify an image size at all?
Couldn’t I just upload the images in the size I want and set everything to full-size? Why do I even care if “width” and “height” variables get added?
Realistically, you probably don’t care, but a search engine does. One of the little things you can do to help optimize WordPress for SEO purposes is to ensure every image has a specified width and height dimension. If you specify those settings from the image dialog, WordPress adds the appropriate code for you.
Avoid image resizing issues
Long gone are the days of creating a website that is only viewed on a desktop monitor. Today’s sites have to look good on desktops, tablets, smartphones and even televisions. One trick you can employ is to use percentages and “max-“ settings whenever possible. Take this scenario: On one post, you have an image that cannot be any larger than 400px wide. Instead of specifying “width: 400px”, try using “max-width: 400px”.
This technique won’t work in every situation, but what makes no apparent difference when viewed on your monitor might make ALL the difference when the site is loaded on a tablet or smartphone.
This could also save you a lot of time and headaches down the road trying to iron out responsiveness and resizing issues.
Pro tip: Percentages can do funky things to images. For example, setting “width=50%” on an image might not do exactly what you expect. However, they’re incredibly helpful if your image happens to be wrapped in a <div> tag, and you apply the max-width % to the div instead.
You’ll have to play around with the various methods and options to see what method works best in your situation. But at least now you’ll be able to find the custom image settings in WordPress and make modifications as needed.
Also published on Medium.