# Image

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FOSEyYbmDpDU7sLmluAuO%2FScreenshot%202023-07-19%20at%2011.38.56.png?alt=media&#x26;token=677f057b-dd3d-4775-b106-6d9c7eab521b" alt=""><figcaption></figcaption></figure>

Images enhance the visual appearance of your page. The `image` block allows you to add images to your page and is a self-standing element.

Unlike a Background Image, the `image` block uses the img tag to notify the search engines that it is an image.

{% embed url="<https://www.youtube.com/watch?index=13&list=PLvp2KVaJroeRnz3tnH0oYG8NLesimOkSY&v=Au0pChlucJ8>" %}
Getting Started - Image Block
{% endembed %}

## Add

Add an Image using the Cwicly [Quick inserter](https://docs.cwicly.com/cwicly/quick-inserter) (recommended).

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FtdEWfCry7VhkKO14dnLu%2FScreenshot%202023-07-19%20at%2011.48.42.png?alt=media&#x26;token=219cbbda-751a-4063-bcc2-592b16dd2cca" alt=""><figcaption></figcaption></figure>

Alternately, open the block inserter and click to add a Cwicly Image block.

<figure><img src="https://lh5.googleusercontent.com/gKgQ0AMNRKgtYmI8ApoxiolqpycRxJG_Ugqe_ohBrXcS7LNJUkbzQwu6nZce7ZzNg85NamnIQkVLVocDIz_WeIIKYqVYmQ--9wPhqxWliQiNm4qD_AmSwehIdJmF1XkJidZzv-qEZtY3llg9vt0B5QW2Gszzx6ZQSdq0i_OjkktEYOAiX3qpXXZwVZYmQQ" alt=""><figcaption></figcaption></figure>

## Source

The Image Source property allows you choose whether the image source will be static or dynamic.

{% content-ref url="image/source" %}
[source](https://docs.cwicly.com/blocks/image/source)
{% endcontent-ref %}

## Size

Allows you to select your `image` block's height and width.

{% content-ref url="image/size" %}
[size](https://docs.cwicly.com/blocks/image/size)
{% endcontent-ref %}

## Settings

Allows you to set specific settings on the `image` block for accessibility & optimisation.

{% content-ref url="image/settings" %}
[settings](https://docs.cwicly.com/blocks/image/settings)
{% endcontent-ref %}

## Hover Animation

Allows you to set hover animations to your `image` block for a quick visual effect.

{% content-ref url="image/hover-animation" %}
[hover-animation](https://docs.cwicly.com/blocks/image/hover-animation)
{% endcontent-ref %}