Using responsive images

If your project is photo-heavy, you may want to consider a responsive way of using images.

What to use

• Picturefill allows you to serve up differently-sized images according to a user's screen size.
• Lazysizes serves up a placeholder image while the higher quality image is downloading.

To setup

• Add picturefill and lazysizes to your project.

To setup with apps

• Run yarn add picturefill and yarn add lazysizes
• Import the libraries by pasting the below in app.js

import picturefill from 'picturefill'
import lazysizes from 'lazysizes'

Note: If you are using apps and fetching from methode, your images and HTML are automatically created. Be sure to follow the instructions in the Apps README to make sure your images are resized properly. The above instructions on adding the libraries and including them in app.js are relevant, however.

Create your images

Use the image-resizer tool to make all of your image sizes.

• Be sure to pass the placeholder option.
• Make sure your base images that you're resizing from are at least the size of the biggest width you'll be making. Basically, don't try to make a 400px image from a 200px image.

Write the HTML

• Note: If you are using lazysizes, be sure to add the lazyload class to the img for your placeholder.

<figure>
	<picture>
		<!--[if IE 9]><video style='display: none;'><![endif]-->
		<source data-srcset='[asset-path]/[filename-with-biggest-size].jpg' media='(min-width:[biggest breakpoint])'>
		<source data-srcset='[asset-path]/[filename-with-medium-size].jpg' media='(min-width:[med breakpoint])'>
		<source data-srcset='[asset-path]/[filename-with-smallest-size].jpg' media='(min-width:1px)'>
		
		<!--[if IE 9]></video><![endif]-->
		<img class='lazyload' src='assets/[asset-path]/[filename]_placeholder.jpg' alt='[Alt tag]' />
	</picture>
</figure>

e.g.

<figure>
	<picture>
		<!--[if IE 9]><video style='display: none;'><![endif]-->
		<source data-srcset='assets/methode/KOZEL_WALKER_002_apps_w_1920.jpg' media='(min-width:853px)'>
		<source data-srcset='assets/methode/KOZEL_WALKER_002_apps_w_1280.jpg' media='(min-width:426px)'>
		<source data-srcset='assets/methode/KOZEL_WALKER_002_apps_w_640.jpg' media='(min-width:1px)'>
		
		<!--[if IE 9]></video><![endif]-->
		<img class='lazyload' src='assets/methode/KOZEL_WALKER_002_apps_w_placeholder.jpg' data-srcset='assets/methode/KOZEL_WALKER_002_apps_w_placeholder.jpg' alt='Kozel straps her C-Braces on.' />
	</picture>
</figure>