--- title: "Image Handling" description: "Images are needed for many Components. But to use them, they need to be uploaded and handled in the right Way. Learn how to handle an Image." path: https://www.eonshowroom.eon.com/en/aem-basics/image-handling.html lastModified: 2026-03-04T09:28:23.988Z --- # Image Handling # Image Handling ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/GettyImages-1040970776-2%3A16-9?fmt=webp) ## Image Handling Video Training [Watch the Video](https://vimeo.com/1130674605/dec8ab5a65) ### Description Images are needed for many Components. But to use them, they need to be uploaded and handled in the right Way. Otherwise Problems occur. - Editor can upload an Image to the DAM - Editor can order Images in Folders - Editor can delete an Image #### Heads Up on Image Names The Foundation Image Cropper does NOT support Capital File Names like "my-image.JPG". Please move "my-image.JPG" and rename it to "my-image.jpg". ![Image Upload Path](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/image-folder-path%3A2-1?fmt=webp) ### Uploading of Images For Uploading Images go to the Image Folder of the Project. It can be found in DAM at: > /dam/project-name/images/ There, Editor can either directly upload Images or create a Subfolder to upload Images there. It is recommended to create Subfolders to make it easier to structure the Images. ![Subfolder Creation](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/image-folder-create-folder%3A2-1?fmt=webp) ###### Create a Subfolder To create a Subfolder, Editor needs to click on the Create Button and choose Folder from the Menu. Then, a Dialog opens, where Editor needs to type in the Title for the Subfolder. The Name of it will be generated automatically from the Title. Afterwards, Editor needs to approve the made Settings by clicking on the Create Button. Then, the new Subfolder is created at the Bottom of the current Folder List. Editor can click on the Name to open this Folder. The newly created Folder will be empty. ![Image Upload Progress](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/image-folder-upload%3A2-1?fmt=webp) ###### Upload Process Now, Editor can upload Images by clicking on the Create Button and choose Files from the Menu. Then, a Dialog opens, where Editor needs to choose the Image and afterwards click on the Upload Button for Confirmation. It is also possible to simply Drag and Drop the Images from the Editor's Computer into the Folder. After Uploading, Editor should wait a Moment, then refresh the Browser Window. Editor will see the Images inside the Folder. Those are the Original Files. #### Keep in Mind Image should have 96ppi and should not be larger than 2560px Width. ### Ratios & Renditions #### Keep in Mind Images are used on Public Page with WebP Feature. The Standard is set to 50, but can be changed. The Standard 50 is a good Compromize between Page Performance and Image Quality. [Read more about WebP Options](https://www.eonshowroom.eon.com/en/aem-basics/webp-image-options.html) ![Default Renditions](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/image-rendition%3A2-1?fmt=webp) ###### Default Renditions As far as an Image is uploaded, 4 Renditions are created automatically. These can be seen by opening an Image from DAM and selecting Renditions from Dropdown on left Sidebar. Automatically created default Renditions are: - Web with 1280px Width - Thumbnail with 140px Width - Thumbnail with 319px Width - Thumbnail with 48px Width The Hight of those Renditions is created from Original Image as the Image is only scaled to fit the mentioned Widths. ![Image Cropping](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/image-cropping%3A2-1?fmt=webp) ###### Image Cropping Ratios will be cropped inside the individual Components. Once a Ratio is cropped the corresponding Renditions are created automatically. A Ratio can only be cropped ones. Afterwards, it can be selected for other Components as well. For Storing the Ratios and Renditions AEM automatically creates a Folder for them inside the Folder of the Original Image. ![Delete Renditions](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/image-rendition-delete%3A2-1?fmt=webp) Delete with Care! ###### Delete Renditions for Recropping it After cropping Renditions are created for the cropped Ratio. These can be seen by opening Image from DAM and selecting Renditions from Dropdown on left Sidebar. If a Ratio is cropped in a Way Editor does not like it, Recropping is only possible by deleting Master Rendition of this Ratio. To delete a Master Rendition of a Ratio, click on it in Rendition Sidebar and choose Delete on Top Bar. #### Keep in Mind Deleting an Rendition will affect all Componens where this corresponding Ratio is used. Therefore, deleting Renditions should only be done with freshly uploaded Images that are not used in multiple Components. ![Image Options Overview](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/image-option-overview%3A2-1?fmt=webp) ### Options for Images Selecting an Image by clicking on the Checkmark Icon, that appears on Hover of the Image Thumbnail, the possible Options appear on Top of the Page. ![Image Copying](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/image-option-copy%3A2-1?fmt=webp) ###### Copy an Image First, Editor should click on Copy. Then, Editor can navigate to the Folder the Copy should be put in. Therefore, Editor can either stay in the Folder where the Image is already in, to copy it in the same Folder, or Editor can click on the Folders Name in the Top. Then, a Dropdown Menu opens where Editor can go back to the Image Folder. Then, choose or create the Folder the Copy should be placed in. After Editor is in Directory of the Folder whereas the Copy should be placed, Editor can click on Paste, and the Image will be copied into this Folder. #### Keep in Mind If the Copy is placed into the same Folder like the Original Image, a Number (e.g. '1') is added at the End of the File Name. ![Image Moving or Renaming](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/image-option-move%3A2-1?fmt=webp) ###### Move an Image or Rename its Title Click on Move to move the Image or to rename the Image Title. A Dialog opens, where Editor first have to set the Title after Move and the Name after Move. Either the Original Name can be confirmed, or it can be changed and confirmed. For Confirmation, Editor clicks on the Next Button. Afterwards, the Tree Structure of DAM is shown where Editor can choose the new Direction by clicking on the Folder Icon in Front of the Folder Name of where it should be moved to. For Confirmation, click on the Next Button. Now, an Overview of the made Settings for the Move is displayed. If everything is correct, it can be confirmed by clicking on the Move Button. Otherwise, go Back and change Settings. #### Keep in Mind If Editor changed the Title after Move, the Image can be moved to the same Folder as it was before. This way, it can be renamed. Without Changing it, it is not possible to move it in the same Folder. ![Image Deleting](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/image-option-delete%3A2-1?fmt=webp) **Delete with Care!** ###### Delete an Image Click on the three Dots and select Delete from the opening Dropdown Menu. A Dialog opens, where Editor has to confirm that this Image should be deleted by clicking on the Delete Button. If the Image, that should be deleted, is used on a Page, a Warning Message shows up. It is **not recommanded** to click on the **Delete** Button when this **Warning appears**, because the Image is linked on at least one Page. This Page will be broken, if the Image gets deleted. Therefore, it is recommanded to Cancel it and check those References to not use this Image on any Page anymore. Once the Image is not used anymore, deleting Process can be repeated. ![Image References](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/image-option-references%3A2-1?fmt=webp) ###### References of an Image To check where an Image is used, click on the View Sign in Top Left of the Page. In the opening Dropdown Menu click on References. Now, a Column on the Left Side of the Page opens where the Reference Categories can be seen. To check on which Pages the Image is used, click on Site References. Afterwards, it is displayed on which Page the selected Image is used. Clicking on the displayed Page Name will make the Button "Go to Link" appear directly under the Page Name. This Button leads to the Editors View of the Page. ![Image Quick Publishing](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/image-option-publish%3A2-1?fmt=webp) ###### Quick Publish of an Image Click on Quick Publish to activate the Image. Then, it can be seen in [List View](/content/foundationNG/en/aem-basics/views.html), when the Image has been published and who published it.