All Collections
General FAQs
Hosted Website - Optimizing webpage file size
Hosted Website - Optimizing webpage file size

Tips on reducing the file size of your website export

Michal avatar
Written by Michal
Updated over a week ago

Marking Layers for Export

The translation from design to code requires that layers reformat for web use. By marking layers for export, you can choose how the export interprets the object. One example is marking exportable a group that contains images.  This action flattens the group and exports fewer files.

Shapes like rectangles and ovals should be exported as SVG to keep their exported size to a minimum. When using images, consider that items with a transparent background should be marked as exportable to a PNG format. Bitmaps are best exported as JPG instead.

Quality of Export

Defining the quality of any layer marked as exportable affects the file size significantly. Items at 1x or lower are much smaller than those listed for 2x or 3x on export. Therefore, be sure to maintain quality when exporting highly detailed layers, and use 2x or 3x when necessary, otherwise consider sticking with 1x so as to keep the file size to a minimum.

Image Compression

When you host your site with Anima, we automatically compress images to help speed up the page load. If you're exporting your design to host elsewhere, you'll want to consider compressing the images manually for the same effect.

Get Started with Anima!

Did this answer your question?