Image sizes (SaaS)

Introduction

Core-commerce has advanced content editing options. Although this gives a lot of opportunities, this also makes content editing sometimes challenging, think about topics like ‘What is an image focal point’ or ‘What image sizes can I use’ for best response display?

In this document we have given best practices for images for all components. This, together with a Storybook, inline explanations in Strapi and our powerful ‘Open live view’, aims at helping content editors to really get the most out of our content editing experience.

Image guidelines

Images are shown in a responsive way, this means that the system will use the same image in multiple formats. By determining the focal point, the most important part of the image, the content editor can set how the image should be shown in responsive views.

• Responsive breakpoints
  • Mobile: Lower then 768px
  • Tablet: Between 768px and 1024px
  • Desktop: Greater then 1024px
  • Inside container: Max width 1216px
  • Outside container: Depending on which scale the content editor wants to support
• Image fit options:
  • Cover: Fills container, may crop;
  • Contain: Maintains aspect ratio, fits entirely;
  • Fill: Stretches to fill;
  • None: Original size;
  • Scale-down: Reduces without enlarging
• Focal point options:
  • Top Left
  • Top
  • Top Right
  • Left
  • Center
  • Right
  • Bottom Left
  • Bottom
  • Bottom Right

Images sizes

Components

With Strapi multiple components can be used to build up beautiful content. These components can be added on a lay-out, for example on:

• Contentpage
• Landingpage
• Homepage
• Product List
• Product Search
• Check-out (success page)
• Blog articles

Per component we recommend to use the following image size as a default:

• Cards
  • Items (per image)
    • 1 cards: Min width 1.260px
    • 2 cards: Min width 630px
    • 3 cards: Min width 420px
    • 4 cards: Min width 310px
• Carousel
  • Min width 1.260px in container
  • Min ratio 3:2 is advised, for the container this would be 1.260px * 840px
• Hero
  • Image
    • Min width 1.260px in container
    • Min ratio 3:2 is advised, for the container this would be 1.260px * 840px
  • Mobile image
    • Max width 1.024px
    • Ratio 1:1 is advised
• Highlight
  • Main image
    • Min width 1260px
    • Min height 822px
  • Highlights
    • Images sizes, always 3 images
    • Min width 400px
    • Min height 480px
  • Images
    • One-third
      • Min width 420px
    • Two-third
      • Min width 840px
    • Half
      • Min width 630px
    • Full
      • Min width 1.260px
      • Min height should be equal for all images on same 'row'
• Intro
  • Image
    • Min width 630px
    • Min height 630px
    • Ratio 1:1 is advised
• Links
  • Images (circle view)
    • Min width 200px
    • Min height 200px
    • Ratio 1:1 is advised
• Shop the look
  • Image
    • Ratio 1:1 is advised
    • Is shown full width, so 1.800px is advised
• Video
  • Image before video is started
  • Min width 1260px
  • Based on video ratio, for 16:9 this should be 709px

Page types

Multiple page types have their own specific images, below we have added the best-practice sizes:

• Blog overview
  • Min width 1.260px
  • Is shown full width, so 1.800px is advised
• Blog article
  • Image
    • Min width 512px
    • Min height 384px
    • Ratio 4:3 is advised
    • Focal point center is advised
• Blog Author
  • Image
    • Min width 200px
    • Min height 200px
    • Ratio 1:1 is advised
• Blog Category
  • Image
    • Visible on blog overview page when more than one category available
    • Min width 512px
    • Min height 384px
    • Ratio 4:3 is advised
    • Focal point center is advised