Working with images is essential for an online business. Images are a powerful way to show people what you’re talking about — text isn’t enough. You need to know how to create, edit and publish images.
Two coaching clients recently asked me — both on the same day — how to insert an image on a WordPress page
They had 3 specific needs:
- Take a screenshot
- Resize the image
- Insert an image on a WordPress page (including adding a hyperlink to it)
I must admit I was surprised that this wasn’t common knowledge but they were struggling with it, so I put together this blog post.
How to take a screenshot
In some cases, you need to take a screenshot. For example, maybe you want to show the cover of an e-book but don’t have that cover image file anymore. Or maybe you want to show how some software screen looks. For the image above, I wanted to show what an image looks like in the WordPress blog post editor when it’s selected, so I took a screenshot.
Both PCs and Macs have screenshot capability built in.
Display the image that you want to take a screenshot of. For example, open the PDF of your e-book. Zoom out (the PDF viewer lets you make the display smaller) so you can see the entire image on your screen.
On a PC:
Windows comes with the Snipping Tool. Click the Start button and type “Snipping” and you should see it. Click on it. Here’s what you’ll see:
- Click New. You’ll see a large plus sign.
- Click at the top-left corner of the image, keep the mouse button down, and click at the bottom-right corner, then release the mouse button. (This is called “dragging.”)
- Click the Save Snip button and save the image with a useful name and in a place where you can find it again.
On a Mac:
- Press Shift-Command-4.
- Drag to select the area of the screen to capture. To move the entire selection, press and hold Space bar while dragging.
- After you release your mouse or trackpad button, find the screenshot as a .png file on your desktop.
How to resize an image
There are many tools that will let you resize an image. Here are a few:
- Open PowerPoint and click the Insert tab, then Pictures (the exact name will depend on your version of PowerPoint).
- Navigate to the image and insert it.
- Click the image and drag one of the corner “handles” – inward to make the image smaller; outward to make it bigger. Never use a side or top handle because that will distort the image. Don’t make a photo too much bigger because it will look grainy.
- Right-click (PC) or Control-click (Mac—this means hold down the Control key while you click) the image and choose Save as Picture.
Windows has a couple of image viewers, depending on the version of Windows you have, but all versions have Paint. Find the image on your computer, right-click it, and choose Open With…, then choose Paint. In Paint, click Resize.
Choose Pixels and then type in the size you want.
You can use Preview, the Mac image app:
- Navigate to the image you wish to resize
- Drag the image to the Preview icon in the Dock or Finder. This will open the image in Preview. You can also right-click or Contol-click the image and choose Open With, Preview.
- Click the Edit button (a pencil) to switch to Edit Mode. This will launch a new toolbar at the top of the Preview window.
- Click the Tools menu, and choose Adjust Size
- Set the units. For web-based images, you should use pixels.
- Type your desired width and height in the boxes.
- Place a check next to “Scale proportionally” to avoid warping the image
- Click OK.
There are also many online services that resize images. Search for “online image resizer” and you’ll find many free ones.
I use Techsmith’s SnagIt to create screenshots and for a lot of my editing. It’s very reasonably priced (only $49.95) and has LOTS of features, all in one place.
Finally, you can resize an image from within WordPress, even though resizing it before you insert it will result in a faster website. I’ll explain that in the next section.
Insert an image on a WordPress page or post
Here are the steps:
- Click where you want the image to appear. Make sure you see the cursor there.
- Click Add Media, then click Select Files.
- Navigate to the image, select it, and click Open.
- Wait while it uploads. You’ll see Attachment Details on the right.
- It’s good practice to add some keywords in the Alt Text box, for search purposes.
- At the bottom, choose the desired alignment, usually Left or Right. For a larger image, I use Center.
- If you don’t want the image to be hyperlinked, the Link To box should say None. If you want it to be linked, click the down arrow and choose Custom URL. Enter the URL in the box that appears. For example, you could link an e-book cover to its sale page on Amazon or a product image in a blog post to its sales page.
- In the Size box, choose an option. If you already resized the image before inserting it, choose Full Size. If you want to make it smaller, choose Medium; this is a good size for an image at the top of a blog post or an e-book cover next to its description.
- Click Insert into Page at the bottom.
Once you insert the image, you can click it to select it and drag it to a new location or use the corner square handles to resize it.
Note: To reduce the size of image files so that your pages load faster, I recommend an image optimizer plug-in. Two options are EWWW Image Optimizer and Smush Image Compressions and Optimization.
Learn to create and edit all the images you need for your business!
You can do everything in PowerPoint, so if you already have that, it’s a great option. I have a course, PowerPoint for Marketing Graphics, that will teach you the details of creating all the images you need.
Have a question or tip? Leave it in the comments! And please share this with others using the Share buttons because every online entrepreneur needs to know how to use images in their business.