Images

Images are key to creating high performing Creator Studio Experiences that drive results. Creator Studio supports the use of 3 different image formats: JPEG, PNG & GIF, and images uploaded into Creator Studio can be used in multiple Experiences at the same time. The maximum file size per image that Creator Studio allows for is 5 MB.

Best Practices for Formatting Your Image Files

Throughout this article, some best practices are explained in more detail. First, however, these are some key recommendations:

• Use JPEGs at the smallest file size possible whenever you can
  • They provide the best compromise between quality and file size, and smaller file size = faster load times
• Regarding image dimensions (width and height), size images to be however large you would like them to be in your live Experience.
  
  • For example, if you want an image to be 1600 pixels wide within your Experience (great for large or high-definition screens), it should be designed at 1600 pixels wide before uploading it to Creator Studio.
  • In certain instances, when you are working with smaller graphics/imagery, you may export them at larger sizes then scale them down in Creator Studio. For example, a little 150px by 150px icon. If you do this, we recommend ensuring that you do not export them at dimensions that are any larger than two times the image's intended size.
  • Per our Variant sizing suggestions, we suggest that the absolute largest size you should build an Experience at is 1920 pixels wide. This means your images never need to exceed 1920 pixels in width.
• For landscape imagery that you are using on desktop versions/Variants of your Experiences, we recommend reformatting those landscape images to a more portrait-style orientation and setting them to be no more than 550 pixels wide (the recommended scene size for mobile variants).

Upload

It is recommended that images are uploaded under the Images tab in your Project or on the main Dashboard.  You can also drag an image directly from your computer onto an Experience Scene and it will automatically upload into your account.

Upload your images by clicking and dragging the image files to the highlighted field. You can delete out any images from the Image tab by hovering over an image and selecting the delete button in the top right hand corner of the image. Please note: you can not delete out any images currently live in an experience.

Image Details

Once an image has been uploaded into Creator Studio you can see the details of the image file by clicking on it under the Images tab. In the pop-up that opens you can edit the name of the file, change the Alt Text for ADA & SEO purposes, and see associated Tags (beta).

Image details include:

• Image Name: Can be edited
• Alt Text: Can be edited
• Size: The height, width & weight of the image
• Type: Format type, PNG, JPEG or GIF
• Times Used: How many times the image has been used in an Experience
• Tags: Tags associated with the image

Search Engine Optimization

The Alt Text used by images on the 1st scene, 2nd scene, last scene, Background layer and Overlay layer of your Creator Studio Experience will be indexed by search engines like Google.

ADA Compatibility 

The Alt Text used by images used on the 1st, 2nd, last scene, and the Background & Overlay, of your Creator Studio Experience can be read by screen readers, thereby enhancing the accessibility of your content. Read more about ADA here.

Performance

As with any online content, using the most optimal image format will have a direct impact on performance.

Creator Studio supports different image types (JPEG, PNG and GIF), and optimizes them for best delivery to any device.  Nevertheless, as image size is a key factor when delivering content to web sites it’s critical that the right image format be used. A good rule of thumb for images is to try to keep your image file size below 70kb, though that can be difficult sometimes, especially for larger images.

Below is a comparison of the supported file types:

JPEG (or JPG) stands for "Joint Photographic Experts Group", it uses a very complex compression algorithm and, compared to other image formats has a reduced file size (15% without losing quality) and does not preserve transparency.  Therefore a JPEG is typically the recommended file format for optimal performance.

PNG (Portable Network Graphics), has lossless compression, so no data loss when editing, but it comes with a price of higher image size.  PNG files preserve transparency and should be used for text, logos, illustrations and drawings.

GIF (Graphics Interchange Format) are lower quality images than JPEGs and PNGs and are used for more simple images such as icons and decorative images.  They support animation and are good for plain and simple images on a webpage (that are just a few colors), but for complex images and photos, GIFs are not always as attractive - this is especially true for bigger images.