WordPress Media Library Best Practices

If you've built or edited a website with WordPress, you're probably familiar with the Media Library. It's the section of the back end or Dashboard that houses all the images, as well as other types of files, that make up your site. When you visit it, you can see images and icons representing various file types. Through the Media Library you can upload, delete, edit, and preview media at will. In this article, we'll discuss:

1. How you access the Media Library
2. What you can upload to the Media Library
3. How to add and edit media in the Media Library
4. Ideal image optimizations
5. Tools for optimizing images
6. Image file types to use
7. Uploading videos to WordPress
8. Do's and Don'ts

You can get to the Media Library in a few different ways. It mostly depends on what you're doing and what you want to do.

The most basic way to access the Media Library is through the WordPress Dashboard. Once logged in to your site, go to Media on the lefthand sidebar. Choosing that menu item will open up the library.

You can also access it while building page and post content. If you're using the Block Editor, add a Media block like an image. You'll be prompted to either upload an image, which will automatically be added to the Media Library, or visit the Media Library itself to choose from the images you've already uploaded.

If you're using a page builder or other theme, you can follow similar steps. Add an image module and follow the instructions within that module to add an image. This will involve opening up the Media Library or uploading an image from your computer to the Media Library.

Remember that the Media Library isn't just for images. You can upload the following file types:

• Images (.jpg, .jpeg, .png, .gif, and .ico).
• Audio files (.mp3, .m4a, .ogg, and .wav).
• Videos (.mp4, .m4v, .mov, .wmv, .avi, .mpg, .ogv, .3gp, and .3g2).
• PDFs.
• Word documents.
• Excel spreadsheets.
• PowerPoint presentations.
• Adobe Photoshop documents.

Those pieces of media can then be displayed on the front end of the site depending on the module or block you've chosen.

Keep in mind that if you need to utilize media that does not fall into the above file types, you may need to use a plugin or custom code in order to do so. For example, .svg files and font files cannot natively be added to the WordPress Media Library. But there are plenty of workarounds using free and paid plugins.

Also note that you cannot upload files that are larger than 256 MB. Attempting to do so may crash your website. If you need to upload a file that is larger than this, contact your hosting support team for help.

The Media Library is where you go to add, edit, and get information about your media.

To add new Media, go to the Media Library and choose the Add New Media File button. Then you can either use the Select Files button to choose a file from your computer, or you can drag and drop from your machine to the dotted box.

Here are some things you can do on the Media Library page.

1. The Media Library can be viewed either in a grid format or a list. You can toggle one or the other using the two icons at the top left.
2. You can filter the library to see all media items, just images, just video, and so on. You can also filter by the Month and Year in which a file was uploaded.
3. You can select many files at once using the Bulk Select button. This is ideal for deleting many images at once.
4. You can use the search bar to look for specific media based on the file name.

To get or add information about a specific file, simply select it to open the Attachment details module window.

Here you can see the following information:

• The upload date
• What WordPress user uploaded the image
• The name of the file
• The type of file it is
• The file size
• The image dimensions in pixels
• The original image link

You can also see and edit certain fields:

• You can add ALT text that describes the purpose of the image. This can be left blank if it's just for decoration.
• You can change the title of the image for easier searching.
• You can add a caption that will appear below the image when displayed on the site.
• You can add a description to the image.
• You can see and copy the file URL.

If you want to delete the image, scroll to the bottom of the Attachment details screen and choose the red "delete permanently" text. Keep in mind that if you delete an image, it will disappear entirely from the front end of your site if you've added it to a design.

You can also use the Edit Image button below the preview to make more changes to the image.

These options are nice to have, but it is highly recommended to perform any visual edits to an image before you upload it, not after.

Image size

Before you can fully understand how to optimize an image to upload to WordPress, you need to understand the difference between file size and image dimensions. They are both indicators of size, but they mean different things, are edited separately, and have different effects on image performance and quality.

File size describes how much information the digital file contains. File size is measured in bytes. A byte is a unit of digital information that is made up of bits. Any file can be measured in bits, from images to text files. You will usually see images described in KB or MB.

• 1 byte (B) = 8 bits (b)
• 1 Kilobyte (K / KB) = 1,000 bytes.
• 1 Megabyte (M / MB) = 1,000,000 bytes.
• 1 Gigabyte (G / GB) = 1,000,000,000 bytes.
• 1 Terabyte (T / TB) = 1,000,000,000,000 bytes.

