In the past I have written on how the track element can be used to add captions and subtitles to HTML5 video, but this, and many other examples around the web, used a static example. But what if you need to load this information dynamically? This is what I’m going to take a quick look at here.
With the welcome rise of the
<picture></picture> element and
srcset attribute, we now have control over what images are loaded when, allowing us to make our images more responsive, and even to change the image entirely based on screen size. Of course showing a different image in this case is not recommended, but it is possible that you might want to change the focal point of the image, showing less of a larger image, and highlighting a particular object or person within it. This is all well and good, but what about the image’s caption or alt text? How can we provide different captions or alt text per image, should the need arise?
We need to talk.
I received your initial mail with anticipation, breathlessness even, but you didn’t say much. You left me wanting more, teasing me, I guess this is your plan – playing hard to get. It’s much too early to ask for my phone number though.
When writing an article, I sometimes find it difficult to come up with a title. Personally I prefer short titles, and often I find that others do too. The book I am currently reading, which was written in the 18th century, shows me that writers of that era often took a different view.
Last week I attended the excellent Fronteers conference in Amsterdam and while listening to a talk by Marcos Cáceres on responsive images, I had a thought on a potential polyfill solution. When I arrived home, I thought about it some more and today I managed to put it into practice.