Jump to main navigation, main content

Archived entry | Matt Wilcox .net

How do we deal with images in HTML?

A re-recording of a talk I did recently at Standards Next, discussing the problem we have with <img> in HTML and responsive designs, ways that is can be tackled, and the future of how we may solve it.

I apologise for the constant “errr"-ing, it’s been three weeks since I gave the talk and I was quite tired when I recorded this last night - I didn’t notice how bad it was until today. I may well re-record it at the weekend to trim off some of the gaps and stumbles. Hopefully you’ll find it useful, but you may be interested in the Vimeo page itself where I link to specific topics in the video description, which allows you to skip sections that may not interest you.


skip to comment form
  1. Adam Bradley posted 3 days, 20hrs, 0mins after the entry and said:

    What would you think about this adaptive img solution using current elements: https://github.com/adamdbradley/foresight.js

  2. Matt Wilcox posted 4 days, 2hrs, 58mins after the entry and said:

    It's a neat solution, and I quite like it - it could be appropriate for some use cases.

    It does have a couple of issues though, that would stop me using it:

    The main issue for me is it relies on JS being enabled for desktops to have usable images (I don't think mobile sized images on desktops is acceptable for real-world use - which is exactly why the Boston Globe method got taken offline).

    It requires custom HTML being authored - this isn't such problem to be honest, although a neater syntax is explored in http://24ways.org/2011/adaptive-images-for-responsive-designs-again where the attributes are placed on the noscript element itself. You could then simply add a new image tag in JS instead of modifying one written in the HTML.

  3. AndersH posted 6 days, 21hrs, 56mins after the entry and said:

    The obvious implementation of your "Future solution" seems to me to be something like:

    .imgJoeBloggs { background:url(joebloggs-small.jpg); width:100px; height:75px; border:1px solid black; }
    @media screen and (min-width:437px) { .imgJoeBloggs { background:url(joebloggs-medium.jpg); width:200px; height:150px; } }
    @media screen and (min-width:800px) { .imgJoeBloggs { background:url(joebloggs-large.jpg); width:400px; height:300px; } }
    @media screen and (min-width:1000px) { .imgJoeBloggs { background:url(joebloggs-extra-large.jpg); width:500px; height:375px; } }
    @media screen and (min-width:1200px) { .imgJoeBloggs { background:url(joebloggs-massive.jpg); width:600px; height:450px; } }

    The html is not a problem, since no content author writes the final html by hand, that is all content (wether it contains html or not) passes through some cms/template-engine/build-step, that can rewrite images tags as needed.

    Also weather the images are pre-generated or generated by some php-script is just an implementation detail. Matt says: That misses the point; CSS doesn’t have an issue, it’s content images in HTML that do - what you have suggested is not a solution for this.

  4. AndersH posted 21 days, 18hrs, 53mins after the entry and said:

    Just noticed that your comment form had dropped html tags (instead of encoding them properly). So I think you missed my point smiley icon: smile This and some style tags was missing:
    {div class="imgjoebloggs" role=img aria-label="A photo of Joe Bloggs"}{/div}

  5. Jonny Nott posted 50 days, 1hrs, 33mins after the entry and said:

    Like the bit at the end about needing a one-stop solution for @media querying across HTML/CSS/JS, and agree it's probably best done in like you describe. Like your suggestion of named 'presets', which would each have their own @media-like matching rules to narrow down which applies on the device in use.

    Obviously you'd then need two mechanisms to access the result of this test(ing), for CSS and JS respectively..

    For CSS, this could be as simple as a pseudo-selector of some kind, or even an extension to @media queries so that a particular 'named' media 'preset' (e.g. 'smartphone', 'tablet', etc) could be matched by the @media {..} block, rather than a test like min-width. Both of these could even be available, so you can either target for a single CSS rule, or an entire @media { .. } block of rules.

    From the JS point of view, probably a new API connected to/part of the DOM in some way would probably work. Again, perhaps something as simple as a method which returns your 'named preset' from which has been matched according to your stated @media rules.

    Interested to see where this stuff goes..

  6. Jonny Nott posted 50 days, 5hrs, 43mins after the entry and said:

    ..and some code to back things up, why not .. pick a random name for it: 'mediaAlias' (disclaimer: pie in the sky??)

    if (document.mediaAlias == 'tablet') { .. } else { .. }

    @media screen and (alias: mobile) { … }
    ::media-alias(mobile) img { max-width: 100%; } /* a bridge too far? */

    Anyone think of a better name than media 'alias'?

  7. Jonny Nott posted 50 days, 5hrs, 44mins after the entry and said:

    ..and some code to back things up, why not .. pick a random name for it: &#39;mediaAlias&#39; (disclaimer: pie in the sky??)

    &lt;!– using meta tags? –&gt;
    &lt;meta name=&quot;mediaalias:mobile&quot; content=&quot;min-width: 300px&quot; /&gt;
    &lt;meta name=&quot;mediaalias:tablet&quot; content=&quot;min-width: 600px, min-device-pixel-ratio: 1.5&quot; /&gt;

    &lt;!– or a new element altogether –&gt;
    &lt;media alias=&quot;mobile&quot; query=&quot;min-width: 300px&quot; /&gt;
    &lt;media alias=&quot;tablet&quot; query=&quot;min-width: 600px, min-device-pixel-ratio: 1.5&quot; /&gt;

    &lt;script&gt;if (document.mediaAlias == &#39;tablet&#39;) { .. } else { .. }&lt;/script&gt;

    @media screen and (alias: mobile) { … }
    ::media-alias(mobile) img { max-width: 100%; } /* a bridge too far? */

    Anyone think of a better name than media &#39;alias&#39;?

  8. Jonny Nott posted 50 days, 5hrs, 45mins after the entry and said:

    FFS! Decode the HTML character references above and you'll catch my drift smiley icon: sad

  9. Jonny Nott posted 50 days, 6hrs, 35mins after the entry and said:

    Aha, a gist maybe in order: https://gist.github.com/2663318

  10. Jonny Nott posted 54 days, 18hrs, 9mins after the entry and said:

    Updated the gist .. realised that I'd been silly - there could be more than one matched alias in JS world, so needs to be an array rather than a single value, hence 'mediaAliases'

From the archives

Other enteries filed under:

Web Development

Site information

Built with valid XHTML and CSS, designed with web standards and accessibility in mind. Best viewed in a modern browser [Firefox, Safari, Opera]

This domain and all content is a copy of my old website, for historical purposes only.