Engaging Images
Images are a powerful tool to engage customers longer on the page. Ensure using high quality images in large sizes and creative proportions.
Be extra careful with background images, ensure to test these properly on mobile devices and typically provide an alternative image for small screens.
How to use images effectively
Image Crop
Choose the right image crop, so that important parts of the image won't get cut off in various screen sizes.
Contain: The image does not get cropped. Choose this setting for logos, illustrations, charts, infographics, product photos, ...
Cover: The image will get cropped to fit nicely into the page layout. This is the recommended approach for photos in general.
Mobile image
Certain images do not work well on mobile:
Background images → Upload a second image for mobile which only contains the motive/subject, but omits the large empty space where usually the text is placed over the image.
Large image with many details → Upload a second image for mobile, where the layout is re-arranged vertically. It's ok for this image to be very tall.
Extreme landscape image proportions → Upload a second image for mobile in square or portrait proportions.
Make sure to:
Preview the page on mobile
Prepare an alternative image for mobile if needed
Large Sizes
Do make use of large image sizes, as they are most engaging and signal high quality and a strong brand.
High Quality
Ensure the images used are of high quality and high resolution.
Ensure the images are straightened and exposed properly.
If no such images are available, it might be better to omit images and create infographics instead or rely on text-based blocks like Quotes, Benefits, Facts, etc.
Caption
Writing a caption, which contains one important keyword is helpful for SEO.
The caption should give context and describe the most important takeaway of the image for the customer.
Alt-text
Alt-texts describe what's on the image for users with impaired visibility, and are legally required.
In contrast to a caption, the alt-text should “paint a picture” of what's included in the image and how its parts are arranged. It can be beneficial to include keywords for SEO in these descriptions, but make sure the alt-text fulfils its purpose and legal requirement.
✅ Positive Examples
)
You won’t know it’s there
Your Prio or Prio Silent XP circular duct fan is designed to operate as quietly as possible using special mounting clips and acoustic insulation to prevent vibrations.
)
But you’ll notice the savings
No matter if you choose an AC or an EC motor, Prio duct fans convey air as efficiently as possible, saving you on operational costs far into the future.
)
Install any way you want
Prio and PrioSilent fans can be installed simply and neatly into circular ducts in any position, giving you maximum flexibility for your application.
The last image creatively breaks the flow and makes the users stop scrolling. The varied layout with varying image sizes creates interest, the large image makes such pages stand out from the rest of the internet.
)
Setting a precedent
In Boden, Sweden, the construction of a 300-square meter smart greenhouse is underway at AF1, the site of the old military area. The pioneering greenhouse will be powered by recycled energy from a data centre half a megawatt in size. Previously, waste heat from the nearby data centre was simply released directly into the air. The objective was to re-use waste heat to power the greenhouse and enable year-round vegetable growth in the coldest part of Norrbotten.
The project is a private-public partnership among Systemair, Ventilationsfirma IM, Lulea Technical University, RISE (Research Institutes of Sweden), Boden Business Agency, the local Boden municipality, and Genesis Mining's philanthropic arm, Hashpower For Science. Through Boden Business Park, the municipality of Boden is cooperating with the Swedish Energy Agency to ensure the project maintains a holistic view of energy use and promotes the future development of the IT and food production industries.
Pär Johansson, Business Development Director, Data Centre Cooling at Systemair, “We started talking about different ways to use waste heat, and the idea came up to do this pilot project. EU Ecodesign directives already exist for many businesses for waste heat to be re-used, but these directives do not yet cover data centres classified as "storage buildings". But it will change. I think we will see new legislation in the next few years. However, even though there are no formal requirements yet, the industry must take a leadership role in championing more efficient processes. Approximately 1-2% of the world's energy is currently used for data centres, which is only expected to increase. As such, re-using waste heat should be a major focus in the data centre industry.”
The above image got cropped to extreme portrait proportions, creating and intriguing effect. The entire section becomes much more interesting, compared to if it would have been used without cropping.
)
When function meets art
In their firm belief that function does not have to suffer in the name of aesthetics, Trigema invested in ventilation solutions that can operate reliably and in an energy-efficient manner. As such, the requirement was for HVAC components that could achieve A class energy label for the building, according to the Czech Republic's implementation of Directive 2010/31/EU of the European Parliament on the energy performance of buildings.
)
The one-of-a-kind structure was developed by Trigema Group, a leading development and construction company headquartered in the Czech Republic committed to “projects that change the character of the neighbourhood” and investments that “add value to society”.
The project was conceptualised in cooperation with architects David Wittassek and Jiří Řezák from the prestigious studio Qarta and with artist David Černý to elevate modern homes into a work of art.
As such, Trigema chose Systemair Czech Republic as a partner to support its vision to raise the standard of modern living.
)
Fragment is a premium residential development featuring 140 fully equipped apartments that range from single studio use to 1–2-bedroom apartments for couples or families. The team’s strong commitment towards integrating quality materials within the project included ensuring the most optimal and reliable indoor air quality products and fire safety solutions to ensure the occupants' health, comfort, and safety.
)
Systemair became a valued partner for the input of its technical experts and for having a wide product range with proven operational efficiencies. The entire building was designed using BIM modelling, and Systemair was able to provide excellent support with an extensive BIM library of products and through close cooperation during the design process.
Intriguing use of background images, while in between breakup up the layout with smaller images. A good variety is key.
Note how in this example the author refrained from the overused left-right-left-... image placement to create a stronger visual presence. The art pieces on the first three images almost seem connected due to their consistent placement.
🚫 Negative Examples
)
The layout has no variation and is quite boring to scroll though.
Each section of the page looks the same, which makes navigating the page harder. Ideally each section should form a distinct shape.
→ Some images could have been placed in larger size and more extreme proportions. Ideally the first image of each section should be larger to provide a distinct anchor for each section.
)
The selected image is significantly too small for where it's used, leading to significant pixelation. This reflects poorly on Systemair's quality standards overall.