Permalink
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
134 lines (104 sloc) 4.25 KB
title layout option category tags updated drafted unique_id description project image_index thanks image video
JekyllConf: Responsive images with Jekyll
edgeless
minor
projects
jekyll
responsive
web
2016-05-09 11:03
2016-05-07 13:34
2016-05-07:jekyllconf-responsive-images
How to implement responsive images with Jekyll and imgix (video and notes from my lightning talk).
2016-03-16-jekyll-test-tube.svg
I was happy to be invited to speak at [JekyllConf 2016](http://jekyllconf.com). Thanks [CloudCannon](http://cloudcannon.com) for hosting it.
src src_png alt
2016-03-16-jekyll-test-tube.svg
2016-03-16-jekyll-test-tube.png
The Jekyll test tube logo

{% assign video = page.video[0] %} {% include block/video.html %}

Static websites built with tools like Jekyll are fast by their nature. With quickly served static assets (like HTML documents, scripts, images, and stylesheets) there is not much overhead in hosting a static site.

Images are often the heaviest resources on static sites and are a great place to start when improving front-end performance. According to the HTTP Archive, 63.5% of the average page’s weight was made up of images (as of April 2016). With srcset (and sizes), we can use the new responsive images web standard to serve appropriate image sizes for each client.

srcset syntax is necessarily verbose, so I use a Liquid include that pulls site-wide data and page data to generate a loop for each image.

Here are some snippets of code used in the demo project. To see it in even more detail, check out the demo repository on GitHub.

Site-wide variables and imgix configuration

{% capture code %}

sizes: '(min-width: 70em) 1000px, (min-width: 50em) 750px, (min-width: 31.5em) 500px, 100vw'

srcset:
  - 500
  - 750
  - 1000

## Gems configuration
gems:
  - jekyll/imgix

## Imgix configuration
imgix:
  source: demo-jekyll-imgix.imgix.net

{% endcapture %}

{% capture caption %} This _config.yml file includes a string for the sizes attribute, a sequence of srcset values, and imgix configuration values. {% endcapture %}

{% include block/code.html %}


The following examples show a sample Jekyll page or post which pull in site-wide variables to build those complex image blocks.

YAML frontmatter for the page

---
title: 'Example: `srcset` plus imgix'
image:
  - src: example-1.jpg
    alt: 'Leaves and a blue sky.'
    quality: 70
---

Liquid include on the page

{% raw %}
{% assign image = page.image[0] %}
{% include srcset-with-imgix.html %}
{% endraw %}

Included HTML used by the page

{% capture code %}

{% raw %}
<!-- srcset with imgix enabled -->
<!-- `image` variable assigned from front matter -->
{% if image.quality %}
  {% assign quality = image.quality %}
{% else %}
  {% assign quality = 50 %}
{% endif %}

<img
  src="{{ image.src | imgix_url: w: 500, q: 50 }}"
  sizes="{{ site.sizes }}"
  srcset="{% for width in site.srcset %}{{ image.src | imgix_url: w: width, q: quality }} {{ width }}w{% if forloop.last == false %}, {% endif %}{% endfor %}"
  alt="{{ image.alt }}">
{% endraw %}

{% endcapture %}

{% capture caption %} This section uses the imgix plugin for Jekyll to process images. {% endcapture %}

{% include block/code.html %}

{% capture endnote %}

Useful resources

{% include block/ancillary--endnotes.html %}