The Media Library in WordPress is a directory that holds in one place a variety of assets, namely images, audio, video, documents, and spreadsheets, along with archives, unattached, and a “mine”.
This post will look at four topics about images in the WordPress Media Library:-
- The optimal image format, size, etc.
- The role of the image descriptors
- Organising images in the library
- The role of the featured image.
Optimal image format and size for WordPress
This is an important topic, if only because in the past I tended to opt for the highest resolution (biggest file) on the basis that my pages deserved the best quality images. So naturally my collection of images grew into Gigabytes.
WordPress accepts jpg, png and gif image formats, and uses four default sizes:-
- Thumbnail – 150 pixels (px) square
- Medium – Max width and height of 300 px
- Large – Max width and height of 1024 px
- Full size – The original size of the image.
Taking an image from a free image service, I generally pick ‘large’, which can be 1920 x 2560 pixels, or 1920 x 1080 or even 1280 x 855, but I may then crop it for a particular section or feature. Many experts have suggested that 1200 x 630 pixels is sufficient for a feature image.
I think there is some confusion out there concerning the difference between kb (kilobit) and KB or kilobytes (which officially should be written kB).
You can easily find advice concerning the image file size, with some experts suggesting to “aim for 150 kb or less when it comes to image file sizes”, and others suggesting below 200 kb. Yet others mention that 150-300 kb is fine. The official unit for a kilobit is kb, and I think these authors are mistaking kb (kilobit) for kB (kilobyte).
The reality is that a 1920 x 1080 pixel image, with 3 bytes per pixel, will be about 6.2 MB uncompressed, to which the metadata must be added.
One thing is sure, if a site takes more than a few seconds to load, the potential visitor will go somewhere else. Squarespace suggests keeping images well below 500 kB, but I try to keep them just below 100 kB.
Other authors have suggested that a full-screen background image should be no more than 1 Megabyte (MB) and other Web graphics can be 300 kB or less. Another warned that “anything bigger than 20 megabytes can dramatically impact your website speed” and that “smaller images (up to 2 megabytes in size) are better in most cases”. Squarespace wrote “use images 500 KB or less to help your site load quickly”, but a hosting service recommended “the ideal image size should be 70 Kb to 100 Kb” (whereas kB is the recommended way to describe kilobytes).
Number of images in a blog post
Another way to look at it is to think about the number of images to include in a typical blog post. Give that people don’t like walls of text on the screen, it’s often suggested to include an image for every 150-300 words, or every 200-350 words, depending upon the context. It’s also possible to occasionally go up to an image every 500 words.
It’s good to break up text blocks to make them easier to read.
The problem is that this advice pushes people to insert gratuitous images which may be just decorative, and adds nothing in terms of information or functionality.
So for me the challenge is to find images that add value to my text, e.g. introducing a little know feature, place or personality, or using an image to highlight an interesting link.
Image assets in the WordPress Media Library
The normal routine is to insert an image widget into a text section. And then to click through to the Media Library and be ‘invited’ to drag-and-drop it into the library. At least this is my routine, and I then ‘insert’ the new image into the widget in the text.
Each media asset in the Media Library is accompanied by it’s metadata, and in the case of an image this includes date of upload, person making the upload [admin], uploaded to [title of the post or page], file name, type, size and dimensions (in pixels).
With each image comes four image descriptors:-
- Title – is what you want to call the image, and is going to be used to find the image later in the Media Library (it is a requirement, the other descriptors are optional)
- Caption – a description related to the image, and which is displayed to the user/visitor
- Alternative text – this the alt attribute of an <img>
- Description – a description of the image if someone accesses directly the File URL.
One rule often mentioned is not to simply use the same text in the different image descriptors. Frankly, I find it very difficult to dream up four different ways to describe the same thing.
What is 'unattached' media?
In the list of media assets handled by the Media Library, there was a mention of ‘unattached’ media. But what does that mean?
As mentioned above, the usual way to add a media asset to the Media Library is through a widget in a post or page. Open an image widget, upload an image into the Media Library, and then insert it into the widget (and the image appears in the post or page).
This means that the image is ‘attached’, but images loading directly into the Media Library, not through a specific post or page, are ‘unattached’. If the image is later added to a post or page, it is still considered ‘unattached’.
As such it is not possible to simply delete all unattached images on the assumption that they are not being used. It’s possible that they may be used somewhere on the site, and if so deleting them will produce a broken image link.
It is also true that if a post or page is deleted, it does not delete any attached assets such as images. So it is possible that the Media Library will hold assets no longer in use.
So whilst it is a good idea to delete unused images, its important to go through unattached images manually and only deleted those that are truly no longer used and not needed anymore.
Title in the Media Library
Title is by default the file name, but it can be changed. The advice is to try to keep it descriptive and in context using no more than four words. In the past I used underscores, but the advice today is to use hyphens between the words. In naming or renaming an image it’s worth remembering that in the future you may be searching for the image in what could be a very large image database.
I tend to leave the original file name in the image description, and simple rename it in the Title field. This can help sometimes since the original file name might include the place I found it. If it’s an image from my own collection or a scanned or screen-captured image I will try to give it a descriptive name.
As far as I can see, Title can simply be some of the keywords that define the topic of the page or post, e.g. sunny-venice-gondola-hotel.jpg or watercolour-mekong.jpg or underfloor-heating-red-pipes.jpg.
Alternative Text (alt-text) in the Media Library
In WordPress the Alternative Text has a pointer to the W3C page on ‘An alt Decision Tree’ to help in deciding how best to use the attribute.
Its crucial to fill in the alt-text field for users who use screen readers, for example, someone who is blind.
Sometimes users also turn off image loading to increase the speed of access to a site. The alt-text will be the text that gets read out or displayed when the image is not loaded.
The most important point is to decide if the image is purely decorative or if it is informative, that means serving a specific purpose in the text.
If it’s decorative or not essential for the user, then many people suggest that the attribute can/should be left blank (with no space “”). However, my own feeling is that the alt-text should never be left blank.
A decorative image is one that can be removed from the post or page without losing any meaning or information.
If the image serves a purpose, what is called a ‘functional image’, then the alt-text is there to describe the function, e.g. it could be an icon or a link. The idea is that a user will understand the outcome associated with the image.
If the image is wrapped in a link, the alt-text should describe the target of the link.
If the image is a logo, write the full name of the organisation in the alt-text. If the logo is a link, include the name of the site.
If the image is a functional icon, describe the function. A classic example is alt=“Print this page”.
If the image includes an important text (or image) then the alt-text should repeat the text, or describe the vital concept or information found in the image. An example often quoted is how to open a medication bottle.
It is also possible that the image contains valuable information that might need to be described, e.g. a graph showing an increase/decrease.
Here are a few examples that show the level of detail that should be used in alt-text:-
- Two students posing on a snow field, one giving a thumbs up, with a sled dog and mountains in the background
- Tall grass on a sand dune with the beach and ocean surf in the background on a sunny day
- Track and field event at the 2008 Beijing Olympics
- Bridge at Central Park surrounds by trees and foliage
- Round charcuterie board with meats, cheese, crackers, and other colourful snacks
- Disco ball hanging planter with vines hanging off the side
- A cat sleeping on a blanket
- Man standing on top of a rock mountain and looking at the sky.
Bad examples might be ‘two people on a sledge’ or ‘ideas for a dinner party’, and it’s also a bad idea to simply list words, and not provide a description (e.g. don’t just write ‘man, rock, sky’).
Alternative Text (alt-text) used by search engines
The alt-text is also used by search engines to identify the image content, as such it’s one element in search engine optimisation (SEO). It helps to use the posts keywords, but without stuffing, which will have a negative impact.
Also the focus should be on a brief but complete description, and not include expressions such a “The image includes…” or “A picture of …”. Here the advice is to always include good descriptive alt-text, even if it is just to describe the image, since it helps search engines understand better the contents of the post. Don’t create an alt-text simply to add keywords.
Also do not write something in the alt-text that can not be learned from seeing the image or reading the caption or title.
The advice for complex images, is to use alt-text to describe the main idea in the image, and the caption to summarise the whole image.
The power of image metadata
I’m summarising a description from Morton Rand-Hendriksen.
Let’s imagine a wedding photographer publishing a photo essay about a recent wedding. The post might include some images with basic captions, but the alt-text can/should also include the name of the photographer, words like ‘wedding photographer’, and the area/city where he works. People searching for a wedding photographer in a particular city might then find those images.
It’s possible to redirect someone clicking on the image to an attachment page for that image, where it’s possible to see a larger version of the image and to see the story of each image written in the Description field. These attachment pages, and the image, will again be indexed by search engines.
Attachment pages can be used with an image slider or gallery. Each image can be linked to an attachment page, and in addition to a comprehensive description in the Description field. These attachment pages can provide far more information, and make that information separately searchable on the web.
Caption and Description in the Media Library
Always add captions to all non-decorative images, and use the Title and Caption to add context.
The alt-text is for people who can’t see the image, the caption is for people who can see the image and want to know more about it. In this sense it is not a simple description of what is seen, e.g. they can see a gondola in Venice so the caption can mention Canal Grande, the role of the vaporetto, or even mention a review of the hotel seen in the background.
So caption is a brief description related to the image, e.g. commentary, attributions, quotations, etc. Suggestions are to acknowledge the creator or copyright holder and include any reference style from an external image collection.
The advice for complex images, is to use alt-text to describe the main idea in the image, and the caption to summarise the whole image.
As an example, an alt-text might be “Flower growing in rocky ground” (so a perfectly clear description of the photo), whilst the caption might be “Hoary sunray flowers decorating a snowy mountain in summer” (where the mountain and the season might not be visible in the photo but could be implied in the context of the post or page).
With a complex image (e.g. graph, data, map, trend, diagram, etc.) try to provide a longer description with more details about the data or information in the image, with a reference to the image Title.
Description can be a bit confusing. Images have their own URL and it’s possible to go directly to that URL. In many cases they will land on an ‘image attachment page’, and this will show the Description field. I’ve read that the ‘image attachment page’ is a default, and can be disabled.
I can go to my image URL’s but I don’t see any description, so I guess it’s been disabled. As such I decided to ignore the Description field.
However, I can see some situations where an ‘image attachment page’ would be very useful. If a description is needed and would be very long it’s better to link it to a separate page where a full description can be drafted. It is here that the axis of a table and units of measurement can be explained, the range of data mentioned, any averages or other statistics described, any trends, any comparisons between data sets, etc.
Final words, align all texts to the left, and capitalise the first word and proper nouns only. Don’t use full stop even if it is a complete sentence. In fact, the texts don’t have to be complete sentences.
Organising images in the Media Library
As a default, WordPress automatically creates folders for different years and months, and places media in the right folder based upon its upload date (which can be changed by admin).
Some people might want to organise images by topic, location, event, etc., whilst others might prefer type, client, industry, etc. Adding keywords can help search engine optimisation (SEO) and also help search through the Media Library for the relevant asset.
However, it is also easy to create custom media folders, using a free plugin called Media Library Folders (with detailed instruction on how its used).
The Featured Image
When people click on a post or page they want immediate confirmation that it’s the right one, and that the title and featured image captures their attention.
The Featured Image has a special place in the way WordPress configures a post, and represents that post throughout the WordPress website.
As such the Featured Image must be high-quality, relevant and in some way confirm the expectations of the visitor, even compel them to read on. This is why I always try to sourced my Featured Image from a free-to-use image collection, or from my own photo collection.
Conclusion
I freely admit that whist I make an effort to respect all the above suggestions and rules, I sometimes just copy the same comment into the different image description fields. My justification is that I don’t create my posts for a target reader, but more as a way to collect and remember my own thoughts and experiences.
Also I saw that a simple “flat” collection of images can quickly become confusing, so I always use Media Library Folders to collected related images together. I also archive separately all the images I’ve used, and all the research doc. that supports a particular post.
