Portfolio website too large

[Stefanie Langwerden]

Hi all,

I'm trying to figure out how to upload my XD website on a domain to make 

the website working. I now says its 147.289kB. Is that too large for a website?

I have checked all my images and they mostly are under 400kB,

do you think my images are too large?

I also have three podcasts from 20,7MB/113MB/513MB/360kB and one animation from 931kB and video is 18MB.

Can you give me any advice how large this files must be saved for web use?

[Spas K. · Accepted solution]

Hey there! I'm not sure whether this is an Xd issue specifically. What do you mean by "uploading your Xd website"?

Normally, you would code your website using HTML, CSS and Javascript, or using some CMS like Wordpress. You can also use website builders like Webflow, Squarespace or Wix, but you can't create a working website in Adobe Xd. It's a prototyping tool for preliminary design & layout for your website or app, based on which you develop the actual website. It's like drawing the blueprint for a house, not building the actual house. Some tools and plugins allow a very basic HTML/CSS export from Xd, but it's pretty bad in most cases.

There are no hard set rules for filesize for the web, but platforms certainly have limitations and in general you want the smallest filesize possible. You can use modern formats like .webp for images or .webm for video. Photoshop has .webp export, and I believe Media Encoder also supports .webm for video. You don't want images to reach 1mb of size. For podcasts, definitely upload on youtube and embed them on your website. Don't host them yourself or you will reach your hosting traffic limits rather quickly. You might get charged a lot or your website will be taken down.

You don't want files bigger than 1MB on your website. Larger images should ideally be below 300kb. Smaller images like SVGs, icons, etc. tend to be below 10kb.

[Stefanie Langwerden]

Hello Spas,

Thankyou so much for your explaination. I'm trying to upload my XD prototype into a online domain. I'm now going to try if I can use WEBP format for all images and WEBM for all my video/animations. But my XD doesn't support WEBP/M format. My website length is now 24792, maybe that's the problem? Do you think I can set all images to SVG and then it's fine, or should I use something else? If i now upload my file it says filesize is too big:

[creative explorer]

@Stefanie Langwerden You can't upload the Xd prototype as an XD file. You can 'share' the link to your 'prototype' if you wanted; And it can have videos, pictures, text. 

The only thing I can think of is do you have enough hosting space for this? I can see you are using Wordpress, but are you using the free version or the paid version. The free version, I do believe you might not be able to upload videos or audio... it was like that many years ago, but I don't know what th free version entails anymore.

I know the paid version, you can definitely have videos, as I have videos on my WordPress site

[creative explorer · Accepted solution]

@Stefanie Langwerden I 100% agree with what @Spas K. has wrote. What you created in Xd is a mockup and maybe with interactive links (hi-fi prototype)...once that is build, you can 'share' the link to your web developer who will then in turn, turn-around and create the website, it may be in HTML, CSS, JavaScript, to React, WordPress, or whatever your portfolio you want it in... 

Some of your podcasts seems big like the 20.7 MB, 113 MB and 513 MB. In this case, I would use Handbrake, a free and open-source transcoder for digital video files. I use Handbrake when I record my online classes that are over a gig , and it gets it down to peanuts like 25 MB...just imagine what it will do with your files! 

• Convert video from nearly any format
• Free and Open Source
• Multi-Platform (Windows, Mac and Linux)

[Stefanie Langwerden]

Thankyou for you reply. 

I downloaded Handbrake and tried to convert the video to MP4 H264 and 1920x1080 but the file size is still high.

Do you think 203kB is too big for a short animated video?

[creative explorer]

203Kb is nothing...