Image Usage

There are four types of Images we use:

  • Media Images - for Landing Pages, like category cover images and advertisement images. These are uploaded via the Media App within Backstage
  • Product Images - for images coming from a headless Content Management System like Contentful or GraphCMS
  • Icons - that are used across your site
  • Small Static Images - for example logos

Each Image type is handled differently inside the Catwalk stack because their usage patterns and optimization criteria are different.

Media Images

All Banner Images, Category Images, etc should be uploaded in the Media App in Backstage and can is usually added by Frontend Managers. See this article for how to use the App.

The CDN we use optimizes and scales these Images.

If you want to use these Images in Catwalk you should use the <Image /> component from Catwalk:

import React, { Component } from 'react'
import PropTypes from 'prop-types'

import Image from 'frontastic-catwalk/src/js/image'

class MyTastic extends Component {
     render () {
	return (
	     <Image
		media={this.props.data.image}
	     />
	)
     }
}

MyTastic.propTypes = {
     data: PropTypes.object.isRequired,
     }

export default MyTastic

This Image component ensures that the Image is cropped as specified by your Frontend Manager in Backstage and the Image is also delivered in all the appropriate sizes etc. It also supports additional properties like title and alt.

The Image component tries to get the sizes of the HTML element it's embedded in and optimizes crop and size based on this. This means you can only embed this inside a properly sized block element.

Product Images (or Content Images)

External Images are not handled or scaled by us by default and the backend system you're using is supposed to take care of this.

Frontastic can also scale, transform and optimize these images, but we need to put your image domains on an include list for this, since this causes additional expenditure for Frontastic. If your image domains are on our include list you can use the RemoteImage component:

import React, { Component } from 'react'

import Image from 'frontastic-catwalk/src/js/remoteImage'

class MyTastic extends Component {
     render () {
	return (
	     <RemoteImage
		url={someUrl}
		alt="My custom alt text"
		options={{ crop: 'pad', background: 'white' }}
		cropRatio='2:1'
	     />
	)
     }
}
export MyTastic

Please contact your Frontastic Specialist to get your domains added to our include list.

Icons

We strongly suggest using SVG images as Icons. If you use this path, we can transform those SVG images into React components as soon as you import them from a React component as well as optimizing them while doing so as we use a svgr webpack plugin.

This means you can use Icons like this in your Tastics:

import React, { Component } from 'react'

import { ReactComponent as MyIcon } from 'icons/some-icon.svg'

class MyTastic extends Component {
     render () {
	return (
	     <MyIcon />
	)
     }
}

export MyTastic

This way we ensure optimizing, bundling and scaling of the Icons work in a logical way.

Small Images

Small Images (e.g. Logos) can still be imported using classic import directives.

import React, { Component } from 'react'

import myLogo from '../my-logo.png'

class MyTastic extends Component {
     render () {
	return <img src={myLogo} />
     }
}

export MyTastic

Image Formats

Cloudinary (our CDN) supports all formats - including the new WebP and converts "correctly" as needed.

  • PNGs support transparency but are generally more suitable for illustrations because PNGs cannot compress gradients and shades efficiently.
  • JPEGs cannot display transparencies or hard edges - JPEGs draw everything soft (internally, the image data is translated into sine curves).

A subsequent automatic release of images is almost impossible except in trivial cases - even tools such as PhotoShop fail if this is to happen without manual interaction.

Because Product Images generally have many natural color gradients, PNGs (especially in high resolutions) are much larger - as long as images do not need transparencies, so JPEGs are much more useful.

WebP theoretically supports everything PNGs and JPEGs can do (transparency, lossless, but also compression). However, the format is relatively new, not yet supported by all browsers, and probably not yet accepted by all image processing programs. Cloudinary supports WebP and should automatically convert the images for old browsers into other useful formats.

For graphics, (logos, ...) PNG (or SVG as vector format) is the best choice. For Product Images, WebP could be the most useful format by now, but we would have to see how exactly the support across all tools and browsers really works. JPEG with the correct background color is the most stable decision. PNGs also work, but are large in upload (hardly smaller than TIFF / BMP for product images), but should be able to be delivered sensibly by our CDN.

<Image> Component vs <MediaImage> Component

The Image component renders an image from the Media App as described earlier. You have a lot of control over the concrete image rendering. For example, the cropping, Title and dimensions can be controlled.

The MediaImage component renders a Media Object. The Media Object contains all the data the Frontend Manager can configure for an image in the Page Editor in Backstage. It contains the reference to the Image from the Media App itself, the cropping and a translatable title.

Whenever you have a Media Object from a Tastic configuration, you should use the MediaImage. The Image component is a low level component which gives you a bit more control.


‹ Back to Article List

Next Article ›

Cells and Responsive Layouts

Still need help? Contact Us Contact Us