When planning a new website, the materials you choose are just as important as the design itself. Ensuring that your font, image, and video files meet technical requirements not only guarantees optimal performance but also prevents setbacks during development. With this guide, you'll have everything you need to keep your project running smoothly from the start.
Font Formats and Types
To ensure your text appears exactly as you envisioned, fonts should have one of these extensions:
.otf: Open Type Font
.ttf: True Type Font
.woff: Web Open Font
Here is a list of how the Roboto font files should be named. CLICK
Image Dimensions and Weight
The dimensions and weight of images are crucial for your website's loading speed. A well-optimized image maintains good visual quality without slowing down the user experience.
Minimum Image Dimensions
All images must have a minimum size of:
Logos: 350 px wide
Cover Image: 1900 px wide CLICK
"Welcome" Image: 500 px wide CLICK
"Recommended" Image: 1900 px wide CLICK
Favicon: 32 px wide CLICK
"Discover" Section: 800 px wide CLICK
Maximum Image Weight
Weight doesn't determine image quality, but it does affect loading time. For good performance, adhere to these limits:
.jpg: less than 300 KB
.png: between 4 MB and 20 MB
Attention to Detail
Image size doesn't define its quality, but its optimization does. At Avantio, we adjust them to ensure your web's loading speed.
Cover Video Requirements
In projects with Premium and Enterprise plans, you can include a cover video with these specifications:
Format: 16:9
Codec: mp4 with h264 codec
Weight: maximum 10 MB
Dimensions: 1920 x 1080 px (720p)
Duration: between 10 and 15 seconds
Quick Checklist
Before uploading your files, make sure to meet these requirements:
Fonts have the correct extension: .otf, .ttf, or .woff.
Images meet the minimum width required for their section.
.jpg files weigh less than 300 KB.
.png files are between 4 MB and 20 MB.
The cover video (if applicable) meets the established format, weight, and duration.
With these steps, you can confidently prepare all your materials and ensure the success of your web project. Good preparation will save you time and provide peace of mind throughout the process.
Frequently Asked Questions
Why is file weight important?
Weight directly affects the website's loading speed. Very heavy files slow down the page, worsen the user experience, and impact search engine ranking. Therefore, they must be optimized to meet speed parameters.
Does image size determine quality?
Not necessarily. An image can be large and have low resolution. The ideal is to balance screen sharpness with a light weight that allows for quick loading.