When working with digital files there is always a trade-off between file size and quality. If you're struggling to export your design in the best possible quality while still preserving file size under a certain value, you might want to check these tips we have for you:
1. Avoid using large images when not needed
The size of the images that you are using in the design have the highest impact on the final HTML export, reason for which we highly recommend using optimized assets in your designs. This also has a significant impact on the quality of your creative as a more aggressive compression will be applied upon save, resulting in a blurred design, reason for which we highly recommend you reduce the file size as much as possible before uploading any image.
2. Use SVG files instead of classic JPG or PNG files for logos
We recommend using SVG files for elements such as logo's or any other image that might have a transparent background. The reason behind this is that svg's are lighter in size than most image formats and their quality is superior since they are compiled through coordinates that can scale up without becoming pixelated. If you're having trouble with uploading an svg file, you can check out our guide related to our requirements for SVG files, here.
3. Increase or decrease quality of your image using the quality slider:
If you're exporting the design in HTML format and you're using JPGs then make sure to increase the quality to 100% for best results and if you are above the size limit, work your way down from there reducing the percentage until the size fits your needs.
4. Choose the right format for your use and view it the correct way
JPG images are lower quality but use up less space, PNGs on the other hand look more sharp at the expense of a few more Kilobytes. Even if your design looks great in the online preview, the downloaded one won't look well unless you're viewing it at it's actual size.
For images, MP4 and GIFs files we recommend using your operating system built in photo and video viewer. For HTML5 and AMP designs we recommend using Chrome or any well known web browser, but please note that these formats are responsive so they will scale to the width or height of your browser window depending on their aspect ratio. You can easily make them non-responsive and view them at their original size, using this guide.
General image guideline uses:
SVG - best for vector images and logos, scales well to large size, smaller file size than images
GIF - best for simple animation loops
JPG - best for fullcolor images
PNG - best for fullcolor images with transparency