Figure out a photo

There's no need to wrap a wedding photo (<img>) in a <figure> tag and apply opacity to the whole when the user moves over it. The last tag wasn't created to be all-encompassing. When you need such an effect, you can apply it to the innermost element without the cascading need for calculations. I don't think that a tag should exist to enable effects, but it can be used to describe more meaningfully what it represents. A photo isn't a figure and we notice this best when we need to describe them to a blind person in the fewest words possible and then use this for accessibility purposes. A photo may be considerably harder to describe, because it also conveys feelings, not only hard facts. Using a photo within a figure doesn't acknowledge their difference. We have two different tags, because we have two different uses. The photo is more personal and often doesn't need further clarification unless we are ready to add more in our own natural language. So we have only an alt attribute to explain what a photo is about. Creating a figure is mainly a simplification process to clarify a concept, so we need to compensate for what we have purposefully omitted from view by explaining more about what's behind it. The explanation of a photo doesn't have to be exact or short; the explanation of a figure that is used for educational purposes needs extra dose of clarity. And because that clarity—in case of having the figure—is very likely to be missing by default, we need to provide it immediately and in-place, not three paragraphs later. While designing the figure, it's not correct to include a short explanation in the image if it would require further explanation. We must ensure that the long, clear description remains search-friendly and this is why we have the <figcaption> tag. If we find ourselves using <figure> without <figcaption> we are probably doing something wrong. Having an image that doesn't require immediate explanation is a sign that we might have a photo/illustration. We need to figure out our photo and not mask it as a figure.

Yes, opacity changes can indicate where the current mouse position is, but opacity only doesn't add much value to the site when the image is already there. A similar indication can be achieved simply by having a thin border or by changing the background color around the image. This way we also minimize the areas that blink on a site, which still seems to receive little attention. We need to weigh up the cases in which the use of opacity will be justified, before we add more markup/code, because we will likely multiply the effect when using many images. If we need additional layers for transparency, this will only unnecessary slow down rendering and potentially trigger repeat transfers between the CPU and the GPU. The use of additional layers always has its cost. CSS filters are a relatively new addition in how we manipulate images, but they are still not universally supported and require additional computation time, not just CSS download time. We only need to remember how Photoshop filters work to understand why CSS filters won't make the web faster. Something that is applied at pixel level will always be slow, even more so the bigger the image dimensions are. While this isn't an immediate problem in Photoshop, on a site that must remain constantly responsive to user actions it is. We need a delicate balance between eye-candy and usability. For this, we need to figure out our photos.

bit.ly/1dfARKK