Jump to content

Grainy low res image of videos

Recommended Posts

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! 

Link to comment
  • Replies 12
  • Views 1.5k
  • Created
  • Last Reply

Top Posters In This Topic

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.

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
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

Edited by timbotimbo
Link to comment

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 🙂.

image.thumb.png.d6a9ecefde48dc09d410741d3997ed76.png

image.thumb.png.fb9bbf8cd422e9b1001007f2a66ba1ae.png

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment

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

 

Screenshot 2023-11-16 at 20.32.25.png

Screenshot 2023-11-16 at 20.32.37.png

Link to comment

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

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
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:

image.thumb.gif.e39e34d2ecb28136493d0c7bb2c031fb.gif

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

image.thumb.png.4f386406ec8432019800f23b9d361c68.png

..to this...

Screenshot2023-11-17at10_27_33.thumb.png.95e2bbf218980d794cf870586632d985.png

I hope that helps! 

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

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
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:

image.thumb.gif.e39e34d2ecb28136493d0c7bb2c031fb.gif

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

image.thumb.png.4f386406ec8432019800f23b9d361c68.png

..to this...

Screenshot2023-11-17at10_27_33.thumb.png.95e2bbf218980d794cf870586632d985.png

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?

Edited by timbotimbo
Link to comment
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  ⬇️

Edited by paul2009

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
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? ;-)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.