Uploading images in WordPress

Don’t miss these important steps when uploading images to your WordPress website.

Digital images make up between 60 and 90 percent of most websites.  Learning how to upload them and optimize them in WordPress and with any type of website is a big deal. This is a two part post on the best way to upload your images to your WordPress posts and pages as well as how to make your images web friendly. Here we are speaking about raster images (Photos you take with your iPhone) and not vector or SVG.

Setting yourself up for success

Prepare your Images for the Web

Photo File Naming
In most situations, your site will be competing for search rank which means you need to follow all avenues of search engine optimization.  The first factor is to make sure your image file names are named appropriately.  This means if you are an event company in Boston, your image file name should be boston-event-company.jpg.  Too many times I see missed opportuniies with the filenames uploaded as img344849.jpg or if the image was obtained from a stock photography company it would be shutterstock-5392023093.jpg.  WordPress pulls the names of your files any uses them in important places like the ALT tag (better explained below). Make sure to name your files accordingly.

Large Photos
One of the biggest issues when I am brought on to optimize a site is that people have uploaded images directly from their digital camera into the website.  This places photos that are extremely heavy onto your site which adds a lot of time to your page load.  The whole idea of having a website is for people to visit it right?  If someone is on a 3G mobile connection and tries to pull your website up, they will most likely give up waiting for your image-heavy site to load.  Your website is much like a plane.  The lighter it is, the higher you will fly. Un-optimized images can cause e-commerce websites to lose sales. Page weight is a top factor for organic search rank which will put your competitor higher in the search results if your site is image heavy.

What is Image Optimization?

Image optimization is the process of cutting down the files size of an image to the point that image quality is still maintained to the naked eye. It also means serving the proper image for the size of the space the user is viewing it.  When you take a photo from a standard digital camera such as your phone camera, the size of the file is typically 5000 pixels wide.  Most website’s do not require any images larger than 1500 pixels wide.  The width of a typical phone screen is 400 pixels wide.  There is just no need to upload images that are 5000 pixels wide to your website. That great, but how do you cut them down to size?

Step 1 Install a WordPress Optimization Plugin

There are many ways to get your images optimized for the web. If you are only uploading a couple images and have experience with an image editor such as Photoshop; you can just use the Export feature and size the image to fit the space you are placing it in.  If you are uploading 100 images, this is not ideal.  Thankfully there are a few plugins that you can install to WordPress that does most of the work for you.  Make sure to install one of the 2 plugins below:

WordPress Image Resizer – Imsanity

At bare minimum, this plugin should be installed for any WordPress website and truthfully I do not know why this is not a standard feature of WordPress. Go to Plugins > Add New , search for Imsanity and install it.  Then navigate to the Settings > Imsanity and set the maximum image size to 1500 pixels wide.  Now when you upload images to your WordPress website, you will not be overloading it with huge images.  This plugin does not optimize as much and is mainly a safeguard from loading images that could cost you pagerank.

WordPress Image Optimizer – Kraken.io

This is a paid plugin at about $5 per month.  Cost really depends on how many images you upload each month but this is a great option.  This resizes and optimizes your images for the best pageload times.

Step 2 Upload your images!

Method 1 Drag & Drop
When you are creating a new page or blog post in WordPress there are 2 ways to get your image onto your page. The easiest way would be to simply drag the image onto the editor.

Video example of uploading directly to the editor

Method 2 – Adding with the Media Button

This is my preferred method of uploading mainly because it is important to place your cursor in the body of text where you want the image to show in relation to your text. Keep in mind you may want the text to flow to the left or to the right of your image and these settings are up next. To use this method just click the “Add Media” button top left of your text editor.

Video example of uploading an image using the “Add Media” button

Step 3 Fill in important fields and Select Options

Once you have selected the image from your computer using the “upload files” tab and before clicking the “Add Media” button, you need to select a few options that WordPress provides you.

Title & Alt Text

The first set of fields is for the describing the image to people using your website with screen readers.  This is called the “alternative text” or Alt Image Tags.  This is good practice for accessibility and it can also add some keyword value to your posts.  I always like to follow the rule of “What is it, who is it, and where is it?”  This text should be short and to the point.  If you only fill in the Title text, WordPress automatically fills in the ALT from this field so there is no need to fill in both.

Attachment Display Settings

Alignment:
This dropdown allows you to align the image left, right, or center.  If you want the text to wrap around the side you can choose to left or right align the image.  Centering the image clears anything left or right or the image.

Link To:
1. Custom URL: Say you want to put a logo of a partner or affiliate company and want to link to that company. Choose “Custom URL” and paste in the full link here.
2. Media File: This option opens the image in a lightbox pop-up style if your theme has this enabled. There may be an additional plugin needed to accomplish this. If anything your image will open to a page that is black with just the image. This can be inconvenient to the user as they need to click the back button on their browser to get back to your website if the lightbox plugin or script is not present.
3. Attachment Page: This opens the image to a page in your website that displays the image in the content area. This is a better option if you are getting the black background and image issue.

Size:
Typically you have 3 choices here. Fullsize, Medium, and Thumbnail. The pixel dimensions are shown and you may need to play around with this until you get the size you like. Smaller the better for page load times. To get an exact size, choose full-size then click “Insert Into Post” then you can hover over the image to change the settings. You will then have the option for a custom size.

Make sure to Click “Insert into post” once you are finished with these settings to then place the image.

Making Adjustments

After you have placed your image into the editor, you may notice you need to resize or crop your image. All that is needed is to make sure you are in the Visual editing mode, click on the image, then click the edit or Pen icon. You will then see all the options from before as well as options to edit the image. This option allows you to crop the image to an exact size. A handy tool if you do not have or use an image editor.

Video Example of Editing an image in WordPress after the image has been placed.