# Can jekyll create lower resolution previews of images?

**URL:** <https://talk.jekyllrb.com/t/can-jekyll-create-lower-resolution-previews-of-images/2422>\
**Category:** Help\
**Created:** [December 16, 2018, 9:21pm UTC](https://talk.jekyllrb.com/t/can-jekyll-create-lower-resolution-previews-of-images/2422 "2018-12-16T21:21:05Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![marian42](https://avatars.discourse-cdn.com/v4/letter/m/b2d939/32.png) [@marian42](https://talk.jekyllrb.com/u/marian42)\
**Post date:** [December 16, 2018, 9:21pm UTC](https://talk.jekyllrb.com/t/can-jekyll-create-lower-resolution-previews-of-images/2422/1 "2018-12-16T21:21:06Z")

</div>

When embedding an image like this:

```
![alt text](image.jpg)

```

Is it possible to have jekyll create a downscaled version that is as wide as the text column and have it link to the full resolution image?

---

<div class="post-metadata">

**Author:** ![rdyar](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/rdyar/32/710_2.png) [@rdyar](https://talk.jekyllrb.com/u/rdyar)\
**Post date:** [December 17, 2018, 4:49am UTC](https://talk.jekyllrb.com/t/can-jekyll-create-lower-resolution-previews-of-images/2422/2 "2018-12-17T04:49:38Z")

</div>

jekyll won’t do this on its own, it’s possible there is a plugin that could do that but I’ve not heard of one.

---

<div class="post-metadata">

**Author:** ![mmistakes](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/mmistakes/32/2169_2.png) [@mmistakes](https://talk.jekyllrb.com/u/mmistakes)\
**Post date:** [December 17, 2018, 5:25pm UTC](https://talk.jekyllrb.com/t/can-jekyll-create-lower-resolution-previews-of-images/2422/3 "2018-12-17T17:25:29Z")

</div>

You’ll need a plugin (or set of plugins).

Off the top of my head you could use the [**jekyll-picture-tag** plugin](https://github.com/robwierzbowski/jekyll-picture-tag) to generate downscaled versions. It’s primary purpose is creating smaller sizes for use with responsive image markup, but it should do what you want.

It expects you to use a `{% picture %}` tag so it knows what images to use, but you could use another [plugin that rewrites images written in Markdown](https://gist.github.com/mmistakes/77c68fbb07731a456805a7b473f47841) to the format jekyll-picture-tag needs.

---

<div class="post-metadata">

**Author:** ![marian42](https://avatars.discourse-cdn.com/v4/letter/m/b2d939/32.png) [@marian42](https://talk.jekyllrb.com/u/marian42)\
**Post date:** [December 19, 2018, 6:38pm UTC](https://talk.jekyllrb.com/t/can-jekyll-create-lower-resolution-previews-of-images/2422/4 "2018-12-19T18:38:16Z")

</div>

Thank you, mmistakes, this helped a lot.

I managed to get it to work with some changes to the second plugin you linked:

```
Jekyll::Hooks.register :posts, :pre_render do |post, payload|
  docExt = post.extname.tr('.', '')

  if payload['site']['markdown_ext'].include? docExt
    newContent = post.content.gsub(/\!\[([^\]]*)\]\(([^)]+)\)/, '<a href="\2">{% picture \2 alt="\1" %}</a>')
	post.content = newContent
  end
end

```

I fixed the regex so that it works if there are multiple images in one line and I added a link to the high resolution image.

I also modified the image path so that it works with the [postfiles](https://github.com/nhoizey/jekyll-postfiles) plugin:

```
Jekyll::Hooks.register :posts, :pre_render do |post, payload|
  docExt = post.extname.tr('.', '')

  if payload['site']['markdown_ext'].include? docExt
    match = post.path.match(/.*\/(_.+\/)[^\/]*.md/)
	dir = match == nil ? "" : match.captures[0]
    newContent = post.content.gsub(/\!\[([^\]]*)\]\(([^)]+)\)/, '<a href="\2">{% picture ' + dir + '\2 alt="\1" %}</a>')
	post.content = newContent
  end
end

```

Do you know if it’s possible to make the jekyll-picture-tag plugin set the `witdh` and `height` values of the `img` element to the original image resolution? With these missing, the browser stretches low resolution images.