📝 CSS-Tricks 203: Responsive Images Guide, custom select elements, and CUBE CSS

View this newsletter on the web.

Our Guide to Responsive Images Syntax in HTML

Here’s one for your bookmarks: if you’ve ever wondered if you’re using the correct responsive images syntax in HTML then our guide was made just for you. In the intro, Chris writes:

This guide is about the HTML syntax for responsive images (and a little bit of CSS for good measure). The responsive images syntax is about serving one image from multiple options based on rules and circumstances. There are two forms of responsive images, and they’re for two different things:

1) If your only goal is performance, then what you need is…<img srcset="" src="" alt="">
2) If you also need design control, then what you need is… <picture>

Check out the “Only View Code Snippets” button if you’re there just to snag some code quick.

The syntax for getting responsive images right can be tricky sometimes and so I’m extremely glad that now I have a resource I can return to again and again whenever I need it.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s