Pro Inline Images


Activate a GitPitch Paid Plan to unlock Pro Image support.

This guide introduces powerful Pro image-manipulation techniques that can be applied to inline images on any slide.

For even more image manipulation features see the Background Images Guide .

Image Sizing

You can control the width and height of any inline image using the width and height directives. These directives accept pixel values only. Specifying the px unit identifier on the value is optional.

The following markdown snippet demonstrates valid uses of these directives:


![width=800](assets/img/yoda.jpg)

---

![height=250px](assets/img/chewbacca.png)

---

![width=500, height=400](assets/img/hansolo.gif)

Note, use comma-separated values to specify multiple directives on an image.

If only width or only height is specified the other dimension is automatically scaled to preserve the original aspect ratio of the image.

Image Opacity

You can control the opacity of any inline image using the opacity directive. This directive accepts any value greater than 0.0 and less than or equal to 1.0. The lower the value the more transparent your image.

The following markdown snippet demonstrates valid uses of this directive:


![opacity=0.3](assets/img/yoda.jpg)

---

![width=400, opacity=0.75](assets/img/chewbacca.png)

---

![opacity=0.5](assets/img/hansolo.gif)

Note, use comma-separated values to specify multiple directives on an image.

Image Filters

You can activate visual-effect filters on any inline image using the filter directive. This directive currently supports the following filter values:

  • Blur
  • Bright
  • Contrast
  • Grayscale
  • Hue
  • Invert
  • Saturate
  • Sepia

The following markdown snippet demonstrates valid uses of the image filter directive:


![filter=blur](assets/img/yoda.jpg)

---

![width=250, filter=grayscale](assets/img/chewbacca.png)

---

![height=400, filter=sepia](assets/img/hansolo.gif)

Note, use comma-separated values to specify multiple directives on an image.

Image 2D Transformations

You can control the 2D rotation of any inline image using the rotate directive. This directive accepts any positive or negative angle value between 0 and 360 degrees. Specifying the deg unit identifier on the value is optional.

The following markdown snippet demonstrates valid uses of the image rotate directive:


![rotate=45](assets/img/yoda.jpg)

---

![width=400, filter=sepia, rotate=-60deg](assets/img/chewbacca.png)

---

![opacity=0.6, rotate=230](assets/img/hansolo.gif)

Note, use comma-separated values to specify multiple directives on an image.

Image 3D Transformations

You can control the 3D rotation of any inline image on the x-axis and y-axis using the skewx and skewy directives. These directives accept any positive or negative angle value between 0 and 360 degrees. Specifying the deg unit identifier on the value is optional.

The following markdown snippet demonstrates valid uses of the image skew directives:


![skewx=-15](assets/img/yoda.jpg)

---

![width=300, height=300, skewy=40deg](assets/img/chewbacca.png)

---

![filter=saturate, skewx=20, skewy=-35](assets/img/hansolo.gif)

Note, use comma-separated values to specify multiple directives on an image.

Image Fragment Behavior

You can activate markdown fragment behavior on any inline image using the fragment property. The following markdown snippet demonstrates valid uses of the image fragment property:


![fragment](assets/img/yoda.jpg)

---

![skewy=40deg, fragment](assets/img/chewbacca.png)

---

![width=500, filter=grayscale, fragment](assets/img/hansolo.gif)

Note, use comma-separated values to specify multiple directives on an image.

Image Custom Styles

You can activate one or more Custom CSS Styles on any inline image by specifying your custom style names as properties. For example, assuming you have defined custom-shadow and custom-border styles the following markdown snippet demonstrates valid uses of those styles:


![custom-shadow](assets/img/yoda.jpg)

---

![skewy=40deg, custom-border fragment](assets/img/chewbacca.png)

---

![filter=grayscale, custom-shadow custom-border](assets/img/hansolo.gif)

Note, use comma-separated values to specify multiple directives and use space-separated values to specify multiple properties on an image.

Image Title Text

To specify image title text alongside image directives or properties you can use the title directive. The following markdown snippet demonstrates valid uses of the image title directive:


![YODA](assets/img/yoda.jpg)

---

![rotate=35, title=Baby Yoda!](assets/img/baby-yoda.jpg)

---

![filter=contrast, title=Star Wars, fragment](assets/img/death-star.gif)

Note, use comma-separated values to specify multiple directives on an image.