Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Working with responsive images is another subject that seems simple at first glance. Set your images to 100% width, allow them to scale with the viewport, and unless your intent is a full-screen hero image, make sure there’s a max-width established preventing them from growing unnecessarily large on a wide screen. That’s all there is to it, right?
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Working with responsive images
0:00
is another subject that seems simple at first glance.
0:02
Set your images to 100% width, allow them to scale with
0:07
the viewport, and, unless your intent is a full screen hero
0:11
image, make sure there's a max width established preventing
0:15
them from growing unnecessarily large on a wide screen.
0:20
That's all there is to it, right?
0:24
When working with vector graphics, like logos and
0:27
icons, I'd say yes, that's pretty much it.
0:31
But bitmap images like photographs present two unique challenges.
0:35
The first is loading time.
0:42
When delivering images for the web, you want to be
0:45
careful not to deliver an image that's larger than necessary.
0:48
For example, this kitten I downloaded from Unsplash is awfully cute,
0:52
but it's 4500 pixels wide and weighs more than 3 megabytes.
0:58
Imagine the frustration of someone waiting to download a
1:04
3 megabyte image on their tiny phone screen.
1:07
Even on a laptop with a high resolution retina screen, if we're
1:12
setting a max width on our content to, say, 1000 pixels, there's no
1:16
reason to provide an image larger than twice the size or 2000 pixels.
1:21
I've included an article on web graphics for
1:28
retina displays in the Teacher's Notes.
1:31
I'm going to shrink this photo down to 2000 pixels wide
1:35
using Photoshop. If you don't have Photoshop,
1:39
there's tools on the web that can accomplish the same thing.
1:43
Exporting as a JPEG for the web reduces my image to under 800k,
1:47
or about one-fourth of our original size.
1:53
But that's not all. Watch what happens when
1:57
I drop my image into TinyPNG, an online image compressor.
1:59
This kitten pic is now around 420K in size and
2:07
still sharp enough to be used on a retina laptop.
2:11
Getting bitmap image sizes right is a complex subject and
2:19
involves coordination with the development team.
2:22
You might be asked to deliver multiple images for the web.
2:27
I might, for example, prepare a 2000 pixel wide kitten image for
2:31
a laptop and a 1000 pixel wide version for smaller screens.
2:35
And then let the HTML and CSS choose the appropriate image.
2:41
But clearly, care with bitmap images is needed.
2:47
If an image's dimensions are too small, it will look pixelated.
2:50
Too large and you could soon be serving a 3 megabyte
2:55
image to your audience where a 420k image would suffice.
3:00
Do this and you'll find your bounce rate, or rate of
3:06
users leaving the site rather than continuing on, skyrocketing.
3:09
The other challenge with responsive images is the art direction
3:16
problem, and most frequently applies to hero images.
3:19
Here's a mock up of a website as it appears on a variety
3:26
of devices: desktop, laptop, tablet, phone.
3:30
Something you might have seen on a design portfolio website.
3:35
And on a large monitor this extreme landscape image looks
3:40
pretty impressive. But what happens as the viewport gets smaller
3:45
until we're viewing the image as it might be seen on a phone
3:50
in portrait mode? It's awfully hard to make out any details.
3:55
This is where an art directed image comes in handy.
4:02
Rather than just continuing to shrink the image, we can
4:06
use our breakpoints creatively to change what image
4:09
loads depending on viewport width. For example, I might
4:13
want to load an image with more squarish proportions,
4:18
unless the viewport is at least 600 pixels wide,
4:22
then switch to my landscape version.
4:27
We've learned that designing responsively
4:33
means considering changes in navigation,
4:36
body copy presentation, and sometimes image choice.
4:39
In our next video, let's put what we've learned into practice.
4:43
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up