Grainy low res image of videos

Hey all,

My site has video examples of projects I've worked that link thru to vimeo where I've hosted them. On my site the images are really grainy low res when you view on mobile or desktop alike. Is there a way of making them hi res and also a way of choosing which frame from the video I'd like as the 'cover'? Can I also overlay a title of my choice onto then preview?

Thanks in advance! 

18 minutes ago, timbotimbo said:

My site has video examples of projects I've worked that link thru to vimeo where I've hosted them. On my site the images are really grainy low res when you view on mobile or desktop alike.

Video quality depends on many factors include the hosting server, the quality of your internet connection and the performance of the device on which the video is being played. To allow us to see the issue, please post a link to the page on your site where we can view the video. Also, if the video is hosted on Vimeo, please post a direct link to the video on Vimeo so we can compare.

31 minutes ago, paul2009 said:

Video quality depends on many factors include the hosting server, the quality of your internet connection and the performance of the device on which the video is being played. To allow us to see the issue, please post a link to the page on your site where we can view the video. Also, if the video is hosted on Vimeo, please post a direct link to the video on Vimeo so we can compare.

Hi there. Thanks for replying. My site is www.timellis.productions the videos are hosted at https://vimeo.com/user9357686 as you can see on the latter no low res grainyness or pixelation

Thanks for the additional information. I played the 720p video "Adidas Running Needs Nothing But You" using the website and using Vimeo but, when I tested it, I couldn't see any appreciable difference between them. This wasn't a scientific test and, as I mentioned, playback will vary according to circumstances but hopefully your visitors are seeing the same.

Here are two screenshots for reference. I appreciate still images aren't the same as watching a video, but I hope it helps. As ever, I do think the Vimeo background provides high contrast and enhances the experience, but I guess that's subjective 🙂.

Hey. Thanks for testing it. It's not so much the playback which as you say is almost identical it's how the preview image appears on my page looking low res. Have sent to a few friends and they all made the same comments about it. See attached screenshots for the low res images which is what people see when they first look at my site

Ah, perhaps I misunderstood. Are you talking about the thumbnails before they play?

51 minutes ago, paul2009 said:

Ah, perhaps I misunderstood. Are you talking about the thumbnails before they play?

Yes! Apologies for not know what to call them

13 hours ago, timbotimbo said:

It's not so much the playback which as you say is almost identical it's how the preview image appears on my page looking low res.

Sorry, I'm with you now @timbotimbo!

Yes, this is because, when Squarespace uses the Vimeo API to import the thumbnail, it uses the default option which is only 295x166 pixels! The lovely Wexley portfolio page then attempts to show these tiny postage stamp sized thumbnails at 2500px and they don't look great!

The good news is that you can manually download a larger resolution version from Vimeo and then swap it out. To do this, simply edit one of the portfolio items, click REMOVE IMAGE and then drag your new higher resolution thumbnail into place like this:

When I tested this, the page went from this...

..to this...

I hope that helps! 

Did this help? Please give feedback by clicking an icon below  ⬇️

23 hours ago, paul2009 said:

Sorry, I'm with you now @timbotimbo!

Yes, this is because, when Squarespace uses the Vimeo API to import the thumbnail, it uses the default option which is only 295x166 pixels! The lovely Wexley portfolio page then attempts to show these tiny postage stamp sized thumbnails at 2500px and they don't look great!

The good news is that you can manually download a larger resolution version from Vimeo and then swap it out. To do this, simply edit one of the portfolio items, click REMOVE IMAGE and then drag your new higher resolution thumbnail into place like this:

When I tested this, the page went from this...

..to this...

I hope that helps! 

Did this help? Please give feedback by clicking an icon below  ⬇️

Many thanks for your help on this one! One more question. How does one download a high res image from Vimeo please? Just screenshot?

5 hours ago, timbotimbo said:

How does one download a high res image from Vimeo please?

That's a great question! I've just built a quick tool that will allow you to grab an image directly from your video: Grab a Vimeo thumbnail

All you need is the video number from your video link, for example "850549669". Let me know how you get on!

Did this help? Please give feedback by clicking an icon below  ⬇️

On 11/18/2023 at 3:38 PM, paul2009 said:

That's a great question! I've just built a quick tool that will allow you to grab an image directly from your video: Grab a Vimeo thumbnail

All you need is the video number from your video link, for example "850549669". Let me know how you get on!

Did this help? Please give feedback by clicking an icon below  ⬇️

Thanks so much for this and the link to the tool. I'll give it a go on my website when I get chance to work on it this week. Next can you sort the SEO on it for me? ;-)

The video thumbnails from vimeo link looks terrible! 😞 Is there a way to fix this?

On 11/23/2023 at 12:03 PM, AtoHolewa said:

The video thumbnails from vimeo link looks terrible! 😞 Is there a way to fix this?

Read the thread