Recruitment Marketing Public

Images play a crucial role in web design, enhancing visual appeal, user engagement, and overall readability. When images are not properly sized, formatted, or optimised, they can lead to performance issues and a poor user experience.

This guide outlines best practices for using images on your website, including recommended dimensions for different sections, tips for maintaining consistency, and considerations for various screen sizes. By following these guidelines, you can ensure that your images not only look great but also contribute to a well-structured and responsive design.

Hero image

These are large, oversized images that can have text placed on top and are often used to capture and engage your audience. In Recruitment Marketing, it applies to any image that is stretched across the full width of the website.

Recommendation:

• The width should be between 1500px and 1900px.
• The height should be between 400px and 600px.

See below for more information on Cover images vs. uncropped images.

Square images

These are images where the width and height are equal - a perfect square!

Recommendation:

• The size should be 600px by 600px.

Multisection blocks

These are layout elements on a webpage that is divided into multiple sections. Multisection blocks are often used to organise content in a structured and visually appealing way.

Recommendation:

• For blocks with 2 to 6 sections, it is best practice to have the image height between 250px and 600px (square or rectangle).
• The width should be 1500px divided by the number of sections. For example, if there are 3 sections, each image should be at least 500px wide.
• If a section has multiple images, try to make all images the same size. If not, resizing may affect the image's focal point or orientation.

Cover images vs. uncropped images

Cover images stretch to fill their container, cropping parts of the image if needed. They are ideal for hero sections and backgrounds.

Uncropped images maintain original dimensions and aspect ratio, ensuring no distortion but may leave empty space. These are best for displaying full images as intended.

Design examples

To see examples of how rows are utilised and shown on a page, see A Designer's Guide to Recruitment Marketing for more details.

Monitor sizes

The graphic below outlines the different monitor sizes that can affect resolution for reference.