Image usage

There are 4 types of images we use:

• Media images – for landing pages, like category cover images, and advertisement images. These are uploaded via the Media Library within the Frontastic studio
• 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 Frontastic stack because their usage patterns and optimization criteria are different.

Media images

All banner images, category images, and so on, should be uploaded to Media in the Frontastic studio. See this article for how to use media.

The CDN we use optimizes and scales these images.

If you want to use these images in your project code, you should use the <Image /> helper component:

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 helper component ensures that the image is cropped as specified in the Frontastic studio and the image is also delivered in all the appropriate sizes. It also supports additional properties like title and alt.

The Image helper 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 and the backend system you're using is supposed to take care of this.

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 an svgr webpack plugin.

This means you can use icons like this in your Frontastic components:

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 (for example, 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/> versus <MediaImage/>

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

The MediaImage helper component renders a Media Object. The Media Object contains all the data that's configured for an image in the Frontastic studio. It contains the reference to the image from the Media library itself and the cropping.

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