Have you ever tried to upload a photo to your WordPress website? If so, you know you’ve had some problems because of all of the settings you can click on. So what do you do? Many people have found success while uploading a photo by following these steps to ensure you don’t end up wondering why your final result is not what you expected it to be.

Do-Re-Mi – Let’s Start at the Very Beginning

Before we even click one button within WordPress let’s pause to talk about files. If you’ve ever taken a photo with a digital camera you are probably familiar with a file type called .JPG pronounced jay peg. A .JPG file is a commonly used method of lossy compression for digital images. Without getting too geeky, that simply means you can take photo and squish or compress its file size down to make it take up less disk space on your computer.

Most digital cameras these days take very high resolution photos, capturing the tiniest of  details. These high resolutions are great for printing, but not always necessary when it comes to uploading a photo to your blog. Generally your digital camera is going to generate a .JPG file which is well over 3000 pixels (px) wide by 2000px high. Such photos are not always the best to use online. The reason for this goes back to their file size. A 3000px X 2000px photo right out of your digital camera is probably well over 5 megabytes (MB). While this may not sound like a large file, when we have hundreds of gigabytes or a few terabytes of disk space on our computers, it is a lot when you have to download it while loading a website in your web browser. I’m sure you’ve been to a site before and painfully had to wait while the page loaded all of the photos.

Resize! Resize Resize!

Best practices say we should always resize a photo before uploading it for the web. If your website is only 1200px wide, you should not be uploading files that are 3000px wide. I like to resize most photos to be no wider than 800px. This ensures the photo will fit nicely within most websites, but more importantly, it will significantly reduce the file size of the photo and how long it takes to download.

If you are on a Mac, you can easily resize photos using Preview. Have a look at a great how-to from the folks at wikiHow. If you are on a Windows PC you can use Paint. Have a look at this how-to from Microsoft.

Let’s Upload!

Ok, so you’ve suffered through my lecture on resizing photos. Let’s open up a post or page within the WordPress admin, and being by clicking the “Add Media” button.

You will first need to make a decision. You may either upload a brand new file or select a previously uploaded file from the “Media Library.” For the purposes of this post we are going to assume that a brand new file needs to be uploaded. Again, you have two choices.

• You may drag and drop an image file from an open folder/finder window on your computer directly onto the WordPress Add Media screen.
• You may click the button “Select Files” to open a new folder/finder window, navigate to the folder where the photo is on your hard drive and select it.

Either way you do it, WordPress will upload your new photo.

Once you have uploaded your photo, you will be shown the following screen which has many options on it. We’ll walk through each of them together.

Attachment Details

The very first section you should review is the “Attachment Details. Here you can set a Title, Caption, Alt Text and Description.

Let’s go over what each of these mean:

• Title – Nothing fancy here. This is simply the title of the image. By default WordPress simply takes the file name of the photo and strips out any spaces or punctuation and forces it to lowercase. You should always replace this with something more meaningful. The title is what WordPress uses to help find photos when you search within the Media Library. By assigning a meaningful title, you will save yourself some time in the future should you ever decided to reuse this file and need to locate it.
• Caption – You guessed it… this is where you enter the caption for your photo. This is not required, so feel free to leave this blank. If you chose to add one, it will display on bottom of the photo on the front end of your website. Note: not all WordPress themes are configured to properly display a caption.
• Alt Text – This box allows you type a short, meaningful description of what this photo is about. For example, if you uploaded a photo of a yellow sailboat on Lake Erie, you could type in: yellow sailboat on Lake Erie. The Alt Text or alternative text, as its sometimes referred to, serves two purposes.
  1. Individuals who suffer from vision impairment utilize software called screen readers. Basically all this software does is read the text on a website to the visitor using his or her computer speakers. When a screen reader encounters a photo, it reads the alt text to the visitor so they know the context of the photo, even if they cannot see it.
  2. Search engines love it! When Google comes to your site, they also read the alt text and it allows them to better index your site and the photos that go along with it.
• Description – A longer image description. Often displayed when you use a thumbnail to link to a larger image.

Attachment Display Settings

Before you insert the photo into the page or post, you need to set the Alignment, Link To and Size.

• Alignment – Here you can choose how the text wraps around the photo. Your options here are None, Left, Right, Center.
• Link To –  This controls what happens when a user clicks on the photo. WordPress provides with the following four options.
  • Media File – This allows you to open the photo in a new tab/window at its full pixel dimension size. This works great if you throw caution to the wind and upload a high resolution photo and you want to link a smaller thumbnail photo to its original size.
  • Attachment Page – Similar to the Media File, however rather than just opening a new tab/window which is a direct URL to the photo, choosing Attachment Page links to a blog-like attachment page with the image on it. This is by far the least likely option you’ll probably ever use.
  • Custom URL – You guessed it, this allows you to send the visitor to any page on the Internet.
  • None – Pretty straightforward here. If you don’t want it to link to anything then this is your new best friend. This is the most often used choice by your’s truly. Since I always resize my photos before I upload them there is often no reason to link it to anything else.
• Size – This allows you to choose from Thumbnail (normally 150×150 in most sites), Medium (somewhere around 250 – 350 depending on the image aspect ratio uploaded), Large (normally about twice the width of the Medium size), Full Size (you guess it, the same dimensions as the file you just uploaded). The Size provides you an opportunity to upload a larger photo (800×600) and insert a smaller size such as the Medium setting into the page/post. Combinging the Medium size with the Link setting above set to Media File, will allow you to display a smaller version of your photo in your page/post, and when the visitor clicks on it, it will open it up in a new window/tab (depending on how the visitor has their browser configured) full size.

Success!

We have gone through each setting. You are now ready to click the “Insert to Post” button to add your photo to your post or page.

Now that you know how to upload a photo to your WordPress website, you’re ready to start sprucing up your next page or blog post without worrying about making a mistake.