The Australian Government coat of Arms

Communities of practice

Communities of practice

Responsive Media


#1

Please provide any feedback for the Responsive Media component.

You can also view the component page on our documentation site for the Responsive Media component.


#2

Would be nice to intro people to multiple-resolution image files and media queries as part of this component. Might even be possible to enhance it so the different resolution files can be referenced in the markup and the page loads the appropriate one (i.e. don’t load the 3000 pixel wide hero image unless on a 4K 800 PPI display)

<img class="au-responsive-media-img" src="hero-normal.jpg" alt="">
<img class="au-responsive-media-img high-res" src="hero-massive.jpg" alt="">

#3

I’m not sure how advanced we want this component to be. I see it as a very simple responsive media component that makes media scale for different screen resolutions.

You do make a great point about swapping in and out high resolution images however my gut feeling is that government websites should be loaded as fast as possible. Encouraging a way to support larger downloads seems to be against that. Happy to keep the convo going here :slight_smile:


#4

I think that it is also about swapping in smaller images to fit smaller form factors, across tablets, mobiles & even phones. While scaling is OK, there’s still an unnecessary load overhead if loading a 300x300px image as 60x60 for a smaller screen.

So that speaks directly to the point of loading faster.

Plus any thought on how to support voice interfaces where images need to be described rather than displayed? ALT text is for more than screenreaders now :slight_smile:


#5

Thanks Craig, I agree a more complex addition to this component for things like that would be nice. It would need to also consider older browsers and no-JavaScript fallbacks which could mate it tricky. But definitely worth exploring.

Regarding Alt-text, if you’re looking for top-notch advice on Alt-text this is an awesome article:
https://webaim.org/techniques/alttext/