How does the WordPress media library work?

WordPress Media Library

WordPress Media library is the place where you can upload images and documents like PDF files. To upload an image or document, drag and drop from your computer into the thumbnail view of the Media Library. The window will go blue and show the message ‘Drop files to upload’.

Image size and format

Before going in to more detail about the Media Library, it’s worth understanding format and image size. The most typical format for digital photos that have been processed is JPG. Other popular formats are PNG and GIF although GIF are more commonly used for animations and don’t reproduce photos as well as other formats.  These three are all digital Bitmap formats meaning that the images are made from dots and represented on screen as pixels.

For digital use, image size is usually referred in terms of pixel dimensions (example: 1024 x 768 pixels) or file size (example: 1.2mb). File size effects load time, pixel size is about the space on screen an image can cover without degrading. The more pixels that are required, the larger the file size will be. It’s possible to reduce file size to some extent whilst maintaining pixel size but image quality reduces the smaller you go. WordPress has various settings to handle this explained later in this post.

Image sizes and WordPress Media Library

On upload of an image, WordPress will process the image into 4 different sizes:

  • Full Size
  • Large
  • Medium
  • Thumbnails

Full size is the size of the image before you upload it from your computer. Large, medium and thumbnail can be set under Settings > Media from the main Dashboard. The defaults are:

  • Large – Max Width 1024px, Max Height 1024px
  • Medium – Max Width 300px, Max Height 300px
  • Thumbnail – 150px x 150px

If you upload an image that’s smaller than one of these default sizes, you’ll only get sizes the same or smaller than the original. Images with a pixel size larger than the above will have  full size maintained, then as the defaults. The  thumbnail is cropped to 150px x 150px. When WordPress makes a thumbnail image, it will crop the left and right borders on a landscape orientated image or top and bottom for portrait.

When uploading JPG, WordPress will reduce the quality of the image to 82%. The reason is that lower quality JPG images load faster. An original JPG image that has had a quality reduction before upload will be reduced again by WordPress. If you have the choice, it’s better to start with a JPG at a quality of 100% knowing that WordPress will apply compression. It’s possible to change the default WordPress JPG setting but requires a small code edit.

Editing images in WordPress Media Library

When uploaded, there are a few tools for simple editing in the Media Library. These allow you to crop, resize, rotate and reflect then save. If you’ve uploaded a photo from your camera or phone it’s probably larger than you need. It’s likely that the image will scale to fit on your webpage but if it’s too big, it won’t load as fast. If you’ve made picture edits whilst in WordPress, these are permanent.  If you need to revert back to your original photo, you’ll need to upload it again.  Delete the pictures you don’t want but check they’re not used in any of your posts and pages.  By selecting the list view in the Media Library, there’s a column that shows where the image is located. By clicking ‘detach’.

Server space and processing

Image files and video will require more storage space on your hosting account if you have a self hosted WordPress. It’s better not to even upload video if you can avoid it. Services like YouTube and Vimeo are specifically designed for the purpose and will work much better for you. If you want to show video on your site you can embed the video into a page or post. This won’t use any storage space or bandwidth of your host. How to embed a YouTube video in WordPress.  How to embed a Vimeo video in WordPress.

Explained earlier in this post is how digital images can be much bigger than they need to be. A larger than necessary image will take more space than needed plus extending load times. I’ve explained about how they can be resized but if you’re on a budget host, there could be processing errors on upload. Usually this will mean that the photo will upload but not be processed into large, medium and thumbnail. It’s also possible that the edit options won’t work either. If this happens, either resize your image before upload or upgrade your hosting account. Image resize using Windows. Image resize using Mac.