Notes from Code School's Journey Into Mobile - Level 5 (Responsive Media)
- Responsive Images
- Retina Images
Responsive Images
Up to this point the images in our layouts have been fixed width. But we want our images to be able to scale with the viewport, like the rest of our content. To do this there is a two-step process.
1. Scale out an image that is larger than we actually need, that way it can be scaled down as necessary.
2. Use a max-width property in CSS
/* base image */
img {
max-width: 100%;
}
If we have a set width for our image, it tells the browser to fit that set width with a 100% of the image so that even if the image container is smaller than the total size of the image, we still get the full resolution image in that container.
/* specific image */
about img {
max-width: 29.6875%;
}
The containing element is going to scale, and as the result the image itself if going to scale as a result of the max-width property.
You can use this technique with any media type:
img,
embed,
object,
video {
max-width: 100%;
}
Note:
- No IE6 Support
- Prior to Windows 7 there is poor max-width support
- Specifically Firefox 2 and IE7
- If you need to support older browsers, use AlphaImageLoader: http://msdn.microsoft.com/en-us/library/
For more robust options for creating responsive media, try these JavaScript libraries.
- FitText - to make font sizing flexible, http://fittextjs.com
- Lettering.js - For more robust control over typography, http://letteringjs.com
- FitVids.js - For flexible responsive videos, http://fitvidsjs.com
Retina Images
With the ipad and newer iphones, retina images have become more of an issue. Retina images have 1.5 to 2 times the pixel density, so if you serve a normal image on a retina display it could look blurry or pixelated.
You could double the image size, but you're looking at larger images, larger downloads, and slower site speeds. Instead, use media queries to target those specific devices and optimize images for retina displays.
@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
/* styles */
}
In the above media query, we are targeting devices that have a pixel density of at least 1.5x.
Note, ipad and newer iphones have a pixel density of 2x, but some andriod devices have 1.5x, so we will target at least 1.5x to cover all cases.
Within the media query, you'll want to set your styles and images for retina display devices.
Example 1:
Let's say you have an image that is 200px by 200px.
You will want to scale the image up to 400px by 400px, and save it.
Best practice naming convention is to use the same name as the original file, in this case 'logo', and then use the '@2x' to signify it's twice as big. So your new file will be logo@2x.png.
Example 2:
On our example site, Nautilus from previous levels, we had a map it! button. The original size of the button was 12px by 16px. For retina images, first scale up the button to 24px by 32px (double the size).
/* Original CSS */
.logo {
background-image: url(images/mapit.png) no-repeat;
}
/* Media Query */
@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
.logo {
background-image: url(images/mapit@2x.png);
-webkit-background-size: 12px 16px;
background-size: 12px 16px;
}
}
The background-size is equal to the original image, if we don't specify background-size, the browser will serve up the image at its original doubled size.
 |
| top: original button, bottom: button@2x |
What about file size?
The previous examples used larger images, which looked good but if you're not using a retina screen they would still download and slow site speed unnecessarily.
What do you do?
There is a good solution created by Scott Jehl called Picture Fill. http://scottjehl.com/picturefill/. To use it you must include picturefill.js in the <head> of your document.
<picture alt="some alt text">
<!-- Smallest size first, no @media qualifier -->
<source src="content-image.jpeg" />
<!-- Large size- send to viewports 800px wide and up -->
<source src="content-image-lrg.jpeg" media="(min-width: 800px)" />
</picture>
In our picture tag, we first specify our image for non-retina display devices. Next, we use a larger image for devices that have retina display and are at least 800px wide.
For users who have JavaScript disabled, or for browsers that don't support media queries, create a fallback:
<!--Fallback content for non-JS or non-media-query-supporting browsers -->
<noscript>
<img src="content-image.jpeg" alt="some alt text" />
</noscript>
</picture>
