The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other Picture element: specify different fallbacks at different media queries

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #210224


    I’m currently attempting to use the picture element along with picturefill to display my main svg logo with a png fallback, but I’m having trouble working out how to provide a different fallback for each image which is loaded at certain breakpoints.

    A few months back there was a great article on this site regarding SVG fallbacks:
    On this page under the ‘Picture/Picturefill’ section it states ‘Advantages: Not only can you get fallback images, you can specify different fallbacks at different media queries, as part of the picture syntax. Meaning differently sized fallbacks for different screens, art direction, etc.’

    Does anybody know how to achieve this?
    Here’s my code:

    <source type="image/svg+xml" srcset="img/logo.svg" media="(min-width: 800px)">
    <source type="image/svg+xml" srcset="img/logo-small.svg" media="">
    <img src="img/logo-small.png" alt="logo">

    So how would i provide a fallback for logo.svg?

    Thanks :)

Viewing 1 post (of 1 total)
  • The forum ‘Other’ is closed to new topics and replies.