The Image component allows you to easily add visual content to pages. You can customize the size and alignment of your image, adjust the margins for better spacing, and choose where the caption appears to enhance your page's layout.
Layout and Styling Options
Image Widths
Image alignment
Caption alignment
Margin bottom
the end
Margin top
the end
Margin left
Margin right
Usage
Do
- Select images that are directly related to the content and enhance the message.
- Ensure images are appropriately sized.
- Use images with a similar look and feel to maintain visual consistency across the site.
- Align images in a way that complements the surrounding text and layout.
- Verify that images display correctly on various screen sizes and resolutions.
Don't
- Avoid images that are pixelated or blurry.
- Refrain from placing too many images on a single page, which can overwhelm users.
- Avoid using images that are too large or too small for the intended space.
- Avoid images that don’t add value or context to the content.
- Minimize reliance on generic stock images to keep content authentic.
Accessibility
- Ensure that you provide suitable alt text for images. Alt text for images enhances web accessibility by offering a textual description for screen readers used by visually impaired users. See the a11yproject website for more information about writing alt text for images.