When creating a design in Flexitive, you’ll first build out a master design, that can then be scaled across any sizes that you require. 


You should upload image and video assets with the highest resolution for the largest output that you will require (up to 10mb for images). Make sure that you still try to keep the highest quality with the lowest file size as a best practice.



What type of asset can I upload to Flexitive?


Image Assets:

Flexitive supports JPG, PNG, SVG, and GIF image formats. The image formats you choose to use will depend on each image and the limitations of file size for your project.


Video Assets:

Flexitive supports MP4 video uploads. You can also embed YouTube videos into your design. Learn more about embedding Youtube videos here. 


How to upload an asset to Flexitive:


To upload an image or an MP4 video to Flexitive, open the Assets panel and click on the Images or Videos tab. 


To upload image assets, click on 'Upload Images' and select the images you'd like to upload to your Flexitive project.



To upload video assets, click on 'Upload Videos' and select the videos you'd like to upload to your Flexitive project.



If you would like, you can also upload files to your design by dragging and dropping them from your desktop folder onto the Assets panel or the canvas. 


Asset Guidelines


When uploading assets to Flexitive, we recommend uploading assets in the following formats:

 

FORMAT

USE CASE

EXAMPLE

MORE INFO

Vector Image

(.SVG)

Logos, text, icons, call to action buttons, etc. Even use Animated SVGs.

.SVG create very high-quality images with transparency that scale to unlimited resolutions, but complex SVGs can be large files.

Transparent Static Image (.PNG-24)

If you require image transparency and have real photos with lots of colors eg. product images. e.g 

Products, models, design elements, etc.

Transparent images are great for creating responsive designs as they can help create high-quality flexible layouts. However, file sizes can be much larger with transparency.

Solid Static Image (.JPG)

Real photos with lots of colors, that don’t require transparency.

e.g

Backgrounds, products, custom-designed typography, etc.

.JPG are great for backgrounds or layers that will be behind other layers that use transparency (PNGs).

Static or Animated (.GIF)

Static GIFs are best for images with solid colors, or short animated GIFs can be used provided they have minimal frames. 

Be careful with file size as .GIFs can be large, especially if using transparency. Generally, try to avoid using .GIFs in HTML5 designs.

Video (.MP4)

Best for very complex animation or real footage. Just like any Flexitive element, videos can be embedded as part of a Flexitive design, or as a background. 

If you are planning to use videos for display ad HTML5 exports, make sure that your ad server supports videos and check the serving costs.


Reducing File Size


Flexitive uses smart compression to automatically resize images when you export design, although Flexitive does NOT apply compression to SVGs, GIFs, or MP4s. Because of this, we recommend that any image assets you upload to Flexitive be the highest resolution versions that you have access to. 


If you are still running into concerns with the final file size of your project, the best way to reduce the file size is to take a closer look at the images that you have uploaded for your project. Below are some tips on how to optimize your image assets to have the lowest possible file size for your exported projects.

General Recommendations for Images


One of the most common causes of larger file size is using transparency in the image. Sometimes using transparency is unavoidable, but it does significantly increase the file size of images and should be avoided where possible.


Some recommendations of how to limit your use of transparency are:

  • If your assets will not be layered over each other or they sit on a solid color background, make sure to save them with the background color inside the image.
  • If you have a pattern background that won’t look odd if it repeats in an unpredictable position, such as a grass field, then save the background pattern with your asset.
  • If the asset must have transparency, consider if the transparency around the asset needs to blend with various background colors, or if you can get away with adding a matte around it to reduce the file-size. If this is possible, you should do so using a PNG-8 rather than a PNG-24.

In addition to carefully considering transparency with images, it can be helpful to consider whether or not an image is required for an asset at all. In Flexitive, you can always use shapes or text to reduce file size.


JPG Images


JPG images are oftentimes the best option for uploads in any scenario where you are not using a transparent image and will compress better than any other image format on export. Because of this, we generally recommend that this image format is used for any large images in your project such as a background image, but we typically recommend against using a JPG for any images that require fine details, such as a company logo.


Wherever possible, it is recommended that you use a JPG image in Flexitive.


PNG Images


PNG Images are the best option for images where transparency is required. PNG images are compressed less than JPG images when they are exported, but offer better compression than SVGs.


SVG Images


SVG Images are the best option for uploading vector shapes, illustrations and text as they offer infinite scaling without loss of quality, and are uncompressed when exported from Flexitive. However, this does mean that you will need to be aware of file size when using SVGs.


GIF Images


GIFs allow for animated image assets in Flexitive. However, they are also the largest image in regards to file size and are not compressed on export. It is important to be aware of your file size limitations when using a GIF in your design.