8 simple Steps for for editing and successfully adding images in WordPress

I recently taught a webinar with Andrea Bailey from Lightbox Communications called Website Confidence. We wanted to share a few tips on using WordPress. If you wish, go here and listen to the full webinar as well as see my slides.

I thought that one of the more valuable items I shared was a more in-depth information about adding and editing images. There’s a lot of details to know and understand that can be overwhelming when you start adding images to the WordPress software such as making sure they are the right dimensions for your blog. I’ve included Eight Steps below to help you be successful with images in WordPress!

 

pixlr

 

 

STEP ONE:

I find that I like to edit my photos in an editor OUTSIDE of what WordPress provides. I’ve used the WordPress visual editor and have never been happy with the results. Since I don’t always have a copy of Photoshop, I started looking for an alternative and ran across pixlr.com – it’s a browser based app that lets you do a lot simple editing, including layers. For our purposes of this training, we will just highlight how it can reduce image size.

reducesize

 

 

STEP TWO:

Inside of Pixlr, just open a photo you want to edit. Many times, you will first need to edit the photo by its dimensions. It’s easy to adjust the width and height in pixels. I usually adjust blog photos to be 600 width or less. For slider images, most of them want at least 1000 pixels wide.

 

multidims

 

 

STEP THREE:

Don’t forget to adjust the quality of the image. 100K-60K is the ideal size for a WordPress Image. Then save your image. Many times you see a blog post and the picture is taking a super long time to load. It’s because the image’s file size is huge. It’s probably downloaded straight from a digital camera or a smart phone and it’s still in its original format!

imgquality

 

 

STEP FOUR:

Log into your WordPress blog or website and go to the WordPress Media Library to upload your photo. You can upload 1 or many photos at a time.
uploadimg

STEP FIVE:

After uploading the photo, you can adjust the settings in the right bottom corner. WordPress lets you adjust the alignment, link to a website, and the size. WordPress likes to use default setting for images, which most of the time, is helpful. In general, I use the medium size for blog post (except for this blog post, I’m using the large since I want to show more specific detail and since it’s a tutorial.

addtopost

STEP SIX:

Once you’ve added your image, you can drag and drop the image within a post or page around content. This can be a bit awkward but is effective if want to move it just a little bit.

adjustinpost

 

 

STEP SEVEN:

Click on an image if want to adjust an image (change it’s alignment) in a post or page. A menu will pop up giving alignment options and the pencil icon for further adjustments.
advancedadjust

STEP EIGHT:

Now you can REALLY edit your photo. Again, it offers left, center, right or none align. You can change the size (again these are the WordPress defaults). You can link to a website, but here’s a trick that can really help you: Add a little CSS code to pad space around your photo. Think of your website like a magazine layout, you don’t want the text and content bumping into the photos. I usually add a margin: 10 px (px is pixels) and that lets the photo has a 10 pixel invisible border. It’s amazing how that can make a huge difference.

That’s it, eight simple steps to improving editing and adding your images to WordPress.

I also offer 1 on 1 WordPress training via phone/Skype and in person (if you live in the Portland metro area). I’ve trained over many business owners on how to successfully use their WordPress and have confidence. Sign up for a training session today.

oneononetraining

 

Comments are closed.