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.


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 onto the Assets panel.



Asset Guidelines


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

 

FORMAT

USE CASE

EXAMPLE

MORE INFO

.SVG

Logos, text, icons, call to action buttons, etc.

Keep file size under 10mb.

.PNG

Products, models, design elements, etc.

Upload the highest resolution file you can while keeping file size under 10mb.

.JPG

Backgrounds, products, custom designed typography etc.

Upload the highest resolution file you can while keeping file size under 10mb.

.GIF

Animated Assets - Short in duration, looping sequence or transparent etc.

Use the smallest possible size without sacrificing image quality.

.MP4

Animated Assets - Longer in Duration - Background, Product and Demo video etc.

Best practice is to keep video file size under 10mb.



Reducing File Size


Flexitive uses smart compression to automatically resize images when you export design, although Flexitive does NOT apply compression to GIFs. 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 to 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 a 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 colour background, make sure to save them with the background colour 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 colours, 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 often times 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.