Image file sizes have an immense effect on their appearance and load times, as well as being detrimental to performance and SEO.
When it comes to images, bigger isn’t always better. Aim for under one megabyte file size when selecting images; the smaller their file size is, the faster your website will load.
Banners
Banner images are eye-catching hero shots that grace most Squarespace websites and grab visitors’ attention directly. Since it’s the first image visitors see, it must be of top-quality and crystal clarity for optimal viewing experience. Squarespace advises uploading images between 2000px and 2500px size to avoid cropping or stretching which could render them blurry on high resolution screens.
Image file names can also play an integral part in helping Google index images on your site when people search. Attempt to use keywords relevant to the content of your website when naming your images so they will appear when people search. This will increase visibility of them when people visit.
When creating images with text, it is advisable to save them as.png files rather than JPGs due to compression’s tight grip on file sizes causing text to appear blurry across screens and devices. A png will ensure all visitors see your text clearly regardless of screen size or device, and use of compression tools can significantly speed up loading speeds on websites.
Backgrounds
Squarespace does a good job optimizing image sizes with responsive templates, yet it is still important to understand different sizes for images in terms of their aspect ratio – this refers to how tall an image is relative to how wide it is and plays an important role in how photos appear onscreen.
Landscape photos often have an aspect ratio of 2:1, which indicates they are wider than tall. Square images with an aspect ratio of 1:1 typically look better with wider width than height to allow more flexibility when displayed on screens.
Keep in mind that adding alt text to images on your site will assist users who may not have images enabled or are using screen readers; adding this text will also improve SEO! Likewise, remember to keep file sizes small; even though Squarespace optimizes them automatically, too large of an image could slow down loading speeds for visitors.
Thumbnails
Though you can upload any type of image to your site, the ideal thumbnail size for thumbnails should be 1500-2500 pixels. This will enable Squarespace to resize them without loss in quality and also makes it easy for your visitors to zoom in for closer views of images.
Your images on your website should use file formats that can easily be recognized and displayed by most browsers (this helps with SEO optimization), while keeping file sizes as small as possible to ensure quick loading times on visitors’ devices.
All images on your website should be properly tagged for searchability in Google, and where possible add alt text as it provides extra context and can help integrate keywords into the site. Squarespace offers the Caption Field feature for adding alt text; alternatively you could use another third-party editing tool.
Gallery Images
Your images play a vital role in making sure that your site looks professional and functions smoothly, so having images with the appropriate sizes ensures they appear clearly across multiple screen sizes.
Squarespace recommends creating gallery images in the range of 1500-2500 pixels wide so they maintain high-quality when resized for different screens, enabling visitors to zoom in without becoming pixelated.
Note that image file names play an essential part in how well gallery images display. Make it easy for readers to locate them by including relevant keywords in your post name; and avoid characters like percent signs and question marks that may prevent proper loading.
Finally, it’s a good idea to compress image files before uploading them to Squarespace. Doing this will reduce their storage requirements while improving website performance and loading speeds – and for this task you can use free tools such as Image Optimizer.
Favicons
Favicons are those small icons that appear in browser’s location bar and bookmark menu to add some flair and branding to your website. Favicons provide an excellent opportunity to show off some personality!
Squarespace doesn’t advise using images with at least 1500 pixels wide as favicons; this ensures they won’t become pixelated when expanded for use on screens of all sizes.
Measure an image’s megapixel resolution by multiplying its width and height pixel dimensions before dividing by one million. RGB format may also prove beneficial as digital displays and mobile devices prefer this format over CMYK ones.
As a general guideline, it’s recommended that image files should not exceed 20MB in order to avoid slowing down your website’s loading speed and improving overall website performance. Furthermore, smaller file sizes reduce risks related to storage limitations with your hosting provider.