Image dimension refers to the height and width of an image. It describes the size and shape of the image visually. Dimensions for online images are usually measured in pixels (px). Dimension also influences resolution, which is the number of pixels assigned to each inch when the image is at it's full size. The dimensions and resolutions tend to have more of an effect on how an image looks, it's blurriness, and it's overall quality. An image with more pixels per inch, or a higher resolution, will look better than one with less.

This does not mean that images with more pixels are always better. A computer screen can only show so many pixels. For example, a large desktop screen is about 1600px across. If you're uploading images that are wider than that, they are going to be minimized anyway. So it's better to upload images that are already sized appropriately.

For higher performance, it is ideal to have images with the smallest possible file size and the highest possible resolution. If you have many images uploaded to your server that have high file sizes, that will tax the server and it will take WordPress longer to display those images to viewers. Think of each image like an item in a box. The heavier each one is, heavier and harder to lift the box is.

The good news is that there are many tools out there that help you compress images - or shrink them to their smallest point without losing much quality.

File type

When selecting images to add to your website, it's important to know when to use various file types. Image files come in various types, like .pngs and .jpegs. Just like video files can be .mov or .mp4 files.

I downloaded an image from the Unsplash stock photo website. I can tell it is a .jpg image by looking at the end of the name, as well as the kind column in my Finder. When it comes to images, certain types are better for certain uses.

There are two main types of images you'll be running into and uploading.

• A .png image is usually best for icons and graphics. Use a PNG if:
  • Your image dimensions are small, since PNGs typically have a larger file size.
  • You need parts of your image to be transparent.
  • Your image will need to be resized many times or require lots of edits, since they are "lossless" and they lose less quality when resized.
• A .jpeg is usually best for photographs. Use a JPEG if:
  • Your image contain lots of different and varied colors.
  • It's one of many and you need to upload many images but keep file sizes low.
  • You have limited storage space or need to use lots of imagery.
  • You need images to load super fast.

You may also run into GIFs. A .gif is animated and contains motion, but is not a video. Limit the number of GIFs you upload as they can take up more space.

Finally, SVGs are becoming more and more popular. An .svg file is for vector images, which store images as points and lines on a grid. They are very easily scaled up or down without losing resolution. They are create for things like logos, graphics, charts, and illustrations. However, keep in mind that you'll need a third party tool to upload .svg files to WordPress.

Remember that even though the WordPress Media Library has resizing tools, it's a better idea to resize an image before uploading.

We recommend using a tool like https://pixlr.com/editor/ to resize images before uploading.

Or you an use a plugin like Smush which will automatically compress images as you upload them to the Media Library.

If you already have access to image editing software like Photoshop or Canva, those are also great for getting precise with image sizes.

The best way to upload videos to your website... is not to upload them at all! Videos tend to be large files, much larger than images. And while they are extremely powerful for your designs, it's a good idea to avoid adding them to the WordPress Media Library. The most reliable way to display video is to host the file itself somewhere else, then instruct WordPress to pull that video in.

For example, if you want to display some video testimonials on your website, the best course of action is to upload those images to a YouTube channel.

Then when you add a video block or other page builder modules for video, you can embed a link or an embed code. Beneath the YouTube video, choose the Share button. You can copy the link or choose the embed option and copy the resulting code depending on what your building module is asking for.

You don't just have to use YouTube. Vimeo, Wisita, and DailyMotion are all great options for hosting video. Using this method keeps the quality of the videos and does not threaten to slow down your website.

Let's recap! When adding files to your Media Library, use this handy do's and don'ts checklist to ensure that your images are only adding value to your site rather than damaging performance and speed.

✅ Is your image the right file format? Remember png images are best for graphics and jpegs are best for photos. Make sure that if the file format is not compatible with WordPress, you have a conversion method in place.

✅ Has your image been resized? Figure out the dimensions in which the image will be displayed and scale it down to fit.

✅ Has your image been compressed? Use a third-party tool to shrink the file size while preserving resolution as much as possible.

✅ Have you renamed the file to something that makes sense? Ensure it's something you could imagine searching for if you need to find that file.

✅ Have you added appropriate meta data to your file? Such as a caption, description, or ALT tag?

✅ Is your video hosted on a 3rd party website instead of on your WordPress install?

Thanks for reading! We hope this article has helped you feel confident about using images, videos, and other files in the WordPress Media Library. Keep on learning about WordPress on our blog.