+++
date = 2021-05-19T15:00:00Z
description = "Images can be embedded directly using markdown ``, but using a shortcode prevents CLS by explicitly setting the width and height."
draft = false
title = "Image Shortcodes"
[extra]
keywords = "Image, Markdown, Shortcodes, Swap"
series = "Features"
thumbnail = "ferris-gesture.png"
toc = true
[taxonomies]
tags = [
"Features",
"Shortcodes",
"Images",
]
+++
This post covers the **imgswap and img shortcodes**. Images can also be embedded directly using markdown ``, but it is better to use a shortcode so you can explicitly set the width and height, this will help prevent content layout shift which improves user experience and the google lighthouse score.
# img Shortcode
- src is the path and filename of the image. (mandatory)
- class sets a class for the image.
- alt sets the alt note for the image.
- caption sets the caption text below the image.
- link sets a hyperlink for the image.
- w is the width of the image.
- h is the height of the image.
Optional Classes:
- ci can be used to center the image.
- fr can be used to float the image right.
- fl can be used to float the image left.
- b1 can be used to add a 1px border.
*google lighthouse recommends setting alt, w, and h attributes. If alt is omitted then the filename is used. If w or h are omitted then get_image_metadata() fills these values.*
## Usage (same path)
{% raw %}
```rs
{{}}
```
{% endraw %}
**Output**
```html
{{}}
```
{{}}
## Usage (relative path ./)
{% raw %}
```rs
{{}}
```
{% endraw %}
**Output**
```html
{{}}
```
{{}}
## Usage (root path /)
{% raw %}
```rs
{{}}
```
{% endraw %}
**Output**
```html
{{}}
```
{{}}
# SVG image directly in code
```html
```
# imgswap Shortcode
By default main_src is the image displayed, swap_src is displayed on mouse hover.
When you hover your mouse over the image it will display the image to compare.
- main_src is the path and filename for the default image. (mandatory)
- swap_src is the path and filename for the swap image. (mandatory)
- class sets a class for the image.
- alt sets the alt note for the image.
- caption sets the caption text below the image.
- link sets a hyperlink for the image.
- w is the width of the image.
- h is the height of the image.
*google lighthouse recommends setting alt, w, and h attributes. If alt is omitted then the filename is used. If w or h are omitted then get_image_metadata() fills these values.*
## Usage (same path)
{% raw %}
```rs
{{}}
```
{% endraw %}
**Output**
```html
{{}}
```
{{}}
## Usage (relative path ./)
{% raw %}
```rs
{{}}
```
{% endraw %}
**Output**
```html
{{}}
```
{{}}
## Usage (root path /)
{% raw %}
```rs
{{}}
```
{% endraw %}
**Output**
```html
{{}}
```
{{}}
}}
```
{% endraw %}
**Output**
```html
{{
}}
```
{% endraw %}
**Output**
```html
{{
}}
```
{% endraw %}
**Output**
```html
{{