Recommended Image Dimensions

~ = the dimensions are relative

Image component

The Image style list has None (the default), then Large, Medium and Small versions of 16:9, 4:3, 3:4, Square and Fixed height.

Upload 1600 x 900 for 16:9, 1200 x 900 for 4:3, 900 x 1200 for 3:4, 1000 x 1000 for square.

• None shows your original file exactly as uploaded - a 6000 x 4000 upload was sent to the page at 6000 x 4000. Resize and compress before uploading, or pick a style.
• Ratio styles 16:9 391 x 220, 889 x 500, 1422 x 800; 4:3 293 x 220, 667 x 500, 1067 x 800; 3:4 165 x 220, 375 x 500, 600 x 800; square 220, 500, 800. Large, Medium and Small make the same files; only the space they take on the page differs.
• Fixed height keeps the whole picture and scales it, so nothing is cropped. Large 360 px tall, Medium 240, Small 120; the width follows the picture (a 4000 x 800 upload became 1800 x 360, 1200 x 240 and 600 x 120).
• Fresco never enlarges: a 1000 x 3000 upload in Large 16:9 stopped at 1000 x 563 instead of 1422 x 800.

Banners

One component with seven layouts: 33/66, 66/33, 50/50 image left, 50/50 image right, Text bottom, Text middle, and Text middle: No image. Each layout cuts the same photo differently.

Upload 3645 x 1215, subject in the middle - it fills every layout at every size.

• Text bottom and Text middle (the full-width photo) cut a 3:1 strip. 660 x 220, 1500 x 500, 2400 x 800, 2700 x 900, 2970 x 990, 3240 x 1080, 3645 x 1215.
• 33/66 and 66/33 both give the photo the 66 side and cut 2:1. 436 x 200, 990 x 500, 1584 x 800, 1782 x 900, 1960 x 990, 2138 x 1080, 2406 x 1215.
• 50/50 (image left or right) is about 3:2 (1.48). 326 x 220, 741 x 500, 1186 x 800, 1334 x 900, 1467 x 990, 1601 x 1080, 1801 x 1215.
• The frame on screen follows the banner's text, not only the photo. Measured a Text middle banner showed a true 3:1 on a phone but about 1.6:1 on a tablet and 2.4:1 on a laptop, so the left and right of the strip are trimmed as well. With a lot of banner text in a 66/33 layout the photo can end up taller than it is wide.
• A 3:1 strip keeps only the middle third of a normal photo - faces near the top or bottom get cut. Check it at phone and desktop width before sign-off.

Slideshow

A slideshow holds Banners, or Selected content shown as a banner. It has no image size of its own.

Upload what the chosen Banner layout needs - 3645 x 1215 covers all of them.

• Measured a Text middle slide uses exactly the banner full-width sizes (660 x 220 up to 3645 x 1215), not 16:9.
• Selected content inside a slideshow offers banner display styles (50/50, 33/66, 66/33, text middle, text bottom, text only), so it takes the banner sizes too, from the linked page's listing image.
• Keep every slide the same layout, or the slideshow jumps in height between slides.

Heroes

The image beside or above the page title. Each page type has its own hero.

Page or event 1600 x 1215 · article or location 2133 x 800 · person 1200 x 1215.

• Page hero and Event hero (same sizes). 367 x 220, 833 x 500 (5:3), then 761 x 800, 856 x 900, 942 x 990, 1028 x 1080, 1156 x 1215 (nearly square). The frame on screen is nearly square at every width tested, phones included (375 x 394 on a phone), so the 5:3 sizes are trimmed to square too. 1156 x 1215 is the minimum; 1600 x 1215 leaves room to reframe.
• Article hero and Location hero (same sizes). 367 x 220, 833 x 500, 2133 x 800. The frame is a fixed 8:3 strip at every width (375 x 141 on a phone, 1905 x 714 on a wide desktop). 2133 x 800 is the largest Fresco makes, so it will look slightly soft on very wide high-resolution screens whatever you upload.
• Person hero.  330 x 220, 750 x 500, 1200 x 800 (3:2), then 812 x 900, 893 x 990, 974 x 1080, 1096 x 1215 (about 0.9:1). Checked in editor 3:2 on a phone, nearly square on desktop. Keep the face in the middle.
• Because page and person heroes are near-square on desktop, anything near the left or right edge of a landscape photo is lost.

Card - Portrait image (and Cards in a Tile grid)

The default image style for a Card. A Tile grid has no size of its own: a Card placed in it uses these sizes.

Upload 2000 x 1333 (3:2), subject in the middle.

• From a 6000 x 4000 original: 330 x 220, 750 x 500, 1200 x 800, 1350 x 900, 1485 x 990, 1620 x 1080, 1923 x 1215.
• The frame on screen is 16:9 at every width tested (phone to 1600 px desktop, one column or four), so a strip is trimmed from the top and bottom of the 3:2 picture.
• Fresco Help: choose Portrait image for a four-column (25/25/25/25) layout.

Card - Landscape image

The picture sits beside the card text, so on a computer it becomes a tall, narrow slice.

Upload 1600 x 1215 with the subject dead centre - or choose a different card style for photos with detail at the edges.

• 528 x 220, 165 x 500, 263 x 800, 370 x 900, 407 x 990, 444 x 1080, and the largest 937 x 1215.
• the frame is 16:9 on phones and tablets (337 x 190, 715 x 402) and about 1:3 from 1280 px up (180 x 548, 280 x 852).
• This is the harshest crop in Fresco: the same photo is a narrow column on desktop and a wide strip on a phone. Group photos and wide scenes rarely survive it.

Card - Landscape thumbnail and Portrait icon

Two more Card styles.

Thumbnail: upload 1350 x 1350 (square).

• Landscape thumbnail square: 220, 500, 800, 900, 1050, 1200, 1350. Shown as a 140 x 140 square on desktop and hidden on phones.
• Portrait icon shows an icon, not a photo. Switching a card to Portrait icon drops its image, and switching back does not bring it back - it has to be added again.

Dynamic listing and Selected content

Both show other pages' listing images, using the same four display styles as a Card - but not the Card's sizes.

Set each page's listing image at 1600 x 900 (16:9).

• Portrait image (the default) 16:9: 391 x 220, 889 x 500, 1422 x 800.
• Landscape image 4:3: 293 x 220, 667 x 500, 1067 x 800.
• Landscape thumbnail square: 220, 500, 800.
• A page with no listing image shows Fresco's grey placeholder at 259 x 146.
• Selected content can only link to published pages.

Media gallery

Up to 15 images. The grid shows square thumbnails; clicking one opens your original file.

Upload about 2000 on the long side, compressed, subject in the middle.

• Thumbnails are 500 x 500, cut from the middle of each picture.
• The enlarged view links straight to the uploaded file at full size, not a resized copy - so what you upload is what visitors download.

Logos in a Tile grid or Flexbox

Flexbox only sets alignment (horizontal, vertical, theme colour) - it has no height setting. The height comes from the Image component's Fixed height style.

Upload logos at twice the height they will show: 240 px tall for Small, 480 for Medium, 720 for Large. PNG with a transparent background, or SVG.

• Fixed heights are Small 120 px, Medium 240 px, Large 360 px; the width follows the logo.
• SVG goes in as the separate "Image SVG" media type; the Image component's picker has a tab for it.
• Use the same Fixed height on every logo in a row and trim empty space around each one so they line up.