WordPress Media Management graphic

23rd September 2018

Why is Media Management important?

Just the same as the content is important to your users, visitors and customers and for being found online in search engines, Images and Video are just as important at conveying a message or enticing someone to buy.

Images take up massive amounts of internet bandwidth because they often have large file sizes. According to the HTTP Archive, 60% of the data transferred to fetch a web page is images composed of JPEGs, PNGs and GIFs. As of July 2017, images accounted for 1.7MB of the content loaded for the average 3.0MB website.

According to Soasta/Google research from 2016, images were the 2nd highest predictor of conversions with the best pages having 38% fewer images.

Google Fewer Images Per Page Create More Conversions

In WordPress, all media types (JPG, PNG, GIF, PDF, ZIP) or attachments as they often referred to, are stored in the Media library.

Screenshot of WordPress Media Library

The benefits to you

  • Easier management of files
  • Find them quickly
  • At the right sizes
  • Re-use files, reduce duplication

The benefits to your users

  • Accessibility – While uploading, make sure that you are also giving each image a unique and descriptive alt text. Google also pays attention to this information and it’s the information that will be read out loud to anyone visiting your site with a screen reader. Making the alt text a literal description of the image (in a complete and readable sentence) is both beneficial for accessibility reasons and for search engine algorithms.
  • Speed – can impact data usage
  • Speed – perceived load times for users
  • Google favours fast websites, thus may push you up the rankings

Some tips for better management

  • Resize images first
    • Define a maximum content width – this can be provided by your designer/developer – usually the maximum width of your website
    • Resolution is 72dpi for web … 300dpi for print
    • Save out at an optimised level of 80%, or lower depending on the quality

An example of settings in BulkResizePhotos.com:

Screenshot of the website bulkresizephotos.com

  • Convert PNG screenshots to JPG
    • Although an often quick way to get a photo or image, with Screenshots the result is actually hefty in terms of size (resolution) and file size.
    • Usually identifiable by names such as “Screen Shot 2018-07-25 at 14.11.26”
  • Give files descriptive names Example of a file with a descriptive name
    • This helps find images later, good for accessibility, SEO. It helps everyone!
    • A good example is “blue-cake-with-sunflowers.jpg”
      A bad example is “DSC10395.jpg”
      Another bad example is “logo.jpg” “logo1.jpg” “logo-version-20.jpg”
    • In addition, it will automatically populate the Title field with the filename, which WordPress uses to search, so it’s worth taking the time.
  • Re-use photos in your Media library
    • Where necessary, try to avoid uploading duplicates
    • This can make it harder to manage – which is the right one, where is it used?
    • Reduces load on your server – the space you pay for!
  • Use the size closest to the size you need
    • The sizes available from WordPress are: thumbnail, medium, large, full size
    • Other sizes might be available from your Theme
    • WordPress will output all the sizes defined in your Media Settings and in the Theme
    • It is better to use, say, a 300×300 thumbnail image, and resize down to 50×50 than use a 1200×1200 image.
  • Using a lot of images on a Post or Page?
    • Use the built-in WordPress Gallery feature
    • WordPress Galleries allow you to have all images the same size visually
    • The images are laid out in neat rows and columns
    • The Gallery can be easily linked to a plugin, that can put them in a nice Lightbox or Carousel effect