---
title: How to Change an Image in Block
slug: how-to-change-an-image-in-block
docTags: 
createdAt: 2025-06-16T17:14:53.929Z
---

## Introduction

Background (hero) images are often the first visual element a visitor sees. Updating this image keeps your website looking current, branded, and engaging. Replacing or updating images in the Storagely Website Editor is easy. 

### Navigating to the Editor

- Open your Storagely Dashboard.
- Navigate to the Storage Website tab and select "My Websites"

  ::Image[]{src="https://api.archbee.com/api/optimize/_fbQ1jk8y-6t-s-DYY8Bo/a_vbokmc20-DnECIMXYlD_screenshot-2025-06-27-at-85431-am.png" size="38" width="388" height="559" position="flex-start" darkWidth="388" darkHeight="559" showCaption="false"}
- Select the website you want to edit from the list

  ![](https://api.archbee.com/api/optimize/_fbQ1jk8y-6t-s-DYY8Bo/uaZq1w42uNsUr6u3KAqoI_screenshot-2025-06-27-at-93722-am.png)
- Click the top left **CMS** icon

  ::Image[]{src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXf4j45XiRtVZTpVDOGqnd5eTRfUWgHtG0ap1l0mWCIvOt92DTp8qLrEgZz4HUN3otNt4c0OCvvGVxfOCGFXohqRtm5gf-e2U9JhgT46b9WIOefP3ex3xysKC1NEiIOQpMeSQTo65UADXpigU276ptE?key=SJqjgkT2K-F-F71wGPZjBw" size="10" width="96" height="112" position="flex-start" darkWidth="96" darkHeight="112" showCaption="false"}
- Click the page containing the background image you’d like to update.

  ![](https://api.archbee.com/api/optimize/_fbQ1jk8y-6t-s-DYY8Bo/mhmRpK6q7K8ZkFwcu-if6_screenshot-2025-06-27-at-111805-am.png)
- Scroll to the **Image in a section or block** on the page preview.

### Step-by-step instructions to change an image within an image block:

- **Hover** over the image block you want to change.
- **Click **directly on the image to open the toolbar.
- In the toolbar, click the **image thumbnail **or image icon to open the **Media Library**.

  ::Image[]{src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdqkJXU1JzozjsSC0NCgMARjpiVrKDjVCmxELR21qhJG0yC7SlcFyLKGZMw1LuMwto9JTJFzncbu-QQ4OIU--lklD3j6PI5exw85F9TgoYGPRNfkRcOEladY09mocE5ITJwVhh_DuY_b3XQvfODQ70?key=SJqjgkT2K-F-F71wGPZjBw" size="58" width="801" height="629" position="flex-start" darkWidth="801" darkHeight="629" showCaption="false"}
- **Upload a new image** from your computer by clicking “**+Add**” or select an existing one from the Media Library. Click “**Insert File**” to apply the new image.

  ![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXc97nfc0r_X83NC67T8-CzLnY5tjy1Nrq5-7RaQX2amoQeeyiWk5OrruLoX9Eqt_Sx0Hazcz6cnLBPrKYjytejPNwHZnDc3yFG0MPOCrJRhksRkGOGsrvaBY9eJqDkdRqnQMt6dSShiT5Etw9jmPgU?key=SJqjgkT2K-F-F71wGPZjBw)
- Review the changes made in all 3 device types (**Desktop, tablet, mobile**) to ensure they look correct. 

::Image[]{src="https://api.archbee.com/api/optimize/_fbQ1jk8y-6t-s-DYY8Bo/hh2OkLSjHiC-BmyZwVS_p_screenshot-2025-06-26-at-30210-pm.png" size="28" width="355" height="818" position="flex-start" darkWidth="355" darkHeight="818" showCaption="false"}

- To save the **update**, select “**Update**” in the bottom right corner of the window. Then close the tab. 

### Best Practices for Background Images

✅ **Use high-res, optimized images (\<200KB)**
&#x20;Keep images sharp but lightweight. Use compressed formats like WebP or JPEG to maintain fast load times.

Use tools like Online-Convert to formate images. [Here is a link to a tool to use.](https://image.online-convert.com/convert-to-webp)

✅ **Adjust overlay color and opacity for readability**
&#x20;Apply a semi-transparent overlay to ensure text stands out clearly against the background image.

✅ **Preview on all devices**
&#x20;Use the preview toggle in Storagely to check how your image looks on desktop, tablet, and mobile. Crop and alignment may vary.

✅ **Name image files with SEO keywords**
&#x20;Rename files before uploading using relevant keywords (e.g., climate-controlled-storage.jpg). Use hyphens instead of spaces to improve search visibility.

🎥 Watch Tutorial Video of this process:&#x20;

:::Iframe{iframeHeight="0" code="<iframe src=&#x22;https://relay.apps.storagely.app/share/aOGyuL5blWfRMq5h&#x22; width=&#x22;640&#x22; height=&#x22;360&#x22; frameborder=&#x22;0&#x22; allow=&#x22;autoplay; fullscreen&#x22; allowfullscreen></iframe>"}

:::

*As always, if you have any questions during this process, our Customer Success Team is here to help. The best way to reach us is by submitting a support ticket.*

**[Submit a Ticket](https://d1s7s.share.hsforms.com/297GkKIsiTSmDgSKUYT9s2g)**