What’s in This Post?
Why Use Images?
WordPress Media Library
Add Images in WordPress
Basic Image Settings
Image Compare Block
Add a Gallery
Featured Images in WordPress
Prepare Your Images Before Your Add Them
Image File Names
Optimize Your Images in WordPress
Where to Find Images Online
Why Use Images?
Images draw eyeballs. There’s no way around it. Whether it’s in your Twitter feed or your blog post, a great image can enhance your content and help draw attention to it in a crowded social media timeline. This post will show you how to use images in WordPress and how to make the most of them.
Twitter analyzed more than 2 million tweets sent by verified users, and found that tweets with photos average a 35 percent boost in retweets. Images affect click through rates similarly on other social platforms as well.
WordPress Media Library
The WordPress media library is where your images live on your blog or website. You’ll upload them here and select them for your posts.
When you click to upload images in WordPress, you’ll see this screen. It gives you a place to fill out alt text (we’ll get to that more in a minute), add a caption, and tells you which post it’s uploaded to.
Add Images in WordPress
There’s also an Edit button you can click if you want to scale or rotate the image, but it’s much better to do this in an image editing program before you upload it. You’ll see the URL of the image, which is the actual location of the image in WordPress. This is handy if you need to download a copy of it.
If you’re using Gutenberg (WordPress’ newer text editor), you’ll create a new image block. Click on the Plus icon to add the new block and select Image from the block types. It will take you to the Media Library to select or upload the image.
Basic Image Settings
Once you’ve added the image, in the right column you’ll see image styles. If you prefer a rounded image you can do set just this image to be round or make the rounded image the default type.
As you scroll down in the right column, you’ll see the Alt text box. This is important — all of your images in WordPress should have the alt text. Not only does it help with search engines, it’s critical for accessibility for the visually impaired. Anyone who uses a screen reader needs the cues from alt text to better understand what’s on the page. Your alt text should describe the image and should contain keywords.
Next you’ll select the image size. You can choose from sizes from thumbnail to full size, or enter a custom width and/or height. You can also scale by percentage.
At the bottom of the right column is the Advanced section. Here you can add the title attribute, which the reader will see when they mouse over the image. Like the alt text, the title attributes improve the accessibility of your images in WordPress.
Across the top of the image is a panel that has settings for alignment, adding a link to your image, and a place to crop or replace the image.
Image Compare Block
Here’s a fun image block. It’s called Image Compare. It adds two images you want to compare and a slider that lets you view before and after versions. I lightened my flower image up a little in Photoshop so you can see the comparison.
Add a Gallery
To add a gallery, choose the Gallery block, then click on Media Library to choose the images you want to include. Add captions and drag and drop the images to order them as you like, and you can also crop the images in WordPress, add links, and change the image size.
You can control the number of columns on the page and, although the column alignment changes on mobile, it isn’t the best mobile experience. If you’re serious about your gallery, try the CoBlocks plugin, which offers extra controls and makes it easy to add responsive columns with any kind of content,
If you prefer a slideshow format, choose the Slideshow block. You can choose to autoplay the slideshow and adjust the time between transitions. I set this one to autoplay, but you can still advance the slides manually if you like.
Featured Images in WordPress
Always, always add a featured image to your posts and pages. This is what you’ll see when you post the URL on any social media platform. Your featured image doesn’t have to be any image that’s already in the post, it can be any image you choose.
Prepare Your Images Before You Add Them
It’s best to have your image ready and sized appropriately before you import it into WordPress. If you have Photoshop, use the Save for Web option (Shift+⌥+⌘+S on Mac; Alt + Ctrl + Shift + S on Windows). Experiment with the quality settings to see how far you can decrease quality — and the resulting file size — without sacrificing user experience.
Change the image size to the actual size you want to display. This helps page loading times. Use .jpg images when you can, as their file size is much smaller than .png images. I use .png format only when I need transparency in the image or it’s a logo or other art with the background dropped out.
If you don’t have Photoshop, there’s a site called TinyPNG.com that compresses both .png and .jpg images. You just upload your images and re-download the optimized version.
You can also use Canva to resize your image to the correct size, then use TinyPNG to upload, compress, and optimize.
Image File Names
Give your images meaningful file names. Use keywords. Every time you upload and use a photo with a non-meaningful filename you’re missing a chance to use a keyword. Rename your images before you upload them, then add alt tags and title attributes in WordPress.
Optimize Your Images in WordPress
There are several plugins to optimize images in WordPress. I use and recommend WPSmush. The free version lets you bulk smush up to 50 images. There is a setting that will automatically smush images on upload. Smush is easy to use and will help your page load much faster.
Where to Find Images Online
If you’re looking for images to use, there are numerous free stock photo sites. Here are a few of my favorites:
When I can’t find a great free image, I use Shutterstock.
0 Comments