How to avoid blurry Vimeo thumbnails on Squarespace
If youβve embedded a Vimeo video in a Squarespace website then youβve probably experienced blurry thumbnails. This guide explains how to add higher resolution thumbnails on certain elements, including Video Blocks.
Why use Vimeo?
If you need more than 30 minutes of video for your Squarespace website, my preferred solution is a paid Vimeo plan - starting at only Β£9 (US$9) per month to add 60 videos at 4K every year, and there are no ads or branding.
To be clear, Iβm not affiliated with Vimeo but I used to work in video and Iβve used their services without issue for many years.
Why are Vimeo thumbnails so blurred on Squarespace?
When using Vimeo with Squarespace, thereβs one really annoying bug that causes video thumbnails - the static image you see before the video plays - to be loaded using the lowest resolution option of 295 x 166 pixels! When the Squarespace website attempts to show larger versions of these low resolution images at 1500px or 2500px they can look awful!
The good news is that, in many instances, you can swap this default low-resolution image for a larger resolution version from Vimeo. I built a free tool to help Squarespace users to grab higher resolution thumbnail images from their own Vimeo videos.
To change the default image, edit the settings for one of the videos you have added, click REMOVE IMAGE and then drag your new higher resolution thumbnail into place. If you donβt see the option to change the image, this feature isnβt available for the block or section you are using.
Let me know if it helps!
Paul
10% off Squarespace
If you havenβt signed up for Squarespace yet, you can get 10% off your first subscription of a Squarespace website or domain by using the code SFD10 at checkout. This link is an affiliate link which means, that when you receive your discount, I may earn a commission. This comes at no additional cost to you and helps support the Squarespace guidance that I provide for free.
