---
title: "Simple Responsive Images with Jekyll | Netlify"
description: "Realize the speed, agility and performance of a scalable, composable web architecture with Netlify. Explore the composable web platform now!"
source: "https://www.netlify.com/blog/2015/08/20/simple-responsive-images-with-jekyll/"
last_updated: "2026-07-10T18:16:22.000Z"
---
[Jekyll Srcset](https://github.com/netlify/jekyll-srcset) is a small plugin for Jekyll that may solve your most important responsive image needs, without making things ridiculously complicated.
Here’s how you would use it in a Liquid template:
```
{%raw%}{% image_tag src=page.thumbnail width="200" %}{%endraw%}
```
With a page with cover image `/thumb.jpg` with the dimensions 500x500, this will output the following img tag and generate all the needed image variations:
```
```
Managing images in a responsive design is something that can reach almost any level of complexity, when you’re managing different devices, aspect rations, art direction based on breakpoints and varying pixel densities.
Sometimes, however, just a few tricks can go a long way.
Not long ago, in the midst of much debate over different standards, all the modern browsers started to support the new `srcset` attribute on `img` tags, to some degree.
A lot has been written about picture tags, srcset attributes and all the potential control this gives over image variations, but all these options sometimes make responsive images seem so hard that you might be tempted to just skip dealing with it all together.
That’s a shame, because the most basic use of the `srcset` attribute is so simple that there’s really no reason not to take advantage of it.
Just add a srcset attribute to your img, specifying an image to use for 1x pixel density, 2x pixel density and 3x pixel density, and then let the browser worry about picking the best image.
That little fix alone will let you save lots of bandwidth for low pixel density devices while serving crisp images to Retina screens, and without having to deal with polyfills or all the verbose markup of a picture tag muddled to work in all browsers…
This new [responsive image Jekyll plugin](https://github.com/netlify/jekyll-srcset) makes it so straight forward to add a srcset attribute to your images, that there’s really no excuse not to. Just add the plugin to your Gemfile and start using `{%raw%}{% image_tag %}{%endraw%}` instead of `![]()
` in your templates.
You can see it in action on this very page, just check the [Liquid template](https://github.com/netlify/netlify-home/blob/master/_layouts/post.html) for the blog post you’re reading right now.
Share & enjoy!
### Share
- [X (fka Twitter)](https://twitter.com/intent/tweet?text=Simple Responsive Images with Jekyll&url=https://www.netlify.com/blog/2015/08/20/simple-responsive-images-with-jekyll//)
- [LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.netlify.com%2Fblog%2F2015%2F08%2F20%2Fsimple-responsive-images-with-jekyll%2F%2F)
- [Facebook](https://www.facebook.com/sharer.php?u=https://www.netlify.com/blog/2015/08/20/simple-responsive-images-with-jekyll//)
- [Bluesky](https://bsky.app/intent/compose?text=Simple Responsive Images with Jekyll+https://www.netlify.com/blog/2015/08/20/simple-responsive-images-with-jekyll//)
* * *
### Tags
- [Jekyll](/blog/tags/jekyll/)
- [Plugins](/blog/tags/plugins/)
- [responsive images](/blog/tags/responsive-images/)
- [Tools](/blog/tags/tools/)
- [Design](/blog/tags/design/)
## Keep reading
Tools & Services December 3, 2025
[
### Vibe coding to production with Kiro powers
](/blog/vibe-coding-production-kiro-powers)
- 
Gehrig Kunz
Tools & Services February 21, 2025
[
### Secure local development with Codezero for Netlify
](/blog/secure-local-development-codezero)
- Kathleen Randall
## Recent posts
News & Announcements June 25, 2026
[
### Netlify Functions, designed for Agent Experience
](/blog/netlify-functions-designed-for-agent-experience)
- 
Eduardo Bouças
News & Announcements June 24, 2026
[
### How we measure Netlify’s Agent Experience
](/blog/how-we-measure-netlify-agent-experience)
- 
Sean Roberts
Guides & Tutorials May 15, 2026
[
### How to build a real-time AI chatbot in minutes with Netlify Agent Runners (no backend)
](/blog/how-to-build-a-real-time-ai-chatbot-in-minutes-with-netlify-agent-runners-no-backend)
- 
Nahrin Jalal
### How do the best dev and marketing teams work together?
[Access the report](https://www.netlify.com/reports/2024-leadership-trend-report/access/)