Do you feel like you are fighting images on your website? Sometimes you place an image + the size is so rowdy you have to scroll forever to see your text. Other times your words wrap around the image in a weird way. That ends today — let’s dive into the best ways to add images to your WordPress blog.
Using image alignment
The most common way to try controlling images in WordPress is with image alignment. These icons represent the ability to align your image on the page in a few ways.
There are 3 different alignment options + they each interact with text a bit differently. (I’ll be using pics of Brutus to show how each option works.) In order from left to right, your choices are…
This image is set to align left, which means it’s going to “float” to the left of any* text on desktop or tablet devices. On iPhones this layout changes so that it’s easy for users to read the text. If the image isn’t too big, words, other floating images + graphics will all appear to the right of this photo. If the text is longer than the image is tall, the text will then wrap around the bottom of the image.
*Most themes have headings (Heading 1, Heading 2, etc) set to not nestle in next to images set to align left or right. Keep that in mind when testing image layouts on your specific theme.
Align center does what you probably expect it to… center the image in the page or post column. Unlike align left, no text wraps around the image — only above or below the picture, depending on where the image is placed.
Like align left, align right “floats” the image around the next it is next to. But instead of floating to the left, it floats to the right of the page. Notice how, even though there is space, the heading after this image starts below the image?
Use Gutenberg columns to add images on your WordPress blog
Many times align left or align right will get the job done. However, sometimes you want images on your WordPress blog next to words without the weird wrapping. In that case, columns are your best friend for adding images to blog posts or pages.
You must be using WordPress 5 in order to take advantage of this feature.
Add a new 2 column block. Then you can add your image to the left or right column + the text to the other side.
Using columns to place your images does a few things.
- You can add headings (see the bold text above) next to an image, no matter what your theme is set to do with headings.
- It keeps the text in it’s own column so that it can’t wrap underneath the image if space runs out.
- It forces the image to not be wider than the column you’ve placed it in.
Depending on how your theme is set up, the columns will clear out on mobile devices + stack one on top of the other. This prevents any column of text from being too narrow to read + any image from shrinking to an unrecognizable size.
Shrinking big images
Speaking of image shrinking, sometimes you’ll place an image on a post or a page + it will be way too big. Having large image sizes can negatively affect your site speed, but it can also make your page or post really hard to read.
If saving the image at a smaller size before uploading isn’t an option, you can use the built in tools that WordPress provides.
For anyone using Gutenberg, once you’ve added the image to your content, you have the option to set the image size or percentage of the original size in the right sidebar. (This example is set to align right.)
With the Classic Editor, or WordPress versions before 5.0, you can click the pencil icon associated with an image to change the size. You won’t see the percentage option, but you will see a dropdown of preset sizes + the ability to set a “custom size” based on height or width.