Image and video sizes for HD and 4K screens

Make each image or video the same pixel size and shape as the screen it's for: 1920 x 1080 for a wide HD screen, 1080 x 1920 for a portrait one, and 3840 x 2160 (or 2160 x 3840 in portrait) for 4K. Use JPG for photos, PNG for logos and graphics, and MP4 using H.264 for video. If a picture only fills part of a layout, make it the size of that area.

The sizes

Width comes first, then height. All of these are the same 16:9 shape as nearly every TV and commercial display, so a design made at 1920 x 1080 doubles up to 4K without changing shape.

The Casty layout editor works the same way. New layouts start at 1920 x 1080, and the Resolution setting switches between the options, including 1080p HD Portrait, the 4K sizes and 720p. Choose the one that matches the screen before you start placing anything, because moving everything round afterwards is a chore.

HD or 4K?

Most venue content looks fine at 1080p, even on a 4K screen. The extra sharpness of 4K is easiest to see up close, so it earns its keep on a big screen people stand right next to, or for fine detail. From the other side of a pub, it's hard to tell the difference.

4K has costs. The files are bigger, so they take longer to upload and longer for every screen to download, and 4K video asks more of the player. A 4K TV fed by a player that only puts out 1080p shows a 1080p picture scaled up, however sharp your file. If you want 4K, check the player can handle it first. The devices page lists the players Casty runs on, and consumer TV or commercial display covers choosing the screen.

Sizing pictures for part of a layout

Plenty of pictures don't fill the screen. A photo of the dish of the day might sit in a box on the right of a menu, for example. For those, size the image to the box. Select the item in the layout editor and click the Positioning icon in the properties panel, where Width and Height are in pixels on the layout's canvas. Export your picture at that size, or bigger in the same shape.

Casty scales images to fit their area. Scaling down does no harm. Scaling up a small picture makes it soft, which is why a 600 pixel wide photo saved from a website looks blurry stretched across a screen. If the picture's shape doesn't match the area, it won't fill it the way you expect, so crop it to the right shape before you upload.

Which file types

For pictures, use JPG or PNG. JPG suits photos and keeps files small. PNG suits logos, text and flat-colour graphics, and it can have a transparent background, so a logo sits cleanly on any colour. The library takes GIF and BMP as well, though there's rarely a reason to use them.

For video, use MP4 with H.264, which plays most reliably across every kind of player. Look for H.264 or MP4 in your video app's export options. If a video uploads but won't play on a screen, export it again as H.264 MP4 and replace the file. The help page on problems uploading media has more.

Each file can be up to 5 GB, but smaller is better. Big files take a while to upload, then every screen has to download them too, and a screen shows Downloading in the Displays list until it has the lot.

PowerPoint files only play on Windows players with PowerPoint installed. For other screens, export the slides as images (PowerPoint can save each slide as a PNG or JPG) or as a PDF, and upload those.

Video from a phone

Phone video is perfectly usable, with a couple of things to watch. Film with the phone sideways for a wide screen and upright for a portrait one, because cutting one shape out of the other throws away most of the picture. Many iPhones record in a high efficiency format (HEVC) by default. Setting Camera, Formats to Most Compatible in the iPhone's settings records H.264 instead, or you can convert the clip when you export it. Trim it to the few seconds you want before uploading. Video or still images covers when video is worth it.

Keep a margin

Some consumer TVs crop the edges of the picture (overscan), so keep text and logos a little way in from the edges of your design. The TV's picture size settings usually have an option that shows the whole picture, and designing for screens has more on text size and contrast.

When you've made a better version of a file that's already in use, choose Replace File from its menu in the media library. It keeps the name, tags and folder, and with Update across all Layouts ticked the new file goes into every layout you're allowed to edit, so there's nothing to rebuild.