Share via
Back

Responsive Images and iFrames

Written at 2017-08-02,
19 paragraphs,
24 sentences,
188 words.

You aren't just limited to markdown image tags either. You can either use markdown image tags.


mikael cho 214358 Photo by Mikael Cho via [Unsplash](https://unsplash.com/@mikael?photo=3TDkAttcaM)_

gatsby-remark-images and gatsby-remark-responsive-iframe are here to take care of all your basic Markdown image and iframe issues.

Images

gatsby-remark-images provides out-of-the-box progressive image loading (as popularized by Medium and Facebook) for all local JPGs and PNGs in your Markdown documents.

You aren't just limited to markdown image tags either. You can either use markdown image tags:

![](image.png)

Or HTML image tags:

<img src="image.png" alt="">

Let's see some more photos by Max Boettinger (I, II):

max boettinger 109436

max boettinger 288448

What about retina images?

Absolutely, these are supported too! Gatsby takes care to retain images' pixel density.

Gandalf telling you that you should stay where you are

Okay, nice! But what about GIFs?

Sadly, Sharp – the library that does the actual image processing for us in gatsby-plugin-sharp – is not able to write out the GIF file format. We will just copy them over for you, instead, and also do that with SVGs.

An animated GIF of the Select2 Logo: Select2 Logo animation

An inline example example SVG. Tremendous!

And here's an awesome SVG tiger:

awesome tiger

iFrames and video embeds

Let's add a YouTube video to show off responsive iFrames real quick: