--- title: Adding an image description: 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 certa --- [Skip to content](https://support.publitas.com/adding-an-image-or-animation#main-content) - [English](https://support.publitas.com/adding-an-image-or-animation) - [Deutsch (German)](https://support.publitas.com/de/adding-an-image-or-animation) - [Español (Spanish)](https://support.publitas.com/es/cómo-agregar-una-imagen-o-animación) - [Nederlands (Dutch)](https://support.publitas.com/nl/adding-an-image-or-animation) English Show submenu for translations [Contact Support](https://support.publitas.com/kb-tickets/new?hsLang=en) ![Publitas blue-270](https://support.publitas.com/hs-fs/hubfs/Publitas%20blue-270.png?width=175&height=57&name=Publitas%20blue-270.png) Open main navigation Close main navigation - - [English](https://support.publitas.com/adding-an-image-or-animation) - [Deutsch (German)](https://support.publitas.com/de/adding-an-image-or-animation) - [Español (Spanish)](https://support.publitas.com/es/cómo-agregar-una-imagen-o-animación) - [Nederlands (Dutch)](https://support.publitas.com/nl/adding-an-image-or-animation) English Show submenu for translations - [Contact Support](https://support.publitas.com/kb-tickets/new) - [Back to Publitas](https://www.publitas.com/) [Back to Publitas](https://www.publitas.com/) How can we help you? - There are no suggestions because the search field is empty. 1. [Knowledge Base](https://support.publitas.com/?hsLang=en) 2. [Adding Hotspots](https://support.publitas.com/adding-hotspots?hsLang=en) 3. [Hotspots explained](https://support.publitas.com/adding-hotspots?hsLang=en#hotspots-explained) # Adding an image ***Available in Silver, Gold & Enterprise*** Add both images to the pages of your online publication using any of the supported formats: 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](https://support.publitas.com/hs-fs/hubfs/043.gif?width=604&height=378&name=043.gif) 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](https://support.publitas.com/hs-fs/hubfs/CleanShot%202024-04-23%20at%2011.41.30.gif?width=592&height=344&name=CleanShot%202024-04-23%20at%2011.41.30.gif) 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](https://support.publitas.com/crop-and-edit-images-in-publitas-editor?hsLang=en).   ### ![CleanShot 2024-05-23 at 16.27.51](https://support.publitas.com/hs-fs/hubfs/CleanShot%202024-05-23%20at%2016.27.51.gif?width=598&height=372&name=CleanShot%202024-05-23%20at%2016.27.51.gif) ### 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. this does not apply to animated GIF files. It's recommended to upload animated GIF files as animated content in Video hotspots: [Add animated content to drive engagement](https://support.publitas.com/add-animated-content-to-drive-engagement?hsLang=en) - **Use images that are at least as large as the area where they will appear.** Avoid stretching small images in your editor, as enlarging a 500 × 500 px image to fit a much larger area will reduce sharpness. • **Aim for 1000–1600 px on the longest side for most hotspot images.** This range provides good visual clarity on most screens while keeping file sizes manageable. • **Export images in web-optimized formats (JPG or PNG).** Optimized images help maintain quality while keeping file sizes smaller, which improves loading performance in the Publitas reader. More details [here.](https://support.publitas.com/image-resolution-how-to-get-the-best-quality-in-publitas?hsLang=en) - [Managing Publications](https://support.publitas.com/managing-publications?hsLang=en#main-content) - [Create Content in Publitas](https://support.publitas.com/managing-publications?hsLang=en#create-content-in-publitas) - [Managing your publications](https://support.publitas.com/managing-publications?hsLang=en#managing-your-publications) - [Editing pages](https://support.publitas.com/managing-publications?hsLang=en#editing-pages) - [Updating the Publication URL](https://support.publitas.com/managing-publications?hsLang=en#updating-the-publication-url) - [SEO](https://support.publitas.com/managing-publications?hsLang=en#seo) - [Troubleshooting](https://support.publitas.com/managing-publications?hsLang=en#troubleshooting) - [Create Adaptive content in Publitas](https://support.publitas.com/managing-publications?hsLang=en#create-adaptive-content-in-publitas) - [Adding Hotspots](https://support.publitas.com/adding-hotspots?hsLang=en#main-content) - [Using the hotspot editor](https://support.publitas.com/adding-hotspots?hsLang=en#using-the-hotspot-editor) - [Hotspots explained](https://support.publitas.com/adding-hotspots?hsLang=en#hotspots-explained) - [Hotspot automation](https://support.publitas.com/adding-hotspots?hsLang=en#hotspot-automation) - [Customizing the Reader](https://support.publitas.com/customizing-the-reader?hsLang=en#main-content) - [Reader settings](https://support.publitas.com/customizing-the-reader?hsLang=en#reader-settings) - [Branding](https://support.publitas.com/customizing-the-reader?hsLang=en#branding) - [Banners](https://support.publitas.com/customizing-the-reader?hsLang=en#banners) - [Publishing Publications](https://support.publitas.com/publishing-publications?hsLang=en#main-content) - [Sharing](https://support.publitas.com/publishing-publications?hsLang=en#sharing) - [Embedding](https://support.publitas.com/publishing-publications?hsLang=en#embedding) - [Availability](https://support.publitas.com/publishing-publications?hsLang=en#availability) - [Generating reach](https://support.publitas.com/publishing-publications?hsLang=en#generating-reach) - [E-commerce & Product Feeds](https://support.publitas.com/e-commerce-product-feeds?hsLang=en#main-content) - [Importing Product Feeds](https://support.publitas.com/e-commerce-product-feeds?hsLang=en#importing-product-feeds) - [Managing product details](https://support.publitas.com/e-commerce-product-feeds?hsLang=en#managing-product-details) - [E-commerce Solutions](https://support.publitas.com/e-commerce-product-feeds?hsLang=en#e-commerce-solutions) - [Dynamic Publications](https://support.publitas.com/dynamic-publications?hsLang=en#main-content) - [Creating dynamic content](https://support.publitas.com/dynamic-publications?hsLang=en#creating-dynamic-content) - [Using Publitas Interactive](https://support.publitas.com/using-publitas-interactive?hsLang=en#main-content) - [The basics](https://support.publitas.com/using-publitas-interactive?hsLang=en#the-basics) - [Integrations](https://support.publitas.com/using-publitas-interactive?hsLang=en#integrations) - [Publication Analytics](https://support.publitas.com/publication-analytics?hsLang=en#main-content) - [Publication Dashboard](https://support.publitas.com/publication-analytics?hsLang=en#publication-dashboard) - [Google Analytics](https://support.publitas.com/publication-analytics?hsLang=en#google-analytics) - [Other integrations](https://support.publitas.com/publication-analytics?hsLang=en#other-integrations) - [Insights & Recommendations](https://support.publitas.com/publication-analytics?hsLang=en#insights-recommendations) - [API](https://support.publitas.com/api?hsLang=en#main-content) - [Publitas API](https://support.publitas.com/api?hsLang=en#publitas-api) - [Privacy and Security](https://support.publitas.com/privacy-and-security?hsLang=en#main-content) - [Account security](https://support.publitas.com/privacy-and-security?hsLang=en#account-security) - [Cookies, privacy, and policies](https://support.publitas.com/privacy-and-security?hsLang=en#cookies-privacy-and-policies) - [Account](https://support.publitas.com/account?hsLang=en#main-content) - [Login and password](https://support.publitas.com/account?hsLang=en#login-and-password) - [Managing your account](https://support.publitas.com/account?hsLang=en#managing-your-account) - [Billing](https://support.publitas.com/billing?hsLang=en#main-content) - [Billing Details](https://support.publitas.com/billing?hsLang=en#billing-details) - [Subscription](https://support.publitas.com/billing?hsLang=en#subscription) - [Data Traffic](https://support.publitas.com/billing?hsLang=en#data-traffic) - [Partners and Integrations](https://support.publitas.com/partners-and-integrations?hsLang=en) - [Learning Center](https://support.publitas.com/learning-center?hsLang=en#main-content) - [Tutorials](https://support.publitas.com/learning-center?hsLang=en#tutorials) - [Trust & Safety](https://support.publitas.com/trust-safety?hsLang=en) [![Publitas blue-270](https://support.publitas.com/hs-fs/hubfs/Publitas%20blue-270.png?width=100&height=32&name=Publitas%20blue-270.png "Publitas blue-270")](http://publitas.com) Copyright © 2025, Publitas B.V.