Start with your Smarthotel Editor
      Back to home
      1. Smarthotel Helpguide
      2. Hotel Website
      3. Start with your Smarthotel Editor

      CMS Lesson 3: Updating Images on Your Website

      Easily replace existing images and give your site a personal touch

      Your website has already been filled with carefully selected images by our onboarding team. Think of room photos, breakfast, facilities, or local surroundings. In this lesson, you'll learn how to replace and manage those images yourself, using the Smarthotel Editor.

      You don’t need any technical skills — just click and update.

      Most images are already in place

      You don’t have to build your pages from scratch. All key visuals — headers, galleries, side-by-side image/text blocks — are already set up. You simply click on an existing image to replace it.

      There are generally two types of images:

      1. Header or background images – often at the top of a page

      2. Inline content images – placed next to text or inside content blocks

      How to replace an image

      1. Go to https://editor.smarthotel.nl and log in

      2. Navigate to Pages and open the page you want to edit

      3. Click directly on the image you want to change

      4. A pop-up appears: upload a new image or select one from your image library

      5. Click "Select" and the image will be replaced instantly

      Tip: Don’t be afraid to try! Clicking on an image won’t break anything — Duda makes it easy to test and undo changes.

      Replacing header or background images

      Some pages have large images at the top with text over them. These are background images within a section.

      To replace a background image:

      1. Hover over the section with the large image

      2. Click Edit Section

      3. Go to Background > Image

      4. Upload or choose a new image from your library

      5. Adjust the overlay or opacity to ensure the text remains readable

      Tip: Use bright, high-quality photos with minimal clutter to keep text clear and visible.

      Optimize your images for quality and speed

      Using high-quality visuals is important, but oversized files can slow down your website.

      Ideal image settings:

      • Max width: 2000 pixels

      • File size: under 500 KB

      • Format: JPG or WebP (avoid PNG unless needed for transparency)

      Use https://tinypng.com or https://squoosh.app to compress images without losing quality.

      Add an alt text (important for SEO and accessibility)

      Each image lets you enter alt text – a short description that tells search engines and screen readers what’s shown.

      Example alt text:
      “Superior room with balcony and sea view at Hotel Bellevue, Nice”

      You can add this when uploading or editing an image.

      In the Smarthotel Editor, you can use the SEO Assistant to quickly check if images on your page are missing alt text. It helps you improve your site's accessibility and search engine visibility.

      How to use it:

      1. Open the page you want to check in the editor

      2. Click the SEO icon (flag) in the top bar

      3. The SEO Assistant will show suggestions, including images without alt text

      4. Click on the image name and add a short, descriptive alt text

      5. Save your changes

      Tip: Describe what’s visible in the image and include keywords if relevant (e.g., “Hotel room with ocean view”).

      Check your images on mobile

      Images that look great on desktop may not always fit well on mobile.

      1. Click the mobile icon in the top menu of the Smarthotel Editor

      2. Scroll through your site and check if images still look right

      3. If needed, adjust image alignment or section spacing to improve readability

      Tip: Less is more on mobile — don’t overload the screen with large visuals.

      Keep your style consistent

      To create a polished and professional website:

      • Use images with similar lighting and color tones

      • Avoid mixing professional photos with casual phone snapshots

      • Use the same image format and dimensions throughout a section

      • Don’t stretch or distort images — keep proportions intact

      Common mistakes to avoid

      Mistake Solution
      Blurry, pixelated images Use high-resolution photos
      File too large Compress with TinyPNG or Squoosh
      No alt text Always describe the content for SEO
      Random mix of styles Keep your look clean and consistent
      Forgetting to publish Click Publish when you’re done!
       

      Summary

      • Click on any image to replace it

      • For full-width banners, use Edit Section > Background

      • Use compressed, high-quality images (max 500 KB)

      • Add alt text to every image

      • Check and adjust on mobile

      • Keep the overall visual style consistent

      • Don’t forget to click Publish

      Want to see how it works?

      Watch this video with a full walkthrough:
      Effortlessly manage your website’s pages with the Smarthotel Editor CMS

      Or read this introduction:

      Manage and customize your website with the Smarthotel Editor

      Next lesson

      Continue with:
      CMS Lesson 4: Managing Rooms & Packages on Your Website

      Need help?

      Email us at support@smarthotel.nl — we’re happy to assist you.