> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.spreadsimple.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Adding images

In this help article we will explain how to add images on your website.

First, ensure you have an image column (or multiple columns) on your Google Sheet, and proper column mapping in the SpreadSimple.

![You can have one or multiple image columns](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/image_krrdg4.png)
![You can configure image column mapping on the Content tab](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/image_11xhpxf.png)

To display images on your website, SpreadSimple needs a link to an image file hosted online. E.g: https://images.unsplash.com/photo-1536500152107-01ab1422f932 or https://i.imgur.com/0JSkR76.jpg

The links to images should be put as text to the corresponding cells under the image column in your Google Sheet.

## Where do I get image links?

You should either upload images to a hosting service or use a link to an existing image.

|| We do not recommend using Google Drive and Dropbox to host images for SpreadSimple (and any other) websites as they don't work stably for that purpose, which may result in images disappearing.

| You can use our own [Image Uploader Extension](/en/article/spreadsimple-image-uploader-extension-1vdux4k/) and install it in your Chrome browser or a dedicated image hosting service.

Let's review several services that help to upload and host images.

**Disclaimer: you choose to store your images on these or other image services at your own risk.**

||| Please, respect the terms of use of third-party services you use for image hosting.

### Imgur

[Imgur](https://imgur.com) is the most popular image hosting service on the web.

1. Go to https://imgur.com/upload and upload your image
2. Right-click on the uploaded image and click "Copy Image Address"

### Postimage
1. Visit https://postimages.org and click Choose images to upload your image
2. Copy Direct link URL

### Cloudinary

1. Go to https://cloudinary.com/ and sign in/sign up
2. Go to your Media Library and click Upload to upload an image
3. Copy URL

## Image requirements

If you are planning to enable **Item Details Pages**, we recommend that your images are  **600x600** pixels at least, so the page looks good.

We do not recommend to use large images as it may affect the website performance, specially the loading speed.  

## How to resize an image

Here are a few links to online editors where you can resize your images:

https://resizeimage.net/
https://www.adobe.com/uk/photoshop/online/resize-image.html 
https://www.img2go.com/resize-image

Or you can use any of the desktop photo editors of your choice.

## Can I have rectangular images?

Yes! Just switch on **Keep image aspect ratio** toggle.

![](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/manage-spreadsimple-2021-01-17_wbyhkv.png)

## How to use Image as a hyperlink?

### Link an image to a detail page

To make an image on an item card link to its detail page, enable **Detail pages** in the `Content` Tab. Once enabled, visitors can click the image to open the corresponding detail page.

|| The Image element works as a hyperlink only when one image is mapped to it. If multiple images are mapped, the Image element will work as an image gallery instead.

### Link an image to an external page

To make an image on an item card link to an external page, enable the **Primary button** and set it to open external links. The image will then open the link mapped to the primary button when clicked.

|| If detail pages are enabled, or if there are multiple images (an image gallery), the Image element will not be linked to the button link.

## How to display images in a lightbox?

To display an image in a lightbox, switch on the **Open images in lightbox** toggle. 

![](https://storage.crisp.chat/users/helpdesk/website/-/9/1/8/f/918f9541750fe800/open-image-in-lightbox_1i45lwd.png)

When visitors click an image, it opens in a full-size gallery. You can enable this option separately for item list and detail pages.

![An example of image in a lightbox](https://storage.crisp.chat/users/helpdesk/website/-/9/1/8/f/918f9541750fe800/image-in-lightbox_go00pe.png)

|| An image will open in a lightbox only if it is not configured to link to a detail page or an external page.