“A picture is worth a thousand words” is never truer than when it comes to websites.

Of course, it’s important to have great content on your site, but no one likes hitting a wall of text on the screen. Especially if they’re viewing your site on a mobile phone, which many of your visitors probably are.

Images communicate much more directly than text. You can use a big chunk of your homepage to explain what your site’s all about, what you do and why they should care… or show them a picture that says it all in one glance.

It’s more efficient and it speaks to the viewer’s emotions, not just their rational mind.

Adding images to your WordPress site isn’t difficult, though there are a few challenges you might encounter. In this article, I’ll take you through the most important ways to bring visual media onto your page, and what to do about the most common problems.

Ways to include images on your site

There are several ways to incorporate pictures (or video) into your site, depending on where you want them to appear and what you want to highlight.

media library WordPress

  1. Media Library

In general, to include your own images on your site within your text content, you will upload them into your Media Library.

When you want to add one to your site, go into the content editor and place your cursor where you want the image to appear. It can be above, below or in the middle of the text, or on a blank page.

Then click on the Add Media icon, located above the content. From here you will have the choice either to upload a new file or use on that you’ve already stored in the library.

When upload or select an image, it will give you an Attachment Details pane where you can enter media information: title, caption, alternate text and description.

Below this, you will see the Attachment Display Settings where you can change the size and alignment of the image.

Finally, just click the blue Insert into post or Insert into the page button.

  1. Embedded images

Another easy to add images is by embedding. It doesn’t require uploading the file to your site, but just linking to where it appears on another site.

WordPress automatically embeds content from several sources, including:

  • Instagram
  • Imgur
  • Hulu
  • Photobucket
  • Reddit
  • YouTube
  • Twitter
  • Tumblr
  • SlideShare
  • DailyMotion

Find a complete list here.

For images or video from these sites, paste the image URL directly into your content area. It should be in its own separate line and not hyperlinked. The link will change immediately to show a preview of the image within your content.

If your want to change the image size, place the URL within this shortcode and specify the dimensions:

Of course, you might want to use images from a source that WordPress doesn’t embed automatically. In this case, again put the cursor where you want the image and click on the Add Media icon. Choose Add via URL, paste in the link and hit Upload.

Keep in mind this will not work for every site. For security purposes, WordPress has an internal whitelist of allowed sites that you can embed from.

Wordpress Image tutorial

  1. Galleries

The first two options are ways to upload a single image as part of your content. You might instead want to include a group of pictures, or a whole section of your site devoted to images.

For this, you will make a gallery.

WordPress has a built-in feature for creating simple galleries, which is no more complicated to than adding a single image.

Start by placing your cursor where you want the gallery to be, and then click the Add Media button.

Now you can either upload multiple images, which will automatically be grouped together as a gallery, or select the images you want from you media library. You can also combine new and previously uploaded images by switching back and forth from the Upload Files and Media Library tabs.

When you’ve selected all the images you want, click Create a new gallery at the bottom of the screen. This will take you to the Edit Gallery page, where you can rearrange your images, add descriptions, set columns and size, etc.

If you’re looking for something a bit flashier, you can try one of the multitudes of WordPress gallery plugins. These are usually much more flexible and aesthetically appealing than the default gallery and might include features like lightboxes, animations, albums and pagination.

Some of the top gallery plugins are:

  • Envira Gallery: Fast, responsive and highly customizable, Envira is a frontrunner in a crowded market.
  • NextGEN Gallery: One of the oldest and most popular gallery plugins, but unintuitive and can be difficult to use effectively.
  • Upfront: Actually a complete way to run your site entirely from the front-end, Upfront includes a drag-and-drop gallery function that makes it extremely easy to create beautiful collections of images.
  • Huge-IT Portfolio: Allows you to add unlimited, professional-looking galleries and lightboxes to your page.

Before you install any plugin, check the ratings and make sure it has all the features you need.

With galleries, loading speed is very important. Multiple images can really put a drag on your site, and this will impact your users’ experience. I recommend using WP Smush to compress your images with no visible loss of quality.

  1. Lightboxes

A lightbox is an elegant way to display images on your page. It’s an overlay or pop-up window that displays a full version of a picture while making the rest of the page dark behind it. The lightbox will display only when the user clicks on the image, which otherwise is just set within the page or gallery.

It brings a trendy, professional look, and showcases the image.

Lightboxes can also be used for videos, slideshows, opt-in forms and more.

To add lightboxes, you can either code your own or download a lightbox plugin, such as Responsive Lightbox or Simple Lightbox. Good lightbox review can be found at this link.

 one page website design demonstrating slider

Common slider, allow switching between first screen images using navigation arrows.

  1. Sliders

A slider is a slideshow incorporated into your webpage, usually at the top of the page. It can run automatically or allow users to click through the different images. Sliders are an eye-catching way to greet visitors and display your most important information and offerings, before even going into the text.

The drawbacks of sliders is that they can slow down your site quite a bit, especially if the images aren’t optimized, and many of them aren’t mobile responsive.

Soliloquy is a great slider plugin that addresses both of these issues: it’s both responsive and significantly faster than most other options.

Nivo Slider and Revolution Slider are also very popular and highly effective slider creators.

Troubleshooting for common image problems

Having trouble with images on your site? Here are a few of the most common problems and what to do.

Image won’t upload

If you can’t upload an image to your media library, or it displays as broken when uploaded, there’s a good chance your file permissions are set to the wrong levels.

File permission settings can get changed if your web hosting service runs an upgrade, or if someone tries to hack into your site. It’s pretty easy to reset them.

Go into your website via FTP and go to the /wp-content/ directory. Right-click on the /uploads/ folder and select File permissions. From here, set the file permissions for the directory itself to 744 by typing the number into the box and selecting Apply to directories only at the bottom of the dialogue box.

Now set the permission level for the files themselves to 644. Select Apply to files only.

If this doesn’t work, try 755 for the directory.

Image is too large

Another reason why your images aren’t uploading is that the image is too large. Large image files take a long time to load, which might exhaust your site’s memory limit.

In this case, you’ll get an error message saying something like, “filename.jpg exceeds the maximum upload size for this site.”

You can add some code to try and increase the maximum file size allowed for your site. However, this doesn’t always work, and even if it does that huge file is really going to drag down your site’s loading time.

That’s why it’s better to just optimize your images for the web.

Basically, you want images to be in JPEG format. This has slightly lower visual quality than PNG but loads much faster. Simple images can be in PNG, but anything with a lot of colors should be JPEG.

You can do this in Photoshop, TinyPNG, JPEGmini or that WP Smush plugin I mentioned earlier. These tools will reduce image size without compromising quality too much.

Images don’t look right

If your images look too large, too small or not aligned right, you just have to familiarize yourself with WordPress’s media tools.

Go to your media library, select the image you want to change and click the Edit link to open the Edit Media page.

Here you will be able to perform basic editing: resizing, cropping, rotating, changing alignment, etc.

Conclusion

Images are one of the most important aspects of a website. They’re a powerful tool for delivering clear, direct messages to your visitors, as well as spicing up your site’s look.

Whenever you’re adding media, just keep in mind that load time is the single most important factor in user experience. You don’t want to add a bunch of gorgeous images at the expense of your site’s speed: no one will stick around to see them. So make it beautiful but keep it fast!

 

Leave a Reply

Your email address will not be published. Required fields are marked *

Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match