Introduction and learning outcomes

In this lesson, we will delve deeper into the media library. We will learn to navigate and manage the media library, add ALT text, and understand the importance of optimizing images.

What is the media library?

Media consists of the images, video recordings, and files that you upload and use on your site. And of course, media is inserted into pages and posts. I also think you’ll agree that media plays a crucial role in enhancing a website’s overall experience and effectiveness. You can add various types of media to your library, from photos, screenshots, audio, PDF documents, spreadsheets, PowerPoint presentations, and more.

Navigating the media library

When you open your media library, it will open to the default grid view. In the grid view, thumbnails of images, audio icons, etc, are all arranged in a grid structure. Here, you are able to filter through your media to find what you are looking for. At the top, next to the grid view icon, you can filter your media by media type and date. The All media items drop-down allows you to select by the types of media, such as images, audio, video, documents, and even spreadsheets. You can also view any media that is unattached to any posts or pages. This means the media is in your media library, but you haven’t used it anywhere on your site. Let’s use the filtering option, for example, only to see audio files. Or documents, like a PDF. Or even spreadsheets. And then, of course, you can go back to seeing all media items. Next, the All Dates drop-down allows you to view images based on their upload dates. You can quickly find media you have uploaded in a specific month, or you may choose to view all. When you click on Bulk Select, you can delete media simultaneously. You can also search for media using the search block at the top right, for example, using words from the description or file name. In this case, I would like to see all my shoe-related images done with a simple search. You can also view your media in List View. All your media will be listed below each other in List View, as the name implies. You will also be able to see the file name and type of file, for example, a PDF or JPEG. To add media to your library, click on Add new media file in the sidebar or at the top. Once selected, you will be able to drag and drop single or multiple files into the page or use the select files option.

Adding media from the media library

When you add media to a page or a post using the Image block or the Gallery block, for example, you will be able to upload images directly from your computer into your post or page and media library or directly from your media library. When it comes to larger videos, it’s better to embed them via YouTube or Video blocks, as it will save space in your media library and for better performance.

Editing media

When you open an image, you will be able to add attributes such as alternative text, the title, a caption, and a description. It is important always to add ALT text to an image. The ALT text is a concise description of an image for users who can’t view the image, and it’s also good for your site’s SEO or your site’s search engine optimization. Adding a description also enhances SEO and allows for better organization and understanding of the image’s purpose or content. When you click on Edit image, you can crop the image, scale it, or resize it for image optimization. The dimensions update automatically once you change the height or the width. And don’t worry; when you select Restore original image, you can restore the image to its original format. You also have the option to rotate or to flip the image.

Image optimization

To end off, let’s briefly talk about image optimization. It is advised to optimize images before uploading them to your media library to improve page load speed and save service space. You can use web-based tools to achieve this, for example, sites like TinyPNG, Bulk Resize, or Squoosh.app, to name a few. Remember to save images with a descriptive and relevant file name before adding it to your media library. It helps search engines understand the content of the image, contributing to better SEO. Search engines may use file names as a factor when indexing and ranking content. Another option is to use an image optimization plugin. There are various image optimization plugins available to choose from when you search the plugins directory. When you find the plugin that suits your needs, you can install, activate, and follow the necessary steps. Both of these methods, using a web-based tool or plugin, improve overall performance by compressing images without compromising visual quality — all the best as you use the media library to elevate your site to the next level.

Practical

Use WordPress Playground and complete the following activities to test your knowledge:

1. Upload two images and a PDF or spreadsheet to your WordPress media library. You can use https://unsplash.com/ if you don’t have images on your computer.
2. Use the filtering options in the media library to display only images and then only documents. Then, return to viewing all media items.
3. Create a new post or page on your WordPress site. Use the appropriate blocks (e.g., Image block, Gallery block) to insert at least one image from your media library.
4. Add a video URL from YouTube to the Video block.
5. Select an image from your media library and edit its attributes, such as ALT text, title, caption, and description.
6. Edit an image by scaling it and providing new dimensions. Once completed restore the original image.