0
(0)

This tutorial is a basic, beginning, introduction to the WordPress Media Library. We’re not yet going to go over image optimization nor regenerating thumbnails — we’ll get to that in another post.

I’m slowly working with Zip on writing that first post on Slothverse.com. We’ll have the results and a tutorial soon.

One part of writing WordPress posts is adding images. Your posts don’t HAVE to have images at all — but images can make your post stand out and shine, they can illustrate a point, they can add than extra je ne sais quoi to your article.

Working with images in WordPress is a subject that merits a post all to itself. I had planned to write about this subject a bit later, but I realized it warranted adding before we talk about using the WordPress block editor. Images are such an integral part of most blog posts.

This post may contain affiliate links — which means that if you click a link that is an affiliate link and make a purchase I may get a small commission at no additional cost to you that will likely be spent as follows, in the following order: 1) supporting this or one of my other blogs 2)buying delicious coffee beverages 3) paying off camera gear and travel and 4) oh, yeah…necessities like books and food.

A Word About What WordPress Does with Images

I feel that this warrants an explanation as I had a client who just wanted help with understanding WordPress so he could continue to work, with more success, on a project he had already started. I found he was uploading a bunch of the same images in different sizes to his website.

While you may want to do this in a few, specific, cases, most of the time you do not need to do this because of how WordPress handles images:

One image in WordPress turns into many.

When you upload an image to WordPress, it “crunches” your images into several images. The image will still show as a single image in your media library but “behind” that is actually several images. By default, WordPress will have a square 150px by 150px “thumbnail,” a 300 px Medium-Sized image, a Large image, and the original.

However, themes may add on more image sizes. Some plugins will tack on even more image sizes. It’s easy to find, one day, that your website is producing a large bundle of image sizes for every image you upload.

Using the WordPress Media Library to Add an Image

WordPress Media Library thumbnail view

To add an image to the Media Library, click Add New under library in the left hand menu or, if you’re in the Media Library already, you can click Add New from the button on top. Alternately, you can choose the plus sign and then Media from the admin bar.

You’ll then see the upload area (circled in blue) above. Here, you can drag files from your computer. or you can click the button to open a window to find and upload files from your computer.

From the Media Library screen, you can also search and browse images you’ve uploaded and you can uses the toggles (circled in green) to switch between a view with mutliple thumbnails or a vertical list view, which gives you more information about the images and allows you to bulk delete photos if you’d like.

WordPress Media Library List View
The media library in list view.

The photo above shows list view. Here, you can check off boxes and use the dropdown to bulk delete images, see who uploaded them (if you’re blog is multi-author), see if they’re “attached” to a specific post, view a link to any comments on the media item (if you’ve allowed comments, and see when they’re uploaded.

In the future, when Zip starts using an image optimization plugin, he’ll also be able to acess some information here about image optimization stats for each image.

Image Editing in the WordPress Media Library

If you hover over the image title in list view, you’ll see some links. One of them is Edit. If you click Edit, you’ll end up on a page like this (minus the cute sloth, unfortunately):

WordPress Media Library Image Editing Screen

On this page, you can change the image title, and under the image you’ll note some other settings you can change:

Alternative Text

Also called “Alt Text.” Here it says it’s to “Describe the Purpose of the Image,” and to leave it blank if its purely decorative.

Zip’s lazy, sloth-like inclination is just to leave it blank and avoid the effort of entering alt text for any image he uploads. But he needs to overcome this because Alternative Text is important.

Why enter alt text?

The real use for Alt text is to use in screen readers. If a person with a visual disability is using a screen reader, it will read the alt text of the image to them. It’s an accessibility feature.

Another reason you may want to add alt text is for search engine optimization. Keywords in your images can help to tell search engines what your post is all about and may help you rank for a term. SEO plugins like Yoast can help you know when to add keywords to your alt text — and when you may have gone overboard in doing so. However, it’s often a challenge to describe an image in a way that would work for a screen-reader and include the keywords you want to use. I shudder to think how many of my posts would sound if read by a screen reader.

Caption

A caption, of course, is shown under your image. I often don’t use a caption for images. However, it’s handy if you want to cite an image source. You can also add a caption directly under a picture as you’re creating/editing a post or page.

Description

If you’d like to write a description for your image, you can do so here. When you upload an item to the Media Library, an attachment page gets created for that media item. You can choose to have WordPress show the attachment page for an image or just the image. If you show the attachment page, this is where you’ll see the description.

Then, of course, click update to save your changes. You can also view the image URL on this page — useful later if Zip ever needs to specifically link to the image.

Edit

You’ll also notice an Edit button just under the photo. Click it and:

WordPress Media Library image editing screen

Voila! A page with some editing tools. Now we can resize, crop, edit, and rotate images right within WordPress. I prefer to use other editing tools and rarely use these, but it’s nice to know they’re here if I need to do a small edit on an image I’ve already uploaded.

Adding Images in Your WordPress Post

When you either choose Featured image from the right hand settings menu or add a post via the post block in the post editor, you’ll see a screen like this:

Uploader

You can click the Media Library tab and choose from images you’ve already uploaded, or you can upload things via drag or drop or browsing from your computer just the same way you did from the media library.

What Kind of Images Can I Add to the WordPress Media Library?

Most image file types are accepted by the WordPress Media Library. You can add:

  • .png
  • .jpg and .jpeg
  • .gif
  • .ico

Note that you cannot upload .svg files here. I’ve needed to use .svg files in some projects and had to upload them using FTP or the File Manager in cPanel.

Is the WordPress Media Library Only For Images?

No, the Media Library is NOT only for images. In addition to images, you can add:

Audio and Video Files

Video files, particularly, take up much space. I’d recommend considering uploading to a separate service such as YouTube or Vimeo and then embedding that in your page instead of direct video uploads (unless the video is for a background video for your page.)

Similarly, if you don’t wish to upload sound files to your media library, you can upload them to Soundcloud and then embed them.

However, the WordPress Media Library does accept the following file types:

  • mp4
  • .mov
  • .mpg
  • .wmv
  • .ogv
  • .3gp and .3g2

Document Files

You can upload files such as PDFs, Word Documents, and such to WordPress. You can then link to them so your site visitor can download them.

If you, however, want your visitor to view a file — a PDF, for instance — directly on your webpage, you’ll need to install a PDF viewer. Several plugins for viewing PDFs on your page are available in the WordPress plugin repository.

You can upload the following document file types to WordPress:

  • .psd
  • .pdf
  • .doc and .docx
  • .txt
  • .xls, .xlsx

There! Now that we’ve covered that, I think we can review the WordPress block editor as Zip gets on with writing his first post.

How much love or how many cups of hot coffee does this post deserve?

Click to rate it!

Average rating: 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

As you gave this post a good rating:

Follow us on social media!

We're sorry you didn't like this post.

Help us improve!

Tell us how we can improve this post.

Subscribe to our email list

By default, you'll get a weekly digest of new posts with reviews, tutorials, tips, and tricks, as well as occasional newsletters or offers. But you can customize your preferences or unsubscribe at any time you wish.

Thank you for subscribing.

Something went wrong.