Responsive Images for Jekyll

Jekyll does not support responsive images out of the box. There are plugins that can do that.

  1. jekyll-responsive-image
  2. Jekyll Srcset

But unfortunately GitHub does not support any of them.

The Fix

Ben Seymour has written a post on making images responsive. I got his code to work with some slight modifications.

I created a shell script resize_image.sh to resize an image in my artifact directory and store them in the width buckets 600, 850 and 1200.

After resizing the image I only had to add these lines to make my images responsive. Note that I am not using the _config.yml like Ben since I did not want to modify the code in two places to add an image( The downside to that is having to modify in many places if I ever need to modify an image I have already added. Let’s hope that never happens)

You may also like

Leave a Reply

Your email address will not be published. Required fields are marked *