Web Resources

WordPress Media Management

min read

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.

In WordPress, all media types (JPG, PNG, GIF, PDF, ZIP) or attachments as they often referred to, are stored in the 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:

  • Tools you can use for resizing and optimisation;
  • 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
    • 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

Caroline Hagan

Caroline brings over 15 years as a Designer and Developer; featured in .NET magazine, the only woman in the UK accredited for Google Mobile Sites. A business mentor with Enterprise Nation, STEM Ambassador and Google Women Techmaker Ambassador Previous client projects include Blackberry, FIAT, Clark Shoes and Sky.