Vistaprint

Fluid Image

If you know the aspect ratio of the image ahead of time, use Responsive Image instead. Responsive Image will pre-allocate space for the image while the content is downloading, so that elements on the page don't jump around once the image loads.

Fluid Image is a simple, responsive image for when the page does not know the image's aspect ratio. It will grow to fit the width of its container, and will maintain its aspect ratio so that it does not skew the image inside.

Alt text goes here
Share
Share
jsx
<img
  class="fluid-image"
  src="https://placehold.it/600x100"
  alt="Alt text goes here"
/>

Components

FluidImage

FluidImage has no props of its own

All props are forwarded to the element specified in thecomponentprop(default: <img/>)

Guidelines

Developer Guidelines

  • The img tags can, and often should, use the srcset attribute to provide both hi-res and lo-res versions of the image. You can read more info on srcset at MDN.

Accessibility Guidelines

  • All images must have an alt attribute. Typically, the alt attribute should have a small description of the image itself. However, sometimes that attribute might be a blank value (alt=""):

    • Use an empty alt attribute if there is nearby HTML text that presents the same content as the image description. For instance, a product tile offers both a product image and the product name. The image does not also need the product name in its alt attribute, since this would mean that screen readers would say the same thing twice in a row: "Business Cards... Business Cards." In this case, the product image should use an empty alt attribute.

    • Use an empty alt attribute if the image is purely decorative, such as a page divider, or a > glyph at the end of a link.

    • For more information on how to properly use the alt attribute, the WC3 provides a handy flowchart: An alt Decision Tree.

  • If an image should have empty alt attribute for accessibility reasons, but we cannot use an empty string for some reason (e.g. we need the image to have a descriptive string to help boost SEO for image searches), then as long as the image and its accompanying text are both inside the same link, you can put role="presentation" aria-hidden="true" onto the image. This signals to assistive technologies that the image is decorative and should be hidden from assistive technologies.

SEO Considerations

  • Each image should have a friendly file name, since the file name is used by Google for indexing. "blue-square-business-cards.jpg" is better than "UI_99760.jpg".

  • Images should be compressed to minimize file size.

Related

ResponsiveImage - a better alternative if you know the aspect ratio of the image ahead of time