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.
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/
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.
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)?