I am trying to upload videos to the builder. The builder gives the uploaded completed notification but no videos are available in the media panel.
Can you please also advise which video and image formats are available? I’d like to use .webm and .webp for images.
Hey @AlwaysBeLearning, the limit for video size is 20MB, maybe it’s up to that? Please check how big your video file is. You can compress it with certain tools to keep the overall quality but compress its size, such as handbreak.
Also, you can upload .webm and .webp, we have those formats supported.
Unfortunately the videos are not uploading. All videos uploaded were below 20Mb.
I am getting a message stating that they have been uploaded but I can’t see them in the Media library.
Can I please get some tech support to resolve this?
Can you share the video you are trying to upload? So we can test and make sure the issue has been resolved properly.
I’ll PM you a download link
What are the .webm and .webp, and why
Why did you suggest it?
Is it better than a mp4 file?
.webm is a video format that has a smaller size than mp4
.webp is an image format that has a smaller size than PNG and is lossless
They both have wide support from browsers which means most users can see them too.
more info here: What Are WebP and WebM and How to Use Them?
Thanks a lot I am always learning
So is it recommended that I will convert all my photos and videos to these formats that my website will upload faster?
Yes, that’s exactly right. I think the suggestion is to keep images below 100kB.
If they are bigger, you should try and load them lazily (they will only load when the user sees them on the screen). I think DivHunt does this by default anyway.
You should avoid loading videos from your site as much as possible - it’s better to stream them from Youtube or another service. In my case I have a few videos that get dynamically loaded and they are small (under 10mB).
You can test your Google’s lighthouse score to check how Google ranks your website’s performance (probably one of the most important ranking factors now I think). They will give you tips on how to improve your score too: https://pagespeed.web.dev/
Thanks a lot for this reply!
I will convert my media files and upload videos to YouTube.
I appreciate sharing your knowledge with me
Just wanted to check with you about the conversion to Webp.
I have converted a PNG file into Webp in Photoshop and I have found that I need to reduce the quality to a minimum if I want to have a photo size of about 100k.
Is that what you are doing? reducing the size to the lowest as possible?
What is the recommended score for Google speed without such as big quality loss of images?
I have seen somewhere 3 megabytes Max for the page.
Is that right?
Usually I dont convert my images to webp, I just pull them through tinypng, and it does all optimizaitons that you need. Images will not be reported as “too big” on gtmetrix and similar tools.
And in terms of image width & height, my logic is to keep that atleast 1.3x bigger than on actual website. If image on your website is shown in 700px width for example, I would upload 900px width image. So you can be sure its not blurry.
Thanks for the info Stefan. I’ll check out tinypng.
@ Stolichnaya, yes I would usually optimise myself but it is hard work! In most JS frameworks there is also usually an image component that does optimisation for you.
@Pakic , will image optimisation components be offered within DivHunt in the future (eg like this Next img component: Optimizing: Images | Next.js)?
Yes, will come with time.