Proper formatting and placement of images are essential to maintaining readability and enhancing the overall user experience. Images should be formatted to be visually appealing and strategically placed to complement the text.
Formatting Images:
- Resize images appropriately: Images should be large enough to be clear and readable but not so large that they dominate the page. Avoid images that require excessive scrolling. Example: A screenshot of a small UI element should be cropped to focus only on the relevant area.
- Use appropriate file formats: Use file formats that provide a good balance between quality and file size. For most screenshots and illustrations, use PNG for its lossless compression. For photographs, use JPEG to reduce file size while maintaining quality.
Optimising Image Size:
- Compress images for web use: Use image compression tools to reduce file sizes without sacrificing quality. This helps to optimise loading times, especially for web-based documentation.
- Avoid large file sizes: Large image files can slow down page loading times and negatively impact the user experience. Aim to keep images under 100KB wherever possible.
Placing Images:
- Position images close to relevant text: Place images immediately next to or below the relevant text to which they refer. This helps readers associate the visual with the corresponding instructions or content. Example: An image illustrating a menu option should be placed directly after the text that mentions it.
- Use alignment and spacing effectively: Align images to the left or centre and use appropriate margins to ensure a clean layout. Avoid placing images too close to text or other images, as this can make the document appear cluttered.
Dos:
- Resize and crop images to focus on key elements: Example: Crop screenshots to highlight the specific area being discussed.
- Place images near relevant text: Example: Place a screenshot immediately after the step it illustrates.
Don’ts:
- Don’t use oversized images: This can disrupt the flow of content and slow down page loading times.