--- title: "Image" description: "The Image Component can be used to display an Image on a Page." path: https://www.eonshowroom.eon.com/en/content-elements/image.html lastModified: 2025-11-17T17:54:24.947Z --- # Image # Image ![Image Example](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/bike-1%3A2-1?fmt=webp) [How to Configure](#how-to) ### Description The Image Component can be used to display an Image on a Page. - Cropping of different Ratios is possible - Image Selection and Cropping can differ for Desktop, Tablet or Mobile Viewports - Features like Copyright, Caption, Alt-Text, and Title are available - Lazy Load is default Option (but it is deselectable) [Check it out on Storybook](https://storybook.web-ui.eon.com/eon/master/?path=/story/content-clickable-image--interactive) ### Inspirations ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/image_library%3A2-1?fmt=webp) ##### E.ON Image Database Looking for E.ON Brand approved, Copyrights-Cleared Images? Solar Panels, Boilers, EV Chargers, smiling Families, casual Engineers ... [Visit the E.ON Media Library](https://brand.eon.com/document/325) ![Image with large EyeCatcher (top-right)](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/Young_girls_on_bed_with_tablet_at_night_rgb-1%3A1-1?fmt=webp) This is catchy ![Desktop Alt-Text of 2:1 Image](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/teaserbild_waermekaelteloesungen%3A2-1?fmt=webp) ![Desktop Alt-Text of 3:4 Image](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_windpark_roscoe_early_morning%3A3-4?fmt=webp) ### Usage Rules & Features ##### Features - Caption Text and Copyright Information are addable - Highlight Option: EyeCatcher on Image ##### Properties - Add Title and Alt-Text - Link the Image to an URL - Lazy Load is default but can be deactivated ##### Design - Have different Images and Image Ratio per Viewport - Adjust WebP Quality and Width per Image and Viewport ##### In which Grid Columns does it fit? | Grid Columns | Does it fit? | | --- | --- | | 2 | no | | 3 | yes | | 4 | yes | | 5 | yes | | 6 | yes | | 8 | yes | | 9 | yes | | 10 | yes | | 12 | yes | ##### DO's - Always crop the Image - Use EyeCatcher on Image wisely on less Images - Always check it on all Viewports ##### DONT's - Do not use it in small 2 Column Grid - Do not use WebP Quality and Width to often as we recommend a general Configuration in FoundationNg Site Config ## E.ON Rules for Imagery Our Imagery is a visual Manifestation of our Brand, featuring bold Images and dynamic Perspectives to make a lasting Impression. [Get to know the Imagery Rules by Brand Team](https://brand.eon.com/document/317#/design-essentials/imagery) ## Configuration ## Trackable Component This Component can be tracked. [Read more about Tracking](https://www.eonshowroom.eon.com/en/aem-basics/tracking.html) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_Pattern_7-1%3A2-1?fmt=webp-alpha) ![Add decorative Image](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/image_deco%3A1-1?fmt=webp) ### Adjust Image Set the Image(s) for Desktop, Tablet and Mobile Viewport seperately and crop them. Additionally, it is possible to disable Lazy Loading. Furthermore, WebP can be adjusted per Image and Viewport. [Read more about Image Cropping](https://www.eonshowroom.eon.com/en/aem-basics/image-handling.html#ratios-renditions) [Read more about WebP Options](https://www.eonshowroom.eon.com/en/aem-basics/webp-image-options.html) ![Add none-decorative Image](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/image_no-deco%3A1-1?fmt=webp) ### Decorative Image or not? If it is no decorative Image, Editor can uncheck corresponding Checkbox. This reveals Options to set Title and Alt-Text for each Viewport, where Alt-Text is mandatory. #### Keep in Mind Desktop Image, Title, and Alt-Text will be used for all Viewports if no Images, Titles, and Alt-Texts are provided for Tablet and Mobile Viewports. [Read more about Accessibility for Images](https://www.eonshowroom.eon.com/en/aem-basics/accessibility/image-accessibility.html) #### Keep in Mind - Please also append the correct Unit of the Width: either "px " for Pixel or "%" for Percent. - If Width per Viewport is maintained, Desktp Width Settings will be used as default for all unmaintained Viewport Width Settings. ### Define Image Styling In Styling Tab, Editor can choose an Alignment, and a maximal Width of the Image if it should not span Full Column Width of a Grid Column. It is also possible to define the maximal Width per Viewport. Additionally, it is possible to activate the disable Right Click Checkbox. If this Function is selected, User can not open Context Menu, for Example for Downloading that specific Image, anymore. ![Style Image with Max Width](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/image_style-max-width%3A1-1?fmt=webp) ![Style Image with Width per Viewport](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/image_style-width-viewport%3A1-1?fmt=webp) ![Configure Eye Catcher for Image](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/image_eyecatcher%3A3-4?fmt=webp) ### Add Eye Catcher for Image If an Eye Catcher should be on the Image, Editor needs to do Configuration in EyeCatcher Tab. In this Tab, Editor needs to check Enable Eye Catcher Checkbox, then the same Options are available as on the Stand Alone Eye Catcher. [Find out more about Eye Catcher Configuration](https://www.eonshowroom.eon.com/en/specials/eye-catcher.html) ![Set Properties of Image](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/image_properties%3A1-1?fmt=webp) ### Set Properties of Image Editor can choose to hide the Image on Mobile and provides Caption and Copyright Information for it in Properties Tab. Furthermore, Editor can link the Image to a Page, as far as it is not hidden on Mobile. If Eye Catcher is enabled, two additional Alignment Options are available. The horizontal Eye Catcher Position can be left or right, while the vertical Eye Catcher Position can be top, center, or bottom.