Image file size is extremely important because the larger it is, the longer it will take for your site to load and thus compromising SEO.
Squarespace recommends using images with at least 2500 pixels as they will ensure a sharp image without blurriness or pixels.
How to Fix
Images uploaded to Squarespace should have the right dimensions; too small will look blurry and pixelated when stretched to fit a container such as a banner; while too large can have negative impacts on site load speed and file size.
It’s always preferable to create your own images when possible; however, if stock photography must be used, optimizing them first is key in saving both time and avoiding headaches during image resizing. This will allow for seamless experience on your website!
This tutorial will explain how to resolve a squarespace cropped banner image issue within the Rally template (and many others within Brine family). We’ll examine different methods to enlarge your logo and discuss why this might be happening on your site, along with image optimization techniques which may enhance visual appeal and attract clients more efficiently.
1. Change the Image Size
Banner images are those large hero shots seen at the top of most Squarespace websites, designed to attract and engage visitors. As these pictures serve to attract them to your site, it is crucial that they are both high quality and eye-catching.
As soon as an image is added to your website, it will automatically be resized so it fits within its container and ensure that visitors’ browsers can open it quickly without slowing down or experiencing other problems with it.
Image blocks typically resize images to approximately 2000px-2500px wide; however, you have the ability to make smaller or larger by changing image size options in the image block.
Adjust the height of an image by adding a spacer block under its position.
It will ensure your image is always visible at a smaller size on mobile devices and tablets. You can find this option under the blue +Add Block toolbar or add a spacer block directly below it to make it smaller.
2. Change the Background Color
Color theme of your Squarespace website can have an effect on how your banner images look; for instance, using light colors will cause images that are too small and stretched out to stretch and become blurry.
Change the background color for your Squarespace website using CSS. There are a number of methods you can take, with an easy one being using the background-color property which lets you set any HTML element’s background color; then use that same hue in style attributes like table heading, div or span tags to apply that hue as your background color.
Use a Squarespace plugin to change the background color easily! These plug-ins offer many features to your website, including changing text or entire section backgrounds with ease.
Image Layout Blocks provide another method to make banner images stand out and attract attention, helping avoid pixels while creating an eye-catching effect that’s sure to grab people’s interest. There are different layout options such as Poster, Collage and Card Image that you can choose from for this hack.
3. Rotate the Image
There are multiple methods you can use to rotate an image, from using photo editing apps like Photoshop or GIMP, or Squarespace’s inbuilt image editor – both ways are straightforward and user-friendly.
To rotate an image in Squarespace, first click on it; this will create a white selection box around it and let you access its icon resembling a circle with a curved arrow, which will rotate it 90 degrees in the opposite direction. If desired, repeating this process can further adjust your rotations.
Altering an image’s background color is another quick and simple way to animate its subject matter. Additionally, adding alt text – an explanation that appears when an image doesn’t load or is disabled on screen readers – will help Google index your site better and discover your content more quickly.
4. Remove the Overlay
Squarespace provides many features to help you customize your website, but getting the desired results often takes some planning. From making banner images stand out more visibly to adding animation effects – here are a few easy strategies and tactics for making it happen!
Applying an overlay to your banner image is a simple way to ensure text on your site remains legible for visitors. For instance, if your image features team members, using an overlay to highlight their names will allow visitors to know who they’re looking at while improving user experience on your site.
Make your banner image even more eye-catching by adjusting its opacity – but be careful not to go too far, otherwise the image could become blurry on mobile devices.
