Image

Component status:Ready

Image aspect ratio guidelines help preserve the image composition that the photographer organized when shooting the photo.

With its power to pack emotion and storytelling into a single frame, photography is crucial for enabling our brand personality to shine. The aspect ratio is the ratio of width to height of an image. Image aspect ratio guidelines help preserve the image composition that the photographer created when shooting the photo.

For standardization among images, the following aspect ratios are recommended, when possible:

• 1:1 – Ideal for headshots, such directory images
• 4:3 – Ideal for horizontal images
• 3:4 – Ideal for vertical images
• 3:2 – Ideal for horizontal images, especially storytelling
• 16:9 – Ideal for use in majority of BUX components
• 9:16 – Use for social media and full screen on mobile devices

Example

Image without caption

<img class="bux-image" src="/img/location" alt="" />

{% if caption %}
<figure>
{% endif %}

<img class="bux-image {{ class }}" src="{{ image_url }}" alt="{{ image_alt_text }}" />

{% if caption %}
{% render '@image-caption' %}
</figure>
{% endif %}

Image with caption

Lorem ipsum dolor sit amet consectetur adipiscing elit.

<figure>
  <img class="bux-image" src="/img/location" alt="" />
  <figcaption class="bux-image-caption">
    <div class="bux-image-caption__text">Lorem ipsum dolor sit amet consectetur adipiscing elit.</div>
  </figcaption>
</figure>

{% if caption %}
<figure>
{% endif %}

<img class="bux-image {{ class }}" src="{{ image_url }}" alt="{{ image_alt_text }}" />

{% if caption %}
{% render '@image-caption' %}
</figure>
{% endif %}

Usage

Dos

• Use imagery with intention – to evoke emotion, tell a story, or capture optimism of our community
• Include an image caption for additional context and/or source attribution, if possible
• Though 16:9 image ratio is the most commonly used image ratio in BUX components, choose an image ratio that is well-suited for the image composition

Don’ts

• Don’t use imagery for decorative or placeholder purposes
• Don’t mix image ratios within the group of BUX components
• Don’t crop imagery into a circle

Accessibility

• How to write good alternative text for images
• Images having captions need to have their caption associated with the image using the <figure> and <figcaption>
• Ensure that the Image Caption component is never used outside of a <figure> element

References

• Ohio State brand guidelines: Photography