5 ways to speed up your website.
Let’s talk images!
Images make up a large % of your overall page size. When uploading images to a website yourself, it’s easy to do so without much consideration. However, large images can slow down your website (not good) and you may end up frustrating your audience, causing them to bounce, as well as missing out on some Search Engine Optimisation (SEO) goodness e.g. Google HATES a slow loading site because it knows people do too!
If your page doesn’t load within 3 seconds, there is a fair chance your audience has already gone elsewhere.
Follow my 5 tips for optimising your images and you’ll be off to a good start.
1. Make it fit the space.
How big is it the image you want to use? Large images can be in the region of 6000px wide (which is huge). The size of a large desktop is 2400px so even if you wanted a high resolution, full size image, you could still reduce the image size by over 50% - a great saving on size.
How can you quickly reduce the size of the image? If using a Mac then open the image in preview click tools > adjust size and then change the image to the desired size.
Size suggestions:
Full screen background image: 1500- 2400px
Half page image: no more than 800px
Small logo/image: 200-500px
Favicon: 100-300px
2. Crop the image
If you want the image to be square then make it square before uploading! This may sound simple but the amount of people that simply upload a landscape rectangular image then use Squarespace to crop to a square is untrue. The extra few KB you can save are worth it.
3. Format matters
WebP is a modern image format that provides superior quality with compression for images on the web, hence faster loading - pleasing your visitors and search engines.
However, for those without expensive design tools, WebP may not be an option, in which case you will want to choose between jpeg and png files. Always use png for logos and any images with a transparent background, however you may consider jpeg files for regular images as they are slightly smaller.
4. Compress the image
An unknown secret to most DIY website owners - FREE image compressors. There are a few out there, my current favourite is https://imagecompressor.com. It’s a clever bit of software that takes all the ‘noise’ out of your image and reduces the size significantly.
Please make sure you have followed steps 1-3 before using the compressor though, as any cropping or changes after it has been compressed will increase the file size again. Also note WebP files won’t work in a compressor.
5. Sizes to aim for (KB and/or MB)
Although Squarespace will let you upload an image of 20MB, this is HUGE and will cause all sorts of loading issues. Each image needs to be the smallest it can be without compromising on the quality (we’ll cover the importance of high quality images in another post).
Each image needs to be less than 500KB. Ideally you want the image to be less that 100KB but sometimes this isn’t possible with tools available to DIY website owners, at least not without making the image look pixelated or grainy which we don’t want.
The entire page needs to be less than 5MB (which only allows for 10 images if they are all in that upper bracket of 500KB). I will always aim for a page to be far less than 5MB but for photographers or those with large portfolios the 5MB ceiling is easy to reach.
Bonus point 1: rename your images
Whilst on the topic of images - you should always rename them with relevant titles. Uploading IMG6474 doesn’t tell anyone (especially Google) what that image is. Make their titles relevant.
Bonus point 2: add Alt Text
Once you’ve uploaded your image, remember to add Alt text. This is an extra way to get SEO points and improve ranking as it tells search engines what your image is of.
It is also inclusive - for those using screen readers, the alt text is what they hear in place of viewing your images. For help learning how to do this yourself, check out this Squarespace tutorial.
Have questions about your website, need help?
