Responsive Images

The trick with images is to take an oversized image, then scale it down to fit the space. This slows the site down a little, as the images are larger, but at this time is the best way to implement responsive images.

In the future we will have image tags with multiple sources. The browser will choose which image to download based on network speed. At this point in time though, we are stuck using big images.

Exercise 1

Create an html page something like the following:

Lovely Kitten
A Beautiful Kitten

You will need to go and grab a picture of a kitten from the real Internet.

Now use the width: 100% trick to take the kitten image and fill the entire screen with it. 2. Take the kitten image and embed it into your responsive layout. Preview on a mobile browser.

Addendum - This material is no longer current

We now have a srcset and size attribute for images. Read more about it here:

http://alistapart.com/article/responsive-images-in-practice

Do you like Email? Do You Like JavaScript?

Sign up for occasional emails covering modern Web Development topics such as Angular 2 and React. You can unsubscribe at any time.

We totally respect your email privacy

comments powered by Disqus