How to change an image on my website
If you have a website managed by Mirai and developed from 2023 onwards, you can access it to modify the images and see the changes reflected on your website in real time.
Dynamic Sections
Before explaining how to change an image on your website, it is important to remember that there are two dynamic sections, which means their content (texts and images) is managed from the corresponding sections of the extranet, not from the website itself. These are the OFFERS and ROOMS sections.
To modify this content, you just need to access the extranet and make the necessary changes. In a few minutes, it will be reflected on the website and in the engine.
Note: What you can change from the Elementor editor are the images placed above the dynamic content.
Website Images
Your website uses different types of images: some are content images, others are part of sliders or carousels, and others are displayed in an image gallery.
Below, we explain how to modify each of them step by step.
✅ Static image: This is a single image within a module. Click directly on it to open “Choose Image” and replace it.
✅ Slider or carousel: This contains multiple images that move or rotate. You can edit each one from the Slider control panel.
✅ Image gallery: This contains a group of images arranged in a grid or mosaic. You can add, remove, or reorder images by clicking directly on the module to open its settings.
📌 Two important things you’ll find at the end of this page:
While you’re updating your photos, keep in mind that at the very bottom of the page you’ll find two key points explained in detail:
- Saving images: No matter which type of image you change, always make sure to finish by clicking the blue button in the bottom-right corner of the library so Elementor can apply your changes.
- “Alt Text” (Alternative Text): This is a required field that you must complete for all images so that Google positioning works properly.
How to change a static image (Step by step)
Changing a single image is just as intuitive as changing text:
- Browse the website in the editor and click directly on the image you want to change.
- You’ll see the left-hand panel update automatically.
- Click the “Choose Image” button (this button appears when you hover over the image) to open your library.
Mandatory requirements before uploading a photo
To keep your website loading quickly and looking perfect, before uploading any file you must make sure it meets these two rules:
- 📐 Size: It must match exactly the pixel dimensions that Elementor shows for that section.
- ⚖️ Weight: The image must be under 200 KB.
💡 Tip: To resize your photos, change their dimensions, and convert their format for free, we recommend using the online tool Photopea.
⚠️ Important! All images must be in .webp format. Elementor is not set up to upload .jpg or .png files. The .webp format is much lighter and ensures your page loads at lightning speed.
How to change images in a Slider (Carousel)
If, when you click on a section of the website, you see navigation arrows (< and >) and the images change, then you are looking at a Slider.
Unlike static images, slider images are managed from a dropdown list in the left-hand panel. Follow these steps to modify them:
1. Click anywhere on the slider on your screen so its settings open on the left.
2. In the left-hand panel, look for the section called Slides. You will see a list of numbered elements (Item #1, Item #2, Item #3...). Each one is a different slide.
3. Click on the item you want to modify (for example, Item #1) to expand its options.
4. Make sure you are on the Background tab, which is where the image is located.
Hover over the thumbnail of the current image and click it to open the media library and upload your new image.
➕ Want to add more slides? At the end of the list you will see the + Add Item button. Clicking it will duplicate a slide so you can add a new image and text.
🗑️ Want to delete a slide? Just click the X that appears to the right of each Item.
Gallery and Media Library Management
When you come across a group of several photos arranged in a grid or mosaic, you are using the Gallery module.
To modify, add, or rearrange the photos in it, follow these simple steps:
-
Click directly on any of the gallery images on your screen.
-
In the left-hand Elementor panel, look for the Settings section.
-
You will see a box showing the number of selected images next to the thumbnails of the current photos. Click that image box to open the editing window.
When you click on a gallery or open your media library to change an image, you will find the control panel. Here is what you need to keep in mind:
-
➕ Add Gallery: Use this option if you want to add new images to the carousel or album.
-
✏️ Edit Gallery: Use this if you need to rearrange the order or remove existing photos.
-
❌ Remove from gallery: If you click the small X in the top-right corner of each thumbnail, you will remove that specific photo from this album or carousel without deleting it from your server.
-
🔄 Reverse Order: Clicking this button in the top-right corner will automatically reverse the entire image list (the last image becomes the first, and vice versa), which is ideal for showing the newest content first without moving images one by one.
-
🖐️ Drag and Drop: This lets you manually rearrange the photos. Just click on any image, hold the button down, and move it to the exact position you want.
Saving images
Whether you are changing a static image, a slider, or a full gallery, once you have selected or uploaded your photos in the media library, never close the window directly.
You must click the blue confirmation button in the bottom-right corner of the screen (it will say "Select", "Insert Media" or "Add to Gallery", depending on the module). If you do not click this blue button, Elementor will not apply the new image.
'Alt Text'
To finish with images, here is one key point for Google positioning and accessibility. When you select a photo, look at the right-hand sidebar for the field called 'Alt Text'. This text does not have a translation option.
Google cannot see the photo, but it can read this field. It is important to take five seconds to write a simple description of what appears in the image (for example: 'There are different varieties of pintxos displayed on a counter in a bar'). This will help the image appear in Google Images results.