Hotspots explained
      Back to home
      1. Knowledge Base
      2. Adding Hotspots
      3. Hotspots explained

      Adding an image or animation

      Available_in Silver Gold ENT

      Using the Image hotspot, available in the editor's toolbar, you can add both static and animated images to the pages of your online publication. Animated images (GIFs) can draw more attention to certain areas of the page or make sceneries come to life.

      The supported formats are JPG, PNG, and GIF. The latter two also support transparency, which can blend the image into the existing content.

      How it works:

      1. Open the editor via Add Hotspots
      2. Select the Add an Image tool
      3. Draw the area where the image needs to be fitted into
      4. Submit the Image URL or upload the image to Publitas
      5. Select whether the image has to appear on click (hotspot), show on the page (embed), or both (Interactive embed)

      Creating an image hotspot:
      043

      An alternative option is to drag and drop one or more images onto a page in Publitas Editor, and hotspots will be created automatically. 

      CleanShot 2024-04-23 at 11.41.30

      Optionally, you can customize the image appearance by cropping the relevant part of the image, rounding the corners, or setting the transparency of the image so it blends with the rest of the content. Read more about Crop and edit images in Publitas.  

      CleanShot 2024-05-23 at 16.27.51

      Tips:

      • You can also add an Alt Text to describe the content to visually impaired users.
      • Use the Fill option for embedded images to have your images fill the dedicated area from edge to edge.
      • To ensure your content loads instantly and reduce the weight of the content for mobile traffic, Publitas will optimize image content automatically for the best experience. However, we still recommend optimizing GIFs for online use. Depending on the dimensions and the number of frames of the animated GIF it is best to keep the file size well below 500kb, preferably below 100kb if this is possible without impacting the image quality. You can also use Animated content as part of the Video hotspot which will automatically optimize GIFs, with the downside of losing GIF transparency. 
      • You can use a stop-motion effect to reduce the number of frames required. This is particularly helpful if you have a lengthy animation or want the animation to span an entire page. 
      • If you want an animation to loop, you can set a loop count or configure an endless loop when exporting the animation to a GIF file (How to create an animated GIF in Photoshop).
      • When the PDF download option is in the Reader's menu and you plan to add animations to your publication, consider showing a static version of the image in the PDF to exist underneath the animation. This way, there's no empty space on the page when users download the PDF, which does not include the image hotspots.