Where an image is used to support text or text is used to support an image, it is essential, especially in learning materials where comprehension is critical, that they are closely synchronized, so as to minimize the load on short-term memory. This prevents people from doing extra cognitive work to connect the two, as would be the case when they are far apart. In Figure 6.33, for example, the illustration on the left requires someone to look at a number on the image and then search out the matching item on the list underneath while holding the number in short-term memory, making it harder to construct the imagery that is vital for comprehension. However, the illustration on the right simply requires one glance, and because all the materials are together, constructing the imagery is easier.
When it is not feasible to place annotations on an image, connecting one element to the other directly, using something like a pointing line, as illustrated in Figure 6.34, can provide a reasonable compromise.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.