Catch the eyes
Good images evoke emotions in the viewer in a fraction of a second. This is why, together with the design, they determine the impact and persuasiveness of your website - even before the visitor has looked at the text in detail. Good images that harmonise with the design of your website and appeal to the visitor's emotions allow them to "enter". Only then will your texts be read.
That's why the selection of photographs, icons and graphics is crucial for the impact of your website. However, not every image or image composition that you might use in print media such as brochures or flyers is also suitable for the website. Why?
Images look different on screens than in print media
What is different about the impact of images on screens compared to their impact in print media?
- Print media are static
- A flyer or brochure has a fixed format that always remains the same, regardless of who is viewing this medium. This means that you select the images, icons and graphics exactly for this medium in this one format.
- Screens are dynamic
- Depending on the user group, around half of all visits to websites today are made via mobile devices. This means that all images, icons and graphics that you want to use on your website must be easy to see on a 27-inch screen as well as on a small mobile screen and retain their meaningfulness.
- Screens are backlit
- Unlike printed matter, images on screens are virtually illuminated from behind. This generally makes colours look different.
- The colour effect on screens is different
- How colours are displayed on screens depends on the quality of the monitor and the corresponding calibration. Each viewer may therefore see slightly different colours. In the case of print media, the colours are defined with the print.
What does this mean for your image selection?
It is state of the art to create websites in so-called responsive design. This means that all image elements that you use on the website must be scalable. Only then can they be recognised on different screens. What else needs to be considered?
- Images need a clear structure
- Structures, perspectives and dynamics must be harmoniously composed.
- Check for usability on all screen sizes
- Several small photos put together to form a collage may not be recognisable on screens with a low resolution, such as mobile phones.
Criteria for image selection
The aim of the images is to convey atmosphere and to give visitors to your website an idea of what you, your company, your services and products are all about at a glance.
You should therefore ask yourself the following questions:
- Core message
- Which aspect of the content should the image visually emphasise?
- Effect
- What effect should the image have on the viewer?
- In general, the image should carry a certain tension so that it "draws the viewer into the associated text".
- Positioning
- Where should the image be integrated?
- Format
- Which image format do I need? Panorama, landscape or portrait format.
- Responsive
- Will the image "work" on both a desktop and a mobile screen?
- Colours
- Which colours harmonise with the overall appearance of my website? Which ones don't?
- Resolution
- The aspect ratio of digital cameras is usually 3:2. The camera resolution should be at least 6000×4000 pixels (width x height). This ensures that cut-outs can also be used. The following resolutions can be used as final sizes for images that should also look sharp on modern 5k screens; the width specification is relevant, the height depends on the layout of the page:
- Fullscreen images: 2000 x height px
- Post images for blog posts: 1200 x 800 px
- Images in paragraphs with two-column text typesetting: 600 x 400 px
- Accordingly, never upload images to your website in full camera resolution
- Convert your images in .jpg or .png format for use on your website into the far superior .webp format.
- Use an online tool such as Squoosh for compression and conversion. You put .jpg or .png in and get .webp out. The tool works locally, is very fast and easy to use.
Spuoosh online image compression: https://squoosh.app
Self-created photographs vs. stock photos
It is generally advisable to use professionally produced images - of you, your team, your premises or products - for your website. Mobile phone photos are taboo!
If you also present more general topics on your website in addition to your company presentation or publish blog articles, you can also use agency photos, so-called stock photos.
Recommended platforms include Unsplash, AdobeStock, iStock and Shutterstock. Unsplash is characterised by many artistic photographs by photographers from all over the world, which you can also use free of charge, of course always stating the author. The others are classic stock photo agencies with a comprehensive repertoire and good keywording, also in German.
Commissioning of photographers
Before you commission a photographer to create images for your website, discuss with your web designer what requirements he or she has for the photographs in order to create an optimised overall work. Design and images must form a harmonious unit, otherwise the site will lose its persuasive power!
After you have spoken to your web designer, give your photographer clear instructions (briefing) on what exactly is to be done and what effect you want to create with the photos. What do you want visitors to your website to see? What mood should be conveyed? Clarity? Warmth and cordiality? Structure? Innovation? Define different settings in which the photos are to be taken and make sure that the photographer adheres to the specifications given to you by your web designer. The photographer is your service provider and his or her work is part of the overall work.
At best, your web designer is also a good photographer. In dialogue with you, he will recognise which images the website needs to achieve the effect you want. A picture is worth a thousand words. Even a bad one!
Portraits - absolutely, and up-to-date please
You know how it is, the employee photos on some websites are a collection of historical snapshots. That looks unprofessional. And of course you don't do that. The portraits of the people who carry the company are an important and emotional aspect of your company presentation. Bad portraits can be show-stoppers when it comes to whether the visitor makes contact with you or leaves the site and never comes back.
Use professional portrait photos. If you have several employees, make sure that the lighting conditions and backgrounds are uniform. If necessary, send your employees to the photographer of your choice and have up-to-date photos taken in the studio. Of course, it is even better if you can take and use professional photos in production, on the construction site, or simply "at work". This will create an authentic and emotional atmosphere that builds initial trust in you and your services and makes your company presentation unique. You should not underestimate the effect. For example, if you are a craft business, manufacturer or artist and have the opportunity to include your workrooms in the shoot, do so.
Conclusion
- A picture is worth a thousand words. That's why images are crucial for the emotional contact with your website visitors.
- Selecting the right images takes time and expertise.
- All images, graphics and icons must function in responsive design.
- Use professionally created images.
You can find out more about the visual language and the effect of photos on the Photography and Lux-Scriptum pages and, of course, in the reference projects.