lesson |
Different crops, same image |
Use the picture tag to create a responsive banner that adjusts the image to fit the screen while maintaining the design aesthetic better. |
true |
true |
| title |
url |
highlight |
Images for the web |
image-formats |
true |
|
| title |
url |
Images cheat sheet |
images-cheat-sheet |
|
|
| before |
notes |
We’re going to implement a different kind of responsive banner. Instead of have the text off the image on small screens, then on at larger screens, we’re going to make use of the `<picture>` tag to use the same general layout, but with differently cropped images.
|
| label |
text |
Type it, type it real good |
Remember the purpose of this lesson is to type the code out yourself—build up that muscle memory in your fingers! |
|
|
|
|
| title |
before |
folders |
after |
notes |
Download & set up files |
|
| label |
type |
different-crops-same-image |
folder |
|
| label |
type |
indent |
fade |
assets |
folder |
1 |
true |
|
| label |
type |
indent |
notes |
prod |
folder |
1 |
These are the files you downloaded |
|
| label |
indent |
banner.psd |
2 |
|
| label |
indent |
banner-l.psd |
2 |
|
| label |
indent |
banner-m.psd |
2 |
|
| label |
indent |
banner-s.psd |
2 |
|
| label |
type |
indent |
notes |
different-crops-same-image |
folder |
1 |
The cloned GitHub repo |
|
| label |
indent |
type |
css |
2 |
folder |
|
|
| label |
indent |
modules.css |
3 |
|
|
| label |
indent |
index.html |
2 |
|
|
*All the CSS has already been written. And some of the HTML has been written: mainly the boilerplate and the CSS connections.*
**Notice that I’ve already created all the different sizes of banner graphics. They have different aspect ratios and different croppings to optimize their indented screen size.**
|
| label |
text |
Naming conventions |
Don’t forget to follow the [naming conventions](/topics/naming-paths-cheat-sheet/#naming-conventions). |
|
|
|
| title |
before |
folders |
Save web-ready graphics |
Before we get started writing the HTML, let’s export all the banner graphics from Photoshop using the “Save for web” utility.
**All the graphics are saved in their retina (2×) size. So we’ll need to resample them on save.
**Large sizes: Open `banner-l.psd`**
1. Use “Save for web” to save it as a JPG—around 55% quality looks okay.
2. Name it ` [email protected]` in your `images` folder.
3. Now, “Save for web” again, and resize it down to `1200` pixels wide (in the bottom right corner of the dialog).
4. Save it as `banner-l.jpg`, around 55% is okay.
**Medium sizes: Open `banner-m.psd`**
1. Same thing: save as JPG at its original size: ` [email protected]`
2. Resize to half size, `600px`, and save another JPG: `banner-m.jpg`
**Small sizes: Open `banner-s.psd`**
1. Same thing: save as JPG at its original size: ` [email protected]`
2. Resize to half size, `320px`, and save another JPG: `banner-s.jpg`
|
| label |
type |
different-crops-same-image |
folder |
|
| label |
type |
fade |
indent |
assets |
folder |
true |
1 |
|
| label |
type |
fade |
indent |
prod |
folder |
true |
1 |
|
| label |
type |
indent |
different-crops-same-image |
folder |
1 |
|
| label |
type |
indent |
fade |
css |
folder |
2 |
true |
|
| label |
indent |
fade |
index.html |
2 |
true |
|
| label |
type |
indent |
images |
folder |
2 |
|
|
| label |
indent |
banner-l.jpg |
3 |
|
|
| label |
indent |
banner-m.jpg |
3 |
|
|
| label |
indent |
banner-s.jpg |
3 |
|
|
|
| title |
before |
Smush ’em real good |
Don’t forget to smush these JPGs! Drop them all into ImageOptim to get them as small as they can be.
|
|
| title |
before |
code_lang |
code_file |
code |
lines |
after |
Write small screen HTML |
Now we’re ready to write the basic HTML for small screens. After that’s done we’ll add in the `<picture>` element to make responsive adaptations.
|
html |
index.html |
⋮
<body>
<div class="banner relative">
<img class="img-flex" src="images/banner-s.jpg" alt="">
<div class="absolute pin-lb island-1-2 max-length">
<h1 class="push-1-8">Maize: cornerstone of culture & spirituality</h1>
<p class="push-1-2">Corn has played a significant role in empires, civilizations and people for thousands of years—Mayans even having a Maize God.</p>
<a class="btn btn-ghost banner-btn" href="#">More about maize</a>
</div>
</div>
</body>
⋮
|
|
| num |
text |
5 |
We’re starting with the super basic image tag, just a single `<img>` that points to the `banner-s.jpg`
|
|
|
We don’t need to write any CSS, I’ve already done CSS for `.banner` & `.banner-btn` so we can concentrate on the HTML.
*Pop that open in your browser and see what it looks like.*
|
|
| title |
before |
code_lang |
code_file |
code |
lines |
after |
Add picture element for different sizes |
Now we’ll update the HTML to add a `<picture>` element that will allow the image to change depending on the screen size.
|
html |
index.html |
⋮
<div class="banner relative">
<picture class="img-flex">
<source media="(min-width:60em)" srcset="images/banner-l.jpg">
<source media="(min-width:38em)" srcset="images/banner-m.jpg">
<img src="images/banner-s.jpg" alt="">
</picture>
<div class="absolute pin-lb island-1-2 max-length">
<h1 class="push-1-8">Maize: cornerstone of culture & spirituality</h1>
<p class="push-1-2">Corn has played a significant role in empires, civilizations and people for thousands of years—Mayans even having a Maize God.</p>
<a class="btn btn-ghost banner-btn" href="#">More about maize</a>
</div>
</div>
⋮
|
|
| num |
text |
3 |
Add a new `<picture>` tag surrounding the old `<img>` tag. Notice that we moved the `.img-flex` class up to `<picture>` and removed it from `<img>`
|
|
| num |
text |
4 |
We start with the largest size possible: when the screen is larger than `60em`; link in the `banner-l.jpg` image.
|
|
| num |
text |
5 |
The next size is the medium-sized image at `38em`—our `banner-m.jpg`
|
|
| num |
text |
6 |
We deleted the `.img-flex` from the `<img>` and moved it up to the `<picture>` tag instead.
|
|
|
Now as we adjust the screen size you’ll see that the image changes to one of the alternatives. I think this is a much more direct & simple way to create a responsive banner than making a bunch of media queries. Plus we get the added benefit of the banner actually looking much more similar between different screen sizes.
Check it out in your browser. Make sure to change the screen size!
|
|
| title |
before |
code_lang |
code_file |
code |
lines |
after |
Add the retina images |
The final thing we’re going to do is modify the `<picture>` element further to add all our retina-ready graphics.
|
html |
index.html |
⋮
<div class="banner relative">
<picture class="img-flex">
<source media="(min-width:60em)" srcset="images/ [email protected] 2x, images/banner-l.jpg 1x">
<source media="(min-width:38em)" srcset="images/ [email protected] 2x, images/banner-m.jpg 1x">
<img srcset="images/ [email protected] 2x, images/banner-s.jpg 1x" src="images/banner-s.jpg" alt="">
</picture>
<div class="absolute pin-lb island-1-2 max-length">
<h1 class="push-1-8">Maize: cornerstone of culture & spirituality</h1>
<p class="push-1-2">Corn has played a significant role in empires, civilizations and people for thousands of years—Mayans even having a Maize God.</p>
<a class="btn btn-ghost banner-btn" href="#">More about maize</a>
</div>
</div>
⋮
|
|
| num |
text |
4 |
I added `images/ [email protected] 2x` to the start of the `srcset`
Also notice the addition of the `1x` at the very end of the `srcset`
No we’re specifying that on large screens there’s a retina-friendly graphic & a low-density graphic.
|
|
| num |
text |
5 |
Same deal for the second `<source>` tag—retina and non-retina versions for medium.
|
|
| num |
text |
6 |
Finally, I added a whole new attribute to the `<img>` tag: the `srcset` attribute. Like the two `<source>` tags it shows two different resolutions of images.
**The `srcset` attribute in `<img>` tags is not a replacement for the basic `src`**
|
|
|
It’s a little harder to see these changes because the images look identical on retina and non-retina screens.
*If you want to truly see it working, the only way I know how, is to use the browser’s developer tools and look in the “Network” panel. As you resize the screen and move the browser between retina & non-retina screens you’ll see the different versions download.*
|
|
|