How to optimize your HTML5 file size

Before exporting your HTML5 ads, it's crucial to understand the file size limitation imposed by the ad network and DSP you use. Each platform has specific requirements for initial load size¹ and subload size². Some platforms also require fallback images³ or have special loading requirements. Below is a breakdown of size restrictions across major advertising platforms.

Important: File size limits and requirements may vary by region, account type, or platform version. Always verify current specifications with your ad network or DSP before creating your HTML5.

Understanding the HTML5 estimator

The HTML5 estimator helps you preview your export's file size before uploading to ad networks or DSPs. This tool ensures your designs meet platform requirements while maintaining quality. Here's a breakdown of the options to optimize your HTML5 export.

1. Image quality control
   • Low: maximum compression for the smallest file size.
   • Medium: balanced compression for better quality.
   • High: minimal compression for better quality.
   • Uncompressed: original quality (largest file size).
   • Custom: Manual quality adjustment.
2. Retina display settings
   • Save retina ready⁴ images: creates high resolution images.
   • Exclude non-retina images: removes standard resolution files.
3. Font optimization
   • Convert custom fonts to SVG: transforms fonts to vector format and reduces overall file size.
4. Code settings
   • Minify HTML: removes unnecessary spaces and comments, code size, and improves loading performance.
5. Fallback options
   • JPG fallback image: This creates a static backup version, which is required by certain ad networks to ensure ad visibility if HTML5 fails.

Best practices for size optimization

Meeting platform size requirements while maintaining ad quality requires strategic optimization. Here are essential techniques to reduce your HTML5 ad file size.

1. Image optimization
   • Use images that match your design dimensions (e.g., for a 400x250px design, avoid using 1920x1800px images).
   • Convert PNGs to SVGs when possible.
   • Compress large images using tools like Squoosh.
   • Maintain image quality to avoid blurry designs.
2. Font management
   • When using custom fonts, always use Convert custom fonts to SVG to significantly reduce file size and maintain quality.
3. Retina settings
   • Disable Save retina ready images option if size is a concern, as it significantly increases file size.
4. Additional tips
   • Remove unused assets from your design.
   • Check the final file size with the HTML5 estimator.
   • Test the quality of the compressed assets used in your design.

Ad serving

Ad network's file size limitation can often compromise the quality and functionality of HTML5 ads. As an alternative, you can use Ad Serving to host your ads on our servers and serve them directly to ad networks through an optimized ad tag. Here are some key advantages of using Ad Serving.

1. Unlimited size
   • Store designs on our servers without size restrictions.
   • Bypass ad network file size limits.
   • Upload high-quality assets without compression.
2. Live updates
   • Make live updates to your ads directly from creatopy without the need to re-upload or pause your active campaigns.
3. Performance tracking
   • Download CSV performance reports.
   • Monitor campaign metrics.
   • Access analytics directly in Creatopy.

Note¹: Maximum file size allowed for immediate loading.

Note²: Additional assets loaded after user interaction.

Note³: Alternative image displayed if the HTML5 fails to load.

Note⁴: Retina options significantly impact final file size.